图片 vs. Base64
🏷️ 工具
本站地址
html
<h2>图片转 Base64</h2>
<div class="input-group mb-3">
<input type="file" class="form-control" id="imageFile">
<button class="btn btn-primary" onclick="convertImageToBase64()">转换为 Base64</button>
</div>
<textarea id="base64String" rows="10" cols="50" readonly class="form-control mb-3"></textarea>
<div class="input-group mb-3">
<button class="btn btn-primary" onclick="copyBase64String()">复制 Base64 内容</button>
<button class="btn btn-primary" onclick="copyBase64String(true)">复制 Base64 内容(带 a 标签)</button>
</div>
<script>
function convertImageToBase64() {
// 创建一个 FileReader 对象
var reader = new FileReader();
// 选择要转换的图片文件
var imageFile = document.getElementById("imageFile").files[0];
// 监听 FileReader 的 load 事件,对图片文件进行处理
reader.onload = function(event) {
// 获取转换后的 Base64 格式字符串
var base64String = event.target.result;
// 将 Base64 字符串显示在文本区域中
document.getElementById("base64String").value = base64String;
};
// 开始读取图片文件,将其转换为 Base64 格式字符串
reader.readAsDataURL(imageFile);
}
function copyBase64String(withTag = false) {
// 获取文本区域中的 Base64 字符串
var base64String = document.getElementById("base64String").value;
if (withTag) {
base64String = "<img src=\"" + base64String + "\"/>"
}
// 创建一个临时文本输入框
var tempInput = document.createElement("input");
tempInput.setAttribute("type", "text");
tempInput.setAttribute("value", base64String);
// 将临时文本输入框添加到页面中
document.body.appendChild(tempInput);
// 选中临时文本输入框中的内容
tempInput.select();
// 复制选中的内容
document.execCommand("copy");
// 移除临时文本输入框
document.body.removeChild(tempInput);
// 提示复制成功
showTip("已复制 Base64 内容", "info");
}
</script>
<h2>显示 Base64 为图片</h2>
<textarea id="base64StringForDisplay" rows="10" cols="50" class="form-control mb-3"></textarea>
<div class="input-group mb-3">
<button class="btn btn-primary" onclick="displayBase64StringToImage()">显示为图片</button>
</div>
<img id="displayImage" src="" />
<script>
function displayBase64StringToImage() {
// 获取文本区域中的 Base64 字符串
var base64String = document.getElementById("base64StringForDisplay").value;
// 显示 Base64 到图片
document.getElementById("displayImage").setAttribute("src", base64String);
}
</script>