圖片跨域規律探尋

孤舟蓑翁發表於2021-05-20

先說結論：

canvas.toDataURL API中用到的圖片，必須新增crossOrigin屬性設定，否則會報被汙染的canvas無法被匯出的錯誤
url相同，crossOrigin屬性的圖，在頁面中通過html img標籤和js-dom Image物件不管載入多少次，瀏覽器只請求伺服器一次。從快取中讀取時，多次載入也只讀取一次。
頁面載入多幅url相同的圖片，如果這些圖片中有些設定了跨域屬性，有的未跨域屬性，只要設定了跨域屬性的圖之後會載入沒有跨域屬性的圖，那麼最後快取的就是沒有跨域屬性的圖。
如果快取的是沒有跨域屬性的圖片，設定了跨域屬性的html img標籤，js-dom Image物件從快取中載入圖片，會報跨域錯誤。如果快取的是設定了跨域屬性的圖片，html img標籤，js-dom Image物件無論是否設定跨域屬性，都可以從快取中正常載入圖片。

再看實驗過程：

1.分別載入沒有設定crossOrigin屬性的html-img和js-img圖片，呼叫canvas.toDataURL轉換data URI,執行時都會報錯-被汙染的canvas無法被匯出,這個錯誤是由於canvas使用了未設定跨域的圖片資源引起的，只有設定了crossOrigin屬性的圖片資源，才能被canvas複用。

1.1 載入沒有設定crossOrigin="anonymous"屬性的html-img圖片，執行canvas.toDataURL

<img  alt=""  id="html-img"
  src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/app-install.81ece51.png"
/>
<div  id="js-canvas-box"></div>
<script>
    // 將圖片繪製在canvas畫布上
    function convertCanvasToImage(image) {
      const canvas = document.createElement('canvas');
      canvas.width = image.width;
      canvas.height = image.height;
      canvas.getContext('2d').drawImage(image, 0, 0);
      // 從canvas畫布匯出圖片
      const img = new Image();
      img.src = canvas.toDataURL('image/png');
      return img;
    }
    
    // 通過html-img標籤載入圖片
    const htmlImg = document.querySelector('#html-img');
    htmlImg.onload = function () {
      const img=convertCanvasToImage(this);
      document.querySelector('#js-canvas-box').appendChild(img);
    };
    </script>

報如下錯誤：

1.2 載入沒有設定crossOrigin="anonymous"屬性的js-image圖片，執行canvas.toDataURL

<div id="js-canvas-box" />
<script>
    // 將圖片繪製在canvas畫布上
    function convertCanvasToImage(image) {
      const canvas = document.createElement('canvas');
      canvas.width = image.width;
      canvas.height = image.height;
      canvas.getContext('2d').drawImage(image, 0, 0);
      // 從canvas畫布匯出圖片
      const img = new Image();
      img.src = canvas.toDataURL('image/png');
      return img;
    }
    
    // 通過js-dom載入圖片
    const jsImg = new Image();
    jsImg.src ='https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/app-install.81ece51.png';
    jsImg.onload = function () {
      const img=convertCanvasToImage(this);
      document.querySelector('#js-canvas-box').appendChild(img);
    };
    </script>

報如下錯誤：

2.分別載入設定crossOrigin屬性時html-img和js-img圖片，呼叫canvas.toDataURL執行都正常。

crossOrigin可以有下面兩個值：

anonymous	元素的跨域資源請求不需要憑證標誌設定。
use-credentials	元素的跨域資源請求需要憑證標誌設定，意味著該請求需要提供憑證

只要crossOrigin的屬性值不是use-credentials，全部都會解析為anonymous，包括空字串。

2.1 載入設定crossOrigin屬性時html-img圖片，執行canvas.toDataURL，結果正確。

<img  alt=""  id="html-img" crossOrigin=""
  src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/app-install.81ece51.png"
