Canvas toDataURL導(dǎo)出圖片報錯， cors 限制該怎么解決

現(xiàn)在場景是這樣，我們有一個網(wǎng)站，需要用戶選擇圖片文件，然后和我們的背景、提示信息合成為一張新的圖片，然后導(dǎo)出。
在本地是可以運行的
在線上測試的時候報錯，提示畫布是被污染的，安全限制不能導(dǎo)出為圖片。

// 錯誤提示：

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

我在網(wǎng)上找了一些相關(guān)的資料，大部分做法是給 img 標(biāo)簽加一個屬性。

var img = new Image()

img.setAttribute("crossOrigin",'anonymous')
// img.crossOrigin = "anonymous"

// 還有的博客說這樣加

img.crossOrigin = ""
img.crossOrigin = "*"

// 但是我試了都沒有效果，還是報錯

這里我有些不太清楚， crossOrigin 屬性是給導(dǎo)出的 new Image() 加，還是給用戶選擇的跨域圖片添加？

我們的 dev 環(huán)境是可以運行的，但是線上卻報錯，服務(wù)器方面有哪些配置會導(dǎo)致這個問題嗎？

求解

再附一些相關(guān)的博客，
https://www.jianshu.com/p/6fe...

https://developer.mozilla.org...

https://stackoverflow.com/que...

回答

編輯回答

逗婦惱

跨域請求保護，如果用戶是本地上傳的圖片到你們的服務(wù)器，就不會存在這個問題，但是假如用戶使用的是網(wǎng)絡(luò)上的資源，就會有這種問題出現(xiàn)，比如阿里云、騰訊云、微信頭像等等CDN圖片，這種問題純客戶端JS是沒辦法的，需要把圖片地址發(fā)給服務(wù)端，讓服務(wù)端將圖片轉(zhuǎn)成base64格式發(fā)給前端才能解決。

簡單附錄PHP獲取圖片轉(zhuǎn)成base64代碼(個人學(xué)習(xí)時使用)：

function imgcurl($ul){
  $header = array(
    'User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:45.0) Gecko/20100101 Firefox/45.0',
    'Accept-Language: zh-CN,zh;q=0.8,en-US;q=0.5,en;q=0.3',
    'Accept-Encoding: gzip, deflate',
  );
  $curl = curl_init();
  curl_setopt($curl, CURLOPT_URL, $ul);
  curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
  curl_setopt($curl, CURLOPT_FOLLOWLOCATION, true);
  curl_setopt($curl, CURLOPT_ENCODING, 'gzip');
  curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
  $data = curl_exec($curl);
  $code = curl_getinfo($curl, CURLINFO_HTTP_CODE);
  curl_close($curl);

  if ($code == 200) {
      $imgBase64Code = "data:image/jpeg;base64," . base64_encode($data);
  };
  return $imgBase64Code;
}

2018年6月8日 05:50