场景
用到的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);
### 小结
- 好记性不如烂笔头,先记下来,以后有遇上需要使用的场景可以深入了解一下