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字元串轉圖片在前端開發中是一個經常用到的功能，掌握這個技能對於我們的工作會非常有幫助。