点击a标签下载当前链接的图片&&js 通过 blob 类文件对象下载图片,修改图片保存的名字(兼容式写法)

摘要:
如果要单击a标记下载当前链接的图像,必须首先在a标记上添加下载属性,以触发单击下载的效果。如果它不是同一个源,它将成为当前页面上打开的图像。如果你想从不同的来源下载文件,一种思路是将图像转换为base64并将值分配给标记a,这样你就可以在点击后下载图像。当通过标记a下载图像时,只有谷歌浏览器和Firefox浏览器支持通过iframe下载图像,你不能更改图像的名称。

若想点击a标签就下载当前链接的图片,首先必须文件是同源的,在a标签上增加download属性,才能触发点击下载的效果,若不同源的话则变成在当前页面打开该图片了。

若想要下载不同源的文件,有一种思路是将图片转为base64再赋值给a标签,这样点击后应该就能够下载了

问题:通过a标签下载图片,只有谷歌浏览器和火狐浏览器才支持


通过iframe的方式下载图片的时候,不能够修改图片的名字。
解决思路:

1、因为图片地址是跨域的,所以先要转成 base64 数据流

2、然后把 base64 转换成 blob对象

3、然后判断浏览器的类型,选择不同的方式把 blob 文件流下载到本地

 转换成base64的方法

convertUrlToBase64(url) {
return new Promise(function(resolve, reject) {
var img = new Image();
img.crossOrigin = "Anonymous";
img.src = url;
img.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var ext = img.src
.substring(img.src.lastIndexOf(".") + 1)
.toLowerCase();
var dataURL = canvas.toDataURL("image/" + ext);
var base64 = {
dataURL: dataURL,
type: "image/" + ext,
ext: ext
};
resolve(base64);
};
});
},


 转换成 blob 对象

convertBase64UrlToBlob(base64) {
var parts = base64.dataURL.split(";base64,");
var contentType = parts[0].split(":")[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; i++) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], { type: contentType });
},


 判断浏览器的类型

myBrowser() {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
if (userAgent.indexOf("OPR") > -1) {
return "Opera";
} //判断是否Opera浏览器 OPR/43.0.2442.991
if (userAgent.indexOf("Firefox") > -1) {
return "FF";
} //判断是否Firefox浏览器  Firefox/51.0
if (userAgent.indexOf("Trident") > -1) {
return "IE";
} //判断是否IE浏览器 Trident/7.0; rv:11.0
if (userAgent.indexOf("Edge") > -1) {
return "Edge";
} //判断是否Edge浏览器 Edge/14.14393
if (userAgent.indexOf("Chrome") > -1) {
return "Chrome";
} // Chrome/56.0.2924.87
if (userAgent.indexOf("Safari") > -1) {
return "Safari";
} //判断是否Safari浏览器 AppleWebKit/534.57.2 Version/5.1.7 Safari/534.57.2
},


 把获取的地址传入上面的方法,然后判断浏览器的类型,
选择兼容的下载 blob 文件流的方法

//图片格式和PDF
this.convertUrlToBase64(url).then(function(base64) {
// 图片转为base64
var blob = that.convertBase64UrlToBlob(base64); // 转为blob对象
// 下载
if (that.myBrowser() == "IE") {
window.navigator.msSaveBlob(blob, name + ".jpg");
} else if (that.myBrowser() == "FF") {
window.location.href = url;
} else {
var a = document.createElement("a");
a.download = name;
a.href = URL.createObjectURL(blob);
a.click();
}
});


 
————————————————
版权声明:本文为CSDN博主「时间飞逝子非鱼」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/lgysjfs/article/details/88644837

免责声明:文章转载自《点击a标签下载当前链接的图片&amp;amp;&amp;amp;js 通过 blob 类文件对象下载图片,修改图片保存的名字(兼容式写法)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇自己写的Python数据库连接类和sql语句拼接方法用Sqlserver处理千万条数据的优化下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

JS按回车键实现登录的方法

按回车实现登录的方法可用js来进行实现,有以下三种方法:   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">(此代码为浏览器以中文的形式呈现) 方法一: <html> <head> <title>Check S...

网易云课堂js学习笔记

javascript:用来在页面中编写特效的,和html/css一样都是由浏览器解析的 javascript语言:一、js如何运行的(javaScript,jscript,vbscript,applet)二、输出alert(什么类型都可以)document.write(字符串) 三、如何在html中使用js1.使用<script></sc...

三种比较好玩的黑客效果JS代码(摘取)

<html> <head> <title>The Matrix</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/ja...

爬虫 -- JS调试

开发者工具(F12) 其中常用的有Elements(元素面板)、Console(控制台面板)、Sources(源代码面板)、Network(网络面板) 找 JS 文件的几种方法 1、找发起地址 2、设置事件触发断点 Event Listener Breakpoint 使用Sources面板上的Event Listener Breakpoints(事件...

js 里面的 function 与 Function

function 是 js 的标识符 Function 是 js 里面的一个 构造函数 1、new function 与 new Function 的区别   new 运算符在 js 里面是 创建一个自定义的对象的实例 或者是 一个具有构造函数的本地对象的实例。     语法:new constructor [ ( [ arguments ] ) ]   ...

python_14(js)

第1章 图片方法 1.1 设置背景图:1.2 背景图问题:1.3 background-repeat; noa-repe 1.4 background-attachment: fixed1.5 background-position 1.6 background-position-x 1.7 截取局部1.7.1 透明色第2章 定位 2.1 定义形式2.2...