javascript canvas.toDataURL() 无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30951420/
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
canvas.toDataURL() not working properly
提问by mpla_mpla
I am having a canvas in which I upload an image with the following code:
我有一个画布，我在其中使用以下代码上传图像：
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
Now I wanted to use the canvas.toDataURL()to load the image to another canvas. The code is:
现在我想使用canvas.toDataURL()将图像加载到另一个画布。代码是：
var dataURL = canvas.toDataURL();
drawDataURIOnCanvas(dataURL,canvas2);
function drawDataURIOnCanvas(dataURL, name_of_canvas) {
var myCanvas = document.getElementById(name_of_canvas);
var img3 = new Image;
var ctx2 = myCanvas .getContext('2d');
img3.onload = function(){
ctx2.drawImage(img3,0,0); // Or at whatever offset you like
};
img3.src = dataURL;
}
If I put to this a working url all fine. But the produced url from any picture I have tried comes out as
如果我把这个工作 url 一切都好。但是我尝试过的任何图片生成的网址都是
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII=.
数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68 / 0AAAAASUVORK5CYII =。
If you try to use that it would not produce the photo of a plane that was in the canvas. How can I use the function toDataURLto draw the image on another canvas?
如果您尝试使用它，它不会生成画布中飞机的照片。如何使用该函数toDataURL在另一个画布上绘制图像？
回答by outoftime
You can look at example of using HTMLCanvasElement.toDataURL()at developer.mozilla.org
您可以在 developer.mozilla.org查看使用HTMLCanvasElement.toDataURL() 的示例
toDataURLreturns valid base64 encoded image. So the problem is how you assign this image for second canvas.
toDataURL返回有效的 base64 编码图像。所以问题是你如何为第二个画布分配这个图像。
