HTML之img展示base64图片

最新推荐文章于 2024-04-18 08:18:26 发布

流沙QS

最新推荐文章于 2024-04-18 08:18:26 发布

阅读量3.5k

点赞数

分类专栏： Java专栏文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/gengzhy/article/details/125414326

版权

Java专栏专栏收录该内容

46 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	<style>
	textarea {
		display: block;
		width: 800px;
		height: 34px;
		overflow: hidden;
		padding: 5px 10px;
		margin: 30px auto 0;
		resize: none;
		line-height: 24px;
		font-size: 16px;
		color: #666;
		border: 1px solid #ccc;
		outline: 0 none;
		box-shadow: 0 0 5px #999;
		border-radius: 3px;
		box-sizing: border-box;
		transition: all 200ms linear;
	}
	textarea:focus {
		color: #277fe4;
		border-color: #2196f3;
		box-shadow: 0 0 5px #03a9f4;
	}
	.btn-area {
		margin: 30px auto 0;
		text-align: center;
	}
	.i {
		text-align: center;
	}
	</style>
</head>
<body>
	<div>
		<p class="i">
			<img id="codeImg" src="#" alt="Base64图片"  />
		</p>
		<div class='btn-area'>
			<input value="展示" type="button" onclick="show()" />
			<input value="清理" type="button" onclick="clean()" />
		</div>
		<textarea placeholder="请输入base64图片数据" oninput="areaListen(this)" id="source" rows="1" cols="60" autofocus></textarea>
	</div>
    <script>
		function show() {
			$("codeImg").src="data:image/png;base64," + $("source").value.replace(/\\r\\n/g, '');
		}
		function clean() {
			$("source").value = "";
			console.log("清理完毕")
		}
		function areaListen(dom) {
		  dom.style.height = 'auto';
		  dom.style.height = dom.scrollHeight + "px";
		  $("codeImg").src="data:image/png;base64," + dom.value.replace(/\\r\\n/g, '');
		}
		
		function $(id) {
		  return document.getElementById(id);
		}
    </script>
    
</body>
</html>

base64图片示例

