JS将图片转Base64的两种方法

在JavaScript中，将图片转换为Base64编码的字符串有两种常见方法：

1. 使用FileReader API
2. 使用canvas元素

方法1：使用FileReader

function convertImageToBase64(img, callback) {
  var reader = new FileReader();
  reader.onload = function (event) {
    callback(event.target.result);
  };
  reader.readAsDataURL(img);
}
 
// 使用方法
var image = document.getElementById('myImage'); // 假设你有一个id为'myImage'的img元素
convertImageToBase64(image, function(base64Image) {
  console.log(base64Image);
});

方法2：使用Canvas

function convertImageToBase64(img, callback) {
  var canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  var base64Image = canvas.toDataURL('image/png'); // 可以改为其他格式，如 'image/jpeg'
  callback(base64Image);
}
 
// 使用方法
var image = document.getElementById('myImage'); // 假设你有一个id为'myImage'的img元素
convertImageToBase64(image, function(base64Image) {
  console.log(base64Image);
});

这两种方法都是异步的，因为它们需要等待图片加载完毕。在实际应用中，你可能需要将这些方法封装成函数，并确保在图片完全加载后再进行转换。