在日常开发中，将图片转换为 Base64 编码是一种常见的需求，它可以帮助我们在网页中嵌入图片或优化数据传输效率。今天给大家分享两种实现方式，简单又实用！💻

第一种方法是利用 FileReader 对象。通过 `readAsDataURL` 方法可以直接将图片文件转换为 Base64 字符串。代码如下：

```javascript

const fileInput = document.querySelector('input[type="file"]');

fileInput.addEventListener('change', (e) => {

const file = e.target.files[0];

const reader = new FileReader();

reader.onload = () => {

console.log(reader.result); // Base64 数据

};

reader.readAsDataURL(file);

});

```

第二种方法则是使用 canvas 元素。通过绘制图片到画布上，再调用 `toDataURL()` 获取 Base64 格式数据：

```javascript

const canvas = document.createElement('canvas');

const ctx = canvas.getContext('2d');

const img = new Image();

img.src = URL.createObjectURL(file);

img.onload = () => {

canvas.width = img.width;

canvas.height = img.height;

ctx.drawImage(img, 0, 0);

const base64 = canvas.toDataURL(); // Base64 数据

};

```

这两种方式各有优劣，大家可以根据实际场景选择适合的方法哦！😉