キャンバスに表示するリモート画像を取得する方法は？

StackOverflow https://stackoverflow.com/questions/164181

  •  03-07-2019
  •  | 
  •  

質問

サーバーから画像を取得するにはどうすればよいですか

キャンバスにいくつかの画像を描画できるようにするこのコードがあります。

<html>
  <head>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('canv');
        var ctx = canvas.getContext('2d');

        for (i=0;i<document.images.length;i++){
          ctx.drawImage(document.images[i],i*150,i*130);
        }
    }
    </script>
  </head>
  <body onload="draw();">
    <canvas id="canv" width="1024" height="1024"></canvas>
    <img src="http://www.google.com/intl/en_ALL/images/logo.gif">
    <img src="http://l.yimg.com/a/i/ww/beta/y3.gif">
    <img src="http://static.ak.fbcdn.net/images/welcome/welcome_page_map.png">
  </body>
</html>

document.imagesをループする代わりに、サーバーから画像を継続的に取得したいです。

for (;;) {
    /* how to fetch myimage??? */
    myimage = fetch???('http://myserver/nextimage.cgi');
    ctx.drawImage(myimage, x, y);
}
役に立ちましたか？

解決

組み込みの JavaScript Imageオブジェクトを使用します。

これは、Imageオブジェクトの非常に簡単な使用例です。

myimage = new Image();
myimage.src = 'http://myserver/nextimage.cgi';

この回答のコメントから、シナリオにより適したメカニズムを以下に示します。

ありがとう olliej ！

  

リソースを同期的にリクエストできないことは注目に値するので、実際には次の行に沿って何かを行う必要があります。

myimage = new Image();
myimage.onload = function() {
                     ctx.drawImage(myimage, x, y);
                 }
myimage.src = 'http://myserver/nextimage.cgi';

他のヒント

キャンバスに画像を描画する場合は、画像が実際にロードされるまで待つ必要があるため、正しいことは次のようになります。

myimage = new Image();
myimage.onload = function() {
    context.drawImage(myimage, ...);
}
myimage.src = 'http://myserver/nextimage.cgi';

JavaScriptで画像を追加するには、次の操作を実行できます。

myimage = new Image()
myimage.src='http://....'

ページ上の画像のIDが「image1」の場合、image1のsrcをmyimage.srcに割り当てることができます。

ここでプロトタイプを使用すると非常に役立つことがわかりました。それらに慣れていない場合、プロトタイプはオブジェクトの一部であり、独自の変数やメソッドをそれらに設定できます。

次のようなことを行う：

Image.prototype.position = {
    x: 0,
    y: 0
}

Image.prototype.onload = function(){
    context.drawImage(this, this.position.x, this.position.y);
}

作業をしなくても、位置を設定してキャンバスに描画できます。

「位置」変数を使用すると、キャンバス上で移動できます。
そのため、次のことが可能です。

var myImg = new Image();
myImg.position.x = 20;
myImg.position.y = 200;
myImg.src = "http://www.google.com/intl/en_ALL/images/logo.gif";

画像は（20,200）でキャンバスに自動的に描画されます。

プロトタイプは、すべてのHTMLおよびネイティブJavascriptオブジェクトで機能します。だから

Array.prototype.sum = function(){
    var _sum = 0.0;
    for (var i=0; i<this.length; i++){
        _sum += parseFloat(this[i]);
    }
    return _sum;
}

すべての配列に新しい関数を提供します。

ただし、

var Bob;
Bob.Prototype.sayHi = function(){
    alert("Hello there.");
}

機能しません（複数の理由により、プロトタイプについてのみ説明します）。
プロトタイプは「プロパティ」です入力したすべてのプロパティ/メソッドが含まれ、HTMLおよびネイティブJavaScriptオブジェクト（作成したものではない）のそれぞれに既に含まれています。
プロトタイプを使用すると、簡単に呼び出すことができます（＆quot; myImg.prototype.position.x＆quot;の代わりに＆quot; myImg.position.x＆quot;を実行できます）。

さらに、変数を定義している場合は、このようにする必要があります。

var Bob = function(){
    this.sayHi = function(){
        alert("Hello there.");
    }
}

jQueryを使用している場合、次のことができます。

$.('<img src="http://myserver/nextimage.cgi" />').appendTo('#canv');

imgタグに幅などを追加することもできます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top