這篇文章給大家分享的是有關(guān)nodejs實現(xiàn)對圖片進行批量裁剪的方法的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)建站是一家專業(yè)提供奉賢企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計、小程序制作等業(yè)務(wù)。10年已為奉賢眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進行中。

1、初始化

首先新建一個 tailor-img 文件夾，接著執(zhí)行 npm init -y 初始化一個package.json

2、安裝相關(guān)插件

• 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')

// 根據(jù)寬高獲取配置
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: '',
  // 根據(jù)寬度等比縮放，優(yōu)先級更高
  isWidth: true,
  // 根據(jù)高度等比縮放
  isHeight: false,
  // 寬高整體縮放
  scale: 1,
}

感謝各位的閱讀！關(guān)于nodejs實現(xiàn)對圖片進行批量裁剪的方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！