js base64图片工具

最新推荐文章于 2024-07-31 16:45:57 发布

技术小萌新

最新推荐文章于 2024-07-31 16:45:57 发布

阅读量206

点赞数

文章标签： javascript base64 图片

本文链接：https://blog.csdn.net/qq_33719636/article/details/124734910

版权

网上的不好用所以自己写了一个：

html

<div id="container">
	<div id="recogn">
		<div style="margin-top:0">base64字符串:</div>
		<textarea rows="10" cols="30" id="text">
		</textarea>
		<div>
			<button type="button" onclick="recognJpg()" class="niceButton3">识别jpg</button>
			<button type="button" onclick="recognPng()" class="niceButton3">识别png</button>
		</div>
		<div>识别图片:</div>
		<img id="img"/>
	</div>
	<div id="parse">
		<div class="file">
			<label>上传图片</label>
			<input type="file" id="image" onchange="toBase64()" accept="image/jpeg,image/png,image/jpg"/>
		</div>
		<img width="320" height="180" id="base64Img">
		<div>解析base64字符串:</div>
		<textarea rows="10" cols="30" id="base64text">
		</textarea>
	</div>
</div>

js（jquery随便网上找个就行）

<script src="./js/jquery-1.8.0.min.js"></script>
<script>
function recognJpg(){
	let prefix = "data:img/jpg;base64,"
	let base64 = $("#text").val();
	let src;
	if(base64.indexOf("base64,") != -1){
		src = base64;
	}else{
		src = prefix + base64;
	}
	$("#img").prop("src",src);
}
function recognPng(){
	let prefix = "data:img/png;base64,"
	let base64 = $("#text").val();
	let src;
	if(base64.indexOf("base64,") != -1){
		src = base64;
	}else{
		src = prefix + base64;
	}
	$("#img").prop("src",src);
}
function toBase64(){
	var file = document.querySelector('input[type=file]').files[0];
	var reader = new FileReader();
	reader.onloadend = function () {
		$("#base64Img").attr("style","display:inline-block");
		$("#base64Img").attr("src",reader.result);
		$("#base64text").val(reader.result);
	}
	if (file) {
		reader.readAsDataURL(file);
	}
}
</script>

最终效果图: