有没有办法克隆HTML5画布元素及其内容？

Question

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

- Evgenyt

Answer 1

实际上正确的复制canvas数据的方法是将旧的canvas传递给新的空白canvas。尝试使用这个函数。

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是用于像素数据访问，而不是复制画布。使用它进行复制非常缓慢，对浏览器也很吃力。应该避免使用。

- Robert Hurst

---

drawImage()的参考值得赞同，但值得注意的是，在某些浏览器（尤其是Firefox）中调用new Canvas()是无效的，你应该使用document.createElement('canvas')。 - AJ.

好的，我会尽力进行翻译。请注意，我的任务是尽可能准确地翻译，并使文本易于理解，同时不改变其含义。以下是需要翻译的内容：好的，发现错误了：在调用drawImage()函数之前，你需要设置newCanvas.width = oldCanvas.width; newCanvas.height = oldCanvas.height;。 - Peter

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

@RobertHurst，看起来你不再使用getImageData了，是这样吗？ - trysis

@trysis 没错，除非你需要访问原始数据（例如想要将数据转储到其他地方），否则不必使用 getImageData。让 drawImage 方法去完成工作会更快。 - Robert Hurst

Answer 2

你可以调用

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

- Castrohenge

---

不是非常适合复制的方法，更适合用于数据存储。 - Robert Hurst