[英]Sending/Displaying a base64 encoded Image
I need to send a base64
encoded string to a client. 我需要将
base64
编码的字符串发送到客户端。 Therefore, I'm opening and reading an image file on the server, encode it and send that data along with the image/jpeg
content-type to the browser. 因此,我打开并读取服务器上的图像文件,对其进行编码并将该数据与
image/jpeg
内容类型一起发送到浏览器。 Example in php: 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. 由于某种原因,这不起作用。
onerror
always fires. onerror
总是火上浇油。 Watching the FireBug Network task
for instance, tells me that I'm receiving the correct header information and a correct value of transfered bytes. 例如,观察FireBug
Network task
告诉我,我收到了正确的标头信息和正确的传输字节值。
If I send that data as Content-type: text/plain
it works, the base64
string is shown in the browser (if I call the script directly). 如果我将该数据作为
Content-type: text/plain
它,则base64
字符串将显示在浏览器中(如果我直接调用脚本)。 Copying and pasting that output into the src
of a <img>
element shows the image as expected. 将该输出复制并粘贴到
<img>
元素的src
中会按预期显示该图像。
What am I doing wrong here? 我在这做错了什么?
Solution 解
Thanks Pekka
for pointing me on my mistake. 谢谢
Pekka
指出我的错误。 You don't need (you can't!) encode that binary image data as base64 string in that kind of approach. 在这种方法中,您不需要(您不能!)将二进制图像数据编码为base64字符串。 Without base64 encoding, it just works.
没有base64编码,它只是工作。
If you set content-type to image/jpeg, you should give just the jpeg data, without the base64 crap. 如果将content-type设置为image / jpeg,则应该只提供jpeg数据,而不使用base64废话。 But you're treating the result as if it was html.
但是你把结果视为html。
You're effectively building a data uri, which is ok, but as you noted, only as an uri. 你正在有效地建立一个数据uri,这是好的,但正如你所指出的那样,只是作为一个uri。 So leave the content type as it is (text/html), and
所以保留内容类型(text / html),和
echo '<img src="data:image/jpeg;base64,'.base64_encode($image_data).'">';
and you're good to go. 而你很高兴。
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 ..第一个参数是图像路径,第二个是宽度,然后是高度...高度和宽度是可选的
In this case, there is no reason to base64 encode the image data in the first place. 在这种情况下,没有理由首先对图像数据进行base64编码。 What you want to emit is plain old image data.
您想要发出的是普通的旧图像数据。
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.php
via an AJAX call, and put the result into the src
property directly. 这对我来说唯一有意义的方法是,如果你通过AJAX调用获取
generate.php
的输出,并将结果直接放入src
属性中。 That should work (although not in IE < 8, but I'm sure you know that). 这应该工作(虽然不是在IE <8,但我相信你知道)。 But if you can call
generate.php
directly as the image's source, I don't see the need for this. 但是如果你可以直接调用
generate.php
作为图像的来源,我认为不需要这样做。
我推荐它: base64_encode用MIME base64编码数据
echo '<img src="data:image/jpeg;base64,'.base64_encode($image).'">';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.