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

更新日期: 2018-11-05阅读量: 8701标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

原生 JS 的 Base64 转码

JavaScript 原生提供两个 Base64 相关的方法:btoa():任意值转为 Base64 编码,atob():Base64 编码转为原来的值。注意:这两个方法不适合非 ASCII 码的字符,会报错。

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

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

js base64的实现

base64是用规定的64种字符来表示任意二进制数据的一种编码格式,base64编码不提供加密,只是将一种形式的数据转化为另一种形式。Base64编码使用二进制表示,字符串的每一个字符由8个字节表示

base64编码

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

javascript图片转换base64,以及如何将base64的数据转换成图片

这篇文章主要讲解通过原生js,将图片地址转换为base64格式后显示的方法,以及base64的图片数据如何转换为file文件并提交。

Base64 编码与解码详解

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

base64原理浅析

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

base64的实现原理

base64是处理二进制数据的一种编码方式,可用于把二进制数据编码成64个可打印的字符。编码是把字符串转化成二进制数据的一种方式,计算机发展的过程中,最先定义了ASCII编码,用于表示英文字符和一些英文字符为128个字符

图片上传转base64

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

原生js实现base64编码方法

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

点击更多...

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