效果
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片转base64</title>
</head>
<style>
input {
margin: 5px 0;
}
#box {
width: 500px;
padding: 10px;
display: flex;
justify-content: space-between;
border: 1px solid #000;
}
textarea {
margin: 10px 0;
display: block;
width: 500px;
height: 309px;
padding: 10px;
border: 1px solid #000;
text-align: justify;
resize: none;
}
img {
max-width: 500px;
max-height: 407px;
display: none;
padding: 10px;
border: 1px solid orange;
margin: 0 0 0 60px;
}
</style>
<body>
<h3>图片转base64</h3>
<p>部分网络图片地址无法转换，可以下载到本地在进行转换</p>
<div style="display: flex;justify-content: flex-start;">
<div>
<div id="box">
<div>
<div>
<input type="text" placeholder="http://" id="webImgUrl">
<input type="button" value="base64" onclick="getBase64(document.getElementById('webImgUrl').value)" />
</div>
<div>
<input type="file" id="file" onchange="checkImg(this.id)">
</div>
</div>
<div>
<input type="button" value="复制" onclick="copy()" />
<br>
<input type="button" value="清空" onclick="document.getElementById('base64text').value=''" />
</div>
</div>
<textarea id="base64text" placeholder="Base64编码说明
Base64编码要求把3个8位字节（3*8=24）转化为4个6位的字节（4*6=24），之后在6位的前面补两个0，形成8位一个字节的形式。 如果剩下的字符不足3个字节，则用0填充，输出字符使用'='，因此编码后输出的文本末尾可能会出现1或2个'='。
为了保证所输出的编码位可读字符，Base64制定了一个编码表，以便进行统一转换。编码表的大小为2^6=64，这也是Base64名称的由来。" readonly></textarea>
<p>图片大小：<span id="size" style="color: red">0</span>KB</p>
</div>
<div>
<img src="" alt="By.ProsperLee" id="imgshow">
</div>
</div>
<script>
function checkImg(fileId) {
var fileType = document.getElementById(fileId).files[0].type;
if (fileType.indexOf("image/") == -1) {
alert("仅支持图片转码");
document.getElementById(fileId).value = "";
} else {
getBase64(getFileUrl(fileId));
}
}
function getFileUrl(sourceId) {
var url;
var elUpload = document.getElementById(sourceId);
if (navigator.userAgent.indexOf("MSIE") >= 1) {
url = elUpload.value;
} else if (navigator.userAgent.indexOf("Firefox") > 0) {
url = window.URL.createObjectURL(elUpload.files.item(0));
} else if (navigator.userAgent.indexOf("Chrome") > 0) {
url = window.URL.createObjectURL(elUpload.files.item(0));
}
return url;
}
function getBase64(imgUrl) {
window.URL = window.URL || window.webkitURL;
var xhr = new XMLHttpRequest();
xhr.open("get", imgUrl, true);
xhr.responseType = "blob";
xhr.onload = function() {
if (this.status == 200) {
var blob = this.response;
document.getElementById('size').innerHTML = blob.size / 1024;
let fileReader = new FileReader();
fileReader.onloadend = function(e) {
let base64 = e.target.result;
document.getElementById('base64text').value = base64;
document.getElementById('imgshow').style.display = "inline-block";
document.getElementById('imgshow').src = base64;
};
fileReader.readAsDataURL(blob);
}
}
xhr.send();
}
function copy() {
var copy = document.getElementById("base64text");
copy.select();
document.execCommand("Copy");
alert("已复制，可贴粘！");
}
</script>
</body>
</html>
