Base64 編碼圖像

Question

我正在為 Firefox/IE 構建一個開放式搜索插件，並且圖像需要進行 Base64 編碼，那么我如何對我擁有的網站圖標進行 Base64 編碼？

我只熟悉 PHP

Answer 1

據我所知，圖像數據有一個 xml 元素。 您可以使用此網站對文件進行編碼（使用上傳字段）。 然后只需將數據復制並粘貼到 XML 元素即可。

您也可以使用 PHP 來執行此操作：

 <?php
        $im = file_get_contents('filename.gif');
        $imdata = base64_encode($im);      
?> 

使用Mozilla 的指南來幫助創建 OpenSearch 插件。 例如，圖標元素是這樣使用的：

<img width="16" height="16">data:image/x-icon;base64,imageData</>

其中imageData是您的 base64 數據。

Answer 2

$encoded_data = base64_encode(file_get_contents('path-to-your-image.jpg'));    

Answer 3

我對rfc2397 的概要是：

獲得 base64 編碼的圖像數據后，將其放入以“ data:{mimetype};base64, ”為前綴的 <Image></Image> 標簽中data:{mimetype};base64,這類似於在url()定義的括號中完成的前綴CSS 或 [X]HTML 中img標簽的src屬性的引用值中。 您可以通過將data:image/...行放入 URL 字段並按 Enter 來測試 firefox 中的數據 url，它應該顯示您的圖像。

對於實際編碼，我認為我們需要考慮所有選項，而不僅僅是 PHP，因為有很多方法可以對某些內容進行 base64 編碼。

1. 使用base64命令行工具。 這是GNU的coreutils（V6 +）和幾乎默認的任何部分Cygwin的，大號我ñ ü X ，的GnuWin32安裝，但不是我想的BSD系統。 問題： $ base64 imagefile.ico > imagefile.base64.txt
2. 使用具有轉換為 base64 選項的工具，例如Notepad++ ，它在 plugins->MIME tools->base64 Encode 下具有該功能
3. 將文件通過電子郵件發送給自己並查看原始電子郵件內容、復制和粘貼。
4. 使用網絡表單。

關於 mime-types 的說明：我希望您使用image/png image/jpeg或image/gif因為我找不到流行的image/x-icon 。 那應該是image/vnd.microsoft.icon嗎？ 其他格式也更短。

比較 265 字節和 1150 字節：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAVFBMVEWcZjTcViTMuqT8/vzcYjTkhhTkljT87tz03sRkZmS8mnT03tT89vTsvoTk1sz86uTkekzkjmzkwpT01rTsmnzsplTUwqz89uy0jmzsrmTknkT0zqT3X4fRAAAAbklEQVR4XnXOVw6FIBBAUafQsZfX9r/PB8JoTPT+QE4o01AtMoS8HkALcH8BGmGIAvaXLw0wCqxKz0Q9w1LBfFSiJBzljVerlbYhlBO4dZHM/F3llybncbIC6N+70Q7OlUm7DdO+gKs9gyRwdgd/LOcGXHzLN5gAAAAASUVORK5CYII=

data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAD/////ZmZm/2ZmZv9mZmb/ZmZm/2ZmZv9mZmb/ZmZm/2ZmZv9mZmb/ZmZm/2ZmZv9mZmb/ZmZm/2ZmZv///////////2ZmZv9mZmb/ZmZm/2ZmZv9mZmb/ZmZm/2ZmZv9mZmb/ZmZm/2ZmZv9mZmb/ZmZm/2ZmZv9mZmb///////////9mZmb/ZmZm//////////////////////////////////////////////////////9mZmb/ZmZm////////////ZmZm/2ZmZv//////ZmZm/2ZmZv9mZmb/ZmZm/2ZmZv9mZmb/ZmZm/2ZmZv//////ZmZm/2ZmZv///////////2ZmZv9mZmb//////2ZmZv9mZmb/ZmZm/2ZmZv9mZmb/ZmZm/2ZmZv9mZmb//////2ZmZv9mZmb///////////9mZmb/ZmZm////////////////////////////8fX4/8nW5P+twtb/oLjP//////9mZmb/ZmZm////////////////////////////oLjP/3eZu/9pj7T/M2aZ/zNmmf8zZpn/M2aZ/zNmmf///////////////////////////////////////////zNmmf8zZpn/M2aZ/zNmmf8zZpn/d5m7/6C4z/+WwuH/wN/3//////////////////////////////////////+guM//rcLW/8nW5P/x9fj//////9/v+/+w1/X/QZ7m/1Cm6P//////////////////////////////////////////////////////7/f9/4C+7v8xluT/EYbg/zGW5P/A3/f/0933/9Pd9//////////////////////////////////f7/v/YK7q/xGG4P8RhuD/MZbk/7DX9f//////4uj6/zJh2/8yYdv/8PT8////////////////////////////UKbo/xGG4P8xluT/sNf1////////////4uj6/zJh2/8jVtj/e5ro/////////////////////////////////8Df9/+gz/P/////////////////8PT8/0944P8jVtj/bI7l/////////////////////////////////////////////////////////////////2yO5f8jVtj/T3jg//D0/P///////////////////////////////////////////////////////////3ua6P8jVtj/MmHb/+Lo+v////////////////////////////////////////////////////////////D0/P8yYdv/I1bY/9Pd9///////////////////////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==

Answer 4

檢查以下示例：

// First get your image
$imgPath = 'path-to-your-picture/image.jpg';
$img = base64_encode(file_get_contents($imgPath));
echo '<img width="100" height="100" src="data:image/jpg;base64,'. $img .'" />'

Answer 5

谷歌讓我找到了這個解決方案（base64_encode）。 希望這可以幫助！