¿Cómo obtener una imagen remota para mostrar en un lienzo?

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

  •  03-07-2019
  •  | 
  •  

Pregunta

¿Cómo puedo obtener imágenes de un servidor?

Tengo este código que me permite dibujar algunas imágenes en un lienzo. 

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

En lugar de hacer un bucle sobre document.images, me gustaría obtener imágenes continuamente de un servidor. 

for (;;) {
    /* how to fetch myimage??? */
    myimage = fetch???('http://myserver/nextimage.cgi');
    ctx.drawImage(myimage, x, y);
}
¿Fue útil?

Solución

Utilice el objeto de imagen de JavaScript .

Aquí hay un ejemplo muy simple de usar el objeto Image: 

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

Aquí hay un mecanismo más apropiado para su escenario a partir de los comentarios sobre esta respuesta.

Gracias olliej !

  

Vale la pena señalar que no puede solicitar un recurso de forma síncrona, por lo que debería hacer algo como: 

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

Otros consejos

Si desea dibujar una imagen en un lienzo, también debe esperar a que la imagen se cargue realmente, por lo que lo correcto será: 

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

Para agregar una imagen en JavaScript, puede hacer lo siguiente: 

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

Si una imagen en tu página tiene un ID " imagen1 " ;, puedes asignar el src de image1 a myimage.src.

He encontrado que usar prototipos es muy útil aquí. Si no está familiarizado con ellos, los prototipos son parte de objetos que le permiten configurar sus propias variables y / o métodos.

Haciendo algo como: 

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

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

le permite establecer la posición y dibujar en el lienzo sin mucho trabajo.

La posición " " La variable te permite moverla en el lienzo.
Así que es posible hacerlo: 

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

y la imagen se dibujará automáticamente en el lienzo en (20,200).

Prototype funciona para todos los objetos HTML y JavaScript nativos. Así que 

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

le da una nueva función a todos los Arrays.

Sin embargo, 

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

no funcionará (por varias razones, pero solo hablaré de prototipos).
Prototipo es una " propiedad " de tipo, que contiene todas sus propiedades / métodos que ingresa, y ya está en cada uno de los objetos HTML y JavaScript nativos (no los que crea).
Los prototipos también permiten una llamada fácil (puedes hacer " myImg.position.x " en lugar de " myImg.prototype.position.x ").

Además, si estás definiendo tu variable, deberías hacerlo más así. 

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

Si está utilizando jQuery, puede hacerlo: 

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

También puedes agregar anchos y cualquier otra cosa en la etiqueta img.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top