场景
创建了一canvas画布，然后使用 drawImage 在画布上绘制了图片， 最后，想以获取画布的base64编码，并且创建一个img元素。
看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="mycanvas"></canvas>
<script>
//获取canvas元素
var canvas = document.getElementById("mycanvas");
canvas.width = 400;
canvas.height = 400;
//获取绘制环境
var cxt = canvas.getContext("2d");
//向canas中绘制 图片
var img = document.createElement('img');
img.src = "1.jpg";
img.addEventListener("load", function(){
cxt.drawImage(img,0, 0, 400, 400);
});
//输出画布
var new_img = document.createElement('img');
new_img.src = canvas.toDataURL("image/jpeg");
document.body.appendChild(new_img);
</script>
</body>
</html>
最后发现，输出的img 空白一片，根本没有绘制上的图片。
解决一
首先，向canvas中绘制图片，是写在img的onload事件中的，要等到img元素加载完毕，才能向canvas中绘制图片。 可以认为是 在执行 toDataUrl()输出base64编码的时候，图片还没有绘制上。故按照此方式解决 （以上只粘贴JS代码）
//获取canvas元素
var canvas = document.getElementById("mycanvas");
canvas.width = 400;
canvas.height = 400;
//获取绘制环境
var cxt = canvas.getContext("2d");
//向canas中绘制 图片
var img = document.createElement('img');
img.src = "1.jpg";
img.addEventListener("load", function(){
cxt.drawImage(img,0, 0, 400, 400);
//输出画布
var new_img = document.createElement('img');
new_img.src = canvas.toDataURL("image/jpeg");
document.body.appendChild(new_img);
});
再次运行，竟然发现报错了！ 报如下错误
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
at HTMLImageElement.<anonymous>
解决二
经过查询，出现这种报错的原因多由于跨域引起。 故把 html文件放在服务器环境下，把引入的图片1.jpg与html放在相同域下， 再次执行。成功！
注意
外部引入的图片 一定要跟html文件放在相同的域下，并且是服务器环境
toDataURL向获取到画布上绘制的图片，要卸载 onload事件内
网友评论