在 HTML 中顯示 Base64 影象

Subodh Adhikari 2023年1月30日 2022年1月2日
  1. 在 HTML 中使用 img 標籤顯示 Base64 影象
  2. 使用 base64_encode() PHP 函式使用 HTML 顯示 Base64 影象
在 HTML 中顯示 Base64 影象

本教程將介紹在 HTML 中顯示 base64 影象的方法。Base64 影象是由 base64 編碼演算法轉換的可讀字串。

在 HTML 中使用 img 標籤顯示 Base64 影象

我們可以使用 img 標籤將 Base64 編碼的影象嵌入到 HTML 文件中。它非常有用,因為頁面載入速度更快,因為瀏覽器不需要為較小的影象發出額外的頁面載入請求。我們可以在 img 標籤的 src 屬性中指定影象的 URL。我們可以通過在 src 屬性中提供有關影象的資訊來顯示 base64 影象。我們需要在 src 屬性中定義準確的內容型別、內容編碼和字符集。語法如下所示。

data:[content-type][;charset],<data>

我們可以將內容型別指定為 image/png,表示該字串是一個 PNG 影象。然後,我們可以將字符集指定為 base64。分號分隔內容型別和字符集。之後,我們可以指定影象的 base64 字串。我們可以使用像這裡之類的工具將影象轉換為 base64 影象。我們還可以從這裡的連結建立自定義 base64 影象。這樣,我們可以使用 img 標籤在 HTML 中顯示 base64 影象。

示例程式碼:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAJUlEQVR42u3NQQEAAAQEsJNcdFLw2gqsMukcK4lEIpFIJBLJS7KG6yVo40DbTgAAAABJRU5ErkJggg=="> 

使用 base64_encode() PHP 函式使用 HTML 顯示 Base64 影象

我們可以使用 base64_encode() PHP 函式將影象編碼為 base64 字串。mime_content_type() 函式返回提供給它的資料的內容型別。使用這些函式,我們可以為 img 標籤生成一個 src。因此,我們可以顯示 base64 影象。我們可以使用 file_get_contents() 函式來讀取要轉換為 base64 字串的影象。

例如,建立一個 $img 變數並儲存影象的 URL。接下來,使用 file_get_contents() 函式讀取影象並使用 base64_encode() 函式將影象轉換為 base64 字串。接下來,在 img 變數上使用 mime_content_type() 函式來獲取內容型別。然後,建立一個變數 imgSrc 並根據上面的語法排列變數。最後,使用 echo 函式顯示 HTML img 標籤,其中 src 屬性設定為 $ImgSrc 變數。

因此,我們可以使用 PHP 來顯示 base64 影象。

示例程式碼:

$img = 'https://loremflickr.com/320/240';
$imgData = base64_encode(file_get_contents($img));
$imgSrc = 'data: ' . mime_content_type($img) . ';base64,' . $imgData;
echo '<img src="' . $imgSrc . '">';

相關文章 - HTML Image