Html5: скопировать холст в изображение и обратно

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

Мне нужен способ скопировать холст в объект изображения, а затем скопировать изображение обратно на холст без потери качества. каковы конкретные методы копирования canvas в javascript-переменную и скопировать эту переменную обратно на холст позже?

Буду рад, если вы запишете код, потому что я не мог найти никакого хорошего объяснения в Интернете.

спасибо,

Ответ 1

Метод drawImage() может рисовать на холст, используя другой холст вместо изображения.

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

например.

// Assume we have a main canvas
// canvas = <main canvas>
ctx = canvas.getContext('2d');
..

// create backing canvas
var backCanvas = document.createElement('canvas');
backCanvas.width = canvas.width;
backCanvas.height = canvas.height;
var backCtx = backCanvas.getContext('2d');

// save main canvas contents
backCtx.drawImage(canvas, 0,0);

..

// restore main canvas
ctx.drawImage(backCanvas, 0,0);

Ответ 2

Есть несколько способов сделать это: getImageData и putImageData методы Ссылка, однако putImageData и getImageData довольно медленны. Другой способ - сохранить данные в image в памяти и вывести их из того, что происходит намного быстрее, тогда третий способ - это тот, который указан выше, andrewmu, который включает в себя копирование в другой элемент холста. Я включил примеры для первого и второго типов.

Метод изображения в памяти

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    savedData = new Image();

function save(){
    // get the data
    savedData.src = canvas.toDataURL("image/png");
}

function restore(){
    // restore the old canvas
    ctx.drawImage(savedData,0,0)
}

getImageData метод putImageData

// Setup our vars, make a new image to store the canvas data
var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    canvasData = '';

function save(){
    // get the data
    canvasData = ctx.getImageData(0, 0, 100, 100);
}

function restore(){
    // restore the old canvas
    ctx.putImageData(canvasData, 0, 0);
}

Ответ 3

добавлено изображение в холст

var image = new Image();
image.src = "1.jpg";
image.onload = function() {
context.drawImage(image, 0, 0);
};