HTML之img展示base64图片
吴举
<!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==
类似资料：