javascript 實現下載圖片

場景

服務器接口返回一個圖片的遠程地址，要求前端進行下載

實現方案

前端接口拿到圖片經過canvas轉成base64的格式，而後利用A標籤的download屬性 進行下載，具體請看代碼
ps:若是是同源域名下面的話。其實直接操做a標籤的href便可，下面展現的方法是跨域的實現

// <a href="" download>下載</a>

function getUrlBase64(url,callback ,ext = '') {
        var canvas = document.createElement("canvas");   //建立canvas DOM元素
        var ctx = canvas.getContext("2d");
        var img = new Image;
        img.crossOrigin = 'Anonymous'; // 支持跨域
        img.src = url;
        img.onload = function () {
            canvas.height = img.height; //指定畫板的高度,自定義
            canvas.width = img.width; //指定畫板的寬度，自定義
            ctx.drawImage(img, 0,0); //參數可自定義
            var dataURL = canvas.toDataURL("image/" + ext);    // 傳遞的自定義的參數
            callback.call(this, dataURL); //回掉函數獲取Base64編碼
            canvas = null;
        };
        }
        let path = 'https://static-xesapi.speiyou.cn/1561014844679.jpg'
        let all = document.querySelector('a')
        getUrlBase64(path,function (base64) {
            all.setAttribute('href',base64)
});

---

注意兼容

其餘可參考
https://segmentfault.com/a/11...