node实现图片分割

前言

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

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

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

简单搭建一下

• 新建一个clip目录

• 初始化一个node项目工程

  npm init -y
  

• 安装依赖，这里主要用到了三个依赖，分别是处理图片、获取图片大小、压缩成zip文件

  npm i canvas image-size archiver -S
  

简单的使用一下

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

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

// 创建写入流
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的压缩包，解压出来就是我们需要的图片啦

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

也许你会说，加个判断不就好了？

// 垂直切割...伪代码
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,闲话不多少了，开始写我们的代码把

// 创建写入流
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