2008-08-30 218 views
52

我正在为Firefox/IE构建一个开放式搜索插件,并且该图像需要Base64编码,因此我如何基于64编码我的图标?Base64编码图像

我只熟悉PHP

回答

74

据我记得有一个XML元素的图像数据。你可以使用这个website来编码一个文件(使用上传字段)。然后,将数据复制并粘贴到XML元素。创建OpenSearch的插件

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

使用Mozilla's guide求助:

你也可以使用PHP来做到这一点,像这样。例如,图标元素是这样使用的:

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

其中imageData是你的base64数据。

+1

在这种情况下,base64_encode只会编码图像的“资源句柄”,我相信,如果有的话。您需要阅读文件的实际内容。不过,使用base64编码器网站应该可以工作。 – 2008-11-26 18:19:21

+1

这根本不适用于我。 `$ im`是一个`resource`,我收到一个错误`base64_encode()期望参数1是字符串,给出的资源“ – 2012-04-11 23:08:37

0

谷歌使我this溶液(BASE64_ENCODE)。希望这可以帮助!

+1

是的,我知道如何编码,但如何得到公正的图像数据在那里它被编码。 – UnkwnTech 2008-08-30 11:07:22

8

我的rfc2397简介是:

一旦你得到了你的base64编码的图像数据,把它与“data:{mimetype};base64,”,这是类似于做的前缀为前缀的<图像> < /图像>标记中括号中的url()定义在CSS中或在[X] HTML中img标记的src属性的引用值中。您可以通过将data:image/...行放入URL字段并按下回车来测试Firefox中的数据url,它应该显示您的图像。

对于实际的编码,我认为我们需要遍历所有的选项,而不仅仅是PHP, ,因为base64有很多种编码方式。

  1. 使用base64命令行工具。它是GNU coreutils(v6 +)的一部分,几乎默认在任何地方安装,但不是我试过的BSD。问题:$ base64 imagefile.ico > imagefile.base64.txt
  2. 使用工具,功能的选项转换为Base64,像Notepad++下设有插件 - > MIME工具 - > Base64编码的功能
  3. 电子邮件发送给自己的文件,并查看原始邮件内容,复制及糊。使用webform

的MIME类型的说明: 我宁愿你使用的image/pngimage/jpegimage/gif一个,因为我can't find流行image/x-icon。应该是image/vnd.microsoft.icon? 另外其他格式要短得多。

比较265个字节VS 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== 
10
$encoded_data = base64_encode(file_get_contents('path-to-your-image.jpg'));  
6

检查下面的例子

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