【JS】img标签使用base64图片以及如何将图片转为base64格式

在HTML中使用<img>标签加载base64图片非常简单，只需要将图片的base64编码作为src属性的值即可。

例如：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...">

要将图片转换为base64格式，可以使用JavaScript中的FileReader API。以下是一个简单的示例函数，它接受一个文件对象，并返回一个base64编码的图片字符串。

function convertToBase64(file, callback) {
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function (event) {
    callback(event.target.result);
  };
  reader.onerror = function (error) {
    console.log('Error: ', error);
  };
}
 
// 使用方法：
// 假设你有一个<input type="file">元素和一个id为'output'的<img>元素
document.querySelector('input[type=file]').addEventListener('change', function (e) {
  convertToBase64(e.target.files[0], function (base64) {
    document.getElementById('output').src = base64;
  });
});

在这个示例中，当用户选择一个文件后，convertToBase64函数将文件转换为base64格式，然后将转换后的base64字符串赋值给<img>标签的src属性。