热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

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

若想点击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 ) {
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


推荐阅读
  • 开发日志:高效图片压缩与上传技术解析 ... [详细]
  • 本文介绍了如何利用摄像头捕捉图像,并将捕获的图像数据保存为文件。通过详细的代码示例,展示了摄像头调用的具体实现方法,适用于多种应用场景,如安全监控、图像处理等。 ... [详细]
  • python发送邮件(带附件)、发送给多人、抄送给多人的示例#!usrbinenvpython #-*-encoding:utf-8-*-imports ... [详细]
  • 手动将 Webpack 2.x 迁移到最新版 Webpack 4.8.3(当前 GitHub 最新版本)
    手动webpack2.x升级到webpack4.8.3(当前github最新版本)一直使用的webpack是2.3.3版本作为生产环境使用,看了react-create- ... [详细]
  • CSS Border 属性:solid 边框的使用详解
    本文详细介绍了如何在CSS中使用solid边框属性,包括其基本语法、应用场景及高级技巧,适合初学者和进阶用户参考。 ... [详细]
  • 二维码的实现与应用
    本文介绍了二维码的基本概念、分类及其优缺点,并详细描述了如何使用Java编程语言结合第三方库(如ZXing和qrcode.jar)来实现二维码的生成与解析。 ... [详细]
  • HTML:  将文件拖拽到此区域 ... [详细]
  • 如何将TS文件转换为M3U8直播流:HLS与M3U8格式详解
    在视频传输领域,MP4虽然常见,但在直播场景中直接使用MP4格式存在诸多问题。例如,MP4文件的头部信息(如ftyp、moov)较大,导致初始加载时间较长,影响用户体验。相比之下,HLS(HTTP Live Streaming)协议及其M3U8格式更具优势。HLS通过将视频切分成多个小片段,并生成一个M3U8播放列表文件,实现低延迟和高稳定性。本文详细介绍了如何将TS文件转换为M3U8直播流,包括技术原理和具体操作步骤,帮助读者更好地理解和应用这一技术。 ... [详细]
  • 本文深入解析了HTML框架集(FRAMESET)的使用方法及其应用场景。首先介绍了几个关键概念,如如何通过FRAMESET标签将主视图划分为多个独立的区域,每个区域可以加载不同的HTML文件。此外,还详细探讨了FRAMESET在实际开发中的优缺点,并提供了具体的实例代码,帮助开发者更好地理解和应用这一技术。 ... [详细]
  • 通过使用七牛云存储服务,本文详细介绍了如何将本地图片高效上传至云端,并实现了内容的便捷管理。借助七牛云的 Python SDK,文章提供了从认证到文件上传的具体代码示例,包括导入必要的库、生成上传凭证以及处理文件路径等关键步骤。此外,还探讨了如何利用七牛云的 URL 安全编码功能,确保数据传输的安全性和可靠性。 ... [详细]
  • 在 Vue 项目中,为了提高页面加载速度和优化用户体验,实现图片上传前的压缩处理至关重要。本文介绍了如何通过集成第三方库和自定义组件,有效减小图片文件大小,确保在不影响图像质量的前提下,提升应用性能。 ... [详细]
  • 在Python中,通过实现一个便捷的函数来解码Base64编码的数据,并将其转换为数组形式。该函数能够将Base64字符串解码为字节数组,便于进一步处理。例如,可以使用如下代码片段进行解码:`base64_decode_array('6gAAAOsAAAD')`。这为处理二进制数据提供了高效且简洁的方法。 ... [详细]
  • 整合百度UEditor编辑器于ASP后端的实现步骤与技巧
    随着微软停止对XP系统的支持,公司已全面升级至Windows 7。早期网站创建时使用的编辑器仅兼容IE6浏览器,而如今系统更新后,原有的编辑器已无法满足新环境的需求。本文详细介绍了如何将百度UEditor编辑器整合到ASP后端,包括实现步骤和实用技巧,确保网站在新系统下仍能高效运行并提供良好的用户体验。 ... [详细]
  • 后台生产验证码code和byte[]图片引用命名空间usingSystem.Drawing;usingSystem.Drawing.Drawing2D;usingSystem.Dr ... [详细]
  • 传播恶意软件最有效帮手:超95%的PowerShell脚本都是恶意脚本
    对很多IT专业人士来说,Powershell的确是Windows系统中一个相当强大的工具,而且微软也有意将PowerShell作为Windows系统的默 ... [详细]
author-avatar
佛山越野e族99_990
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有