base64轉換為圖片javascript

在前端開發中，我們經常需要將Base64編碼的字串轉換為圖片顯示在網頁上。這種轉換可以幫助我們在沒有伺服器支援的情況下，動態載入圖片並展示在頁面上。接下來，本文將介紹如何使用JavaScript將Base64編碼的字串轉換為圖片。

一、Base64編碼的原理

Base64編碼是一種將二進位資料轉換為可列印的ASCII字元的編碼方式。它將每三個位元組轉換為四個字符，並在末尾添加"="號（如果需要）。

例如，一個16位元的二進位數1111010100110000可以轉換為Base64編碼後的字串"5q0="。轉換的過程如下：

1. 將11110101分成兩個六位數的數：111101和010011。
2. 給這兩個六位的數字在最後分別加兩個0，變成11110100和01001100。
3. 將這兩個八位的數組合成一個16位的二進位數：1111010001001100。
4. 將這個二進位數轉換為十進位數，得到61676。
5. 將61676轉換為Base64編碼後的字元"5q0="。

二、JavaScript中將Base64編碼轉換為圖片

在前端開發中，我們經常會使用Ajax非同步請求取得Base64編碼字串，然後將其轉換為圖片並顯示在網頁上。以下是如何使用JavaScript將Base64編碼字串轉換為圖片的步驟：

1. 建立標籤，用於顯示圖片。

<img id="img" src="" alt="image">

2. 取得Base64編碼字串，並將其賦值給標籤的src屬性。

let base64Img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxglj
NBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";

document.getElementById("img").src = base64Img;

3. 如果需要使用JavaScript程式碼取得並處理Base64編碼字串，可以使用canvas來轉換。以下是透過canvas將圖片轉換為Base64編碼字串的範例程式碼。

let img = document.createElement("img");
img.src = "image.png";

img.onload = function() {
  let canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;

  let ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);

  let base64Img = canvas.toDataURL("image/png");

  document.getElementById("img").src = base64Img;
}

以上就是將Base64編碼轉換為圖片的方法。透過這種方法，我們可以在網頁中輕鬆顯示Base64編碼的圖片。

以上是base64轉換為圖片javascript的詳細內容。更多資訊請關注PHP中文網其他相關文章！