TRY CODING FUN

重拾编程的乐趣

0%

发表于 更新于 分类于
本文字数： 102 阅读时长 ≈ 1 分钟

需求

css 实现相对居中

实现

1
2
3
4
5
6
.element {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

发表于 更新于 分类于
本文字数： 443 阅读时长 ≈ 1 分钟

需求

css 实现固定宽高比

实现

1
aspect-ratio: 16/9;

其他方式

1
2
3
<div class="wrapper">
  <div class="intrinsic-aspect-ratio-container"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
.wrapper {
  width: 40vw;
}
.intrinsic-aspect-ratio-container {
  width: 100%;
  height: 0;
  padding: 0;
  padding-bottom: 75%;
  margin: 50px;
  background-color: lightsalmon;
}

参考文章

发表于 更新于 分类于
本文字数： 2.3k 阅读时长 ≈ 2 分钟

我朋友项目中需要用到十六进制的互转，我就顺便记录一下。

十六进制转换为十进制

1
parseInt('0x1f', 16);

十进制转换为十六进制

1
(0x1f).toString(16);

十六进制转换为二进制

1
parseInt('0x1f', 16).toString(2);

二进制转换为十六进制

1
parseInt('11111', 2).toString(16);

转换为RGB

1
2
3
4
5
6
7
8
9
10
function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

alert(rgbToHex(0, 51, 255)); // #0033ff
1
2
3
4
5
6
7
8
9
10
function hexToRgb(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

alert(hexToRgb("#0033ff").g); // "51";
1
2
3
4
5
function rgbToHex(r, g, b) {
  return "#" + (1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1);
}

alert(rgbToHex(0, 51, 255)); // #0033ff
1
2
3
4
5
6
7
8
function hexToRgb(hex) {
    var bigint = parseInt(hex, 16);
    var r = (bigint >> 16) & 255;
    var g = (bigint >> 8) & 255;
    var b = bigint & 255;

    return r + "," + g + "," + b;
}

从字符串中提取颜色

  • #fff
  • #ffffff
  • white
  • rgb(255, 255, 255)
1
2
3
4
5
6
7
function parseColor(input) {
    var div = document.createElement('div'), m;
    div.style.color = input;
    m = getComputedStyle(div).color.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
    if( m) return [m[1],m[2],m[3]];
    else throw new Error("Colour "+input+" could not be parsed.");
}

其他操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
console.log(Number("0xdc"));

var stringToColour = function(str) {
  var hash = 0;
  for (var i = 0; i < str.length; i++) {
    hash = str.charCodeAt(i) + ((hash << 5) - hash);
  }
  var colour = '#';
  for (var i = 0; i < 3; i++) {
    var value = (hash >> (i * 8)) & 0xFF;
    colour += ('00' + value.toString(16)).substr(-2);
  }
  return colour;
}
stringToColour("greenish");
// -> #9bc63b

后记

发表于 更新于 分类于
本文字数： 5.3k 阅读时长 ≈ 5 分钟

问题

微信小程序加水印，需要在图片上添加文字，文字的位置需要自定义。

实现

获取和设置 canvas 上下文

1
2
3
4
5
6
7
8
<!-- 水印 -->
<canvas style="{{canvasStyle}}" type="2d" id="Canvas"></canvas>
<!-- 获取水印文字长度 -->
<view
  style="position:fixed;top:0;left:-1000%;font-size:32px;white-space:nowrap;"
  id="CanvasText"
  >{{CanvasText}}</view
>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
canvasInit() {
    const query = wx.createSelectorQuery();
    query
        .select('#Canvas')
        .fields({
            node: true,
            size: true,
        })
        .exec((res) => {
            const canvas = res[0].node;
            const ctx = canvas.getContext('2d');
            this.setData({
                canvas,
                ctx,
            });
        });
},
阅读全文 »

发表于 更新于 分类于
本文字数： 968 阅读时长 ≈ 1 分钟

用 Axios 上传文件的几种方式

1
2
3
4
5
6
7
8
9
10
post("some/api/url", someDataForBackend, {
      responseType: "blob",
    })
      .then(async (response) => {
        const isJsonBlob = (data) => data instanceof Blob && data.type === "application/json";
        const responseData = isJsonBlob(response?.data) ? await (response?.data)?.text() : response?.data || {};
        const responseJson = (typeof responseData === "string") ? JSON.parse(responseData) : responseData;

        console.log(responseJson)
      });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
axios.get(`/download/blob/api`, {
  headers: {
    Authorization: `Bearer ${token}`,
    'Content-Type': 'application/json',
  },
  validateStatus: (s) => s <= 500,
  responseType: 'blob',
}).then(async (res) => {
  if (res.status !== 200) {
    // error handling
    const error = JSON.parse(await res.data.text());
    console.log('error: ', error);
  } else {
    // success blob file
  }
});

后记

发表于 更新于 分类于
本文字数： 345 阅读时长 ≈ 1 分钟

问题

好多项目中都有 node_modules 文件夹，但是这个文件夹太大了，删起来太慢了

解决问题

npkill 非常棒

1
npx npkill

打印出要删除的目录列表：

1
find . -name 'node_modules' -type d -prune

从当前工作目录中删除目录：

1
find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +

后记

发表于 更新于 分类于
本文字数： 575 阅读时长 ≈ 1 分钟

使用js获取文本宽度

1
2
3
4
5
6
7
8
function getTextWidth(text, font) {
  // re-use canvas object for better performance
  var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
  var context = canvas.getContext("2d");
  context.font = font;
  var metrics = context.measureText(text);
  return metrics.width;
}

通过创建div，然后获取宽度

1
2
3
4
5
6
7
8
9
function getTextWidth(text, font) {
  var span = document.createElement("span");
  span.style.font = font;
  span.innerHTML = text;
  document.body.appendChild(span);
  var width = span.offsetWidth;
  document.body.removeChild(span);
  return width;
}

发表于 更新于 分类于
本文字数： 12k 阅读时长 ≈ 11 分钟

这几天，对图片进行了大量的研究。

获取图片的真实大小

1
2
3
4
5
const img = new Image();
img.src = 'https://www.baidu.com/img/bd_logo1.png';
img.onload = () => {
  console.log(img.width, img.height);
};

但是，这个方法可能获取到得是图片的显示大小，而不是真实大小。真实大小可以用 img.naturalWidth 和 img.naturalHeight 来获取。

1
2
3
4
5
const img = new Image();
img.src = 'https://www.baidu.com/img/bd_logo1.png';
img.onload = () => {
  console.log(img.naturalWidth, img.naturalHeight);
};

提取 Exif 数据

可以用 exif-js 库 - https://github.com/exif-js/exif-js

1
2
3
4
5
6
7
8
9
const EXIF = require('exif-js');
const img = new Image();
img.src = 'https://www.baidu.com/img/bd_logo1.png';
img.onload = () => {
  EXIF.getData(img, function () {
    const allMetaData = EXIF.getAllTags(this);
    console.log(allMetaData);
  });
};
阅读全文 »