Question

我使用PHP脚本（currentimage.php）从CCTV IP摄像头获取快照，效果很好：

string[] files = Directory.GetFiles(dir);
foreach(string file in files)
    ComboBox.Items.AddRange(Path.GetFileName(file));

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

<?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);
?>

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

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

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

Answer 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);

Answer 2

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

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

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

如何在不刷新整页的情况下从背景中刷新相机图像？

2 个答案: