通过链接保存图片，是很常见的需求，我这里总结了几种比较好用的方式，以下方式在pc中基本适用。

这里的下载最终都使用了a的download的属性，区别在于前置对图片的处理。（直接通过图片链接使用并不适用大部分机型）

1.通过图片加载，canvas转base64，a超链的download属性下载图片（推荐方法，适用于大部分机型）

tips:  .bin文件需要加文件后缀命名（这里为photo.png）

            downloadIamge(imgsrc, name) {//下载图片地址和图片名let image = new Image();// 解决跨域 Canvas 污染问题image.setAttribute("crossOrigin", "anonymous");image.onload = function() {let canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;let context = canvas.getContext("2d");context.drawImage(image, 0, 0, image.width, image.height);let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据let a = document.createElement("a"); // 生成一个a元素let event = new MouseEvent("click"); // 创建一个单击事件a.download = name || "photo.png"; // 设置图片名称a.href = url; // 将生成的URL设置为a.href属性a.dispatchEvent(event); // 触发a的单击事件};image.src = imgsrc;},

2.于上相同，不同的是用了 window.URL.createObjectURL 处理图片。（测试后，部分机型并没有window.URL，或者无法通过这个进行转化）

              downloadImgByBlob(url) {var img = new Image()img.onload = function() {var canvas = document.createElement('canvas')canvas.width = img.widthcanvas.height = img.heightvar ctx = canvas.getContext('2d')// 将img中的内容画到画布上ctx.drawImage(img, 0, 0, canvas.width, canvas.height)// 将画布内容转换为Blobcanvas.toBlob((blob) => {// blob转为同源urlvar blobUrl = window.URL.createObjectURL(blob)// 创建a链接 var a = document.createElement('a')a.href = blobUrla.download = 'younei.png' //文件名称，不填默认为当前请求名称// 触发a链接点击事件，浏览器开始下载文件a.click()})}img.src = url// 必须设置，否则canvas中的内容无法转换为blobimg.setAttribute('crossOrigin', 'Anonymous')},

3.这个使用的也是URL.createObjectURL，区别在于触发a事件的时候使用了另外的方式，因此存在同样的问题。(也许能跟第一种结合一下)

                savePic(Url){// Url = this.dialogImgUrl //图片路径，也可以传值进来var triggerEvent = "touchstart"; //指定下载方式var blob=new Blob([''], {type:'application/octet-stream'}); //二进制大型对象blobvar url = URL.createObjectURL(blob); //创建一个字符串路径空位var a = document.createElement('a'); //创建一个 a 标签a.href = Url;  //把路径赋到a标签的href上//正则表达式，这里是把图片文件名分离出来。拿到文件名赋到a.download,作为文件名来使用文本a.download = Url.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0]; //代替方法。创建鼠标事件并初始化（后面这些参数我也不清楚，参考文档吧 https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent）var e = new MouseEvent('click', ( true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null));  //派遣后，它将不再执行任何操作。执行保存到本地a.dispatchEvent(e); //释放一个已经存在的路径（有创建createObjectURL就要释放revokeObjectURL）URL.revokeObjectURL(url);  },