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...