标签：rip 加载 width draw context 控制台 受限 sre 详细
最近在做一个图片内容识别的项目，采用的是阿里巴巴的付费接口。大致流程为：
1：用户上传图片
2：将图片转为base64的格式发送给阿里的接口
3：阿里接口返回图片的内容信息
这里边第二步转base64 ，我采用html5的canvas,将图片绘制到画布上，然后用canvas的 toDataURL 方法。
但是在图片转base64的过程中遇到了两个问题，
代码片段如下：
var canvas=document.getElementById("canvas"),//获取canvas ctx = canvas.getContext("2d"), //对应的CanvasRenderingContext2D对象(画笔) img = new Image(),//创建新的图片对象 base64 = ‘‘ ;//base64 img.src = ‘http://www.xxxx.png‘; ctx.drawImage(img,0,0); base64 = canvas.toDataURL("image/png");
这个时候我想到问题应该是 图片还没加载完毕 就已经绘制了，既然是这样，那么修改为以下：
var canvas=document.getElementById("canvas"),//获取canvas ctx = canvas.getContext("2d"), //对应的CanvasRenderingContext2D对象(画笔) img = new Image(),//创建新的图片对象 base64 = ‘‘ ;//base64 img.src = ‘http://www.xxxx.png‘; img.onload = function(){//图片加载完，再draw 和 toDataURL ctx.drawImage(img,0,0); base64 = canvas.toDataURL("image/png"); };
修改完毕我正要打算喝杯水庆祝一下，一刷新页面，一口老血喷了出来，chrome控制台又报错如下：
Uncaught DOMException: Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvases may not be exported.
Uncaught DOMException: Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvases may not be exported.
解决方案：
图片设置 ：crossOrigin属性
代码片段：img.setAttribute("crossOrigin",‘Anonymous‘)
完整代码:
`` var canvas=document.getElementById("canvas"),//获取canvas ctx = canvas.getContext("2d"), //对应的CanvasRenderingContext2D对象(画笔) img = new Image(),//创建新的图片对象 base64 = ‘‘ ;//base64 img.src = ‘http://www.xxxx.png‘; img.setAttribute("crossOrigin",‘Anonymous‘) img.onload = function(){//图片加载完，再draw 和 toDataURL ctx.drawImage(img,0,0); base64 = canvas.toDataURL("image/png"); };
stackoverflow上解决方案：
地址：https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror
Tips:如果遇到其他canvas 关于SecurityError 的问题，也可以尝试一下这个解决方法。
另外经过多次搜索，总结了几个小窍门
1:使用google 。baidu搜索的都是转来转去的几篇文章，干扰太大。
2:首先搜索bug之家 ：stackoverflow，总有解决你的bug的方案，链接：https://stackoverflow.com/
3:web文档之家：mozilla的web文档 ，非常权威，非常详尽。链接：https://developer.mozilla.org/en-US/
标签：rip 加载 width draw context 控制台 受限 sre 详细
原文地址：https://www.cnblogs.com/lguow/p/11978722.html
