Javascript 发送/显示 base64 编码的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3259967/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sending/Displaying a base64 encoded Image
提问by jAndy
I need to send a base64encoded string to a client. Therefore, I'm opening and reading an image file on the server, encode it and send that data along with the image/jpegcontent-type to the browser.
Example in php:
我需要向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, I'm calling:
客户端，我打电话：
var img = new Image();
img.src = "http://www.myserver.com/generate.php";
img.onerror = function(){alert('error');}
$(img).appendTo(document.body);
That does not work for some reason. onerroralways fires. Watching the FireBug Network taskfor instance, tells me that I'm receiving the correct header information and a correct value of transfered bytes.
由于某种原因，这不起作用。onerror总是火。Network task例如，观察 FireBug告诉我我正在接收正确的标头信息和正确的传输字节值。
If I send that data as Content-type: text/plainit works, the base64string is shown in the browser (if I call the script directly). Copying and pasting that output into the srcof a <img>element shows the image as expected.
如果我在工作时发送该数据，Content-type: text/plain则该base64字符串将显示在浏览器中（如果我直接调用脚本）。复制并粘贴该输出入src的<img>元件示出了图像按预期方式。
What am I doing wrong here?
我在这里做错了什么？
Solution
解决方案
Thanks Pekkafor pointing me on my mistake. You don't need (you can't!) encode that binary image data as base64 string in that kind of approach. Without base64 encoding, it just works.
谢谢你Pekka指出我的错误。您不需要（您不能！）以这种方法将该二进制图像数据编码为 base64 字符串。没有base64编码，它就可以工作。
采纳答案by Pekka
In this case, there is no reason to base64 encode the image data in the first place. What you want to emit is plain old image data.
在这种情况下，首先没有理由对图像数据进行 base64 编码。您想要发出的是普通的旧图像数据。
Just pass through the JPEG image as-is.
只需按原样通过 JPEG 图像。
The only way this would make sense to me is if you grabbed the output of generate.phpvia an AJAX call, and put the result into the srcproperty directly. That should work (although not in IE < 8, but I'm sure you know that). But if you can call generate.phpdirectly as the image's source, I don't see the need for this.
这对我来说唯一有意义的方法是，如果您generate.php通过 AJAX 调用获取的输出，并将结果src直接放入属性中。这应该有效（虽然不是在 IE < 8 中，但我相信你知道）。但是如果你可以generate.php直接调用作为图像的来源，我认为没有必要这样做。
回答by mvds
If you set content-type to image/jpeg, you should give just the jpeg data, without the base64 crap. But you're treating the result as if it was html.
如果您将 content-type 设置为 image/jpeg，您应该只提供 jpeg 数据，而不要提供 base64 废话。但是您将结果视为 html。
You're effectively building a data uri, which is ok, but as you noted, only as an uri. So leave the content type as it is (text/html), and
您正在有效地构建数据 uri，这是可以的，但正如您所指出的，仅作为 uri。所以保持内容类型不变（text/html），并且
echo '<img src="data:image/jpeg;base64,'.base64_encode($image_data).'">';
and you're good to go.
你可以走了。
回答by Aman Virk
I believe it can be done quite efficiently just using php only ... you can use the below function to render images in base64 encoded data
我相信仅使用 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.'"/>';
}
}
how to use this function
如何使用这个功能
binaryImages("../images/end.jpg",100,100);
run the function binaryImages .. 1st parameter is the image path , 2nd is the width and then the height ... height and width are optional
运行函数 binaryImages .. 第一个参数是图像路径，第二个参数是宽度，然后是高度...高度和宽度是可选的
回答by Mahbub Alam
i would recommend it: base64_encodeEncodes data with MIME base64
我会推荐它： base64_encode使用 MIME base64 编码数据
echo '<img src="data:image/jpeg;base64,'.base64_encode($image).'">';
