Base64转二进制文件流以及转File、图片转Base64、二进制流转Base64

这篇具有很好参考价值的文章主要介绍了Base64转二进制文件流以及转File、图片转Base64、二进制流转Base64。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、Base64转二进制文件流

方法一:

/**
 * Base64字符串转二进制流
 * @param {String} dataurl Base64字符串(字符串包含Data URI scheme,例如:data:image/png;base64, )
 */
function dataURLtoBlob(dataurl) {
	var arr = dataurl.split(","),
		mime = arr[0].match(/:(.*?);/)[1],
		bstr = atob(arr[1]),
		n = bstr.length,
		u8arr = new Uint8Array(n);
	while (n--) {
		u8arr[n] = bstr.charCodeAt(n);
	}
	return new Blob([u8arr], {
		type: mime,
	});
}

调用示例:

let dataurl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC';
let blob = dataURLtoBlob(dataurl);

方法二:

/**
 * Base64字符串转二进制流
 * @param {String} base64 Base64字符串(字符串不包含Data URI scheme)
 * @param {String} type 文件类型(例如:image/png)
 */
function base64toBlob(base64, type) {
	// 将base64转为Unicode规则编码
	let bstr = atob(base64),
		n = bstr.length,
		u8arr = new Uint8Array(n);
	while (n--) {
		u8arr[n] = bstr.charCodeAt(n); // 转换编码后才可以使用charCodeAt 找到Unicode编码
	}
	return new Blob([u8arr], {
		type,
	})
}

调用示例:

let dataurl = 'iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC';
let blob = base64toBlob(dataurl, 'image/png');

 2、Base64转File

方法一:

/**
 * Base64字符串转File文件
 * @param {String} dataurl Base64字符串(字符串包含Data URI scheme,例如:data:image/png;base64, )
 * @param {String} filename 文件名称
 */
function dataURLtoFile(dataurl, filename) {
	let arr = dataurl.split(',');
	let mime = arr[0].match(/:(.*?);/)[1];
	let bstr = atob(arr[1]);
	let n = bstr.length;
	let u8arr = new Uint8Array(n);
	while (n--) {
		u8arr[n] = bstr.charCodeAt(n);
	}
	return new File([u8arr], filename, {
		type: mime
	});
}

调用示例:

let dataurl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC';
let file = dataURLtoFile(dataurl, '文件名称');

方法二:

/**
 * Base64字符串转File文件
 * @param {String} base64 Base64字符串(字符串不包含Data URI scheme)
 * @param {String} filename 文件名称
 * @param {String} type 文件类型(例如:image/png)
 */
function base64toFile(base64, filename, type) {
	// 将base64转为Unicode规则编码
	let bstr = atob(base64);
	let n = bstr.length;
	let u8arr = new Uint8Array(n);
	while (n--) {
		u8arr[n] = bstr.charCodeAt(n); // 转换编码后才可以使用charCodeAt 找到Unicode编码
	}
	return new File([u8arr], filename, {
		type: type
	});
}

调用示例:

let dataurl = 'iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC';
let file = base64toFile(dataurl, '文件名称', 'image/png');

补充:

3、图片转Base64

/**
 * 图片转换为base64
 * @param {Object} img 图片对象
 */
function getBase64Image(img) {
	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);
	return dataURL;
}

调用示例:

let img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
// 图片地址
img.src = 'https://img2.baidu.com/it/u=1987571340,2982374133&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=500';
img.onload = () => {
	// 获得Base64
	let base64Str = getBase64Image(img);
	console.log(base64Str)
}

4、二进制流转Base64

方法一:

/**
 * 二进制流转Base64(字符串包含Data URI scheme)
 * @param {Object} data 二进制流
 * @param {String} type 文件类型(例如:image/png)
 */
function getDataURL(data, type) {
	return new Promise((resolve, reject) => {
		const blob = new Blob([data], {
			type
		});
		const reader = new FileReader();
		reader.readAsDataURL(blob);
		reader.onload = () => resolve(reader.result);
		reader.onerror = (error) => reject(error);
	});
}

