js 转base64|极客笔记

js 转base64

在前端开发中，经常会遇到需要将文件或图片转换成base64格式的需求。base64是一种用64个字符来表示二进制数据的方法，通常用于在网页中直接显示图片或通过ajax传输文件等场景。本文将详细介绍如何使用JavaScript来实现文件或图片转换成base64格式的方法。

1. 文件转base64

下面通过一个实例来演示如何将本地的文件转换成base64格式。

// 选择文件，监听change事件
document.getElementById('fileInput').addEventListener('change', function() {
  var file = this.files[0];
  var reader = new FileReader();

  reader.onload = function(e) {
    var base64Str = e.target.result;
    // 将base64字符串显示在页面上
    document.getElementById('result').textContent = base64Str;
  }

  reader.readAsDataURL(file);
});

在上面的示例中，我们使用了FileReader对象来读取文件，并在onload回调函数中获取到文件的base64字符串。最后将显示在id为result的元素中。

<input type="file" id="fileInput">
<div id="result"></div>

用户选择本地文件后，将会显示该文件的base64字符串。

2. 图片转base64

除了文件，我们也可以将图片转换成base64格式。

// 创建一个Image对象
var img = new Image();
img.crossOrigin = 'Anonymous'; // 处理跨域图片

// 监听图片加载完成事件
img.onload = function() {
  var canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;

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

  var base64Str = canvas.toDataURL('image/png');
  // 将base64字符串显示在页面上
  document.getElementById('result').textContent = base64Str;
}

// 设置图片源
img.src = 'http://example.com/test.jpg';

在上述代码中，我们创建了一个Image对象，并监听了其加载完成事件。在事件处理函数中，我们创建了一个canvas元素，将图片绘制到canvas上，并调用toDataURL方法将图片转换成base64格式。