Question

我在我的数据库中以BLOB格式存储图像。我的PHP代码可以访问此BLOB数据并以JSON格式将其返回到客户端HTML页面。

如何在HTML页面上显示此数据？

我尝试过使用base64_encode但它只适用于Firefox。这个代码不适用于CHROME，IE，OPERA。

这是我的PHP代码：

$json2[] = array("Picture"=>base64_encode($row2[33]));
header("Content-Type: application/json; charset=UTF-8");
header("Content-type:image/jpeg");
echo json_encode($json2);

这是我的JQuery代码：

success: function(data){

        var str = JSON.stringify(data);
        var obj = JSON.parse(str);
        $('#pic0').html('<img  height="40" width="40" src="data:image/jpeg;base64,' + obj[0].Picture + '" />');
}

成功函数是AJAX调用的一部分。我的主要目标是在移动设备中显示此图像，因为这是WebService Call的一部分。根据我的阅读，似乎base64_encode在为每个浏览器工作时都有一些限制。

如何在HTML页面上显示图像？

我已经检查过SO中的其他帖子，但无法找到任何有效的内容。

Answer 1

这两行代码：

$json = array(/* anything */);
echo $json;

将以下内容输出到您的页面，逐字：

Array

你需要像这样回应：

header("Content-Type: application/javascript");
echo json_encode($json);

当然，您的Javascript前端必须将此JSON字符串正确解析为您在所提供的Javascript代码段中使用的对象。

Answer 2

在这里回答我自己的问题：正如@NullPoiиteя所建议的，可以使用以下代码显示编码的Blob数据：

$('where you want to display').html('<img src="data:image/png;base64,' + ImageVariable + '" />');

Answer 3

javascript / jQuery中没有base64_decode？

那不是你的问题。编写base64_decode（）实现相对简单，但是为了在浏览器中显示数据，您仍然需要画布支持 - 如果您的浏览器不支持数据URI，那么它不太可能支持画布。

如果是我，我会默认使用数据URI，但在javascript中添加检测以检查是否缺少支持，然后更新src，其中数据URI支持不可用....

function check_img()
{
   var chkimg=document.getElementById("testDataUri");
   if (checkimg.height) {
       return true;
   }
   imgs=document.getElementsByTagName("img");
   for (var i=0; i<imgs.length; i++) {
     if (imgs[i].data && imgs[i].src.match(/data:/i) {
        imgs[i].src=imgs[i].data;
     }
   }
}

（未经过测试的代码 - 仅用于说明目的）

JQUERY / PHP：base64_encoded图像数据未显示在CHROME，IE，OPERA

3 个答案: