avatar

目录
node实现图片分割

前言

最近,女王大大日常找我弄图片,本来之前我一直是ps帮他弄得,后来- -,ps不能分割过长的图片,我就想想能不能通过代码来帮他实现好了。

经过我在npm搜索一番,发现没有一个纯代码层面的high tools来实现这个功能,索性就自己通过node-canvas这个库弄个小例子出来,自己使用好了

gm这个库是可以实现的,但是他需要额外安装两个工具,所以- -我就放弃了

简单搭建一下

  • 新建一个clip目录

  • 初始化一个node项目工程

    shell
    npm init -y
  • 安装依赖,这里主要用到了三个依赖,分别是处理图片获取图片大小压缩成zip文件

    shell
    npm i canvas image-size archiver -S

简单的使用一下

首先,先说说我的需求,下面是一张名为 clip.png 的图片,

我们需要做的就是把他均分为3等分,所以,我们尝试写一下我们的代码

Javascript
// 创建写入流
const { createWriteStream } = require('fs')
// 导入压缩文件库
const archiver = require('archiver')
// 导入canvas库,用于裁剪图片
const { createCanvas, loadImage } = require('canvas')
// 用户获取图片大小
const sizeOf = require('image-size')
!(async () => {
// 加载图片
const image = await loadImage('./clip.png')
// 获取图片宽高
const { width, height } = await sizeOf('./clip.png')
// 创建等宽登高的canvas
const mainCanvas = createCanvas(width, height)
// 获取canvas上下文
const ctx = mainCanvas.getContext('2d')
// 绘图
ctx.drawImage(image, 0, 0)
// 压缩成zip
const archive = archiver('zip', {
zlib: { level: 9 } // Sets the compression level.
});
// 输出到当前文件夹下的 clip.zip
const output = createWriteStream(__dirname + '/clip.zip');
archive.pipe(output);
// 明确我们需要垂直分割成几份
const num = 3
// 获取一份的高度
const oneHeight = height / num
for (let i = 0; i < num; i++) {
// 创建一份裁剪的canvas
let clipCanvas = createCanvas(width, oneHeight)
// 获取canvas上下文
const clipCtx = clipCanvas.getContext('2d')
// 通过 clipCtx 裁剪 mainCanvas
clipCtx.drawImage(mainCanvas, 0, oneHeight * i, width, oneHeight, 0, 0, width, oneHeight)
// 放到压缩器里
archive.append(clipCanvas.toBuffer(), { name: `${i + 1}.png` })
// 主动释放内存
clipCanvas = null
}
archive.finalize();
})()

跑一下我们写的程序,你会惊奇的发现,目录下多了一个clip.zip的压缩包,解压出来就是我们需要的图片啦

看到这里,其实我们已经实现我们想要的效果了,但是你会发现我们只是实现了水平的切割,如何实现垂直的呢?

也许你会说,加个判断不就好了?

Javascript
// 垂直切割...伪代码
if(direction === "vertical"){
// 获取一份的高度
const oneHeight = height / num
for (let i = 0; i < num; i++) {
let clipCanvas = createCanvas(width, oneHeight)
// ...... 和上面一致
clipCtx.drawImage(mainCanvas, 0, oneHeight * i, width, oneHeight, 0, 0, width, oneHeight)
// ......
}
}else{
const oneWidth = width / num
for (let i = 0; i < num; i++) {
let clipCanvas = createCanvas(oneWidth, height)
// ...... 和上面一致
clipCtx.drawImage(mainCanvas, oneWidth * i, 0, width, oneHeight, 0, 0, width, oneHeight)
// ......
}
}

的确,这样写是可以,但是会不会觉得很不优雅?那我们是不是可以找找规律,把他封装成一份呢?答案是肯定可以的

这里我们可以新建一个数组配置,用来判断我们传递的参数来判断是 width/num 还是 height/num,闲话不多少了,开始写我们的代码把

Javascript
// 创建写入流
const { createWriteStream } = require('fs')
// 压缩文件
const archiver = require('archiver')
// 批量裁剪
const { createCanvas, loadImage } = require('canvas')
// 获取图片大小
const sizeOf = require('image-size')
// 切割方向配置
const directionConfig = ["vertical", "horizontal"]
!(async () => {
const image = await loadImage('./clip.png')
const { width, height } = await sizeOf('./clip.png')
const mainCanvas = createCanvas(width, height)
const ctx = mainCanvas.getContext('2d')
ctx.drawImage(image, 0, 0)
// 压缩成zip
const archive = archiver('zip', {
zlib: { level: 9 } // Sets the compression level.
});
const output = createWriteStream(__dirname + '/clip.zip');
archive.pipe(output);
const clip = clipNumImage({ canvas: mainCanvas, width, height }, 3)
clip.forEach((img, idx) => {
archive.append(img, { name: `${idx + 1}.png` })
})
archive.finalize();
})()

function clipNumImage(options, num, direction = "horizontal") {
const { canvas, ...canvasSize } = options
// 生成配置的参数
let directionIdx = getIdx(direction)
// 公有配置
const directionOptions = getOptions(canvasSize, directionIdx, num)
const clip = []
for (let i = 0; i < num; i++) {
let clipCanvas = createCanvas(...directionOptions)
const clipCtx = clipCanvas.getContext('2d')
clipCtx.drawImage(
canvas,
...directionOptions.map((val, idx) => idx === directionIdx ? val * i : 0),
...directionOptions, 0, 0,
...directionOptions
)
clip.push(clipCanvas.toBuffer())
clipCanvas = null
}
return clip
}

// 获取传递过来的是垂直切割还是水平切割
function getIdx(direction) {
let directionIdx = directionConfig.indexOf(direction)
if (directionIdx === -1) {
directionIdx = 1
}
return directionIdx
}
// 获取切割参数
function getOptions(size, directionIdx, num) {
return Object.values(size).map((val, idx) => idx === directionIdx ? val / num : val)
}

通过数组,是不是感觉到我们代码比以前更加简洁了呢?好啦,这次小demo我们也写完啦,希望你通过这篇文章也学习到一点知识。感谢你的观看

ps: 对了,还有一个长图切割器,不写代码的话,直接下载用也是极好的,点我下载

最后

感谢各位观众老爷的观看 O(∩_∩)O

文章作者: gating
文章链接: https://gatings.cn/2020-03-11/node%E5%AE%9E%E7%8E%B0%E5%9B%BE%E7%89%87%E5%88%86%E5%89%B2/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 磨蹭先生
打赏
  • 微信
    微信
  • 支付宝
    支付宝

评论