碎碎念

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.

大概意思是canvas無法執行toDataURL方法：污染的畫布無法輸出，請原諒我的靈魂翻譯。
經google發現原來是受限於CORS策略，會存在跨域問題，雖然可以使用圖像（比如append到頁面上）但是繪製到畫布上會污染畫布，一旦一個畫布被污染,就無法提取畫布的數據，比如無法使用使用畫布toBlob(),toDataURL(),或getImageData()方法;當使用這些方法的時候會拋出一個安全錯誤

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

具體詳情附上一個鏈接非常詳細如下：https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image，非常值得一看，個人理解可能不到到位，還是建議讀讀這個鏈接。

解決方案：

圖片設置：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/