前端下載圖片

　　最近的項目有個需求，就是點擊按鈕下載一個圖片。這種下載的作過不少次了，下載過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方法下載的圖片實際上是一個文件流：

能夠負責任的告訴你們，這兩個是一張圖片。