前言：需要在项目中实现图片下载功能。首先想到的是使用a标签的download属性来实现。但是在不同浏览器测试时，会发现部分浏览器无效，点击后可以直接预览图片。因此，上网找到了另一种兼容不同浏览器的下载图片的方法，那就是使用canvas来处理图片，实现下载；1.项目中点击事件绑定：{{name}}2.点击事件中的操作：downloadIamge(imgsrc,name){consturl=imgsrcthis.convertUrlToBase64(url).then((base64)=>{constblob=this.convertBase64UrlToBlob(base64)if(getBrowser()==='IE'||getBrowser()==='Edge'){window.navigator.msSaveBlob(blob,name)}else{consta=document.createElement('a')constbody=document.querySelector('body')a.download=name||'image'a.href=URL.createObjectURL(blob)a.style.display='none'body.appendChild(a)a.click()body.removeChild(a)window.URL。revokeObjectURL(a.href)}})}，分析：3.this.convertUrlToBase64(url)是使用canvas和toDataURL将图片转成base64格式，返回convertUrlToBase64(url){returnnewPromise((resolve,reject)=>{constimg=newImage()img.crossOrigin='Anonymous'img.src=urlimg.onload=function(){constcanvas=document.createElement('canvas')canvas.width=img.widthcanvas.height=img.heightconstctx=canvas.getContext('2d')ctx.drawImage(img,0,0,img.width,img.height)constext=img.src.substring(img.src.lastIndexOf('.')+1).toLowerCase()constdataURL=canvas.toDataURL('image/'+ext)constbase64={dataURL:dataURL,type:'image/'+ext,ext:ext}resolve(base64)}})}，其中：img.crossOrigin='Anonymous'为前端对图片的跨域处理；4.this.convertBase64UrlToBlob(base64)是将图片base64流文件转换为blob文件convertBase64UrlToBlob(base64){constparts=base64.dataURL.split('base64,')constcontentTtype=parts[0].split(':')[1]constraw=window.atob(parts[1])constrawLength=raw.lengthconstuInt8Array=newUint8Array(rawLength)for(leti=0;i-1){return'Opera'}if(userAgent.indexOf('Firefox')>-1){return'FF'}if(userAgent.indexOf('Trident')>-1){return'IE'}if(userAgent.indexOf('Edge')>-1){return'Edge'}if(userAgent.indexOf('Chrome')>-1){return'Chrome'}if(userAgent.indexOf('Safari')>-1){return'Safari'}}6.如果IE或者Edge浏览器，可以直接使用window.navigator.msSaveBlob(blob,name)完成下载；声明：由于ios系统的安全限制，以上方法在ios上无效；以上是记录项目中使用的图片下载，浏览器兼容性问题，涉及base64和blob的知识点和原理不是很清楚。如果你有时间，你必须研究它。整个方法亲测有效；欢迎测试使用，反馈意见。
