Wie Remote-Image holen in einer Leinwand angezeigt werden?

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

  •  03-07-2019
  •  | 
  •  

Frage

Wie kann ich holen Bilder von einem Server?

Ich habe dieses Stück Code bekam, die mir ein paar Bilder auf einer Leinwand zeichnen können. 

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

Statt über document.images von looping, würde ich immer wieder gerne Bilder von einem Server holen. 

for (;;) {
    /* how to fetch myimage??? */
    myimage = fetch???('http://myserver/nextimage.cgi');
    ctx.drawImage(myimage, x, y);
}
War es hilfreich?

Lösung

Mit dem integrierten JavaScript Image-Objekt .

Hier ist ein sehr einfaches Beispiel für das Bildobjekt mit: 

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

Hier ist ein geeigneter Mechanismus für Ihr Szenario aus den Kommentaren zu dieser Antwort.

Danke olliej !

  

Es ist erwähnenswert, dass Sie nicht synchron eine Ressource anfordern können, so dass Sie tatsächlich etwas tun sollen entlang der Linien von: 

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

Andere Tipps

Wenn Sie ein Bild auf eine Leinwand zeichnen Sie auch warten, um für das Bild tatsächlich zu laden, so dass die richtige Sache wird zu tun: 

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

Um ein Bild in JavaScript hinzufügen Sie können die folgenden: 

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

Wenn ein Bild auf Ihrer Seite eine ID „image1“ hat, können Sie das src von image1 zuweisen myimage.src.

Ich habe festgestellt, dass Prototypen hier sehr hilfreich ist. Wenn Sie nicht mit ihnen vertraut sind, Prototypen sind ein Teil der Objekte, mit denen Sie Ihre eigenen Variablen setzen und / oder Methoden zu ihnen.

Doing so etwas wie: 

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

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

können Sie Position setzen und ohne zu viel Arbeit auf die Leinwand ziehen.

Die „Position“ Variable ermöglicht es um auf der Leinwand zu bewegen.
So ist es möglich zu tun: 

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

und das Bild wird automatisch auf die Leinwand zu (20.200) ziehen.

Prototyp funktioniert für alle HTML und Javascript nativen Objekte. So 

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

gibt eine neue Funktion für alle Arrays.

Allerdings 

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

funktioniert nicht (aus mehreren Gründen, aber ich werde nur über Prototypen sprechen).
Prototype ist eine „Eigenschaft“ von Sorten, die alle enthält Ihre Eigenschaften / Methoden, die Sie eingeben, und ist bereits in jedem der HTML und nativen Javascript-Objekte (nicht die, die Sie machen).
Prototypen auch für die einfache Berufung ermöglichen (man kann „myImg.position.x“ tun statt „myImg.prototype.position.x“).

Außerdem, wenn Sie Sie Variable definieren, sollten Sie es tun mehr so. 

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

Wenn Sie jQuery verwenden, können Sie tun: 

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

Sie können auch Breite und alles, was im img-Tag hinzuzufügen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top