將base64轉(zhuǎn)為圖片

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

<img src="'data:image/png;base64,'+base64數(shù)據(jù)" />

也可以通過(guò)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>

將圖片轉(zhuǎn)為base64

在JS中，可以使用FileReader API來(lái)將文件轉(zhuǎn)換成Base64字符串。通過(guò)調(diào)用FileReader對(duì)象的readAsDataURL方法可以將文件讀取成一個(gè)data URL，我們可以通過(guò)這個(gè)data URL來(lái)獲取Base64字符串。

以下是將圖片轉(zhuǎn)換成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對(duì)象，然后創(chuàng)建一個(gè)FileReader對(duì)象。監(jiān)聽(tīng)FileReader對(duì)象的load事件，在load事件被觸發(fā)時(shí)，我們就可以通過(guò)reader.result獲取到Base64字符串。最后調(diào)用readAsDataURL方法將文件讀取成data URL。