使用 base64 将画布图像从一个画布显示到另一个画布

2022-01-21 00:00:00 canvas base64 html

例如var new = canvas.toDataURL("image/png");

我希望这个新变量中存在的 base64 显示到存在的第二个画布元素中.但它不使用 drawimage 方法显示 base64 图像.如果我使用说 image.png

I want the base64 that is present in this new variable to be displayed into 2nd canvas element that is present. But it does not display the base64 image using drawimage method. It works if I use say image.png

推荐答案

你不应该使用 base64 来复制画布.您可以将源画布传递给目标画布的上下文方法 drawImage.

You shouldn't use base64 to copy the canvas. You can pass the source canvas into the destination canvas' context method, drawImage.

否则您的性能将受到严重影响.在 http://jsperf.com/copying-a-canvas-element.

Otherwise you will suffer a serious performance hit. See my jsperf test at http://jsperf.com/copying-a-canvas-element.

drawImage() 将接受 Canvas 以及 Image 对象.

drawImage() will accept a Canvas as well as an Image object.

试试这个:

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

相关文章