图片转base64编码

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/AiHuanhuan110/article/details/90599134

主要代码:

// 创建FileReader
var reader = new FileReader();
// 读取内容,读取完整则返回base64编码文件
reader.readAsDataURL(file);
//---------以上已完成图片到base64编码的转换------
// 读取操作完成后的方法
reader.onload = function () {
    // this.result
}

完整示例:

<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<title>图片转base64</title>
	<style>
		.show-img,.show-base64{
		width:400px;
		height: 400px;
		margin-top: 20px;
		border: 1px solid #333;
		display: inline-block;
		margin-left: 20px;
		word-wrap: break-word;
		overflow: scroll;
	}
	</style>
</head>

<body>
	<div class="upload">
		<input type="file" id="img_upload">
	</div>
	<div class="show-base64">
		<p>base64编码:</p>
		<p id="base64Code"></p>
	</div>
	<div class="show-img">
		<p>编码后显示的图片:</p>
		<img src="" id="showImg">
	</div>
</body>
<script>
var imgUpload = document.getElementById('img_upload');
var showImg = document.getElementById('showImg');

imgUpload.addEventListener('change', readFile, false)

function readFile() {
	var file = this.files[0];
	if (!/image\/\w+/.test(file.type)) {
		alert("请确保文件为图像类型");
		return false;
	}
	// 创建
	var reader = new FileReader();
	//开始读取内容。一旦完成,result属性中将包含一个 data:URL 格式的字符串以表示所读取文件的内容。
	reader.readAsDataURL(file);

	//---------以上已完成图片到base64编码的转换------
	// 读取操作完成后的方法
	reader.onload = function () {
		showImg.src = this.result;
		base64Code.innerHTML = this.result;
	}
}
</script>

</html>
展开阅读全文

没有更多推荐了,返回首页