/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0a\r\nHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIy\r\nMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoAFgDASIA\r\nAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQA\r\nAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3\r\nODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWm\r\np6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEA\r\nAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSEx\r\nBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElK\r\nU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3\r\nuLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD2bSdJ\r\n02TRrGSTT7Rna3jLM0KkklRyeKuf2Npf/QNs/wDvwv8AhRo3/ID0/wD69o//AEEVR8Xa4/hvwpqG\r\nrxQ+dJbR7lTsSSACfYZyfYGlSpc7jGK1djOMY8qdi9/Y2l/9A2z/AO/C/wCFH9jaX/0DbP8A78L/\r\nAIV816Z5XjZp73xRreszTbjtS2jEqp9EBLAf8AC8delekeBtSsfBul3Fja2PibWElm80TR6VJiMY\r\nACYOOmCeP71erjcsoYWDTqXmt1ytfi/8hKz15dD0ibStNigkkTR7aZkUsIo4YwzkDoN2Bk9OSB7i\r\nsrw3pVjcWd1dS2UDxz3kzwCW3wyR7toUqwBXBU/L2+tYzeNxfzpvv9DsIreYiSC41dreaVlxgMGi\r\nDoobcCrKpYqP4Mh87Q9YnjtvtlhrukyancSMbrTEj8yWQ+b88pRZAzSJGHOFUFlAXBwm3ylGNm7C\r\nfLdWR6H/AGNpf/QNs/8Avwv+FH9jaX/0DbP/AL8L/hVSG1v7+CO5/wCEgbZIoaNtPgiWJ0IyG+cS\r\nE5z1DYxjjuX/ANiiU4vNV1K5I+6PtHkbf+/ITOf9rOMcY5yckexdl2LH9jaX/wBA2z/78L/hR/Y2\r\nl/8AQNs/+/C/4Vzfj+/uPD3hG51Gx1i7s5bOALEiiOQSsSFXeZEZjyR3BNc14Q8W69rNjai0vL3V\r\n9VeHdc/aYoYLK2LMQDlYxI7LgEqDgjODkYrtp5bKeH+sJq17df8AK34ibinZo73VtJ02PRr6SPT7\r\nRXW3kKssKgghTyOKKyLfw5eafpmp6nrOrT6nqsllJHvY7IoVKDcscYwoyUBJwCcD3yV4uPhCE0oO\r\n5x4q11ZHR6N/yA9P/wCvaP8A9BFVfEscNxo0tnM0WLrMKxyEDzCQTtGepwDx7Va0b/kB6f8A9e0f\r\n/oIrlvifo9vrnhy2tbkzqsd5HKrQ9jypJ9QA5PGOnUV6uBjGdWEZOy013sd0b8qseKeJ/By+G4W1\r\nbTbua1kgcExscEZOPlbr36V694Wnu/Ffwys3uxGkN1FKl6wX55VUlcAYwN2DluoAwBlty+eT/DiC\r\ncILrxRf6iqn5YTCVx+JdsflXtXhnTF03wzb2KRiONI9qp6CvpM6xdOrhYQ5+ealvZrS22uu5MYNN\r\nu1kfO9tqGmxQaJE2kWb3FlqjpeSSQr86FsIr8cjr1z0r134d6BpFzolzc3Ok2s7ai3mSNNArB48h\r\nkByORwrfXmuU1L4fJPH4iRZyn226SXd5WfLIYn15zlvTrXpsepaX4S8PWq3Mm1zGEt7WP5pp2GFC\r\nRp1Y5KjjpnnA5qc2xdKvSjTw9229tdvi/Nv7hQptO7PN/E/hi00P4jJqkfhiHUtE8rL2FlEuUfaA\r\nW8vo3TOBxyT1Jy7Q7vwpLqc934dj1WZ9SISDSbGaW08qQDJZ2RwFTgc4OOSAcHF5/Deta/4p1fVo\r\n7+Xw8t4sbCAtulOxVCFtpGzIHIDZHTJ61P4RsLjwPFqV4C19bGNvPIAjWJ15jKjokZy4djnGUY4U\r\nOw4qnsI0LXTklFW1Xm77rR9U1+LF7zd4rT+tjD+J9prumeD7W81C98pDcCCHTllecIGzJmWSQkyu\r\nNpXn5RgFQK9O8L6csej2KGMC3giTYMY8yTqXPqM4x75PPymuE8Y6vf8Ai7QtItz4fv7O7Ny0knmA\r\niO2Yb4s+YVGWGSwxyCFr1XTknj0+BLiSOSUL8zRxlFPpgEnHHvWGMlKOGp0pRs05XtbyVtPTfZ3J\r\nhHmk3uhms/8AID1D/r2k/wDQTRRrP/ID1D/r2k/9BNFfNYz4kYYz4kU9J1bTY9GsY5NQtFdbeMMr\r\nTKCCFHB5pb/W9LS3Dtc2lxGG/eKs6lgvcqv8RHHA5xnGTgEoropVXdI09tJR0BJ/D0b7kutPDevn\r\nJ/jVr+2NKAx/aVn/AN/1/wAaKKHXm9y/bSONvPEtxrdzLaeH0sbG0JAl1TUzsOcc+XA2GZhuBDNh\r\nSVYe9aulaV4V0q/k1L7dbXeqSsWe/u7hHmJ5HHQIAp24QKMADtRRXXXxc6bdKGi29fX/AC28hutL\r\nY1nvdDkZme9sSW6kzr/jSNfaOLaSGDUrOHeCAyTJke/WiiuT28xe2kYGn6VpljGtp/btm2nRMGgt\r\n/NX90ckkA5+70IHbnnGAvTrrGlKoUalZ4HH+vX/Giim8RNqzEqrSsipq2rabJo19HHqFoztbyBVW\r\nZSSSp4HNFFFcWJm5NXOXEScmrn//2Q==