在 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 . '">';