关于使用js下载图片
程序员文章站
2022-06-18 16:13:45
使用js进行图片下载是很常见的需求,但是解决起来却不是那么顺利。 服务器返回了一个图片地址,网上一搜基本都是用a标签的download属性,但是兼容性实在是很差。这里推荐使用blob。 上代码: xhr.responseType 返回类型指明blob, 这样返回的xhr.response 就是一个b ......
使用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这个库
至此,图片下载功能就完成了~
上一篇: php生成rss订阅
下一篇: JavaScript(一)
推荐阅读
-
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
-
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)_jquery
-
关于JS 回掉函数的使用_html/css_WEB-ITnose
-
Android中使用HttpURLConnection实现GET POST JSON数据与下载图片
-
Android使用AsyncTask下载图片并显示进度条功能
-
Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果(附demo源码下载)
-
Android使用AsyncTask下载图片并显示进度条功能
-
Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果(附demo源码下载)
-
html5使用canvas实现图片下载功能的示例代码
-
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片