aloneMing

场景

  • 很多长图大图需要裁剪成多张小图

用到的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);

### 小结

- 好记性不如烂笔头,先记下来,以后有遇上需要使用的场景可以深入了解一下

分类:

技术点:

相关文章: