javascript HTML Canvas 图像转 Base64 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7099381/
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
HTML Canvas image to Base64 problem
提问by blmic
I'm having a problem with retrieving the base64 version of an image displayed on a canvas. I've looked at the other questions but none of the solutions including canvas2image seem to work.
我在检索画布上显示的图像的 base64 版本时遇到问题。我查看了其他问题，但包括 canvas2image 在内的所有解决方案似乎都不起作用。
Here's my code:
这是我的代码：
<!DOCTYPE>
<html>
<head>
<style>#canvas {cursor: pointer;}</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
var img = new Image();
img.onload = function(){
can.width = img.width;
can.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
}
img.src = 'http://sstatic.net/stackoverflow/img/newsletter-ad.png';
can.onclick = function() {
ctx.translate(img.width-1, img.height-1);
ctx.rotate(Math.PI);
ctx.drawImage(img, 0, 0, img.width, img.height);
};
document.write(can.toDataURL()); //isn't writing the correct base64 image
</script>
</body>
</html>
Here's the test link: http://jsfiddle.net/mrchief/hgTdM/1/thanks, Mrchief
这是测试链接：http: //jsfiddle.net/mrchief/hgTdM/1/谢谢，Mrchief
What I need is the correct base64 output of the image in the canvas.
我需要的是画布中图像的正确 base64 输出。
The problem is that it won't output the correct base64 version of the image.. But as you can see, the image inside the canvas is displayed without any problems.
问题是它不会输出正确的 base64 版本的图像。但是正如您所看到的，画布内的图像显示没有任何问题。
I've tested it on chrome & firefox
我已经在 chrome 和 firefox 上测试过了
Thanks very much..
非常感谢..
采纳答案by Phrogz
Your document.write()call occurs immediately upon page load, before your imgis loaded and drawn and before your onclickhandler can ever run. You need to wait to generate the data URI until after everything has finished happening to the canvas.
您的document.write()调用会在页面加载后、img加载和绘制之前以及onclick处理程序运行之前立即发生。您需要等到画布上的所有事情都完成后才能生成数据 URI。
Ignoring the onclick, here's something that writes out the data url after the image has loaded and been drawn to the canvas in a rotated fashion:
忽略onclick，这是在图像加载并以旋转方式绘制到画布后写出数据 url 的内容：
<!DOCTYPE html>
<html><head>
<title>Rotated Image Data URL</title>
<style type="text/css" media="screen">
canvas, textarea { display:block }
</style>
</head><body>
<canvas id="canvas"></canvas>
<textarea id="data" rows="20" cols="80"></textarea>
<img id="echo">
<script type="text/javascript">
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
var img = new Image();
img.onload = function(){
can.width = img.width;
can.height = img.height;
ctx.translate(img.width-1, img.height-1);
ctx.rotate(Math.PI);
ctx.drawImage(img, 0, 0, img.width, img.height);
var url = document.getElementById('data').value = can.toDataURL();
document.getElementById('echo').src = url;
}
img.src = 'gkhead.jpg';
</script>
</body></html>
You can see this demo in action here: http://phrogz.net/tmp/upside-down-image-url.html
你可以在这里看到这个演示：http: //phrogz.net/tmp/upside-down-image-url.html
Note that the image you load must be on the same domain as your script, or else you will not be allowed to create the data URL.
请注意，您加载的图像必须与您的脚本在同一域中，否则将不允许您创建数据 URL。
