发送/显示 base64 编码图像答案

【问题标题】：Sending/Displaying a base64 encoded Image发送/显示 base64 编码图像
【发布时间】：2010-07-15 20:52:02
【问题描述】：

我需要向客户端发送一个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 总是触发。例如，观看 FireBug Network task，告诉我我收到了正确的标头信息和传输字节的正确值。

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

我在这里做错了什么？

解决方案

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

【问题讨论】：

看起来您应该直接将 src 属性的值设置为响应文本（即 img.src = "data:image/jpeg;base64,..."... 此处的右侧可能是 Ajax 调用的返回值） - 否则浏览器将尝试从您设置的 URL 请求图像，这将不起作用，因为它直接返回 data:image... 而不是图像字节。
我不想要ajax call 的开销。我需要它尽可能快。例如，为了获得某种“响应”，我需要一个有效的图像来检查宽度。

标签： php javascript jquery base64

【解决方案1】：

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

您正在有效地构建一个数据 uri，这没关系，但正如您所指出的，只是作为一个 uri。所以保持内容类型不变（text/html），并且

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

你可以走了。

【讨论】：

【解决方案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 .. 第一个参数是图像路径，第二个参数是宽度，然后是高度...高度和宽度是可选的

【讨论】：

如果有人想要不同分辨率的图像，这是一个好方法。这也会隐藏图像 url？如果是这样，那么如果有人愿意隐藏图像 URL 也更好

【解决方案3】：

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

按原样传递 JPEG 图像。

这对我来说有意义的唯一方法是，如果您通过 AJAX 调用获取generate.php 的输出，并将结果直接放入src 属性中。这应该有效（虽然不是在 IE generate.php作为图片的来源，我觉得没有这个必要。

【讨论】：

@Pekka：我在写信标。我需要对客户端的某种响应，我正在寻找检查图像宽度以获得不同的响应类型。我这样做是因为我不想要 ajax call 的开销。
@jAndy 应该可以正常使用 src 属性，无需对我认为的任何内容进行 base64 编码。 您的更新：您还可以确定服务器端的图像宽度，并将其作为整数（而不是整个图像）发送。不过，您需要为此进行适当的 Ajax 调用。
@Pekka：恐怕我听不懂你？如何在不使用 bas64 编码的情况下通过服务器脚本文件将图像发送到客户端？
@jAndy 啊啊，我明白了！有趣的。但是你我都误解了一些东西：如果你将图像的src 设置为某个服务器端脚本，那么脚本需要发出的东西是not base64 编码的。只是普通的图像数据。还是我搞错了？
"你为什么要对图像数据进行 base64 编码。"这不是很有帮助。我正在为需要发送 base64 图像内容的客户端构建 API。为了测试一切是否正常，我需要创建一个标记并使用这些数据。 +1 @mvds 以获得快速直接的答案。（编辑）虽然在阅读了 cmets 之后，听起来他确实不需要对其进行编码。但是，问题是，如何显示编码数据，这是我需要回答的问题。

【解决方案4】：

我会推荐它： base64_encode 使用 MIME base64 编码数据

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

【讨论】：