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

Question

我在画布元素上实现了放大和缩小功能。它的工作原理是缩放画布，平移它，然后重新绘制整个场景。问题是重新绘制所有内容需要花费大量时间，因为我的画布上有很多东西。

我需要一种方法将画布复制到图像对象，而不是在不降低质量的情况下将图像复制回画布。将画布复制到一个javascript变量，然后再将这个变量复制回画布的具体方法是什么？

如果您写下代码，我会很高兴，因为我在互联网上找不到任何好的解释。

谢谢，

原文由 Amit Hagin 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 andrewmu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

There are a few ways to do it theres the getImageData and putImageData methods Reference , However putImageData and getImageData are pretty slow.另一种方法是将数据保存到内存中的 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);
}

原文由 Loktar 发布，翻译遵循 CC BY-SA 4.0 许可协议