javascript - 如何在php中使用json检索图像

标签 javascript php json

我想从 php 中的 json 中检索图像。实际上我想通过php获取这些图像源作为json数据并使用javascript显示。但我认为我做错了什么,请帮忙。

<script type="text/javascript">
function jsonGetImages(name){
var thumbnailbox = document.getElementById("picturebox");
var hr = new XMLHttpRequest();
hr.open("POST", "jsonget.php", true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
    if(hr.readyState == 4 && hr.status == 200) {
        var d = JSON.parse(hr.responseText);
        picturebox.innerHTML = "";
        for(var o in d){
            if(d[o].src){
                picturebox.innerHTML += '<img src="'+d[o].src+'">';
            }
        }
    }
}
hr.send("name="+name);
picturebox.innerHTML = "requesting...";
 }
 </script>
 </head>
 <body>
 <div id="picturebox"></div>
 <script type="text/javascript">jsonGetImages('Jason');</script> 
  </body>

jsonget.php

<?php
 header("Content-Type: application/json");
 $folder = 'images';
 $cn=mysql_connect("localhost","root","");
if(!$cn){
    echo "<b>Connection couldn't be established.</b>";
    die();
}
$db=mysql_select_db("test",$cn);
if(!$db){
    echo "<b>Database doesn't exist.</b>";
}
$dir = $folder."/"; 
$dirHandle = opendir($dir);
$name=$_POST['name'];
$sql="SELECT * FROM users WHERE name='$name'";
$result=mysql_query($sql);
echo mysql_num_rows($result);
$i=0;
$jsonData = '{';
while($row=mysql_fetch_array($result)){
$name=$row['name'];
$image_name=$row['image'];  
$i++;
$file=readdir($dirHandle);
    $src = "$dir$image_name";
$jsonData .= '"img'.$i.'":{ "num":"'.$i.'","src":"'.$src.'", "name":"'.$name.'" },';
  }
 closedir($dirHandle);
 $jsonData = chop($jsonData, ",");
 $jsonData .= '}';
 echo $jsonData;
 ?>

请帮忙。我找不到如何使用 json 获取图像的解决方案。

最佳答案

您可以使用 php 将图像转换为 Base 64 字符串并使用 JSON 传递

$src = "$dir$image_name";
$type = pathinfo($src, PATHINFO_EXTENSION);
$data = file_get_contents($src);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
$myobj = json_encode(array("image"=>$base64));

然后您可以简单地使用 javascript 将该字符串放入图像元素的 SRC 属性中。

var obj = JSON.parse(serverResponse);
img.src=obj.image;

关于javascript - 如何在php中使用json检索图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26332432/

相关文章:

javascript - Google Timeline Chart 转到重绘位置

php - mysql数据到excel

javascript - 如何使用 base-64 源创建 Image 对象?

php - 表在数据库中不存在,但确实存在

json - Swift - 在 Post 请求上向 httpBody 添加参数

jquery - Rails 无法正确解码来自 jQuery 的 JSON(数组变成带有整数键的散列)

javascript - Tooltipster 不适用于动态生成的元素

javascript - 需要更改标题颜色 donut Highcharts

json - 使用 JQ 替换 JSON 模板中的变量

javascript - 如何将按钮单击转换为单独的 js 文件中的 mouseup 事件