JAVASCRIPT-圖片下載保存到本地

需求：點擊圖片下載到本地。

方法一：直接最簡單的html實現:

<a href="/images/myw3schoolimage.jpg" download="w3logo">

這種方法最簡單，但是換成如下地址，圖片地址與當前地址不同源的時候，此時點擊會在新窗口打開這個圖片地址，而不是下載。

<a href="https://cn.gravatar.com/avatar/b8ea6205c38fad951b5b02ae22f037c8&d=mm">
　　<img src="https://cn.gravatar.com/avatar/b8ea6205c38fad951b5b02ae22f037c8&d=mm" alt="testload" />
</a>

為了解決上述方法的缺陷，這邊百度找到了第二種方法：

   /**
    * @param {*} imgData 圖片對象
    * @param {*} str     圖片下載到本地的文件名
    * @param {*} type    圖片下載到本地的類型
    */
   commonDownloads(imgData, str, type) {
    const blob = new Blob([imgData], { type: type });
    if (window.navigator && window.navigator.msSaveOrOpenBlob) { // 兼容ie
        window.navigator.msSaveOrOpenBlob(blob, str);
    } else {
        const downloadElement = document.createElement('a');
        const href = window.URL.createObjectURL(blob); // 靜態方法會創建一個 DOMString，其中包含一個表示參數中給出的對象的URL。這個 URL 的生命周期和創建它的窗口中的 document 綁定。這個新的URL 對象表示指定的 File 對象或 Blob 對象
        downloadElement.href = href;
        downloadElement.download = str;
        document.body.appendChild(downloadElement);
        downloadElement.click();
        document.body.removeChild(downloadElement);
        window.URL.revokeObjectURL(href); // 釋放之前已經存在的、通過調用 URL.createObjectURL() 創建的 URL 對象。當你結束使用某個 URL 對象之后，應該通過調用這個方法來讓瀏覽器知道不用在內存中繼續保留對這個文件的引用了。
    }
   }

調用：

        <div>
          <img src="https://cn.gravatar.com/avatar/b8ea6205c38fad951b5b02ae22f037c8&d=mm" alt="testload" onClick={this.imageClick} />
        </div>

  imageClick = () => {
    // 下載圖片

　　　 const imgUrl = 'https://cn.gravatar.com/avatar/b8ea6205c38fad951b5b02ae22f037c8&d=mm';

      const str = `${new Date().getTime()}.png`;

      const type = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'

    Util.commonDownloads(imgUrl, str, type);
  }

方法二用的是blob，還有許多其他的方法iframe和canvans等。