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

Display canvas image from one canvas to another canvas using base64(使用 base64 将画布图像从一个画布显示到另一个画布)

问题描述

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

这篇关于使用 base64 将画布图像从一个画布显示到另一个画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！