php - 从服务器获取图像并显示它们

Question

我有一个问题。如果您能指导我，我将不胜感激。我在服务器上有一些图像。在我的客户端代码(jQuery)中，我需要从服务器(通过 AJAX-php)获取图像(实际图像，而不是服务器上的链接)并在我的页面上显示图像。当我收到图像时，我不希望它们保存在客户端的硬盘上；我只是暂时需要它们(也许浏览器可以为我保留它们那么短的时间)。你能帮我么？我不知道如何用 jQuery/php/Ajax 或者 JSON 来实现它。

我当前的代码是:

<script>
$(document).ready(function () {
    var phpFileName="serverSide.php";
    $.ajaxSetup({
        "url":phpFileName,
        });
    $.ajax({
        "type":"GET",
        async: false,
        "data":{
            "newvar1":"value1",
        },
        "success":function(data){
            var imageName  = data.split('^');
        }
    });

    $imageDirOnServer = "some/Diron/Server/";
    for(i=0;i<imageName.length;i++){
        $("#Cell").append("<div style='background-image:url("+$imageDirOnServer+imageName[i]+".bmp);'></div>");
    }    
});
</script>

和 php 代码(serverSide.php):

<?php
for($k=0;$k<3;$k++){
        echo sprintf("%02d",$k+1);
        echo "^";
    }
?>

此代码显示 01.bmp、02.bmp 和 03.bmp，它们物理上位于我的网页上的服务器上。我想更改它，以便图像由我的网页从服务器获取，然后显示。加载页面时，我从服务器获取图像，原因是我不希望此后有任何客户端-服务器流量。我提到我不希望将图像保存在客户端计算机上，因为出于安全目的，我认为这是不允许的(未经用户许可)。不过，浏览器的缓存对我来说没问题。谢谢。

Answer 1

我相信你想要的是inline images .

这通过将图像数据放入 HTML 中来实现，并且可以通过 Javascript 进行操作。

您最终会得到一个看起来像这样的图像标签:

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tL" width="16" height="14" alt="My alt text">

因此，您需要做的是设置对 PHP 脚本的 ajax 调用，在其中执行如下操作:

<?php

  // Your AJAX url is script.php?imagename=image.jpg

  $image = basename($_GET['imagename']);
  if (!file_exists($image)) {
    header('HTTP/1.1 404 Not Found');
    exit;
  }

  $contentType = 'image/jpeg'; // You will need to put the correct type for the file in the string
  $str = "data:$contentType;base64,".base64_encode(file_get_contents($image));
  echo $str;
  exit;

...当您收到 Javascript 响应时，请执行以下操作(例如):

 var newImg = document.createElement('img');
 newImg.src = xhr.responseText;
 newImg.alt = 'My alt text';
 document.getElementById('some_element_that_exists').appendChild(newImg);

显然上面的代码缺乏必要的错误检查等，但希望它能帮助您入门。

如果路过的学究想要对我的 Javascript 进行 jQuery 化，请随意。