HTML+JS实现浏览器前端下载图片

最近做项目需要用到js图片下载，按照原先下载文件的思路，我感觉直接 window.open("下载链接"); 就可以了，但实际操作后，发现这个只会在新窗口打开图片，并不会触发下载，在网上找到大佬的解决，方法，特此记录下，能够兼容大部分浏览器，但是不兼容IE浏览器(不支持download属性)。要兼容IE浏览器需要用其他办法。

----------------------------------------------------- 我是分割线 ---------------------------------------------------------------

如果使用a标签指向一个图片的话，你会发现点击链接时它会直接在浏览器中打开图片并显示:

<a href="http://www.baidu.com/img/baidu_jgylogo3.gif" />

但是这样的话，就存在一个问题，如果我想点击a链接直接下载图片到本地，该怎么实现呢？
在查阅资料之后，发现a标签有一个download的属性，添加了该属性，a标签将直接下载文件，并根据download属性的值设置下载文件的文件名，不为download属性设置值则文件将以默认文件名下载:

<!-- 文件名为默认名称 -->
<a href="./baidu_jgylogo3.gif" download />
<!-- 文件名为baidu.gif -->
<a href="./baidu_jgylogo3.gif" download="baidu" />
<!-- 文件名为baidu.png -->
<a href="./baidu_jgylogo3.gif" download="baidu.png" />

但是这个办法有一个弊端，它仅支持同源链接下载，非同源链接还是会直接打开图片:

<!-- 同源链接能下载图片 -->
<a href="./baidu_jgylogo3.gif" download />
<!-- 非同源链接download属性会无效，浏览器会直接打开图片 -->
<a href="http://www.baidu.com/img/baidu_jgylogo3.gif" download />

尝试了将图片转成Base64或者Blob的办法:

function 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 = ''     //文件名称，不填默认为当前请求名称// 触发a链接点击事件，浏览器开始下载文件a.click()})}img.src = url// 必须设置，否则canvas中的内容无法转换为blobimg.setAttribute('crossOrigin', 'Anonymous')
}function downloadImgByBase64(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)// 将画布内容转换为base64var base64 = canvas.toDataURL()// 创建a链接var a = document.createElement('a')a.href = base64a.download = ''// 触发a链接点击事件，浏览器开始下载文件a.click()}img.src = url// 必须设置，否则canvas中的内容无法转换为base64img.setAttribute('crossOrigin', 'Anonymous')
}

上述两种方法效果都不太理想。因为这两种方法仅支持生成jpeg和png格式图片。如果是gif图，仅能显示第一帧的内容。
后来在download.js官网中看到了如下的示例：

var x=new XMLHttpRequest();x.open("GET", "http://danml.com/wave2.gif", true);x.responseType = 'blob';x.onload=function(e){download(x.response, "dlBinAjax.gif", "image/gif" ); }x.send();

该示例的思路是，通过XMLHttpRequest()请求图片链接，然后获取返回的Blob。那结合上面下载图片的方法，就能下载图片了:

var x=new XMLHttpRequest();x.open("GET", "http://danml.com/wave2.gif", true);x.responseType = 'blob';x.onload=function(e){var url = window.URL.createObjectURL(x.response)var a = document.createElement('a');a.href = urla.download = ''a.click()}x.send();

通过这种方法下载图片，gif图也能够显示正常了。
注意，上述方法能够兼容大部分浏览器，但是不兼容IE浏览器(不支持download属性)。要兼容IE浏览器需要用其他办法。

原文地址；https://www.jianshu.com/p/dfe9c351b898

HTML+JS实现浏览器前端下载图片相关推荐

前端下载图片的N种方法
前几天一个简单的下载图片的需求折腾了我后端大佬好几天,最终还是需要前端来搞,开始说不行的笔者最后又行了,所以趁着这个机会来总结一下下载图片到底有多少种方法. 先起个服务使用expressjs起个简单 ...
JavaScript 实现前端下载图片
JavaScript 实现前端下载图片前几天公司的项目有个需求,实现点击下载图片功能,当时我就想着还不简单嘛,当即写下以下代码: const download = document.createEl ...
6种实现前端下载图片的方法汇总
来源 | https://www.cnblogs.com/wanglinmantan/p/15088419.html 前几天一个简单的下载图片的需求折腾了我后端大佬好几天,最终还是需要前端来搞,开始说 ...
如何利用后端给的url，前端下载图片、音频、视频等文件
后端给了url,让前端处理下载,刚开始只处理图片url下载,然后用最简单的方式,创建a标签,叫download属性,发现竟然不行,找了一下原因,原来是url地址跨域了,这里需要让后端处理一下服务器对u ...
前端下载图片、pdf、excel、world文件；前端下载图片和pdf文件；前端a标签下载图片和pdf文件；下载文件名称不生效原因。
参考文章1 参考文章2 以下的下载是,拿到了后端给的下载图片的接口地址url > 方法1:将文本或者JS字符串通过 Blob 转换成二进制下载优点:可以下载,也可以保存名称. //文件流参数和 ...
【jQuery】jQuery与vue实现点击下载图片以及js实现批量打包下载图片
原理:用canvas的toDataUrl() API获取到图片的base64编码,再利用触发a标签事件进行下载.(单张图片下载) 多张图片批量下载导出压缩包需要引入jsZip jQuery实现点击下载 ...
JS单个、批量下载图片
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>& ...
前端下载图片在浏览器中
这篇文章很好:https://blog.csdn.net/weixin_44244857/article/details/105549543 使用了文章文中base64 方法 <el-butto ...
浏览器下载图片前端下载图片/音频/视频/PDF等所有浏览器可以解析的文件格式；解决通过window.open打开链接后是新标签页面而不是下载文件；
拷贝走放上文件路径直接使用(存在跨域的处理下跨域问题即可) this.$axios.get('要下载的文件路径', { responseType: 'blob'}).then(res=>{ ...

HTML+JS实现浏览器前端下载图片

HTML+JS实现浏览器前端下载图片相关推荐

最新文章

热门文章