Question

我有一个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中正确显示（即我想要它，减少到适合）或者它是不可能的？

Answer 1

图像的显示方式实际上取决于浏览器，没有标准。最简单的解决方案是创建一个HTML文件，其中包含javascript和图片的<img>标记，而不是直接将图片加载到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>

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

1 个答案: