从 HTML Canvas 2D 上下文中获取内部图像

Question

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

例如，假设我有一个高度和宽度为 100 的画布context，我想创建一个从坐标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()，您可以将新画布用作图像，或者只是使用此处用于剪辑的带有drawImage()的单行。

Answer 2

你需要使用 drawImage（） 函数。更多关于 drawInfo（） 的信息