Question

给定画布2D上下文，如何从图像的指定边界创建图像？

例如，假设我有一个context到画布，其高度和宽度为100，我想创建一个从坐标25, 25到75, 75的新图片。

Answer 1

由于toDataURL()只能将完整画布转换为图像，因此您需要先剪裁图像。

创建一个临时画布 - 这是一个将所有内容包装在一个可重复使用的函数中的示例：

function getImageFromRegion(canvas, x, y, w, h) {

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

    tmpCanvas.width = w;
    tmpCanvas.height = h;

    ctx.drawImage(canvas, x, y, w, h, 0, 0, w, h);
    //ctx.drawImage(canvas, -x, -y);  /// can be used as well..

    return tmpCanvas.toDataURL();
}

现在你只需要调用函数：

var dataUri = getImageFromRegion(canvas, 25, 25, 50, 50);

，您的dataUri将仅包含该区域的图片。

如果您不是toDataURL()，那么只需返回tmpCanvas而不调用toDataURL()，您可以将新画布用作图片，或者只使用单行{ {1}}这里用于剪辑..

Answer 2

您需要使用drawImage（）函数。 More on drawInfo()

从HTML Canvas 2D Context获取内部图像

2 个答案: