a 标签的download 属性在谷歌浏览器下无法下载图片,如何处理?
a 标签的download属性在下载图片文件的时候是如何的方便,可是可是谷歌浏览器不支持下载,而是下载打开新窗口预览图片。这个兼容性问题如何解决呢?
了解了一番,HTMLCanvasElement.toBlob()方法可以用以展示canvas上的图片;这个图片文件可以被缓存或保存到本地,由用户代理端自行决定。
更多HTMLCanvasElement.toBlob()详情前去https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob了解。
直接上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片下载</title>
</head>
<body>
<a href="https://www.baidu.com/img/bd_logo1.png" download="bd_logo1.png">
a download 属性下载
</a>
<br /><br />
<button onclick="add('https://pic2.zhimg.com/v2-5ec052fff9d691c6a61654ed16440547_400x224.jpg')">
非跨域图片
</button>
<br /><br />
<button onclick="add('https://www.baidu.com/img/bd_logo1.png')">
跨域图片
</button>
<br /><br />
<script>
function add(src) {
var filename; //图片名称
var filetype; //图片类型
var path = src;
if (path.indexOf("/") > 0) {
var file = path.substring(path.lastIndexOf("/") + 1, path.length);
var fileArr = file.toLowerCase().split(".");
filename = fileArr[0];
filetype = fileArr[1];
}
var canvas = document.createElement("canvas");
var img = document.createElement("img");
img.onload = function (e) {
canvas.width = img.width;
canvas.height = img.height;
var context = canvas.getContext("2d");
context.drawImage(img, 0, 0, img.width, img.height);
canvas.toBlob(blob => {
var a = document.createElement("a");
//a.href : blob:http://127.0.0.1:5500/fdd7df7a-c953-4a0f-a4ec-8bb9d09056d8
a.href = window.URL.createObjectURL(blob);
a.download = filename;
a.click();
}, `image/${filetype}`);
};
img.setAttribute("crossOrigin", "Anonymous");
img.src = src;
}
</script>
</body>
</html>
根据以上步骤操作后依然报跨域,后端处理。。。
如果感觉可以点个赞哦
a 标签的download 属性在谷歌浏览器下无法下载图片,如何处理?的更多相关文章
- HTML <a> download 属性,点击链接来下载图片
Html5里面的 标签的 Download 属性可以设置一个值来规定下载文件的名称.所允许的值没有限制,浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, ...
- HTML5 a标签的download属性
介绍一个HTML5的新特性 a标签的download属性: 目前市场上面支持的浏览器有限: html: <!DOCTYPE html> <html> <body> ...
- jQuery --- 利用a标签的download属性下载文件!
最近遇到一个项目,需要有点击下载文件的功能. 由于文件格式是多种的,对于 rar / zip / rtf / doc / xlsx / jpg等. 点击下载有的是直接跳转到后进行下载,但有的是打开进行 ...
- a标签的download属性简介
最近在工作中需要一个前端直接下载静态文件的需求,之前有粗略的了解过a标签的download属性,通过download和href属性可以实现文件的下载. 简介 HTML <a> 元素 (或锚 ...
- a标签的download属性
a标签加上downlaod属性后,就可完成对href属性链接文件的下载,但仅仅是限于同源文件,如果是非同源,download属性会失效. 无download属性的时候,a标签的默认行为是链接跳转进行预 ...
- HTML5 a标签的down属性进行图片下载
a标签中的down属性时HTML5新增的属性,此属性指示浏览器下载URL而不是导航到URL,因此将提示用户将其保存为本地文件.目前该属性的兼容性如下: 具体代码实现: /* 主要原理:利用a标签的do ...
- HTML5 <a>标签download 属性
一.简单实例 <a href="../images/1.jpg" download="下载图片.jpg"> 点击按钮下载 </a> 二. ...
- 火狐 a 标签 download 属性,要在 a 标签添加到页面中才生效;
在 chrome 中,如果需要设置点击下载文件,需要创建一个 a 标签,指定 download 属性和 href 属性即可, var aLink = document.createElement('a ...
- span标签里的内容在IE下显示,而在谷歌浏览器下不显示
有如下代码: <span id="spLicenseIncrease" style="color:red;">(51)</span> 在 ...
随机推荐
- Java进程监控
目录 1.引言 2. 程序启停, 为进程自定义项目名称 3. 操作系统判断 4. 获取进程信息 5. 内存,CPU信息 6. 堆内存信息 7. 端口信息 8. 线程信息 9. MXBean使用样例 9 ...
- Python学习笔记——GUI
1. 相关文档 EasyGui 官网:http://easygui.sourceforge.net 官方的教学文档:easygui-docs-0.96\tutorial\index.html 小甲鱼翻 ...
- 【VS开发】IPicture在指定窗口绘制图
1.利用IPicture接口加载.显示图片 IPicture接口管理一个图片对象和它的属性.图片对象提供对Bitmap Icon Metafile的语言不相关的抽象支持.图像对象的主要接口是IPict ...
- Unsupported major.minor version 52.0——解决
Unsupported major.minor version 52.0 就是编辑用的是jdk8 而运行用的是jdk7, 改成jdk8就好了 参考文章:https://blog.csdn.net/qq ...
- 在UPW中使用VLC解码媒体
VLC支持的格式很全,学会如何使用后,完全可以自己给自己写一个简单的万能播放器了. 源码来自github:https://github.com/kakone/VLC.MediaElement.git( ...
- [Cometoj#3 A]比赛_枚举/堆
比赛 题目链接:https://cometoj.com/contest/38/problem/A?problem_id=1534 数据范围:略. 题解: 原题没啥意思,就是个暴力枚举. 出了个加强版, ...
- 什么是阿里云CDN
阿里云内容分发网络(Content Delivery Network,简称CDN)是建立并覆盖在承载网之上,由分布在不同区域的边缘节点服务器群组成的分布式网络.阿里云CDN分担源站压力,避免网络拥塞, ...
- 常见的几种web攻击
1. SQL注入 2. OS命令注入 3. 跨站脚本攻击(XSS) 4. HTTP首部注入 5. 会话劫持 6. 跨站点请求伪造(CSRF) 7. 点击劫持 8. DoS
- 深入理解C++11 C3
继承构造函数 class A { public: A(int i):m_i(i) {} A(double d, int i):m_d(d),m_i(i){} private: int m_i{0}; ...
- 14.shell脚本学习
简单的执行跟踪,会使得Shell显示每个被执行到的命令sh -x delete.sh 查找与替换grepsed -i "s/t_rs_customer/t_rs_customer_bak/g ...