Base64字符串转图片的完整教程

Base64字符串转图片是前端开发中经常用到的一个功能，可以方便的将图片插入到网页中去，而不需要引入外部的图片文件。本篇教程以JS为主，从选取图片、转换成Base64字符串、将Base64字符串转换成图片三个方面进行讲解。让我们一步步来学习吧。

一、选择图片

首先我们需要选择一个图片进行转换。在HTML中，我们可以使用input标签的type属性设置为file来创建一个选择文件的按钮，并且监听input的change事件。当选择完文件之后，change事件就会被触发，我们就可以通过这个事件来获取文件的信息了。

以下是获取文件信息的代码：

<input type="file" id="fileInput">

<script>
  const fileInput = document.getElementById("fileInput");
  fileInput.addEventListener("change", (event) => {
    const file = event.target.files[0];
    console.log(file);
  });
</script>

当我们选择了一个.jpg或者.png等图片文件之后，控制台就会输出这个文件对象的信息，包括文件名、文件大小等等。接下来，我们需要将这个文件转换成Base64字符串。

二、将图片转换成Base64字符串

在JS中，可以使用FileReader API来将文件转换成Base64字符串。通过调用FileReader对象的readAsDataURL方法可以将文件读取成一个data URL，我们可以通过这个data URL来获取Base64字符串。

以下是将图片转换成Base64字符串的完整代码：

<input type="file" id="fileInput">

<script>
  const fileInput = document.getElementById("fileInput");
  fileInput.addEventListener("change", (event) => {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.addEventListener("load", () => {
      const base64String = reader.result;
      console.log(base64String);
    });
    reader.readAsDataURL(file);
  });
</script>

首先获取file对象，然后创建一个FileReader对象。监听FileReader对象的load事件，在load事件被触发时，我们就可以通过reader.result获取到Base64字符串。最后调用readAsDataURL方法将文件读取成data URL。

三、将Base64字符串转换成图片

我们已经成功地将图片文件转换成了Base64字符串，现在需要将这个Base64字符串转换成图片。HTML的img标签可以很容易地将Base64字符串显示为图片。我们只需要为img的src属性设置为Base64字符串就可以了。

以下是将Base64字符串转换成图片的完整代码：

<input type="file" id="fileInput">
<img id="image" alt="">

<script>
  const fileInput = document.getElementById("fileInput");
  const image = document.getElementById("image");
  fileInput.addEventListener("change", (event) => {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.addEventListener("load", () => {
      const base64String = reader.result;
      image.src = base64String;
    });
    reader.readAsDataURL(file);
  });
</script>

我们在HTML中创建了一个img标签，并设置id属性为"image"。在JS中获取这个img标签的元素，并为其src属性设置为Base64字符串。

总结

通过上面的教程，我们已经学会了如何将图片文件转换成Base64字符串，并且将Base64字符串转换成图片。Base64字符串转图片在前端开发中是一个经常用到的功能，掌握这个技能对于我们的工作会非常有帮助。