前端圖片下載的實現

前端圖片下載分為兩大類：

一是服務端配合實現（即下載后台服務提供的資源）；

二是純前端下載；

1.服務端配合實現

這種情況對於前端開發來說非常簡單，只需呀一個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);
});

2.純前端下載

這其中又分為兩種情況：一是下載同源圖片（如同項目文件夾中的圖片）；二是 跨域網站的靜態資源（如自己公司的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
}