canvas.toDataURL()報錯的解決方案全都在這了

報錯詳盡信息

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

關鍵詞

canvas.toDataURL()

crossOrigin

Access-Control-Allow-Origin

前言

最近在做一個創意類的圖片合成工具，大概齊就是通過拼接自定義的文字和圖片信息生成一張商品圖片類似的功能，項目中用到了fabric.js這個畫板庫，最後一步在保存圖片的時候報上面的一長串錯誤，牆內牆外搜了一遍，給出的解決方案都不全面，為避免同學們再次踩坑，於是有了此文

正文

我們在convertDOM2Image時，如果DOM記憶體在圖片資源，該資源所在的web-server是不支持跨域的，保存圖片是不會成功的。

因此在排查問題時，首先要確定

1. web-server是否允許跨域，我們以nginx為例，response-header內要存在Access-Control-Allow-Orgin:xxxx(可以是*,安全性要求比較高的可以根據主功能變數名稱自定義)

2. 如果是img標簽, 是否添加了crossorigin="anonymous", 如果是Image對象，同樣是否添加了改屬性obj.crossOrigin='anonymous'

3. 如果還不行，這裡先不把答案放出來，我們先看看慄子

在接下來的慄子中我們會用到將Image轉換為canvas對象的方法

  function convertImageToCanvas(image) {
    // 創建canvas DOM元素，並設置其寬高和圖片一樣   
    let canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    canvas.getContext("2d").drawImage(image, 0, 0);
    // 我們在實際的開發中，需要將抓換後的base64圖片編碼傳輸到後臺圖片伺服器，由server直接存儲或者生成一張圖片；
    // 所以會用到 toDataURL
    console.log(canvas.toDataURL('image/jpeg'))
    return canvas;
  }

慄子1

本地未設置跨域允許選項crossorigin=anonymous,web-server未設置跨域允許選項

  <div id="d1">
    <img style="width: 300px;height: 240px;" src="http://es6.ruanyifeng.com/images/cover_thumbnail_3rd.jpg" alt="">
    <p>本地未設置跨域允許選項crossorigin=anonymous,web-server未設置跨域允許選項</p>
  </div>
  <button onclick="setCanvas('d1')">canvas保存</button>

    function setCanvas(DOMID) {
      let img = document.getElementById(DOMID).querySelector('img')
        document.body.appendChild(convertImageToCanvas(img))
    }

很顯然，報錯

慄子2

本地標簽內設置跨域允許選項, web-server未設置跨域允許選項

這次連圖片都出不來，直接報錯

這個好理解，瀏覽器同源策略限制嘛

Access to image at 'xxxx' (redirected from 'xxxx') from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

慄子3

本地未設置跨域允許選項crossorigin=anonymous, web-server設置跨域允許選項

報錯，妥妥的。

慄子4

本地標簽內設置跨域允許選項crossorigin=anonymous, web-server設置跨域允許選項

  <div id="d4">
    <img style="width: 300px;height: 240px;" src="https://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png" alt="" crossorigin="anonymous">
    <p>本地設置跨域允許選項`crossorigin=anonymous`,`web-server`設置跨域允許選項</p>
  </div>
  <button onclick="setCanvas('d4')">canvas保存</button>

居然可以了，但是~如果在代碼內設置跨域呢？

慄子5

  function setCanvas(DOMID) {
    let img = document.getElementById(DOMID).querySelector('img')
    
    img.crossOrigin= 'anonymous'
    
    document.body.appendChild(convertImageToCanvas(img))
  }

報錯
我看官方文檔的意思是必須同步設置crossOrigin=anonymous，該圖片憑證才會被信任

This means that CORS is enabled and credentials are sent if the image is fetched from the same origin from which the document was loaded.

否則緩存的圖像數據仍然會被畫布視為有污染的跨源內容.

怎麼辦？重新取一遍圖片唄，加個隨機數，圖片還是那個圖片，不過加了個馬甲，瀏覽器就不認識了

慄子6

  function setCanvas(DOMID) {
    let img = document.getElementById(DOMID).querySelector('img')
    
    img.src =img.src+'?v='+Math.random()
    img.crossOrigin= 'anonymous'
    
    img.onload=()=>{
      document.body.appendChild(convertImageToCanvas(img))
    }
  }

binggo, 完美解決

所以我們在開發過程中，新建圖片，更換圖片，還原圖片等功能代碼內，最好每一次都加個隨機數，以保證源都是最新的，不走緩存

多說一點吧，關於fabric.js的相關跨域配置見下方

    let _fabricConfig = {
        // ....
        crossOrigin:'anonymous'
    };
    /* fabric對象 */
    let _fabricObj = new fabric.Canvas(id, _fabricConfig);


    // 新建圖片對象時
    let imgInstance = new fabric.Image.fromURL(url + '?v='+ Math.random(), img => {}, {crossOrigin: 'anonymous'})
    
    // 動態更新圖片時
    let currentActive = _fabricInstance.getActiveObj();
    currentActive.setSrc(randomURL, img =>{}, {crossOrigin: 'anonymous'})