使用 javascript 分割图像

2022-01-17 00:00:00 javascript html5-canvas

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

How to get a sections of a single image using javascript and store it in an array, and later display randomly on html5 canvas.

推荐答案

您可以使用drawImage()方法的裁剪参数，将裁剪后的图像绘制到动态创建的画布上.

You can use the clipping parameters of the drawImage() method and draw your clipped image onto a dynamically created 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;
}

这将返回一个画布元素，其中已经绘制了剪切的图像.您现在可以直接使用画布将其绘制到另一个画布上.

This will return a canvas element with the clipped image drawn in already. You can now use the canvas directly to draw it onto another canvas.

使用示例；在你的主代码中你可以这样做:

Example of usage; in your main code you can do:

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());

相关文章