canvas圖片繪制跨域問題解決方案Tainted canvases may not be expo

stonezhu 發布于2019-08-22 16:29 / 2073人閱讀

摘要：微信圖片的問題但是我發現這個方法用于繪制微信頭像的時候有概率會出現問題，當然了這里面指的是將圖片的網絡地址直接賦值給圖片的。

圖片跨域問題的一般解決方法

當使用canvas繪制網絡圖片的時候，經常會出現“Tainted canvases may not be exported”報錯，上網搜一下解決方案，應該給的都是給img添加crossOrigin屬性，嘗試了一下，確實可用。
看下面的一個例子：
html代碼：

javascript代碼：

var img = new Image();
img.setAttribute("crossOrigin", "anonymous");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
img.onload = function () {
    canvas.width = img.width;
    canvas.height = img.height + 200;
    ctx.drawImage(img, 0, 0);
      document.getElementById("canvasImg").src = canvas.toDataURL("image/jpeg", 1);
    }
img.src = "http://img.hb.aicdn.com/38d8f519b3f464a80d85ed9632fed904ed0181f41d632-ZHrigO_fw658";

這樣就可以正常畫出圖片了。

微信圖片的問題

但是我發現這個方法用于繪制微信頭像的時候有概率會出現問題，當然了這里面指的是將圖片的網絡地址直接賦值給圖片的src。【之所以說有概率會出現問題是因為我通過上面的方法去完成需求的時候并沒有畫出頭像（微信頭像放在wx.qlogo.cn域名下，然而我今天準備寫這篇文章的時候突然就可以了，見鬼
當時的時候我們找了很多方法，發現，在頭像url后面加上時間戳的話就可以了【emmm神操作
即：

img.src = "http://wx.qlogo.cn/mmopen/vi_32/RnLIHfXibgFHlticiclzflpriaLsC3TS9b2Sbj05Wh3vGlhcFutt18dfkXGUt8x11e4q2KHlX4EHHaBb6XylLQW1kQ/0?timeStamp="+new Date();

其他的解法

今天找了個新的方法去解決canvas圖片跨域的問題：
將文件讀入到blob文件對象，然后使用URL.createObjectURL轉換成src可用的地址

//直接讀成blob文件對象
function getImageBlob (url, cb) {
   var xhr = new XMLHttpRequest();
   xhr.open("get", url, true);
   xhr.responseType = "blob";
   xhr.onload = function () {
     if (this.status == 200) {
       imgResponse = this.response;
       //這里面可以直接通過URL的api將其轉換，然后賦值給img.src
       //也可以使用下面的preView方法將其轉換成base64之后再賦值
       img.src = URL.createObjectURL(this.response);
     }
    };
    xhr.send();
  }
  //這里面將blob轉換成base64
  function preView (url) {
    let reader = new FileReader();
    getImageBlob(url, function (blob) {
       reader.readAsDataURL(blob);
    });
    reader.onload = function (e) {
      console.log(e.loaded)
    }
  }
  img.onload = function () {
    canvas.width = img.width;
    canvas.height = img.height + 200;
    ctx.drawImage(img, 0, 0);
    document.getElementById("canvasImg").src = canvas.toDataURL("image/jpeg", 1);
  }
  var imgResponse = "";
 getImageBlob("http://wx.qlogo.cn/mmopen/vi_32/RnLIHfXibgFHlticiclzflpriaLsC3TS9b2Sbj05Wh3vGlhcFutt18dfkXGUt8x11e4q2KHlX4EHHaBb6XylLQW1kQ/0");

云服務器 GPU云服務器跨域問題 cdn跨域問題 javascript跨域問題 js跨域問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94400.html

Canvas 跨域脫坑實踐

摘要：跨域如何解決這里記錄下使用繪圖過程中所遇到的跨域問題和解決方案。先來看下實現方法。跨域正常情況下，如果需要將繪制好的圖像輸出，我們可以調用的或方法來獲取到圖像數據。然而，遇到圖片跨域的情況就有些尷尬了。 Canvas 跨域如何解決？這里記錄下使用 Canvas 繪圖過程中所遇到的跨域問題和解決方案。先來看下實現方法。實現方法目標圖片一般是由圖片 + 文本構成。無論是千奇百怪的...

hufeng 2019-08-23 12:49 評論0 收藏0
手摸手教你用canvas實現給圖片添加平鋪水印

摘要：最近項目中遇到一個需求，需要把一張圖片加上平鋪的水印類似這樣的效果首先想到的是用完成這種功能，因為我之前也沒有接觸過，所以做這個功能的時候，就是一步一步的摸索中學習，過程還是挺的，接下來跟我一步步來實現這個功能以及發現一些的坑吧。最近項目中遇到一個需求，需要把一張圖片加上平鋪的水印類似這樣的效果showImg(https://segmentfault.com/img/remote/...

崔曉明 2019-08-26 14:04 評論0 收藏0
Canvas引入跨域的圖片導致toDataURL()報錯的問題的解決

摘要：本文介紹了引入跨域的圖片導致報錯的問題的解決，分享給大家，具體如下場景用戶打開網頁，則請求騰訊圖片服務器上的圖片代碼。問題圖片首次載入，選擇新圖片后裁剪繪制都沒有問題。其他服務器同理再次測試圖片顯示成功，圖片上傳成功。本文介紹了Canvas引入跨域的圖片導致toDataURL()報錯的問題的解決，分享給大家，具體如下：【場景】用戶打開網頁，則請求騰訊COS（圖片服務器）上的圖片js代碼...

番茄西紅柿 2019-04-23 11:43 評論0 收藏0