image圖片存在跨域問題的分析和解決

一、問題描述：

下載歷史課堂板書原來是需要點圖片一張張下載，比較麻煩；調整為把所有圖片合並為pdf后下載。應用jsPDF插件，在移動端獲取圖片地址時，報跨域問題。

二、知識點補充：

1、jsPDF 是一個基於HTML5的客戶端解決方案，用於生成各種用途的 PDF 文檔。

1、安裝：npm install jspdf

2、引入：import jsPDF from "jspdf"

3、使用：

let pdf = new jsPDF('p', 'pt', 'a4');
//第一個參數： l：橫向 p：縱向
//第二個參數：測量單位（"pt"，"mm", "cm", "m", "in" or "px"）
//第三個參數：默認為“a4”。如果您想使用自己的格式，只需將大小作為數字數組傳遞，例如[595.28, 841.89];

4、常用方法

pdf.addPage()  在PDF文檔中添加新頁面：

readPDF.addPage([imgwidth,imgHeight], 'p')//參數：(尺寸大小：默認a4 , 方向l：橫向 p：縱向）

pdf.addImage()  將圖像添加到PDF：

readPDF.addImage(ImageDate, 'JPEG', posX, posY, imgWidth, imgHeight)//參數：（imageData,格式,開始坐標x,開始坐標y,寬,高）

pdf.save() 保存pdf文檔

readPDF.save('板書.pdf')

 

三、問題梳理分析：

圖片是來自於阿里雲服務器的，跟訪問的頁面不是同一個域名，存在跨域的問題。這邊有兩個問題：

1、為什么圖片在頁面上能正常顯示？

通過 dom 節點的 <img> 標簽來直接訪問是沒有問題，因為瀏覽器本身不會有跨域問題。而圖片再次被復用到 canvas 上去時，就報跨域錯誤。

2、為什么pc端沒有問題？

pc端是electron框架內置chrome瀏覽器，關閉了跨域設置。移動端是通過webview訪問，存在跨域問題。

如果是chrome環境，同樣存在跨域問題。

 

四、解決方式：

圖片增加crossOrigin屬性

<img crossOrigin="anonymous"/>

pdf根據圖片生成pdf時，創建image標簽，給圖片也加上crossOrigin屬性

const img = new Image();
img.crossOrigin = 'anonymous';

加了 crossorigin 屬性，則表明圖片就一定會按照 CORS 來請求圖片。而通過CORS 請求到的圖片可以再次被復用到 canvas 上進行繪制。換言之，如果不加 crossorigin 屬性的話，那么圖片是不能再次被復用到 canvas 上去的。

什么是crossOrigin?

 相較於anonymous，use-credentials 是加了證書的 CORS。

 

五、問題后續：

這種方式，可以解決新生成圖片的跨域問題。對於用戶以前訪問過的圖片，瀏覽器默認情況下會將其緩存起來。當我們從 JS 的代碼中創建的 <img> 再去訪問同一個圖片時，瀏覽器就不會再發起新的請求，而是直接訪問緩存的圖片。而緩存中的圖片是不帶跨域頭的，所以瀏覽器直接就拒絕了。

處理方式：

pdf生成圖片時，使用時間戳去直接訪問服務器資源，繞過訪問瀏覽器緩存；至此問題徹底解決。

       const img = new Image();
-      img.src = src;
+      img.src = `${src}?${Date.now()}`;
       img.crossOrigin = 'anonymous';

 

參考：

https://blog.csdn.net/weixin_42333548/article/details/107630706

https://www.jianshu.com/p/8fa0fb53c183