8

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

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

<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);
}
4

6 に答える 6

23

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

Image オブジェクトを使用した非常に簡単な例を次に示します。

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

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

ありがとうございます！

リソースを同期的に要求することはできないことに注意してください。そのため、実際には次の行に沿って何かを行う必要があります。

myimage = new Image();
myimage.onload = function() {
                     ctx.drawImage(myimage, x, y);
                 }
myimage.src = 'http://myserver/nextimage.cgi';
于 2008-10-02T19:44:43.827 に答える
8

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

myimage = new Image();
myimage.onload = function() {
    context.drawImage(myimage, ...);
}
myimage.src = 'http://myserver/nextimage.cgi';
于 2008-10-03T02:03:55.647 に答える
2

JavaScript で画像を追加するには、次のようにします。

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

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

于 2008-10-02T19:47:04.227 に答える
1

I have found that using prototypes is very helpful here. If you aren't familiar with them, prototypes are part of objects that allow you to set your own variables and/or methods to them.

Doing something like:

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

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

allows you to set position and draw to the canvas without too much work.

The "position" variable allows you to move it around on the canvas.
So it's possible to do:

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

and the image will automatically draw to the canvas at (20,200).

Prototype works for all HTML and native Javascript objects. So

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

gives a new function to all Arrays.

However, 

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

will not work (for multiple reasons, but i'll just talk about prototypes).
Prototype is a "property" of sorts, which contains all the your properties/methods that you input, and is already in each of the HTML and native Javascript objects (not the ones you make).
Prototypes also allow for easy calling (you can do "myImg.position.x" instead of "myImg.prototype.position.x" ).

Besides, if you are defining you variable, you should do it more like this.

var Bob = function(){
    this.sayHi = function(){
        alert("Hello there.");
    }
}
于 2012-03-09T15:52:16.500 に答える
0

Promise の使用:

class App {
  imageUrl = 'https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE4HZBo'

  constructor(dom) {
    this.start(dom)
  }

  async start(dom) {
    const appEl = dom.createElement('div')
    dom.body.append(appEl)
    
    const imageEl = await this.loadImage(this.imageUrl)
    
    const canvas = dom.createElement('canvas')
    canvas.width = imageEl.width
    canvas.height = imageEl.height
    const ctx = canvas.getContext('2d')
    ctx.drawImage(imageEl, 0, 0)
    
    appEl.append(canvas)
  }
  
  loadImage = async (url) => 
    new Promise((resolve) => {
      const imageEl = new Image()
      imageEl.src = url
      imageEl.onload = () => resolve(imageEl)
    })
}

new App(document)

于 2021-12-17T03:51:18.400 に答える
-3

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

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

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

于 2008-10-02T19:55:03.863 に答える