JavaScript图片的Base64编码以及转换详解

在进行前端开发时，我们会遇到需要将图片转换为Base64编码的情况，本篇攻略将会详细讲解JavaScript如何进行图片的Base64编码以及如何进行Base64编码的还原。

图片的Base64编码

在JavaScript中，可以使用FileReader的方法将图片读取为base64格式的字符串，具体步骤如下：

1. 获取图片文件

在HTML中，可以使用<input>元素来上传文件，应该为其添加change事件监听，当选中图片后执行回调函数，将选中的文件传入FileReader中以进行读取。

html
<input type="file" id="file-input">

```javascript
const fileInput = document.getElementById('file-input');

fileInput.addEventListener('change', event => {
const file = event.target.files[0];
// 接下来进行文件读取
});
```

1. 创建FileReader对象

FileReader是用来处理文件读取的接口，通过它可以读取本地文件返回Base64格式的字符串。使用new操作符创建一个FileReader对象。

javascript
const fileReader = new FileReader();

1. 将图片读取为Base64编码

在上一步中创建好FileReader对象后，可以调用其readAsDataURL()方法将文件读取为Base64编码。

javascript
fileReader.readAsDataURL(file);

1. 实时获取图片Base64编码

FileReader的readAsDataURL()方法是异步的，因此我们需要监听其onload事件来获取读取完成后的结果：Base64编码的字符串。

javascript
fileReader.onload = event => {
// 获取Base64字符串
const base64String = event.target.result;
console.log(base64String);
}

Base64编码的还原

在将图片转换为Base64编码后，需要将其还原为图片格式以进行保存或传输。可以使用canvas元素将Base64编码的字符串转换为图片，具体步骤如下：

1. 创建Image对象

Image对象用来处理图片的加载及渲染，因此我们需要使用它来处理将Base64编码的字符串转换为图片对象。使用new操作符创建一个Image对象。

javascript
const image = new Image();

1. 将Base64编码的字符串赋值给src属性

将Base64编码的字符串赋值给Image对象的src属性，进行加载及渲染。

javascript
image.src = base64String;

1. 等待图片加载完成

由于图片加载及渲染是异步完成的，因此我们需要监听其onload事件，待图片加载完成后执行回调函数。

```javascript
image.onload = () => {
// 创建Canvas对象
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

 // 设置Canvas尺寸
 canvas.width = image.width;
 canvas.height = image.height;

 // 将图片绘制到Canvas
 ctx.drawImage(image, 0, 0);

 // 将Canvas转换为Blob对象
 canvas.toBlob(blob => {
   // Blob对象即为还原后的图片
   console.log(blob);
 });

}
```

示例

下面通过两个示例来演示如何将图片进行Base64编码，并将其还原为图片格式。

示例1：将图片转换为Base64编码

<input type="file" id="file-input">
<button id="convert-btn">转换为Base64编码</button>

<script>
  const fileInput = document.getElementById('file-input');
  const convertBtn = document.getElementById('convert-btn');

  // 监听“转换为Base64编码”按钮的点击事件
  convertBtn.addEventListener('click', () => {
    const file = fileInput.files[0];
    const reader = new FileReader();
    reader.readAsDataURL(file);

    // 监听文件读取完成事件
    reader.onload = event => {
      const base64String = event.target.result;
      console.log(base64String);
    }
  });
</script>

示例2：将Base64编码还原为图片

<input type="file" id="file-input">
<div id="image-container"></div>

<script>
  const fileInput = document.getElementById('file-input');
  const imageContainer = document.getElementById('image-container');

  // 监听文件上传事件
  fileInput.addEventListener('change', () => {
    const file = fileInput.files[0];
    const reader = new FileReader();
    reader.readAsDataURL(file);

    // 监听文件读取完成事件
    reader.onload = event => {
      const base64String = event.target.result;
      const image = new Image();
      image.src = base64String;

      // 监听图片加载完成事件
      image.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = image.width;
        canvas.height = image.height;
        ctx.drawImage(image, 0, 0);
        canvas.toBlob(blob => {
          const imageUrl = URL.createObjectURL(blob);

          // 创建<img>元素显示还原后的图片
          const imageElement = document.createElement('img');
          imageElement.src = imageUrl;
          imageContainer.appendChild(imageElement);
        });
      }
    }
  });
</script>

以上就是关于JavaScript图片的Base64编码以及还原的详细攻略，希望能对您有所帮助。