0%

需求

css 实现相对居中

实现

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

需求

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;
}

参考文章

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

十六进制转换为十进制

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

后记

问题

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

实现

获取和设置 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,
});
});
},
阅读全文 »

用 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
}
});

后记

问题

好多项目中都有 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 '{}' +

后记

使用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;
}

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

获取图片的真实大小

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.naturalWidthimg.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);
});
};
阅读全文 »