admin管理员组文章数量:1558102
a 标签的download属性在下载图片文件的时候是如何的方便,可是可是谷歌浏览器不支持下载,而是下载打开新窗口预览图片。这个兼容性问题如何解决呢?
了解了一番,HTMLCanvasElement.toBlob()方法可以用以展示canvas上的图片;这个图片文件可以被缓存或保存到本地,由用户代理端自行决定。
更多HTMLCanvasElement.toBlob()详情前去https://developer.mozilla/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/img/bd_logo1.png" download="bd_logo1.png">
a download 属性下载
</a>
<br /><br />
<button οnclick="add('https://pic2.zhimg/v2-5ec052fff9d691c6a61654ed16440547_400x224.jpg')">
非跨域图片
</button>
<br /><br />
<button οnclick="add('https://www.baidu/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>
根据以上步骤操作后依然报跨域,后端处理。。。
如果感觉可以点个赞哦
转载于:https://wwwblogs/changxue/p/11049025.html
版权声明:本文标题:a 标签的download 属性在谷歌浏览器下无法下载图片,如何处理? 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1727373665a1111458.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论