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

Question

Есть ли способ создать глубину копию элемента холста со всем нарисованным контентом?

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

Answer 2

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

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

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

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

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