javascript-实现下载图片

jiezi

6 年前

场景

服务器接口返回一个图片的远程地址，要求前端进行下载

实现方案

前端接口拿到图片通过 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…