关于node.js:nodejs实现批量裁剪图片功能

1次阅读

共计 1830 个字符,预计需要花费 5 分钟才能阅读完成。

1、初始化

首先新建一个 tailor-img 文件夹,接着执行 npm init -y 初始化一个 package.json

2、装置相干插件

  • archiver 压缩文件
  • canvas 裁剪图片
  • glob 批量获取门路

npm i archiver canvas glob –save

3、app.js

const fs = require('fs')
const {basename} = require('path')
// 压缩文件
const archiver = require('archiver')
// canvas 库,用于裁剪图片
const {createCanvas, loadImage} = require('canvas')
// 批量获取门路
const glob = require('glob')
const config = require('./config')

// 依据宽高获取配置
function getOptions(options, config) {const [sourceWidth, sourceHeight] = options
  const {width, height, isWidth, isHeight, scale} = config
  const haveWidth = [width, (sourceHeight * width * scale) / sourceWidth]
  const haveHeight = [(sourceWidth * height * scale) / sourceHeight, height]
  if (width === 0 || height === 0) {return [0, 0]
  }
  if (width && height) {if (isWidth) {return haveWidth}
    if (isHeight) {return haveHeight}
    return [width / scale, height / scale]
  }
  if (width && !height) {return haveWidth}
  if (height && !width) {return haveHeight}
  return options.map((item) => item / scale)
}

!(async () => {const paths = glob.sync('./images/*')
  // 压缩成 zip
  const archive = archiver('zip', {
    zlib: {level: 9,},
  })
  // 输入到以后文件夹下的 image-resize.zip
  const output = fs.createWriteStream(__dirname + '/image-resize.zip')
  archive.pipe(output)
  for (let i = 0; i < paths.length; i++) {const path = paths[i]
    const image = await loadImage(path)
    const {width, height} = image

    // 因为应用了扩大运算符开展对象,这里须要为对象定义迭代器
    const obj = {width, height}
    obj[Symbol.iterator] = function () {
      return {next: function () {let objArr = Reflect.ownKeys(obj)
          if (this.index < objArr.length - 1) {let key = objArr[this.index]
            this.index++
            return {value: obj[key] }
          } else {return { done: true}
          }
        },
        index: 0,
      }
    }
    // 默认缩放 2 倍
    // const options = [width, height].map((item) => item / 2)
    const options = getOptions(obj, config)
    const canvas = createCanvas(...options)
    const ctx = canvas.getContext('2d')
    ctx.drawImage(image, 0, 0, ...options)
    archive.append(canvas.toBuffer(), {name: `${basename(path)}` })
  }
})()

4、config.js 用于批改宽低等配置

module.exports = {
  width: 300,
  height: '',
  // 依据宽度等比缩放,优先级更高
  isWidth: true,
  // 依据高度等比缩放
  isHeight: false,
  // 宽高整体缩放
  scale: 1,
}
正文完
 0