图片 vs. Base64

🏷️ 工具

本站地址

图片 vs. Base64

<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>