왜 브라우저간에 웹캠 이미지를 표시하는 차이가 있습니까?

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>

그것은 맞게 640 × 480 원본 이미지를 줄이고, 파이어 폭스에서 잘 작동 ... 모든 브라우저에서 (나는 그것을보고하는 방법) 작동합니다. 그러나 IE와 Chrome에서는 이미지의 중앙 상단 부분 만 표시됩니다 (즉, 이미지가 축소되어 표시되지 않음). IE와 Chrome에서 제대로 표시되도록하기 위해 추가 코드가 필요한가요? 아니면 불가능합니까?

출처

2012-04-08 Gluepack

이미지가 표시되는 방식은 브라우저에 달려 있습니다. 표준이 아닙니다. 가장 쉬운 해결책은 iframe 대응에 직접 이미지를로드하는 대신 자바 스크립트와 이미지에 대한 <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

에서 수행하려고하는 작업을 볼 수 있으며 해당 위치에서 webcam.html을 호출하면 결과를 볼 수 있습니다. 생성 된 소스도 있음). – Gluepack

왜 브라우저간에 웹캠 이미지를 표시하는 차이가 있습니까?

답변

관련 문제