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

Question

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

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

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

спасибо,

Answer 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);

Answer 2

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

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

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);
}

Answer 3

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

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