关于使用js下载图片

2018-07-19 06:14:09来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

使用js进行图片下载是很常见的需求,但是解决起来却不是那么顺利。

服务器返回了一个图片地址,网上一搜基本都是用a标签的download属性,但是兼容性实在是很差。这里推荐使用blob。

上代码:

 1 var xhr = new XMLHttpRequest()
 2 xhr.open('GET', url, true)
 3 xhr.responseType = 'blob'     
 4 xhr.onload = function () {
 5   if (xhr.status === 200) {         
 6     var blob = new Blob([xhr.response], {'type': 'application/octet-stream'})         
 7     saveAs(blob, filename)
 8   }
 9 }
10 xhr.send()

xhr.responseType 返回类型指明blob, 这样返回的xhr.response 就是一个blob对象

{'type': 'application/octet-stream'}是为了兼容safari

最后这个saveAs方法则是使用了file-saver这个库

至此,图片下载功能就完成了~

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:微信小程序日期选择器

下一篇:常见面试算法题JS实现-仅用递归函数和栈操作逆序一个栈