/>
<div id="js-canvas-box" />
<script>
    // 將圖片繪製在canvas畫布上
    function convertCanvasToImage(image) {
      const canvas = document.createElement('canvas');
      canvas.width = image.width;
      canvas.height = image.height;
      canvas.getContext('2d').drawImage(image, 0, 0);
      // 從canvas畫布匯出圖片
      const img = new Image();
      img.src = canvas.toDataURL('image/png');
      return img;
    }
    
    // 通過html-img標籤載入圖片
    const htmlImg = document.querySelector('#html-img');
    htmlImg.onload = function () {
      const img=convertCanvasToImage(this);
      document.querySelector('#js-canvas-box').appendChild(img);
    };
    </script>

2.2 載入設定crossOrigin屬性時js-img圖片，執行canvas.toDataURL，結果正確。

<div id="js-canvas-box" />
<script>
    
    function convertCanvasToImage(image) {
      // 將圖片繪製在canvas畫布上
      const canvas = document.createElement('canvas');
      canvas.width = image.width;
      canvas.height = image.height;
      canvas.getContext('2d').drawImage(image, 0, 0);

      // 從canvas畫布匯出圖片
      const img = new Image();
      img.src = canvas.toDataURL('image/jpg');
      return img
    }
    
    // 通過js-dom載入圖片
    const jsImg = new Image();
    // 只要crossOrigin的屬性值不是use-credentials，全部都會解析為anonymous，包括空字串。
    jsImg.crossOrigin=""
    jsImg.src ='https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/app-install.81ece51.png';
    jsImg.onload = function () {
      const image=convertCanvasToImage(jsImg);
      document.querySelector('#js-canvas-box').appendChild(image);
    };
</script>

3.再看看從快取載入，會不會報錯。啟用快取，分別載入設定crossOrigin屬性時html-img和js-img圖片，執行canvas.toDataURL,也都沒有報錯。

3.1 啟用快取，載入設定crossOrigin屬性時html-img圖片，執行canvas.toDataURL，結果正確。

<img  alt=""  id="html-img"
 crossOrigin="anonymous"
 src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/app-install.81ece51.png"
/>
<div id="js-canvas-box" />
<script>
    
    function convertCanvasToImage(image) {
      // 將圖片繪製在canvas畫布上
      const canvas = document.createElement('canvas');
      canvas.width = image.width;
      canvas.height = image.height;
      canvas.getContext('2d').drawImage(image, 0, 0);

      // 從canvas畫布匯出圖片
      const img = new Image();
      img.src = canvas.toDataURL('image/jpg');
      return img
    }
    // 通過html-img載入圖片
    const htmlImg = document.querySelector('#html-img');
    htmlImg.onload = function () {
      const image=convertCanvasToImage(this);
      document.querySelector('#js-canvas-box').appendChild(image);
    };
</script>

3.2 啟用快取，載入設定crossOrigin屬性時js-img圖片，執行canvas.toDataURL，結果正確。

<div id="js-canvas-box" />
<script>
    
    function convertCanvasToImage(image) {
      // 將圖片繪製在canvas畫布上
      const canvas = document.createElement('canvas');
      canvas.width = image.width;
      canvas.height = image.height;
      canvas.getContext('2d').drawImage(image, 0, 0);

      // 從canvas畫布匯出圖片
      const img = new Image();
      img.src = canvas.toDataURL('image/jpg');
      return img
    }
    
 // 通過js-dom載入圖片
    const jsImg = new Image();
    // 只要crossOrigin的屬性值不是use-credentials，全部都會解析為anonymous，包括空字串。
    jsImg.crossOrigin=""
    jsImg.src ='https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/app-install.81ece51.png';
    jsImg.onload = function () {
      const image=convertCanvasToImage(this);
      document.querySelector('#js-canvas-box').appendChild(image);
    };
</script>

4. 通過html-img和js-img載入url相同，crossOrigin屬性的圖，只載入一次。從快取中讀取時，也只讀取一次

4.1 html-img和js-img都未設定crossOrigin，載入同一幅圖，只載入一次。

<img
  alt="img"
  id="html-img"
  src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/app-install.81ece51.png"
/>
<div id="js-canvas-box"></div>
<script>
  const jsImg = new Image();
  jsImg.src ='https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/app-install.81ece51.png';
  jsImg.onload = function () {
    document.querySelector('#js-canvas-box').appendChild(jsImg);
  };
</script>

從快取中讀取，只讀取了一次。

