javascript实现前端下载图片前几天公司项目有个需求，需要实现点击下载图片的功能。当时觉得不容易，就立马写了下面的代码：constdownload=document.createElement('a');down??load.setAttribute('download',downloadName);down??load.clik();结果出乎意料，浏览器并没有下载图片，而是在窗口中打开了图片。我做了一些研究，发现像Chrome这样的现代浏览器可以识别图像并打开它们。现在网上下载图片的方式大多是在响应的时候加一个下载头，浏览器识别到下载头就会下载，但是我的前端项目做不到。那么，问题来了，如何实现前端下载图片呢？1.实现思路用DataURLs代替图片下载图片DataURLsDataURLs，即以data:协议为前缀的URLs，它允许内容创建者将小文件嵌入到文档中。数据URL由四部分组成：前缀(data:)、指示数据类型的MIME类型、可选的base64标记（如果不是文本）和数据本身：data:[][;base64],mediatype是一个MIME类型字符串，例如JPEG图像文件的“image/jpeg”。如果省略，则默认为text/plain;charset=US-ASCII如果数据为文本，则可以直接嵌入文本（使用适当的实体字符或转义字符，具体取决于文档类型）。如果是二进制数据，可以在嵌入前对数据进行base64编码。有关详细信息，请参阅MDN对数据URL的解释。2.代码实现下面是获取图片DataURL的示例代码：/***获取图片的base64编码DataURL*@paramimageJS图片对象*@return{string}编码DataURL*/getImageDataURL(image){//创建画布constcanvas=document.createElement('canvas');canvas.width=image.width;canvas.height=image.height;constctx=canvas.getContext('2d');//以图片为背景裁剪canvasctx.drawImage(image,0,0,image.width,image.height);//获取图片后缀constextension=image.src.substring(image.src.lastIndexOf('.')+1).toLowerCase();//某些图片url可能没有后缀，默认是pngreturncanvas.toDataURL('image/'+extension,1);}，执行上面的函数后，会返回一个和data一样格式的字符串:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAgAElEQVR4Xu1dB3hUxfb/bc3uppOeQOgIAioKCiqWJ/bysFd89vcXe0WfvSJ2wY6gPhX1WZ...注意：转换后的图片越大，转换后的图片数据长度不能超过浏览器base64码长度限制，转换后的图片越长。示例代码：downLoad(downloadName,url){consttag=document.createElement('a');//该属性的值为图片下载时的名称。注意名称中不能有半角点，否则下载报错时会丢失后缀名tag.setAttribute('download',downloadName.replace(/\./g,''));常量图像=新图像（）；//设置图片的url，添加时间戳，防止浏览器缓存图片image.src=url+'?time='+newDate().getTime();//重要，设置c??rossOrigin属性，否则图片跨域会报错image.setAttribute('crossOrigin','Anonymous');//图片未加载时会报错image.onload=()=>{tag.href=getImageDataURL(image);tag.click();};}，欢迎转载，转载请注明出处https://blog.kaguramea.me/arc...
