前端下載圖片

　　最近的項目有個需求，就是點擊按鈕下載一個圖片。這種下載的做過很多次了，下載過Excel，word，PDF，TXT等等，都是後臺給一個鏈接地址，然後直接打開這個鏈接地址，瀏覽器就開始下載了。圖片的話，我也是這麼做的，沒有問題，瀏覽器能正常的識別下載。但是（凡事都怕有這個但是），這次有點不一樣，因爲這個圖片就不是放在後臺的，是我們前端調用華爲的OBS上傳的，然後我們還要下載這個圖片，這樣後臺就沒有辦法幫忙了。當然了， 後臺也可以先把這個下載到服務器，然後在讓我們去下載，但是這有點太繞遠了，肯定是不太可行的。於是，就開始查找前端的下載方法。總共找到了三種，分享給大家。不過需要注意的是第二種並沒有成功

　　1.第一種就是後臺給一個url，然後打開。這裏就不詳細的說了，需要後臺老兄的幫忙；不過這裏補充一下，就是像圖片，音樂這類的文件，後臺需要單獨設置一下，要不然，直接打開的話，瀏覽器不會執行下載，而是真正的打開了音樂或者這幅圖片。

　　2.第二種就是查到了，網上說這樣能下載 <a href="圖片地址" download="logo.png">下載圖片</a> 也就是給a標籤增加一個download屬性，但是經過測試，發現這樣並不可以。

　　3.第三種，就比較厲害了，只要瀏覽器能正常的打開這個圖片，然後咱們就能下載。先說一下這個的原理，就是我們點擊下載之後，新建一個隱藏的canvas，大小和圖片的大小保持一致，然後保存這個數據流，就啓動了瀏覽器的下載。親測可以下載；

　　

 1         function downloadIamge(imgsrc, name) { //下載圖片地址和圖片名
 2             let image = new Image();
 3             // 解決跨域 Canvas 污染問題
 4             image.setAttribute("crossOrigin", "anonymous");
 5             image.onload = function() {
 6                 let canvas = document.createElement("canvas");
 7                 canvas.width = image.width;
 8                 canvas.height = image.height;
 9                 let context = canvas.getContext("2d");
10                 context.drawImage(image, 0, 0, image.width, image.height);
11                 let url = canvas.toDataURL("image/png"); //得到圖片的base64編碼數據
12                 let a = document.createElement("a"); // 生成一個a元素
13                 let event = new MouseEvent("click"); // 創建一個單擊事件
14                 a.download = name || "photo"; // 設置圖片名稱
15                 a.href = url; // 將生成的URL設置爲a.href屬性
16                 a.dispatchEvent(event); // 觸發a的單擊事件
17             };
18             image.src = imgsrc;
19         }

 

然後在點擊按鈕的時候，直接執行這個方法，就可以了。如果仔細的觀察下載的話，就能發現，咱們自己手動下載保存的圖片顯示的是這個圖片的鏈接地址：

而我們使用canvas方法下載的圖片其實是一個文件流：

可以負責任的告訴大家，這兩個是一張圖片。