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

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

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

Благодарность,

25
Amit Hagin 30 Авг 2011 в 14:47

3 ответа

Лучший ответ

Метод 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);
30
andrewmu 30 Авг 2011 в 12:50

Есть несколько способов сделать это: методы 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);
}
24
Loktar 30 Авг 2011 в 14:05

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

var image = new Image();
image.src = "1.jpg";
image.onload = function() {
context.drawImage(image, 0, 0);
};
0
zloctb 17 Июл 2016 в 21:17