场景
用到的npm包
- jimp,用于Node的图像处理库,完全使用JavaScript编写,零本地依赖项。
代码实现
const Jimp = require(\'jimp\');
/**
* url 目标图片,需要裁减的图片
* files 裁剪过后的文件路径,根据文件路径的个数平均切成n等份
* isVertical 是否纵向均切,默认为true,false就是横向切图
*/
const clipImage = (url, files, isVertical = true) => {
Jimp.read(url, (err, image) => {
if(err) {
console.log(err);
return;
}
const { bitmap = {} } = image;
const { width, height } = bitmap;
const len = files.length;
const delta = isVertical ? (height / len) : (width / len);
async function cropVerticalOne(i) {
const file = files[i];
const _image = image.clone();
await _image.crop(0, delta * i, width, delta)
.write(file);
if(i < len - 1) {
cropVerticalOne(i + 1);
}
}
async function cropHorizontalOne(i) {
const file = files[i];
const _image = image.clone();
await _image.crop(delta * i, 0, delta, height)
.write(file);
if(i < len - 1) {
cropHorizontalOne(i + 1);
}
}
isVertical ? cropVerticalOne(0) : cropHorizontalOne(0);
})
}
clipImage(\'water.png\', [\'water1.png\', \'water2.png\', \'water3.png\', \'water4.png\'], false);
clipImage(\'water.png\', [\'water5.png\', \'water6.png\', \'water7.png\', \'water8.png\'], true);
### 小结
- 好记性不如烂笔头,先记下来,以后有遇上需要使用的场景可以深入了解一下