1：背景

最近在做一个图片内容识别的项目，采用的是阿里巴巴的付费接口。大致流程为：

1：用户上传图片
2：将图片转为base64的格式发送给阿里的接口
3：阿里接口返回图片的内容信息

2：遇到的问题

这里边第二步转base64 ，我采用html5的canvas,将图片绘制到画布上，然后用canvas的 toDataURL 方法。
但是在图片转base64的过程中遇到了两个问题，

• 1:图片无法绘制，转成的base64 用浏览器打开是空的透明画布，如图

 

image.png

代码片段如下：

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.

``
  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"); 
   };