javascript - 使用javascript拆分图像

Question

如何使用javascript获取单个图像的部分并将其存储在数组中，然后在html5 canvas上随机显示。

Answer 1

您可以使用 drawImage() 方法的裁剪参数并将裁剪后的图像绘制到动态创建的 Canvas 上。

一个例子可以是:

function getClippedRegion(image, x, y, width, height) {

    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');

    canvas.width = width;
    canvas.height = height;

    //                   source region         dest. region
    ctx.drawImage(image, x, y, width, height,  0, 0, width, height);

    return canvas;
}

这将返回一个 Canvas 元素，其中已经绘制了裁剪图像。您现在可以直接使用 Canvas 将其绘制到另一个 Canvas 上。

使用示例；在您的主要代码中，您可以执行以下操作:

var canvas = document.getElementById('myScreenCanvas'),
    ctx    = canvas.getContext('2d'),
    image  = document.getElementById('myImageId'),
    clip   = getClippedRegion(image, 50, 20, 100, 100);

// draw the clipped image onto the on-screen canvas
ctx.drawImage(clip, canvas.width * Math.random(), canvas.height * Math.random());