將base64轉為圖片

HTML的img標簽可以很容易地將Base64字符串顯示為圖片。只需要為img的src屬性設置為Base64字符串即可。

<img src="'data:image/png;base64,'+base64數據" />

也可以通過js控制img添加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>

將圖片轉為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。