为什么在浏览器之间显示我的网络摄像头图像会有所不同

Why the difference in displaying my webcam image across browsers?

本文关键字：摄像头 图像 有所不同 网络 我的 浏览器 之间 显示 为什么      更新时间：2023-09-26

我有一个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 和图像<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>

将其另存为"网络摄像头.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>
相关文章：