Wie zu Holen ein remote-Bild-Darstellung im canvas-Bereich?

Wie kann ich abrufen von Bildern von einem server?

Habe ich dieses Stück code, das mir ermöglicht, zu zeichnen einige Bilder auf einer Leinwand.

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

Anstatt einer Schleife über document.Bilder würde ich gerne kontinuierlich abrufen von Bildern von einem server.

for (;;) {
    /* how to fetch myimage??? */
    myimage = fetch???('http://myserver/nextimage.cgi');
    ctx.drawImage(myimage, x, y);
}
InformationsquelleAutor Mark Harrison | 2008-10-02
  1. 22

    Verwenden Sie die integrierte JavaScript Image-Objekt.

    Hier ist ein sehr einfaches Beispiel für die Verwendung des Image-Objekts:

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

    Hier ist ein geeigneter Mechanismus für Ihr Szenario aus den Kommentaren beantwortet.

    Dank olliej!

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

    myimage = new Image();
myimage.onload = function() {
                     ctx.drawImage(myimage, x, y);
                 }
myimage.src = 'http://myserver/nextimage.cgi';
    • Es ist erwähnenswert, dass können Sie nicht synchron fordern Sie eine Ressource an, so sollten Sie es tatsächlich tun, etwas entlang der Linien von "myimage".onload = function() { ctx.drawImage(meinbild, x, y); } myimage.src = 'myserver/Folgebild.cgi';
    InformationsquelleAutor Eric Schoonover
  2. 8

    Wenn Sie möchten, zeichnen Sie ein Bild auf eine Leinwand, Sie müssen auch warten, bis das Bild tatsächlich zu laden, so dass die richtige Sache zu tun:

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

    Fügen Sie ein Bild in JavaScript können Sie das folgende tun:

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

    Wenn Sie ein Bild auf Ihrer Seite hat die ID "image1", die Sie zuweisen können, die src von image1 zu myimage.src.

    • Du schuldest mir noch eine Cola 😉
    InformationsquelleAutor Diodeus - James MacFarlane
  4. 1

    Habe ich gefunden, dass die Verwendung von Prototypen ist hier sehr hilfreich. Wenn Sie nicht vertraut mit Ihnen, Prototypen sind Teil der Objekte, mit denen Sie Ihre eigenen Variablen und/oder Methoden zu Ihnen.

    Etwas wie:

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

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

    ermöglicht Ihnen das festlegen von position und ziehen auf der Leinwand, ohne zu viel Arbeit.

    "Position" - variable erlaubt Ihnen zu bewegen, auf die Leinwand.

    So ist es möglich, das 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 zeichnen auf der canvas (20,200).

    Prototyp funktioniert für alle HTML-und native Javascript-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 auf alle Arrays.

    Jedoch 

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

    wird nicht funktionieren (für mehrere Gründe, aber ich werde einfach darüber reden Prototypen).

    Prototyp ist eine "Eigenschaft" der Art, die enthält alle Ihre Eigenschaften/Methoden, die Sie eingeben, und ist bereits in jedem der HTML und native Javascript-Objekte (nicht die, die Sie machen).

    Prototypen ermöglichen zudem die einfache Berufung (man kann "myImg.position.x" anstelle von "myImg.der Prototyp.position.x" ).

    Außerdem, wenn Sie sind, definieren Sie Variablen, die Sie tun sollten, ist es mehr wie diese.

    var Bob = function(){
    this.sayHi = function(){
        alert("Hello there.");
    }
}
    InformationsquelleAutor TheCrzyMan
  5. -3

    Wenn Sie jQuery können Sie tun:

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

    Können Sie auch hinzufügen, breiten und etwas anderes in den img-tag.

    • Canvas-Bereich nicht angezeigt, child-Elemente, es ist eine programmierbare bitmap-Kontext können Sie zeichnen mit JS, eine der API-Funktionen ist mit der Methode drawImage (), die ein Bild-element/Objekt und zieht es in den Puffer. Es erlaubt Ihnen zu tun nette Dinge, die zuvor nicht möglich waren zB. canvaspaint.org
    • Nun, ich verstehe die Frage, ich würde geben eine andere Antwort. 🙂
    • Oh, Sie können auch löschen Sie diese Antwort...
    InformationsquelleAutor Darryl Hein
Schreibe einen Kommentar