JS 实现图片转 Base64 的两种代码方法

在前端开发中，经常会遇到需要将图片转换为 Base64 编码的需求。这样做可以方便地在数据中嵌入图片，减少网络请求，提高应用的性能和用户体验。下面将介绍两种使用 JavaScript 实现图片转 Base64 的代码方法。

方法一：使用 FileReader 对象

需要获取到要转换的图片文件。可以通过<input type="file">元素来选择文件。

document.querySelector('input[type="file"]').addEventListener('change', function(e) {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onload = function() {
    const base64String = reader.result;
    console.log(base64String);
  };

  reader.readAsDataURL(file);
});

在上述代码中，当选择图片文件后，创建一个FileReader对象。通过readAsDataURL方法读取文件，并在onload事件中获取到转换后的 Base64 字符串。

方法二：使用canvas元素

function imageToBase64(url, callback) {
  const img = new Image();
  img.crossOrigin = 'anonymous';
  img.onload = function() {
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;

    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, img.width, img.height);

    const base64String = canvas.toDataURL();
    callback(base64String);
  };
  img.src = url;
}

// 使用示例
imageToBase64('image.jpg', function(base64String) {
  console.log(base64String);
});

这种方法先创建一个Image对象加载图片，然后使用canvas的drawImage方法将图片绘制到画布上，最后通过toDataURL方法获取 Base64 编码。

总结

以上两种方法都可以实现图片转 Base64 的功能，具体使用哪种方法可以根据项目的需求和场景来选择。在实际应用中，要注意处理异常情况，比如文件读取失败、图片加载错误等，以保证程序的稳定性和可靠性。

通过掌握这两种图片转 Base64 的方法，开发者能够更加灵活地处理图片数据，为构建丰富多样的前端应用提供有力支持。