有啥方法可以克隆 HTML5 画布元素及其内容？

Posted 2023-02-22

【中文标题】有啥方法可以克隆 HTML5 画布元素及其内容？

【英文标题】：Any way to clone HTML5 canvas element with its content?有什么方法可以克隆 HTML5 画布元素及其内容？

【发布时间】：2011-03-20 02:44:49

【问题描述】：

有没有办法创建一个包含所有绘制内容的画布元素的 deep 副本？

【参考方案1】：

你可以打电话

context.getImageData(0, 0, context.canvas.width, context.canvas.height);

这将返回一个 ImageData 对象。这有一个名为 data 的 CanvasPixelArray 类型的属性，其中包含所有像素的 rgb 和透明度值。这些值不是对画布的引用，因此可以在不影响画布的情况下进行更改。

如果您还想要元素的副本，您可以创建一个新的画布元素，然后将所有属性复制到新的画布元素。之后就可以使用了

context.putImageData(imageData, 0, 0);

将 ImageData 对象绘制到新画布元素上的方法。

有关操作像素的更多详细信息getPixel from html Canvas?，请参阅此答案。

您可能会发现这篇 Mozilla 文章也很有用 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes

【讨论】：

不是一个很好的复制方法。这更适合数据存储。

【参考方案2】：

实际上复制画布数据的正确方法是将旧画布传递给新的空白画布。试试这个功能。

function cloneCanvas(oldCanvas) 

    //create a new canvas
    var newCanvas = document.createElement('canvas');
    var context = newCanvas.getContext('2d');

    //set dimensions
    newCanvas.width = oldCanvas.width;
    newCanvas.height = oldCanvas.height;

    //apply the old canvas to the new one
    context.drawImage(oldCanvas, 0, 0);

    //return the new canvas
    return newCanvas;

使用 getImageData 是为了访问像素数据，而不是为了复制画布。在浏览器上使用它进行复制非常缓慢且困难。应该避免。

【讨论】：

+1 在 drawImage() 参考上，但值得注意的是，对 new Canvas() 的调用并非在所有浏览器（尤其是 Firefox）中都有效 - 您应该使用 document.createElement('canvas')

这里有一个非常奇怪的错误：当加载图像并相应地调整画布的大小并然后克隆它时，它只会克隆前 300px（水平）和前 150px （垂直）（点击时请参阅peter.muehlbacher.me/playground/mycelium?src=../downloads/… 控制台 - 它正在记录副本的 alpha 值）

ok 发现错误：调用drawImage()函数前需要设置newCanvas.width = oldCanvas.width; newCanvas.height = oldCanvas.height;。

是的，改变画布的尺寸会丢弃图像数据。

@trysis 没错，没有必要使用getImageData，除非您需要访问原始数据，例如您想将数据转储到某处或某处。让 drawImage 方法完成工作要快得多。