HTML画布图像为Base64问题 [英] HTML Canvas image to Base64 problem
问题描述
我在与检索画布上显示的图像为Base64版中的问题。我看了看其他的问题，但没有解决方案，包括canvas2image似乎工作。
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.
下面是我的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>
下面的测试链接： http://jsfiddle.net/mrchief/hgTdM/1/感谢，Mrchief
Here's the test link: http://jsfiddle.net/mrchief/hgTdM/1/ thanks, Mrchief
我需要的是在画布上的图像输出的base64正确的。
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.
我已经测试了Chrome浏览器和火狐
I've tested it on chrome & firefox
非常感谢。
推荐答案
您的document.write（）呼叫立即出现在网页加载时，你的的onclick 处理程序之前都不能运行。您需要等待生成数据的URI，直到一切后，已完成发生在画布上。
Your document.write() call occurs immediately upon page load, before your img is loaded and drawn and before your onclick handler can ever run. You need to wait to generate the data URI until after everything has finished happening to the canvas.
忽略的onclick ，这里的东西，写出来的数据链接图像已加载，并且被吸引到画布上以旋转的方式后：
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:
<!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>
您可以在这里看到这个演示在行动： http://phrogz.net /tmp/upside-down-image-url.html
You can see this demo in action here: http://phrogz.net/tmp/upside-down-image-url.html
请注意，您加载图像必须在同一个域脚本，否则你将不会被允许创建数据URL。
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.
这篇关于HTML画布图像为Base64问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
