关闭

图片保存到本地_原生js实现base64图片下载

时间: 2018-11-05阅读: 6929标签: base64

在项目开发过程中,经常会有图片导出的需求,实现思路:需要创建a标签,然后把base64的图片转为为blob对象,再通过URL.createObjectURL方法复制给a标签的href属性,最后添加添加事件的方法。


实现代码

function downloadFile(content, fileName) { //下载base64图片
	var base64ToBlob = function(code) {
		let parts = code.split(';base64,');
		let contentType = parts[0].split(':')[1];
		let raw = window.atob(parts[1]);
		let rawLength = raw.length;
		let uInt8Array = new Uint8Array(rawLength);
		for(let i = 0; i < rawLength; ++i) {
			uInt8Array[i] = raw.charCodeAt(i);
		}
		return new Blob([uInt8Array], {
			type: contentType
		});
	};
	let aLink = document.createElement('a');
	let blob = base64ToBlob(content); //new Blob([content]);
	let evt = document.createEvent("htmlEvents");
	evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型,是否冒泡,是否阻止浏览器的默认行为
	aLink.download = fileName;
	aLink.href = URL.createObjectURL(blob);
	aLink.click();
};


使用:

downloadFile('图片名称', 'data:image/png;base64,iVBORw0KGg....');


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1265

关闭

Base64 编码与解码详解

Base64 是基于 64 个可打印字符 A-Z、a-z、0-9、+、/ 来表示二进制数据的表示方法,常用于数据在网络中的传输。本篇将分别介绍其编码、解码以及实际运用。

Angular中实现文件转BASE64

这是一个so easy的问题,主要是记录一下angular 的模板变量的使用和组件中匿名方法 ,箭头方法使用的区别;如何将模板中的 DOM对象作为参数传入方法?

js原生Base64转码和解码函数btoa和atob的使用

javascript原生的api是支持,Base64的, window.btoa方法将普通字符串转为Base64字符串,window.atob将Base64字符串转为普通字符串,它们在现代浏览器中受到广泛的支持。

base64原理浅析

为什么图片转成Base64编码,就可以直接内联到HTML中显示呢?为什么Base64编码后,体积会增大1/3呢?如果你对此也有疑问的话,就往下一看究竟吧。

利用PHP将图片转换成base64编码的实现方法

base64是当前网络上最为常见的传输8Bit字节代码的编码方式其中之一。base64主要不是加密,它主要的用途是把某些二进制数转成普通字符用于网络传输。由于这些二进制字符在传输协议中属于控制字符,不能直接传送,所以需要转换一下

base64编码

二进制的数据,每个字符的取值范围都是 [0, 255] ,作为ascii码解析时,只有部分可打印。比如,我用文本编辑器vim打开一张jpeg图片,会发现内容是乱码。

php端实现 DES+BASE64 解密

什么是Base64 格式字符串?Base64是一种基于64个可打印字符来表示二进制数据的表示方法。通常是52个大小字母和10个数字,以及+,/两个字符,还有个=用于补缺。

原生js实现base64编码方法

base64是一种图片编码方式,用一长串超长的字符串表示图片,在加载的时候会直接以字符串的形式加载出来,减少了图片加载的http请求,正常加载服务器静态资源的时候都应该是通过http请求回来,每加载一张图片时需要发起一次http请求

js实现字符串/base64的编码和解码

JavaScript对字符串/base64的编码和解码;Base64其实是一种简单的置换加密方式,但是BASE64的用处往往并不是为了防止信息泄露,而且为了方便传输,进过BASE64编码后的信息会比原始信息长,大概是4/3倍。

图片上传转base64

做的过程中本来想用taro-ui里的那个图片上传,但是样式想自定义没搞定,结果后来就用Taro.chooseImage了。h5模式返回的是一个blob对象,然后自己转成base64了。微信小程序自己有方法。原来想用multipart的方式

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!