JS 实现图片转 Base64


字数:366 阅读时长:1分钟 阅读:85

使用 ECharts 开发可视化图表,经常会遇到使用 base64 图片的情况,所以这里就使用 js 提供的 FileReader 对象实现一个图片转 base64 的小功能。

图片转base64

上代码

效果如上图所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>图片转base64</title>
</head>
<body>

<input type="file" id="image-input">
<br><br>
<textarea style="width: 800px;" id="base64-textarea" rows="20" cols="50"></textarea>

<script>
// 创建一个函数,接受一个图片文件作为参数
function convertImageToBase64(file) {
return new Promise((resolve, reject) => {
// 创建一个 FileReader 对象
const reader = new FileReader();

// 当读取完成时触发 onload 事件
reader.onload = () => {
// 将图片转换为 Base64 字符串
const base64String = reader.result;
resolve(base64String);
};

// 读取文件内容
reader.readAsDataURL(file);
});
}

// 选择图片文件的 input 元素
const inputElement = document.getElementById('image-input');
// 显示 Base64 字符串的文本域元素
const textareaElement = document.getElementById('base64-textarea');

// 监听 input 元素的 change 事件
inputElement.addEventListener('change', async (event) => {
// 获取选择的图片文件
const file = event.target.files[0];

try {
// 调用函数将图片转换为 Base64
const base64String = await convertImageToBase64(file);
// 将 Base64 字符串显示在文本域中
textareaElement.value = base64String;
} catch (error) {
console.error(error);
}
});

</script>
</body>
</html>

在线体验


欢迎访问:天问博客

本文作者: Tiven
发布时间: 2023-05-30
最后更新: 2024-01-12
本文标题: JS 实现图片转 Base64
本文链接: https://www.tiven.cn/p/4ebf7f7c/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^
个人邮箱: tw.email@qq.com
notification icon
博客有更新,将会发送通知给您!