前端图片转Base64编码

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

效果图

代码

步骤说明：

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

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

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

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

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

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

    
    
    


    
    
    

    复制 Base64 编码