在没有src URL的情况下在网页中显示图像

Question

最近我了解到我可以在网页中显示图像而不引用图像URL，如下所示：

<img class="disclosure" img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oIGRQbOY8MjgMAAABVSURBVBjTfc6xDcAwCETRM0rt5nbA+49j70DDAqSLsGXyJQqkVxxwNOeMiEA+waW1VuT/inrvG7wikht8UETy2ygVMjO4O8YYTf6AqrZyUwYlygAAXo+QLmeF4c4uAAAAAElFTkSuQmCC">

我有另一个想要显示的小bmp图像，所以我在vim中打开它，img源代码如下：



当我将此代码粘贴到需要粘贴的位置时，我只能获得“BMڀ”

• 如何正确转换/粘贴此代码以用作图像源？

Answer 1

您需要在Base64中对其进行编码

http://www.motobit.com/util/base64-decoder-encoder.asp

你还必须改变（png）......

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

根据图像文件类型。

这是一个小PHP函数，尚未经过测试。

function encode64($file){
    $extension = explode(".", $file);
    $extension = end($extension);

    $binary = fread(fopen($file, "r"), filesize($file));

    return '<img src="data:image/'.$extension.';base64,'.base64_encode($binary).'"/>';
}

echo encode64("test.bmp");

2

    function encode64($file){
        $binary = fread(fopen($file, "r"), filesize($file));
        return(base64_encode($binary));
    }

echo '<img src="data:image/bmp;base64,'.encode64("test.bmp").'"/>';

测试了我的第二个功能......效果很好...... http://debconf11.com/so.php

Answer 2

您可以使用

等在线工具

• http://software.hixie.ch/utilities/cgi/data/data

或

• http://www.sveinbjorn.org/dataurlmaker

进行转换。

Answer 3

要获取图像的 Base64 编码，您可以将 imagemagick 的 convert 命令与 INLINE: output format 一起使用。

例如：

convert YourImage.png INLINE:PNG:YourImage_base64.txt

现在您在 HTML 页面中要做的就是在“YourImage_base64.txt”文件的内容周围添加 <img src=" 和 ">。

或者您可以直接将其全部写入 STDOUT 并直接添加到您的 HTML 文件末尾：

echo "<img src=\"$(convert YourImage.png INLINE:PNG:-)\">" >> some.html

Answer 4

图像数据必须是base64编码。