代码之家 › 专栏 › 技术社区 › jAndy

发送/显示base64编码图像

base64 jquery javascript php

jAndy · 技术社区 · 15 年前

我需要发一封信 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 例如,告诉我正在接收正确的头信息和正确的传输字节值。

Content-type: text/plain 它起作用了 比较基准64 src <img> 元素按预期显示图像。

解决方案

Pekka 因为你指出我的错误。你不需要(你不能!)用这种方法将二进制图像数据编码为base64字符串。如果没有base64编码,它只能工作。

4 回复 | 直到 15 年前

Pekka 9 年前

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

只需按原样通过JPEG图像。

对我来说唯一有意义的方法就是你抓住 generate.php src 直接的财产。这应该是可行的(尽管在IE<但我相信你知道的)。但如果你能打电话 生成.php 直接作为图像的来源,我不认为有必要这样做。

mvds 15 年前

如果将content type设置为image/jpeg,则应该只提供jpeg数据,而不提供base64垃圾。但是你把结果当作是html。

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

你可以走了。

Aman Virk 14 年前

我相信只要使用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);

Mahbub Alam 8 年前

我建议: base64_encode

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

1 年前

user28928120 · 如何在jquery中选择所有类?

1 年前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

1 年前

Eliable · 使点击计数器和进度条协同工作

1 年前

mlri · 从不同的onclick事件执行相同的javascript函数

1 年前

Cymro · 如何将jquery$(this)与$(document).keyup一起使用

1 年前

Jack Maessen · 在处理程序上使用时如何获取输入类型

1 年前

BlueDogRanch · 使用jQuery Datepicker和dateFormat、altFormat和altField以及$(this)

1 年前

Jameel · Jquery:未捕获SyntaxError:在参数列表后的“Node”上执行“appendChild”失败:缺失)

1 年前