发送/显示base64编码的图像

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);

客户,我打电话给:

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

由于某种原因,这不起作用.onerror总是火.Network task例如,观察FireBug 告诉我,我收到了正确的头信息和正确的传输字节值.

如果我发送数据,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 < 8 中不行，但我相信你知道这一点）。但如果你可以generate.php直接调用图像的源，我认为没有必要这样做。