Html 如何在本地将一个画布的内容复制到另一个画布
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4405336/
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
How to Copy Contents of One Canvas to Another Canvas Locally
提问by J Kao
I'd like to copy ALL contents of one canvas and transfer them to another all on the client-side. I would think that I would use the canvas.toDataURL()and context.drawImage()method to implement this but I am running into a few issues.
我想复制一个画布的所有内容并将它们转移到客户端的另一个所有内容。我认为我会使用canvas.toDataURL()andcontext.drawImage()方法来实现这一点，但我遇到了一些问题。
My solution would be to get Canvas.toDataURL()and store this in an Image object in Javascript, and then use the context.drawImage()method to place it back.
我的解决方案是将其获取Canvas.toDataURL()并存储在 Javascript 中的 Image 对象中，然后使用该context.drawImage()方法将其放回原处。
However, I believe the toDataURLmethod returns a 64 bit encoded tag with "data:image/png;base64,"prepended to it. This does not seem to be a valid tag, (I could always use some RegEx to remove this), but is that 64 bit encoded string AFTER the "data:image/png;base64,"substring a valid image? Can I say image.src=iVBORw...ASASDAS, and draw this back on the canvas?
但是，我相信该toDataURL方法会返回一个 64 位编码的标记，并"data:image/png;base64,"在其前面加上。这似乎不是一个有效的标签，（我总是可以使用一些 RegEx 来删除它），但是在"data:image/png;base64,"子字符串之后的 64 位编码字符串是有效图像吗？我可以说image.src=iVBORw...ASASDAS，然后把它画回到画布上吗？
I've looked at some related issues: Display canvas image from one canvas to another canvas using base64
我查看了一些相关问题： 使用 base64 将画布图像从一个画布显示到另一个画布
But the solutions don't appear to be correct.
但解决方案似乎并不正确。
回答by Robert Hurst
Actually you don't have to create an image at all. drawImage()will accept a Canvasas well as an Imageobject.
实际上，您根本不必创建图像。drawImage()将接受一个Canvas以及一个Image对象。
//grab the context from your destination canvas
var destCtx = destinationCanvas.getContext('2d');
//call its drawImage() function passing it the source canvas directly
destCtx.drawImage(sourceCanvas, 0, 0);
Way faster than using an ImageDataobject or Imageelement.
比使用ImageData对象或Image元素快得多。
Note that sourceCanvascan be a HTMLImageElement, HTMLVideoElement, or a HTMLCanvasElement. As mentioned by Davein a comment below this answer, you cannot use a canvas drawing context as your source. If you have a canvas drawing context instead of the canvas element it was created from, there is a reference to the original canvas element on the context under context.canvas.
请注意，它sourceCanvas可以是HTMLImageElement、HTMLVideoElement或HTMLCanvasElement。正如Dave在此答案下方的评论中所提到的，您不能使用画布绘图上下文作为源。如果您有一个画布绘图上下文而不是创建它的画布元素，则在context.canvas.
Here is a jsPerf to demonstrate why this is the only right way to clone a canvas: http://jsperf.com/copying-a-canvas-element
这是一个 jsPerf 来演示为什么这是克隆画布的唯一正确方法：http: //jsperf.com/copying-a-canvas-element
回答by vishwarajanand
@robert-hurst has a cleaner approach.
@robert-hurst 有一个更简洁的方法。
However, this solution may also be used, in places when you actually want to have a copy of Data Url after copying. For example, when you are building a website that uses lots of image/canvas operations.
但是，这种解决方案也可以用于在复制后您确实希望拥有 Data Url 副本的地方。例如，当您构建一个使用大量图像/画布操作的网站时。
// select canvas elements
var sourceCanvas = document.getElementById("some-unique-id");
var destCanvas = document.getElementsByClassName("some-class-selector")[0];
//copy canvas by DataUrl
var sourceImageData = sourceCanvas.toDataURL("image/png");
var destCanvasContext = destCanvas.getContext('2d');
var destinationImage = new Image;
destinationImage.onload = function(){
destCanvasContext.drawImage(destinationImage,0,0);
};
destinationImage.src = sourceImageData;
