Comment récupérer une image distante à afficher dans une toile?

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

  •  03-07-2019
  •  | 
  •  

Question

Comment puis-je récupérer des images d'un serveur?

J'ai ce code qui me permet de dessiner des images sur une toile. 

<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>

Au lieu de parcourir document.images en boucle, je voudrais extraire continuellement des images d'un serveur. 

for (;;) {
    /* how to fetch myimage??? */
    myimage = fetch???('http://myserver/nextimage.cgi');
    ctx.drawImage(myimage, x, y);
}
Était-ce utile?

La solution

Utilisez l’intégré objet image JavaScript .

Voici un exemple très simple d'utilisation de l'objet Image: 

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

Voici un mécanisme plus approprié pour votre scénario à partir des commentaires sur cette réponse.

Merci olliej !

  

Il est intéressant de noter que vous ne pouvez pas demander de manière synchrone une ressource. Vous devez donc faire quelque chose dans le sens suivant: 

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

Autres conseils

Si vous souhaitez dessiner une image sur un canevas, vous devez également attendre que l'image se charge réellement. La procédure correcte consiste donc à: 

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

Pour ajouter une image en JavaScript, procédez comme suit: 

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

Si une image de votre page a un identifiant "image1", vous pouvez attribuer le src de image1 à myimage.src.

J'ai constaté que l'utilisation de prototypes est très utile ici. Si vous ne les connaissez pas, les prototypes font partie d’objets vous permettant de définir vos propres variables et / ou méthodes.

Faire quelque chose comme: 

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

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

vous permet de définir la position et de dessiner sur la toile sans trop de travail.

La " position " variable vous permet de la déplacer sur la toile.
Donc, il est possible de faire: 

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

et l'image sera automatiquement dessinée sur la toile à (20 200).

Le prototype fonctionne pour tous les objets HTML et Javascript natif. Donc 

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

donne une nouvelle fonction à tous les tableaux.

Cependant, 

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

ne fonctionnera pas (pour plusieurs raisons, mais je ne parlerai que de prototypes).
Le prototype est une "propriété". de sorte, qui contient toutes les propriétés / méthodes que vous avez entrées et qui se trouve déjà dans chacun des objets HTML et Javascript natif (pas ceux que vous créez).
Les prototypes permettent également d’appeler facilement (vous pouvez utiliser "myImg.position.x" au lieu de "myImg.prototype.position.x").

En outre, si vous définissez votre variable, vous devriez le faire davantage comme ceci. 

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

Si vous utilisez jQuery, vous pouvez faire: 

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

Vous pouvez également ajouter des largeurs et tout autre élément de la balise img.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top