Come recuperare un'immagine remota da visualizzare in un'area di disegno?

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

  •  03-07-2019
  •  | 
  •  

Domanda

Come posso recuperare le immagini da un server?

Ho questo codice che mi permette di disegnare alcune immagini su una tela. 

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

Invece di passare in rassegna document.images, vorrei recuperare continuamente le immagini da un server. 

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

Soluzione

Utilizza oggetto immagine JavaScript incorporato olliej !

  

Vale la pena notare che non è possibile richiedere una risorsa in modo sincrono, quindi si dovrebbe effettivamente fare qualcosa sulla falsariga di: 

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

Altri suggerimenti

Se vuoi disegnare un'immagine su una tela devi anche aspettare che l'immagine si carichi effettivamente, quindi la cosa giusta da fare sarà: 

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

Per aggiungere un'immagine in JavaScript è possibile effettuare le seguenti operazioni: 

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

Se un'immagine sulla tua pagina ha un ID "image1", puoi assegnare lo src di image1 a myimage.src.

Ho scoperto che usare i prototipi è molto utile qui. Se non si ha familiarità con essi, i prototipi fanno parte di oggetti che consentono di impostare le proprie variabili e / o metodi su di essi.

Fare qualcosa del tipo: 

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

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

ti consente di impostare la posizione e disegnare sulla tela senza troppo lavoro.

La posizione "quotata" La variabile ti consente di spostarlo nell'area di disegno.
Quindi è possibile fare: 

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

e l'immagine verrà automaticamente disegnata sulla tela a (20.200).

Il prototipo funziona per tutti gli oggetti HTML e Javascript nativi. Quindi 

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

fornisce una nuova funzione a tutti gli array.

Tuttavia, 

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

non funzionerà (per diversi motivi, ma parlerò solo di prototipi).
Il prototipo è una "proprietà" di sorta, che contiene tutte le proprietà / i metodi che hai inserito, ed è già presente in ciascuno degli oggetti HTML e Javascript nativi (non quelli che crei).
I prototipi consentono anche una facile chiamata (puoi fare " myImg.position.x " invece di " myImg.prototype.position.x ").

Inoltre, se stai definendo la tua variabile, dovresti farlo in questo modo. 

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

Se stai usando jQuery puoi fare: 

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

Puoi anche aggiungere larghezze e qualsiasi altra cosa nel tag img.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top