二进制图像文件转换为Base64编码

画布渲染图片，画布的toDataURL函数完成转换功能，画布在document对象中创建，js代码外面需要嵌入html环境。为避免跨域的问题，从本地服务器中取图片。访问该html文件在控制台看到图片转换出的Base64编码。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8"/>
		<title>Document</title>
	</head>
	<body>
				<script type="text/javascript">
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 dataURL=canvas.toDataURL("image/png");
	return dataURL;
}
function main(){
	var img = document.createElement('img');
	img.src = 'http://localhost/files/process.png';
	img.onload = function(){
		var data=getBase64Image(img);
		var img1 = document.createElement("img");
		img1.src = data;
		document.body.appendChild(img1);
		console.log(data);
	}
}

main()
				
				</script>
				</body>
</html>

js的encodeURI函数编码正常字符为URL字符，decodeURI函数解码URL字符为正常字符

参考链接：js获取img元素里面的图片的base64编码

本文创建于2021年 09月 05日星期日 13:45:28 CST，修改于2021年 09月 05日星期日 13:45:28 CST