Javascript 将图像转换为 base64

在Web开发中，我们需要将图像转换为base64编码进行传输、存储等操作。Javascript提供了一种便捷的方法来实现这一操作。

使用URL对象

我们可以使用URL对象的createObjectURL方法来将图像转换为base64编码:

var image = new Image();
image.src = 'image.jpg';
image.onload = function() {
  var canvas = document.createElement('canvas');
  canvas.width = this.width;
  canvas.height = this.height;

  var ctx = canvas.getContext('2d');
  ctx.drawImage(this, 0, 0);

  var dataURL = canvas.toDataURL();
  console.log(dataURL);
};

在这个例子中，我们首先创建一个Image对象并设置其src属性，然后在图像加载完成后，创建一个canvas元素，将图像绘制到其中，最后使用toDataURL方法生成base64编码的图像数据。

FileReader

另一种方法是使用FileReader对象:

var input = document.getElementById('input');
input.addEventListener('change', function() {
  var file = input.files[0];
  var reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function() {
    console.log(reader.result);
  };
});

在这个例子中，我们创建一个input元素，用户选择图像后，监听change事件，获取到选择的文件对象。然后使用FileReader对象的readAsDataURL方法，将图像转换为base64编码，最后在onload事件中获取到base64编码的图像数据。

以上两种方法均可以实现将图像转换为base64编码，具体使用哪种方法取决于具体需求。