HTML Canvas 图像转 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.
这是我的代码:
<!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/ 谢谢，先生
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() 调用会在页面加载后立即发生，在您的 img 加载之前在您的 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 Canvas 图像转 Base64 问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
