为什么在浏览器中显示我的网络摄像头图像会有所不同？答案

【问题标题】：Why the difference in displaying my webcam image across browsers?为什么在浏览器中显示我的网络摄像头图像会有所不同？
【发布时间】：2012-04-21 02:38:10
【问题描述】：

我有一个 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 x 480 的原始图像以适应。但是，在 IE 和 Chrome 中，仅显示图像的中心顶部（即图像不会缩小以适应）。是否需要任何额外的代码来确保它在 IE 和 Chrome 中正确显示（即我想要的方式，减少到适合），还是不可能？

【问题讨论】：

标签： javascript image cross-browser autoresize partial-page-refresh

【解决方案1】：

图像如何显示完全取决于浏览器，没有标准。最简单的解决方案是为图像创建一个包含 javascript 和 <img> 标记的 HTML 文件，而不是将图像直接加载到 iframe 中：

<!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>

【讨论】：

感谢您的反馈，我理解您所说的。但是，由于它是一个免费网站，它似乎与他们现有的控件相冲突，并且代替了我的网络摄像头图像，而是显示在页面顶部的一个广告横幅的压缩版本。我已恢复到原始代码，但您可以在 dobrina.bravehost.com 看到我正在尝试做的事情
如果您在该位置调用 webcam.html，您将看到结果（也可以查看生成的源代码）。