Question

我需要向客户端发送一个base64编码的字符串。因此，我打开并读取服务器上的图像文件，对其进行编码并将该数据与image/jpeg内容类型一起发送到浏览器。 php中的示例：

$image      = $imagedir . 'example.jpg';
$image_file = fopen($image, 'r');
$image_data = fread($image_file, filesize($image));

header("Content-type: image/jpeg");
echo 'data:image/jpeg;base64,' . base64_encode($image_data);

Clientside ，我在打电话：

var img     = new Image();
img.src     = "http://www.myserver.com/generate.php";
img.onerror = function(){alert('error');}
$(img).appendTo(document.body);

由于某种原因，这不起作用。 onerror总是被激怒。例如，观察FireBug Network task告诉我，我收到了正确的标题信息和正确的传输字节值。

如果我将该数据作为Content-type: text/plain发送，则可以在浏览器中显示base64字符串（如果我直接调用脚本）。将该输出复制并粘贴到src元素的<img>中会按预期显示图像。

我在这里做错了什么？

解决方案

感谢Pekka指出我的错误。在这种方法中，您不需要（您不能！）将二进制图像数据编码为base64字符串。如果没有base64编码，它就可以正常工作。

Answer 1

如果将content-type设置为image / jpeg，则应该只提供jpeg数据，而不使用base64废话。但是你把结果视为html。

你正在有效地建立一个数据uri，这是好的，但正如你所指出的那样，只是作为一个uri。因此，请保留内容类型（text / html）和

echo '<img src="data:image/jpeg;base64,'.base64_encode($image_data).'">';

你很高兴。

Answer 2

我相信只使用php就可以非常有效地完成...你可以使用下面的函数来渲染base64编码数据中的图像

    function binaryImages($imgSrc,$width = null,$height = null){
    $img_src = $imgSrc;
    $imgbinary = fread(fopen($img_src, "r"), filesize($img_src));
    $img_str = base64_encode($imgbinary);

    if(isset($height) && isset($width))
    {
    echo '<img src="data:image/jpg;base64,'.$img_str.'" height="'.$height.'" width="'.$width.'"/>';
    }
    else
    {
    echo '<img src="data:image/jpg;base64,'.$img_str.'"/>';
    }
}

如何使用此功能

    binaryImages("../images/end.jpg",100,100);

运行函数binaryImages ..第一个参数是图像路径，第二个是宽度，然后是高度......高度和宽度是可选的

Answer 3

在这种情况下，没有理由首先对图像数据进行base64编码。你要发出的是普通的旧图像数据。

按原样直接传递JPEG图像。

这对我有用的唯一方法是，如果你通过AJAX调用获取generate.php的输出，并将结果直接放入src属性。这应该工作（虽然不是IE＆lt; 8，但我相信你知道）。但是，如果您可以直接将generate.php作为图片的来源，我认为不需要这样做。

Answer 4

我会推荐它： base64_encode使用MIME base64

编码数据

echo '<img src="data:image/jpeg;base64,'.base64_encode($image).'">';

发送/显示base64编码的图像

4 个答案: