Почему разница в отображении изображения веб-камеры в браузерах?

У меня есть веб-камера 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

Как изображения отображаются на самом деле до браузера, для этого нет стандарта. Самым простым решением было бы создать файл 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>

источник

2012-04-08 10:30:31 Niko

Я ценю ваши отзывы, и я понимаю, что вы сказали. Однако, поскольку это бесплатный веб-сайт, он, похоже, конфликтует с элементами управления, которые они имеют, и вместо изображения моей веб-камеры создается сжатая версия одного из рекламных баннеров, отображаемых в верхней части страницы. Я вернул исходный код, но вы можете увидеть, что я пытаюсь сделать на http://dobrina.bravehost.com – Gluepack

, и если вы вызовете webcam.html в этом месте, вы увидите результат (можете посмотреть на генерируемый источник). – Gluepack

Почему разница в отображении изображения веб-камеры в браузерах?

ответ

Смежные вопросы