关于使用js下载图片
使用js进行图片下载是很常见的需求,但是解决起来却不是那么顺利。
服务器返回了一个图片地址,网上一搜基本都是用a标签的download属性,但是兼容性实在是很差。这里推荐使用blob。
上代码:
var xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.responseType = 'blob'
xhr.onload = function () {
if (xhr.status === 200) {
var blob = new Blob([xhr.response], {'type': 'application/octet-stream'})
saveAs(blob, filename)
}
}
xhr.send()
xhr.responseType 返回类型指明blob, 这样返回的xhr.response 就是一个blob对象
{'type': 'application/octet-stream'}是为了兼容safari
最后这个saveAs方法则是使用了file-saver这个库
至此,图片下载功能就完成了~
关于使用js下载图片的更多相关文章
- js 下载图片与下载文件的方式一样;保存至本地 ASP.NET 方式
<asp:Button ID="btnDownLoad" runat="server" style="display: none" T ...
- js下载图片
DownloadImgZP = imgPath => { const image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttribute('c ...
- 解决vue、js 下载图片浏览器默认预览而不是下载
在网页上,如果我们下载的地址对应的是一个jpg文件,txt文件等,点击链接时,浏览器默认的是打开这些文件而不是下载,那么如何才能实现默认下载呢? 后端解决 这就是Content-Disposition ...
- js 根据url 下载图片
downloadIamge(imgsrc, name) {//下载图片地址和图片名 let image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttr ...
- js实现图片下载
<img src='src' data-name='自定义名称'><script>//js实现图片下载 function download(){ var name = $('# ...
- 利用Node 搭配uglify-js压缩js文件,批量下载图片到本地
Node的便民技巧-- 压缩代码 下载图片 压缩代码 相信很多前端的同学都会在上线前压缩JS代码,现在的Gulp Webpack Grunt......都能轻松实现.但问题来了,这些都不会,难道就要面 ...
- Node.js mm131图片批量下载爬虫1.01 增加断点续传功能
这里的断点续传不是文件下载时的断点续传,而是指在爬行页面时有时会遇到各种网络中断而从中断前的页面及其数据继续爬行的过程,这个过程和断点续传原理上相似故以此命名.我的具体做法是:在下载出现故障或是图片已 ...
- Node.js mimimn图片批量下载爬虫 1.00
这个爬虫在Referer设置上和其它爬虫相比有特殊性.代码: //====================================================== // mimimn图片批 ...
- Node.js aitaotu图片批量下载Node.js爬虫1.00版
即使是https网页,解析的方式也不是一致的,需要多试试. 代码: //====================================================== // aitaot ...
随机推荐
- Murano Weekly Meeting 2015.09.01
Meeting time: 2015.September.1st 1:00~2:00 Chairperson: Nikolay Starodubtsev, from Mirantis Meeting ...
- (转)sdd for aix 安装及基本命令
总结出自多个文件(自己做的项目和网上找的资料) 原文:http://blog.csdn.net/yujin2010good/article/details/11395701 一.sddpcm安装 要安 ...
- 前端:移动端和PC端的区别
在阿里的几次面试中,总是被问到移动端和PC端有什么区别,当时回答的时候主要是回答了在兼容性.网速.适配.页面布局等方面的不同,但是还是很不系统,所以这里做一个总结. 第一: PC考虑的是浏览器的兼容性 ...
- 【LDAP】LDAP 中 CN, OU, DC 的含义
1. LDAP的存储规则 区分名(DN,Distinguished Name) 和自然界中的树不同,文件系统/LDAP/电话号码簿目录的每一片枝叶都至少有一个独一无二的属性,这一属性可以帮助我们来区别 ...
- 【蓝牙】蓝牙,调试 hcitool与gatttool实例
Bluez协议栈在安装完以后,会提供两个命令行调试工具,hcitool与gattool,我们可以根据提供的工具来轻松的调试我们的蓝牙设备,调试BLE设备时,需要获取root权限. 蓝牙设备的开启与关闭 ...
- node Error: Could not locate the bindings file. Tried:解决
问题描述: Error: Could not locate the bindings file. Tried: → C:\code\xxx\node_modules\deasync\build\dea ...
- 企业工商营业执照副本模板PSD源文件素材下载
企业工商营业执照副本PSD模板下载地址: http://www.qijieworld.com/thread-1911181-1-1.html 模板为psd格式内容可编辑修改,需使用 Photoshop ...
- 【起航计划 013】2015 起航计划 Android APIDemo的魔鬼步伐 12 App->Activity->SetWallpaper 设置壁纸 WallpaperManager getDrawingCache使用
SetWallpaper介绍如何在Android获取当前Wallpaper,对Wallpaper做些修改,然后用修改后的图像重新设置Wallpaper.(即设置>显示>壁纸>壁纸的功 ...
- 《ArcGIS Runtime SDK for Android开发笔记》——问题集:.geodatabase创建,创建时内容缺失问题总结
1.前言 利用ArcGIS桌面提供的share as -> ArcGIS Runtiem Content工具在导出.geodatabase文件时经常会发生数据缺失问题,比如数据表中数据有4w多条 ...
- 获取当前事件对象及this的用法
js <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta h ...