调用示例:

/**
 * Base64转二进制流
 * @param {String} dataurl Base64字符串(字符串包含Data URI scheme,例如:data:image/png;base64, )
 */
function getBlob(dataurl) {
	var arr = dataurl.split(","),
		mime = arr[0].match(/:(.*?);/)[1],
		bstr = atob(arr[1]),
		n = bstr.length,
		u8arr = new Uint8Array(n);
	while (n--) {
		u8arr[n] = bstr.charCodeAt(n);
	}
	return {
		data: u8arr,
		type: mime
	};
}
// 获得二进制流(就不调接口了,先用Base64转成二进制流进行测试)
let dataurl =
	'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC';
let blob = getBlob(dataurl);
// 二进制流转Base64
getDataURL(blob.data, blob.type).then((base64) => {
	console.log(base64);
});

方法二:

/**
 * 二进制流转Base64(字符串不包含Data URI scheme)
 * @param {Object} data 二进制流
 */
function getBase64(data) {
	let base64 = btoa(new Uint8Array(data).reduce((data, byte) => data + String.fromCharCode(byte), ''));
	return base64;
}

调用示例:

// 获得二进制流(就不调接口了,先用Base64转成二进制流进行测试)
let dataurl =
	'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC';
let blob = getBlob(dataurl);
// 二进制流转Base64
let base64 = getBase64(blob.data);
console.log(base64);

5、补充

5.1 atob()

atob() 对经过 base-64 编码的字符串进行解码。你可以使用 window.btoa() 方法来编码一个可能在传输过程中出现问题的数据,并且在接受数据之后,使用 atob() 方法再将数据解码。例如:你可以编码、传输和解码操作各种字符,比如 0-31 的 ASCII 码值。 

使用:文章来源地址https://www.toymoban.com/news/detail-445170.html

let encodedData = window.btoa("Hello, world"); // 编码

5.2 btoa()

btoa() 方法可以将一个二进制字符串(例如,将字符串中的每一个字节都视为一个二进制数据字节)编码为 Base64 编码的 ASCII 字符串。

你可以使用这个方法来对可能遇到通信问题的数据进行编码,然后使用 atob() 方法来对数据进行解码。例如,你可以对 ASCII 中的控制字符(值为 0 到 31 的字符)进行编码。

使用:

const encodedData = btoa('Hello, world'); // 编码字符串
const decodedData = atob(encodedData); // 解码字符串

5.3 charCodeAt()

charCodeAt() 方法可返回指定位置的字符的 Unicode 编码,返回值是 0 - 65535 之间的整数,表示给定索引处的 UTF-16 代码单元。

字符串中第一个字符的位置为 0, 第二个字符位置为 1,以此类推。

使用:

var str = "Hello, world";
var code = str.charCodeAt(0);

5.4 fromCharCode()

fromCharCode() 可接受一个指定的 Unicode 值,然后返回一个字符串。

注意:该方法是 String 的静态方法,字符串中的每个字符都由单独的 Unicode 数字编码指定。使用语法: String.fromCharCode()。

使用:

var str = "Hello, world";
var code = str.charCodeAt(0);
var result = String.fromCharCode(code);

到了这里,关于Base64转二进制文件流以及转File、图片转Base64、二进制流转Base64的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • java图片转二进制流_java将文件转化成二进制流

    二进制流的主要编码格式是base64码。可以在网上找一些在线转base64编码的网站进行尝试转换。 例如:http://imgbase64.duoshitong.com/然后通过前端展现和下载。 前端显示二进制流图片(src中放置base64码及二进制流) 前端下载二进制流文件(herf中放置base64码及二进制流,download后面放

    2024年02月06日
    浏览(56)
  • flask.send_file实现文件下载、文件传输和二进制流传输

    在使用flask框架时,我们有时需要向前端传输文件。或者需要用户访问一个url时直接下载文件。这时可以使用flask.send_file()函数来实现相关的操作。 path_or_file:需要发送的文件路径或者二进制文件对象 mimetype:文件的MIME类型,如果没有设置,会尝试根据文件名进行检测 as_at

    2024年02月12日
    浏览(66)
  • 微信小程序接收二进制流文件(图片预览,文件打开)

     下面通过downloadOaFile接口获取到二进制流,即res.data 注意!!!直接用downloadOaFile获取的二进制流文件在写入时会导致文件损坏,必须在uni.request对象的属性中加上 如果不加,默认是 这一点非常重要,踩了好久的坑,而且这两点的区别在network的response中还看不出来,因为两者

    2024年02月16日
    浏览(54)
  • Vue 读取后台二进制文件流转为图片显示

    Vue 读取后台二进制文件流转为图片显示 后台返回格式 axios写法 重点 responseType: ‘blob’ , 使用的是res中的data blob 本文章参考 https://huaweicloud.csdn.net/63a56170b878a545459459f2.html

    2024年04月11日
    浏览(40)
  • Java 压缩多个文件为zip包(中间不生成临时文件,直接压缩为zip二进制流),以及解压zip包二进制流为文件

    这篇博客将提供俩种方法, 提前生成要压缩的多个文件,然后读取文件夹多层或一层去遍历压缩zip包 直接用原始文件名称及二进制流,压缩返回zip包二进制流,中间不生成冗余文件; 很明显方法2更优一些; 解压zip文件或者zip文件流验证; 压缩俩个文件到zip包,并分别解析

    2024年02月06日
    浏览(52)
  • vue 后端返回二进制流-前端通过blob对象下载文件-图片

    前言 在实际开发中我们经常会遇见下载文件的场景,比如下载合同,下载文件 下载文件有2种方式,一种是后端返回二进制流,前端通过blob对象接受根据不同类型下载 还有一种把地址直接在浏览器新窗口打开浏览器打开pdf可以预览和下载,其他文件直接下载 但不管是那种方

    2024年02月05日
    浏览(75)
  • C++文件操作基础 读写文本、二进制文件 输入输出流 文件位置指针以及随机存取 文件缓冲区以及流状态

    文本文件一般以行的形式组织数据。 包含头文件: #include fstream 类: ofstream(output file stream) ofstream 打开文件的模式(方式):类内open()成员函数参数2.参数1是文件存储/创建路径 例如:fout.open(filename,ios::app); 对于 ofstream,不管用哪种模式打开文件,如果文件不存在,都会创

    2024年01月25日
    浏览(49)
  • vue3+axios:图片链接转换成二进制文件流后并提交服务器

    1、使用Image类创建一个新的图片。 2、将图片转换成base64。 3、将base64图片使用File类转换成二进制文件流 4、将二进制文件流使用 FormData类转换成binary类型提交服务器。 Image类创建一个新的图片 图片转换成base64 base64转换成二进制文件流 二进制流文件提交到服务器

    2024年02月15日
    浏览(44)
  • 前端将base64图片转换成file文件

    1、base64转成file具体代码 文件转换过程: 2、代码解析 ​ 该方法涉及知识点较多,首先因为base64的前缀信息部分与文件内容部分是通过 , 进行连接的, data:image/***;base64(前缀信息),xxxxx(文件内容) ,所以利用 split() 方法对base64进行分割,将前缀文件信息,与文件内容分隔开。得

    2024年01月20日
    浏览(53)
  • 前端FileReader对象实现图片file文件转base64

    1、file转base64具体代码 2、原理解析 ​ 上面封装的方法,其原理主要是借助 FileReader 对象来实现图片格式的转换, FileReader 对象中的 readAsDataURL() 方法,可以读取一个 File 或 Blob 类型的文件,并将其转换为base64格式的字符串。但要注意的一点是:我们通过 readAsDataURL() 方法去读

    2023年04月09日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包