html5:将画布复制到图像并返回

Question

我在canvas元素上实现了一个放大和缩小功能.它的工作原理是缩放画布,翻译它,然后再重绘整个场景.问题是重绘所有内容需要花费大量时间,因为我的画布上有很多东西.

我需要一种方法将画布复制到图像对象,而不是将图像复制回画布而不会降低质量.将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);
}