js 分割合并图片

最新推荐文章于 2025-05-20 16:36:23 发布

jdk137

最新推荐文章于 2025-05-20 16:36:23 发布

阅读量4.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/jdk137/article/details/93486900

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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