Home  >  Article  >  Web Front-end  >  How to batch crop images in nodejs?

How to batch crop images in nodejs?

青灯夜游
青灯夜游forward
2020-12-09 17:51:163528browse

nodejsHow to batch crop images? The following article will introduce to you how to implement batch cropping of images in nodejs. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

How to batch crop images in nodejs?

Related recommendations: "nodejs Tutorial"

1. Initialization

First create a new tailor-img file folder, then execute npm init -y to initialize a package.json

2. Install related plug-ins

  • archiver Compressed file
  • canvas Crop image
  • glob Get paths in batches
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 d9bac1fba7d4bff47065a213971afddf 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 is used to modify configurations such as width and height

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

More programming related knowledge , please visit: Programming Video Course! !

The above is the detailed content of How to batch crop images in nodejs?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:segmentfault.com. If there is any infringement, please contact admin@php.cn delete