Nodejsで画像をバッチクロップするにはどうすればよいですか?

青灯夜游
リリース: 2020-12-09 17:51:16
転載
3538 人が閲覧しました

nodejs画像をバッチクロップするにはどうすればよいですか?次の記事では、nodejs で画像の一括トリミングを実装する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Nodejsで画像をバッチクロップするにはどうすればよいですか?

関連する推奨事項: 「nodejs チュートリアル

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(&#39;2d&#39;)
    ctx.drawImage(image, 0, 0, ...options)
    archive.append(canvas.toBuffer(), { name: `${basename(path)}` })
  }
})()
ログイン後にコピー

4、config.js は幅や高さなどの構成を変更するために使用されます

module.exports = {
  width: 300,
  height: &#39;&#39;,
  // 根据宽度等比缩放,优先级更高
  isWidth: true,
  // 根据高度等比缩放
  isHeight: false,
  // 宽高整体缩放
  scale: 1,
}
ログイン後にコピー

さらにプログラミング関連の知識については、 プログラミング ビデオ コース をご覧ください。 !

以上がNodejsで画像をバッチクロップするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:segmentfault.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート