图片url转base64

最新推荐文章于 2024-07-16 09:46:31 发布

程序小新潮

最新推荐文章于 2024-07-16 09:46:31 发布

阅读量109

点赞数

文章标签： javascript 前端 vue

本文链接：https://blog.csdn.net/m0_49320545/article/details/128491323

版权

这段代码展示了如何通过JavaScript的XMLHttpRequest和FileReader接口将图片URL转换为Base64编码。首先，创建一个XMLHttpRequest对象，设置响应类型为blob，然后在onload函数中处理响应。当请求成功时，使用FileReader读取blob内容，并将其转化为data URL（Base64编码）。此方法常用于前端图片处理和上传。

摘要由CSDN通过智能技术生成

	const getBase64 = (imgUrl) => {
		return new Promise((resolve) => {
			window.URL = window.URL || window.webkitURL;
			var xhr = new XMLHttpRequest();
			xhr.open("get", imgUrl, true);
			// 至关重要
			xhr.responseType = "blob";
			xhr.onload = function () {
				if (this.status == 200) {
					//得到一个blob对象
					var blob = this.response;
					// 至关重要
					let oFileReader = new FileReader();
					oFileReader.onloadend = function (e) {
						// 此处拿到的已经是 base64的图片了
						let base64 = e.target.result;
						resolve(base64);
					};
					oFileReader.readAsDataURL(blob);
				}
			};
			xhr.send();
		});
	};