Любой способ клонировать элемент холста HTML5 с его содержимым?

Ответ 1

Фактически правильным способом копирования данных холста является передача старого холста на новый пустой холст. Попробуйте эту функцию.

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 предназначено для доступа к пиксельным данным, а не для копирования холстов. Копирование с ним очень медленно и сложно в браузере. Его следует избегать.

Ответ 2

Вы можете позвонить

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

который вернет объект ImageData. У этого есть свойство с именем data типа CanvasPixelArray, которое содержит значения rgb и прозрачности всех пикселей. Эти значения не являются ссылками на холст, поэтому их можно изменить без влияния на холст.

Если вам нужна копия элемента, вы можете создать новый элемент canvas и затем скопировать все атрибуты в новый элемент canvas. После этого вы можете использовать

context.putImageData(imageData, 0, 0);

чтобы нарисовать объект ImageData на новый элемент canvas.

Подробнее см. этот ответ getPixel из HTML Canvas? для управления пикселями.

Вы можете найти эту статью mozilla полезной, а также https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes