base64、Blob、ArrayBuffer、File之间的转换

本文链接：https://blog.youkuaiyun.com/Jeo_blue/article/details/109474097

本文详细介绍了JavaScript中base64与Blob、ArrayBuffer、File之间的相互转换方法，包括base64转Blob、Blob转base64、ArrayBuffer转base64、ArrayBuffer转Blob、Blob转ArrayBuffer、Blob转File以及将imgUrl转换为base64等操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

base64转Blob

const 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 });
}

Blob转base64

const blobToDataURL = (blob) => {
    let a = new FileReader();
    a.onload = function (e) { 
    	console.log(e.target.result);
    }
    a.readAsDataURL(blob);
}

ArrayBuffer转base64

const arrayBufferToBase64 = (buffer, mime) => {
  const str = String.fromCharCode(...new Uint8Array(buffer));
  const mime = mime || 'image/jpeg'
  return `data:${mime};base64,${window.btoa(str)}`;
}

ArrayBuffer转Blob

const arrayBufferToBlob = (buffer, mime) => {
	const blob = new Blob([buffer], {type: mime});
	console.log(blob);
}

Blob转ArrayBuffer

const blobToArrayBuffer = (Blob) => {
	let a = new FileReader();
    a.onload = function (e) { 
    	console.log(e.target.result);
    }
    a.readAsArrayBuffer(blob);
}

Blob转File

const blobToArrayBuffer = (Blob, fileName, mime) => {
	const files = new window.File(
	    [blob],
	    fileName,
	    { type: mime }
	);
	console.log(files);
}
//第一个参数可以是ArrayBuffer，ArrayBufferView，Blob，或者 DOMString 对象的 Array — 或者任何这些对象的组合。这是 UTF-8 编码的文件内容。

Blob转url

const blobToUrl = (Blob) => {
	let url = window.URL || window.webkitURL;
	let src = url.createObjectURL(blob);
	console.log(src);
}

imgUrl转base64

//参数是图片的URL地址
const imgUrltoBase64 = (imgUrl) => {
	let image = new Image();
	image.src = imgUrl + '?v=' + Math.random(); // 处理缓存
	image.crossOrigin = '*'; // 支持跨域图片
	image.onload = function () {
		let base64 = drawBase64Image(image);
		document.querySelector("#myImg").setAttribute('src', base64);
	}
}
const drawBase64Image = (img) => {
	let canvas = document.createElement('canvas');
	canvas.width = img.width;
	canvas.height = img.height;
	let ctx = canvas.getContext('2d');
	ctx.drawImage(img, 0, 0, img.width, img.height);
	let dataURL = canvas.toDataURL('image/png');
	return dataURL;
}