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

Question

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

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.У него есть свойство с именем data типа CanvasPixelArray, которое содержит значения rgb и прозрачности всех пикселей.Эти значения не являются ссылками на холст, поэтому их можно изменить, не затрагивая холст.

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

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