最近的項目有個需求，就是點擊按鈕下載一個圖片。這種下載的做過很多次了，下載過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方法下載的圖片其實是一個文件流：
可以負責任的告訴大家，這兩個是一張圖片。