js 分割合并图片

最新推荐文章于 2025-10-13 23:33:14 发布

原创最新推荐文章于 2025-10-13 23:33:14 发布 · 4.9k 阅读

4 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何利用JavaScript中的CanvasRenderingContext2D.drawImage()方法来实现图片的分割和合并。通过drawImage()，可以将大图片切割成多个小图片，或者将多个小图片拼接成一个大图片。此外，还提到了imagemagick库，它提供了命令行工具，方便进行图片的合并和拆分操作。

https://stackoverflow.com/questions/8912917/cutting-an-image-into-pieces-through-javascript

var image = new Image();
image.onload = cutImageUp;
image.src = 'myimage.png';

function cutImageUp() {
    var imagePieces = [];
    for(var x = 0; x < numColsToCut; ++x) {
        for(var y = 0; y < numRowsToCut; ++y) {
            var canvas = document.createElement('canvas');
            canvas.width = widthOfOnePiece;
            canvas.height = heightOfOnePiece;
            var context = canvas.getContext('2d');
            context.drawImage(image, x * widthOfOnePiece, y * heightOfOnePiece, widthOfOnePiece, heightOfOnePiece, 0, 0, canvas.width, canvas.height);
            imagePieces.push(canvas.toDataURL());
        }
    }

    // imagePieces now contains data urls of all the pieces of the image

    // load one piece onto the page
    var anImageElement = document.getElementById('myImageElementInTheDom');
    anImageElement.src = imagePieces[0];
}

核心函数是

CanvasRenderingContext2D.drawImage()

https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage

通过这个函数，可以将一个大图片的部分内容绘制到多个小图片实现分割，也可以通过把多个小图片的内容绘制到大图片的某个区域实现合并。

另外 imagemagick 这个库可以通过命令行轻松实现图片的合并和拆分。

https://stackoverflow.com/questions/20075087/how-to-merge-images-in-command-line

https://unix.stackexchange.com/questions/169534/how-to-split-an-image-vertically-using-the-command-line

convert -append *.png out.png
convert +append *.png out.png

magick convert out2.png -crop 25x1@ +repage split%02d.png