javascript - 通过 Javascript 将图像切割成碎片

Question

我正在创建一个简单的拼图游戏。为此，我需要将我正在使用的图片剪切成 20 block 。在 Javascript 中有没有办法将图片切成 20 个相等的部分并将它们保存为网页中的 20 个不同的对象？还是我只需要进入 Photoshop 并自己剪下每张图片并将其调入？

Answer 1

使用 Canvas 很容易做到这一点。总体思路是:

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];
}