JQUERY/PHP：base64_encoded 图像数据未在 CHROME、IE、OPERA 上显示答案

【问题标题】：JQUERY/PHP: base64_encoded image data not displaying on CHROME, IE, OPERAJQUERY/PHP：base64_encoded 图像数据未在 CHROME、IE、OPERA 上显示
【发布时间】：2015-07-01 11:33:43
【问题描述】：

我的数据库中有以 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 调用的一部分。根据我的阅读，似乎 base64_encode 在适用于每个浏览器方面都有一些限制。

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

我查看了 SO 中的其他帖子，但找不到任何有成效的内容。

【问题讨论】：

$('where you want to display').html('<img src="data:image/png;base64,' + data + '" />'); 什么不起作用：？
你的base64图片字符串是什么？
在您的代码行中，我用图片数据变量更改了第二个“数据”。对吗？
只显示你尝试过的完整代码
$('#pic1').html('');是我的html代码。 $json = array("图片"=>base64_encode($row2[33]));回声 json;是我的php代码

标签： php jquery image google-chrome base64

【解决方案1】：

这两行代码：

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

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

Array

你需要像这样回显：

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

当然，您的 Javascript 前端必须正确地解析这个 JSON 字符串，以便在您提供的 Javascript sn-p 中使用对象。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

javascript/jQuery 中没有 base64_decode 吗？

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

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

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;
     }
   }
}

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

【讨论】：