Javascript 有没有办法用内容克隆HTML5画布元素？

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

您可以调用

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

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

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

context.putImageData(imageData, 0, 0);

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

有关操作像素的更多详细信息，请参见此答案

---

您可能会发现这篇mozilla文章也很有用

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

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是为了访问像素数据，而不是复制画布。在浏览器上使用它进行复制非常缓慢和困难。应该避免使用。

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

drawImage（）

参考中的+1，但值得注意的是，调用

newcanvas（）

并不能在所有浏览器（尤其是Firefox）中都起作用-相反，您应该使用

document.createElement（'Canvas'））

这里有一个非常奇怪的错误：当加载图像并相应地调整画布的大小，然后克隆它时，它只克隆第一个300px（水平方向）和第一个150px（垂直方向）（单击时请参阅控制台-它正在记录副本的alpha值）确定发现错误：您需要设置

newCanvas.width=oldCanvas.width；newCanvas.height=oldCanvas.heightdrawImage（）

函数之前进行编码>。是的，更改画布的尺寸会丢弃图像数据。@如果您想将数据转储到某个地方或其他地方，则无需使用

getImageData

，除非您需要访问原始数据。让drawImage方法完成这项工作要快得多。