0

私は IP ウェブカメラを持っていて、天気予報サービスに画像をアップロードしています。次に、その画像をキャプチャして Web ページに表示します。そのために、ページを更新せずに画像を更新するコードを探しました。適応したコードをいくつか見つけました（申し訳ありませんが、誰に認めればよいかわかりません）……..

    <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で正しく表示されるようにするために必要な追加のコードはありますか(つまり、希望どおりに縮小されます)、またはそれは不可能ですか?

4

1 に答える 1

0

画像がどのように表示されるかは、実際にはブラウザ次第であり、そのための標準はありません。<img>最も簡単な解決策は、画像を iframe に直接ロードする代わりに、javascript と画像のタグを含む 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-08T10:30:31.900 に答える