前端图片转Base64编码

_耀北

于 2024-09-09 11:43:41 发布

阅读量608

点赞数 21

文章标签：前端

本文链接：https://blog.csdn.net/weixin_72288930/article/details/142054995

版权

在前端将图片转为 Base64 编码，通常会通过使用 JavaScript 的 FileReader 对象。

效果图

代码

步骤说明：

1. 用户通过文件输入框选择图片。

2. FileReader 对象读取图片，并将其转为 Base64 编码。

3. 读取完成后，图片通过 img 标签预览，Base64 编码会显示在页面上。

4. 复制按钮：在页面中添加了一个按钮，当图片被加载并生成 Base64 编码后，按钮会显示出来。

5. Clipboard API：按钮点击时，利用 navigator.clipboard.writeText() 复制 Base64 编码到剪贴板。

6. 复制反馈：成功复制后会弹出提示，告知用户复制成功

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image to Base64</title>
</head>
<body>
    <input type="file" id="fileInput" />
    <img id="preview" src="" alt="Image preview" style="max-width: 300px; margin-top: 10px;">
    <p id="base64Output"></p>
    <button id="copyButton" style="display:none;">复制 Base64 编码</button>

    <script>
        document.getElementById('fileInput').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                
                // 读取文件完成后的回调
                reader.onload = function(e) {
                    const base64String = e.target.result;
                    document.getElementById('preview').src = base64String; // 展示图片
                    document.getElementById('base64Output').textContent = base64String; // 显示Base64编码
                    document.getElementById('copyButton').style.display = 'inline'; // 显示复制按钮
                };

                // 将文件读取为Base64字符串
                reader.readAsDataURL(file);
            }
        });

        // 复制Base64编码
        document.getElementById('copyButton').addEventListener('click', function() {
            const base64String = document.getElementById('base64Output').textContent;
            navigator.clipboard.writeText(base64String).then(() => {
                alert('Base64 编码已复制！');
            }).catch(err => {
                console.error('复制失败：', err);
            });
        });
    </script>
</body>
</html>