任何方式来克隆HTML5画布元素及其内容？ [英] Any way to clone HTML5 canvas element with its content?

问题描述

有什么方法可以创建一个具有所有绘制内容的canvas元素的深层副本？

Is there any way to create a deep copy of a canvas element with all drawn content?

推荐答案

实际上，复制画布数据的正确方法是将旧画布传递到新的空白画布。尝试此函数。

Actually the correct way to copy the canvas data is to pass the old canvas to the new blank canvas. Try this function.

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

Using getImageData is for pixel data access, not for copying canvases. Copying with it is very slow and hard on the browser. It should be avoided.

这篇关于任何方式来克隆HTML5画布元素及其内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！