4.2 html-img和js-img都設定crossOrigin，載入同一幅圖，只載入一次。

<img
  alt="img"
  id="html-img"
  crossOrigin=""
  src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/app-install.81ece51.png"
/>
<div id="js-canvas-box"></div>
<script>
  const jsImg = new Image();
  jsImg.crossOrigin=""
  jsImg.src ='https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/app-install.81ece51.png';
  jsImg.onload = function () {
    document.querySelector('#js-canvas-box').appendChild(this);
  };
</script>

從快取中讀取，只讀取一次。

5. 再看看通過html-img的方式載入url相同,crossOrigin屬性不同的情景，頁面載入多個url一樣的html-img圖片，如果在跨域屬性圖片之後載入了沒有跨域屬性的圖片，那麼最後快取的是未設定crossOrigin屬性的圖片，重新整理頁面，那些設定了crossOrigin屬性的圖片，從快取中載入圖片時，會報跨域錯誤

這是因為：

在頁面載入的過程中，圖片會被瀏覽器快取，如果再次遇到url和crossOrigin屬性相同的圖片，直接會從快取中讀取，如果url相同，crossOrigin屬性與之前快取的圖片不同，瀏覽器會重新請求，並重新快取，覆蓋之前快取的同一張圖。可是快取中的圖片跨域屬性一旦從跨域變成不跨域，之後瀏覽器便不會在覆蓋之前的快取。快取的圖片始終保持為不跨域。
快取的圖片如果是未設定跨域屬性的圖片，html-img標籤設定了crossOrigin屬性，從快取載入，會觸發跨域問題。快取的圖片如果是設定了跨域屬性的圖片，無論html-img標籤是否設定crossOrigin屬性，從快取載入，都不會觸發跨域問題。

5.1 最後快取的是沒有設定crossOrigin屬性的圖片, 從快取中載入時，觸發了html img標籤中設定了crossOrigin屬性圖片的跨域。

<!-- 快取的是沒有跨域屬性的圖片 -->
<img
alt="img-3-no"
src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/app-install.81ece51.png"
/>

<!-- 快取被覆蓋,快取的是有跨域屬性的圖片 -->
<img
alt="img-2-anonymous"
crossOrigin="anonymous"
src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/app-install.81ece51.png"
/>


<!-- 快取再次被覆蓋，快取的是沒有跨域屬性的圖片 -->
<img
alt="img-3-no"
src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/app-install.81ece51.png"
/>
<!-- 快取中同一幅圖的跨域屬性一旦由跨域變成不跨域,之後瀏覽器不會再修改圖片的跨域屬性 -->
<img
alt="img-4-anonymous"
crossOrigin="anonymous"

src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/app-install.81ece51.png"
/>

1.5kb的圖片是沒有跨域屬性的圖片，1.6kb的圖片是設定了跨域屬性的圖片，從網路請求皮膚可以看到，最後請求的是沒有跨域屬性的圖片，意味著最後快取的也是沒有跨域屬性的圖片。

設定了跨域屬性的html img標籤，從快取中載入沒有跨域屬性的圖片，瀏覽器會報跨域錯誤。

5.2 最後快取的圖是設定了crossOrigin的圖片,從快取中載入時, 不會觸發html img標籤中未設定crossOrigin屬性圖片的跨域。

<!-- 快取的是沒有跨域屬性的圖片 -->
<img
alt="img-3-no"
src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/app-install.81ece51.png"
/>

<!-- 快取過，不再快取 -->
<img
alt="img-2-no"
src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/app-install.81ece51.png"
/>


<!-- 快取過，不再快取 -->
<img
alt="img-3-no"
src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/app-install.81ece51.png"
/>
<!-- 快取被覆蓋，快取的是有跨域屬性的圖片 -->
<img
alt="img-4-anonymous"
crossOrigin="anonymous"

src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/app-install.81ece51.png"
/>

從網路請求皮膚可以看出，最後請求的是1.6kb的設定了跨域屬性的圖片，意味著快取中最後保持的也是有跨域屬性的圖片

html img標籤即使未設定跨域屬性，也能利用快取中儲存的設定了跨域屬性的圖片，不會報錯。

