为什么在浏览器中显示我的摄像头图像的差异？

我有一个IP摄像头，并将图像上传到天气服务。然后我捕获该图像以显示在我的网页上。为了做到这一点，我搜索了一些代码，刷新图像而不刷新页面。我发现了一些代码（对不起，我不知道是谁承认），我适应...... ..为什么在浏览器中显示我的摄像头图像的差异？

<script> 
    var reimg 
    window.onload=function() { 
    reimg=document.getElementById('re') 
    setInterval(function() { 
    reimg.src=reimg.src.replace(/\?.*/,function() { 
    return '?'+new Date() 
    }) 
    },60000) 
    } 
    </script>

下位，在很大的程度上，可能是矫枉过正，但我一直在努力得到它上班（我多么希望它看起来）对所有的浏览器...

<iframe frameborder=0 marginwidth=0 marginheight=0 border=0 width="360" height="270" style="overflow: 
    hidden;border:0;margin:0;width:360px;height:270px;max-width:100%;max-height:100%" 
    src="http://icons.wunderground.com/webcamramdisk/g/l/Gluepack/1/current.jpg?" id="re" scrolling="no" 
    allowtransparency="true">If you can see this, your browser doesn't understand IFRAME. However, we'll 
    still <A HREF="http://icons.wunderground.com/webcamramdisk/g/l/Gluepack/1/current.jpg">link</A> 
    you to the file.</iframe>

它工作正常，在Firefox中，减少了640×480的原始图像，以适应。但是，在IE和Chrome浏览器中，只显示图像的中心顶部（即图像不会缩小）。是否有任何额外的代码需要确保它在IE和Chrome中正确显示（即我想要它，减少到合适的程度）还是不可能？

来源

2012-04-08 Gluepack

图像如何显示真的取决于浏览器，没有标准。最简单的解决方案是创建一个包含代替图像直接加载到iframe的javascript和一个<img>标签的图像的HTML文件：

<!DOCTYPE HTML> 
<html><head> 
<script> 
window.onload = function() { 
    var reimg = document.getElementsByTagName('img')[0]; 

    setInterval(function() { 
     reimg.src = reimg.src.replace(/\?.*/, function() { 
      return '?'+new Date() 
     }); 
    }, 60000); 
}; 
</script> 
<style type="text/css"> 
* { margin: 0; padding: 0; } 
img { width: 360px; height: 270px; } 
</head><body> 
    <img src="http://icons.wunderground.com/webcamramdisk/g/l/Gluepack/1/current.jpg?"> 
</body></html>

保存此为“webcam.html”或什么：

<iframe frameborder=0 marginwidth=0 marginheight=0 border=0 
width="360" height="270" style="overflow: hidden; border:0; 
margin:0; width:360px; height:270px; max-width:100%; max-height:100%" 
src="webcam.html" id="re" scrolling="no" 
allowtransparency="true">...</iframe>

来源

2012-04-08 10:30:31 Niko

我很感谢您的反馈，我明白您的意见。然而，由于这是一个免费的网站，它似乎与它们所具有的控件相冲突，而不是我的网络摄像头图像，将替换页面顶部显示的一个广告横幅的精简版本。我已恢复到原始代码，但是您可以在http://dobrina.bravehost.com – Gluepack 2012-04-10 06:56:43

上看到我正在尝试执行的操作，如果您在该位置调用webcam.html，则会看到结果（可以查看生成的来源也）。 – Gluepack 2012-04-10 07:15:12

为什么在浏览器中显示我的摄像头图像的差异？

回答

相关问题