如何在不刷新整个页面的情况下在后台刷新相机中的图像？答案

【问题标题】：How to refresh image from camera in background without refreshing whole page?如何在不刷新整个页面的情况下在后台刷新相机中的图像？
【发布时间】：2016-07-21 16:39:21
【问题描述】：

我正在使用 PHP 脚本 (currentimage.php) 从我的闭路电视网络摄像机获取快照，效果很好：

<?php
while (@ob_end_clean()); 
    header('Content-type: image/jpeg'); 
// create curl resource 
$ch = curl_init(); 
curl_setopt($ch, CURLOPT_USERAGENT, $useragent); 
curl_setopt($ch, CURLOPT_URL, 'http://192.168.0.20/Streaming/channels/1/picture'); 
curl_setopt($ch, CURLOPT_HEADER, 0); 
curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC); 
curl_setopt($ch, CURLOPT_USERPWD, 'username:password'); 
// $output contains the output string 
$output = curl_exec($ch); 
echo $output; 
// close curl resource to free up system resources 
curl_close($ch);
?>

和另一个 PHP/HTML 来显示数据：

<IMG id="myImage" SRC='currentimage.php'>

但我无法让它每 30 秒刷新一次背景图像。我正在尝试 AJAX，但没有成功：

<script>
      function refresh_image(){
          document.getElementbyId("myImage").setAttribute("src", "currentimage.php");
        }
        setInterval(function(){refresh_image()}, 30000);
</script>

我做错了什么？我将不胜感激任何帮助

【问题讨论】：

标签： php jquery ajax refresh

【解决方案1】：

我尝试了通过对 PHP 脚本的定时请求来更改显示图像的概念，并且效果很好。如果 URL 被修改，则会向图像获取脚本发起一个新请求，我通过将版本号作为参数附加到 URL 来做到这一点。

var version = 1;
function refresh_image(){
  document.getElementById("myImage").setAttribute("src", "currentimage.php?ver="+version);
  version++;
}

setInterval(function(){
  refresh_image();
}, 2000);

【讨论】：

【解决方案2】：

我怀疑这里的主要问题是浏览器缓存了您的文件并且如果您再次设置该属性将不会重新加载它。不过，我找到了解决方法：

document.getElementbyId("myImage").setAttribute("src", "currentimage.php?version=1");

保存版本号并在每次发出请求时进行计数。这样，浏览器会将其视为一个新的 URL，并将再次重新加载（使用浏览器的开发人员功能在网络选项卡中检查这一点）。

【讨论】：