Question

我尝试使用setInterval()从给定路径重新加载图片。我有一些类似的代码来重新加载一个正常工作的日志文件：

var auto_refresh = setInterval(
    function auto_refresh_log()
    {
        $('#log_output').load('refresh_log.php').fadeIn("slow");
    }, 1000);

refresh_log.php：

<?php  $file = "/var/www/html/mainLOG";     
    $contents =  file($file);   
    $string = implode( $contents);  
    echo $string; ?>

现在，我想做两件类似的事情：

我不想使用像refresh_log.php这样的固定路径，而是希望将JS函数的路径传递给PHP文件。我该怎么办？
我想返回一个图像，而不是返回一个字符串，然后在我的html文档中使用它。我该怎么办？

确切地说我想做什么：我有一个index.php，用户可以在其上选择文件路径。设置一些其他参数后，一些计算在后台开始。结果保存为TIFF文件，浏览器无法读取。所以我想使用带有imagemagick的PHP脚本来转换它们（工作正常）并将它们传递回JS。然后，图像应显示在我的HTML <img id="image_id" ... >上，并且每隔几秒刷新一次，就像日志文件一样。

谢谢！

Answer 1

一种方法是更改src元素的img属性。

当您更改src元素的img时，浏览器将下载资源。使用jQuery attr执行此操作。您应该附加一个timestamp参数，以便浏览器不从本地浏览器缓存中获取缓存的实例。

function loadImg(src) {
    // append a parameter of "_" to the url
    $("#myimg").attr("src", src + "?_=" + Date.now());
}
setInterval(loadImg("path/to/img"), 1000);

在PHP方面，您需要一个脚本，以您转换的格式为您提供存储它的图像。如何执行此操作的示例是here。

Answer 2

我设法使用$.post代替$.load来提出解决方案。该函数通过以下方式调用：

setInterval(
    function auto_refresh_img()
    {
        var img_path = document.getElementById("image_path").value;         
        $.post('refresh_img.php', 
                {path: img_path}, 
                function(data) {
                     $('#my_div').html(data);}
              );
    }, 1000);

refresh_img.php看起来像这样：

<?php $imagepath = $_REQUEST['path'];

if (file_exists($imagepath))  {

    $img = new imagick($imagepath."[0]");
    $img->setImageFormat('jpg');
    $thumbnails0 = $img->getImageBlob();

    echo "<img src='data:image/jpg;base64,".base64_encode($thumbnails0)."'  id='reco_background' style='display:none'   />";
}
else {
    echo "Image does not exist.";
    };
?>

然后可以将返回的<img ... >用于任何目的。

setInterval - 使用POST加载PHP - 返回图像

2 个答案: