Html html5：将画布复制到图像并返回
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7242006/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html5: copy a canvas to image and back
提问by Amit Hagin
I implemented a zoom in and out function on a canvas element. it works by scaling the canvas, translating it, and then redraw the whole scene again. the problem is that it takes a lot of time to redraw everything because i got a lot of things on my canvas.
我在画布元素上实现了放大和缩小功能。它的工作原理是缩放画布，平移它，然后再次重绘整个场景。问题是重绘所有东西需要很多时间，因为我的画布上有很多东西。
I need a way to copy the canvas to an image object and than copy the image back to the canvas without loosing quality. what are the specific methods to copy canvas to a javascript variable, and to to copy this variable back to the canvas later?
我需要一种将画布复制到图像对象的方法，而不是将图像复制回画布而不会降低质量。将画布复制到 javascript 变量以及稍后将此变量复制回画布的具体方法是什么？
I'll be glad if you write down the code because I couldn't find any good explanation over the internet.
如果你写下代码，我会很高兴，因为我在互联网上找不到任何好的解释。
thanks,
谢谢，
回答by andrewmu
The drawImage() method can draw to a canvas using another canvas instead of an image.
drawImage() 方法可以使用另一个画布而不是图像绘制到画布上。
You could create a 'backup' canvas, of the same size as your original, draw the first one to there and then draw that one back to the original when you need it.
您可以创建一个与原始画布大小相同的“备份”画布，将第一个画布绘制到那里，然后在需要时将其画回原始画布。
e.g.
例如
// 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);
回答by Loktar
There are a few ways to do it theres the getImageDataand putImageDatamethods Reference, However putImageDataand getImageDataare pretty slow. Another way is to save the data to an imagein memory and recall it from that which is much faster, then the third way is the one above mentioned by andrewmu which involves copying to another canvas element. I have included examples for the first and second type.
有几个方法可以做到这一点那里有在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 method
// 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);
}
回答by zloctb
added image into canvas
将图像添加到画布中
var image = new Image();
image.src = "1.jpg";
image.onload = function() {
context.drawImage(image, 0, 0);
};