6.再看看html-img和js-img混搭載入的情景，頁面載入多個url相同的html-img和js-img混搭圖片，前面的結論依舊成立。

6.1 最後快取的是沒有設定crossOrigin屬性的圖片，從快取載入時，設定了crossOrigin屬性的圖片會報跨域錯誤。

<img
  alt="img"
  id="html-img"
  crossOrigin="anonymous"
  src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/app-install.81ece51.png"
/>
<div id="js-canvas-box"></div>
<script>
  const jsImg = new Image();
  jsImg.src ='https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/app-install.81ece51.png';
  jsImg.onload = function () {
    document.querySelector('#js-canvas-box').appendChild(jsImg);
  };
</script>

6.2 最後快取的是設定了crossOrigin屬性的圖片，從快取載入時，不會觸發沒有設定crossOrigin屬性的圖片跨域錯誤。

<img
  alt="img"
  id="html-img"
  src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/app-install.81ece51.png"
/>
<div id="js-canvas-box"></div>
<script>
  const jsImg = new Image();
  jsImg.crossOrigin="anonymous"
  jsImg.src ='https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/app-install.81ece51.png';
  jsImg.onload = function () {
    document.querySelector('#js-canvas-box').appendChild(jsImg);
  };
</script>

canvas圖片跨域問題
2017-11-25
Canvas跨域
canvas圖片跨域實踐解惑
2019-01-11
Canvas跨域
跨域CORS圖片上傳問題
2018-11-01
跨域CORS
nginx 解決圖片跨域問題
2020-12-04
Nginx跨域
VUE + UEditor 單圖片跨域上傳
2018-02-07
Vue跨域
前端常見問題——Canvas 圖片跨域
2019-02-16
前端Canvas跨域
阿里雲圖片跨域訪問設定
2022-01-11
阿里跨域
Android 你還在為圖片放哪兒糾結嗎？圖片資原始檔夾載入規律
2020-11-27
Android
解鎖canvas匯出圖片跨域的N種姿勢～
2019-01-22
Canvas跨域
淺探前端圖片優化
2018-12-25
前端優化
事理圖譜：事件演化的規律和模式
2017-05-15
事件模式
解決canvas合成圖片大小錯誤、模糊以及跨域的問題
2018-11-04
Canvas跨域
EMS單號規律與順豐單號規律（C#）
2012-10-08
C#
計算出大小有什麼走勢圖規律
2021-08-02
相似圖片搜尋的原理
2011-07-21
JavaScript跨域（1）：什麼是跨域，如何跨域
2017-11-15
JavaScript跨域
網路圖片嗅探工具driftnet
2017-09-22
A Multiplication Game （博弈，規律）
2017-08-08
GAM
試圖探尋JavaScript的非同步設計
2019-03-02
JavaScript非同步
「一圖流」跨域必知思維導圖
2018-02-02
跨域
相似圖片搜尋的原理（二）
2013-03-31
跨域
2018-11-21
跨域
跨域原理以及跨域解決方案
2017-10-15
跨域
Mac圖片區域性擦除工具
2020-10-15
Mac
淘寶拍立淘介面，圖片搜尋介面，圖片識別介面，以圖搜貨介面，按圖搜尋介面程式碼教程
2023-04-09
HTTP跨域
2019-09-19
HTTP跨域
nuxt跨域
2019-08-15
UX跨域
跨域CORS
2018-12-03
跨域CORS
CORS跨域
2022-10-13
CORS跨域
Vue跨域
2020-09-30
Vue跨域
前端跨域
2018-03-13
前端跨域
HDU 6298 Maximum Multiple(找規律)
2018-08-27
HDU 4951 Multiplication table(找規律)
2014-08-26
leedcode-單詞規律
2024-03-29
探尋流式計算
2019-09-20
跨域共享CORS詳解及Gin配置跨域
2020-11-28
跨域CORS
【自動駕駛】運動控制自行車模型運動規律圖解
2019-01-16
自動駕駛模型圖解
【LeetCode動態規劃#04】不同的二叉搜尋樹（找規律，有點像智力題）
2023-03-25
LeetCode動態規劃