前端下載 圖片 總結

前端下載 圖片 總結

前端下載圖片 分爲兩大類：一是服務端配合實現（即下載後臺服務提供的資源）； 二是 純前端下載

一、服務端配合實現

這種狀況 對於前端開發很是簡單，只須要一個a標籤，如：

<a href='/api/download' >下載圖片</a>

當直接訪問的某個文件時，若是該文件是二進制等瀏覽器沒法解析的文件，瀏覽器纔會下載該文件，但若是瀏覽器能夠本身解析該文件，則它會打開該文件並以本身的方式呈現出來，而不會下載，此時就須要設置消息響應頭，告訴瀏覽器該文件須要下載而不是簡單的打開。
這時候後臺要提供一個get請求的服務，並設置消息響應頭，告訴瀏覽器該文件須要下載。以node爲例：

app.get('/api/download/', (req, res, next) => {//以文件流的形式下載文件
    var filePath = path.join(__dirname, '../src/images/erwei.jpg');
    var stats = fs.statSync(filePath);
    res.set({
        'Content-Type': 'application/octet-stream', //告訴瀏覽器這是一個二進制文件
        'Content-Disposition': 'attachment; filename=111', //告訴瀏覽器這是一個須要下載的文件
        'Content-Length': stats.size  //文件大小
    });
    fs.createReadStream(filePath).pipe(res);
});

二、純前端下載

這其中又分爲兩種狀況：一是下載同源圖片（如同項目文件夾中的圖片）；二是 跨域網站的靜態資源（如本身公司的CDN的靜態資源）

a.下載同源圖片

這種狀況很簡單 利用a標籤的 downlaod 就能夠實現，例：

<a href=‘../img/test.png’ download="img" >下載圖片</a>

b.下載跨域網站的圖片

藉助canvas，例

// 調用方式
// 參數一： src
// 參數二： 圖片名稱，可選
export const downloadImage = (src: string, name: string) => {
    const image = new Image();
    // 解決跨域 canvas 污染問題
    image.setAttribute('crossOrigin','anonymous');
    image.onload = function(){
      const canvas = document.createElement('canvas');
      canvas.width = image.width;
      canvas.height = image.height;
      const context = canvas.getContext('2d');
      context.drawImage(image,0,0,image.width,image.height);
      const url = canvas.toDataURL('image/png');
      // 生成一個 a 標籤
      const a = document.createElement('a');
      // 建立一個點擊事件
      const event = new MouseEvent('click');
      // 將 a 的 download 屬性設置爲咱們想要下載的圖片的名稱，若 name 不存在則使用'圖片'做爲默認名稱
      a.download = name || '圖片';
      // 將生成的 URL 設置爲 a.href 屬性
      a.href = url;
      // 觸發 a 的點擊事件
      a.dispatchEvent(event);
    };
    image.src = src
}