¿Cómo recuperar una imagen remota para mostrarla en un lienzo?

¿Cómo puedo obtener imágenes de un servidor?¿Cómo recuperar una imagen remota para mostrarla en un lienzo?

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 pasar por encima de document.images, me gustaría obtener continuamente imágenes de un servidor.

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

Fuente

2008-10-02 Mark Harrison

Utilice el incorporado JavaScript Image object.

Aquí es un ejemplo muy simple de utilizar el objeto Image:

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

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

Gracias olliej!

Vale la pena señalar que no se puede solicitar de forma sincrónica un recurso, por lo que realmente debe hacer algo a lo largo de las líneas de:

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

Fuente

2008-10-02 19:44:43

Vale la pena señalar que no se puede solicitar un recurso de forma sincrónica, lo que en realidad debe hacer algo en la línea de myimage.onload = function() {ctx.drawImage (myimage, x, y); } myimage.src = 'http: //myserver/nextimage.cgi'; – olliej

Para añadir una imagen en JavaScript que puede hacer lo siguiente :

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

Si una imagen en su página tiene un ID "imagen1", se puede asignar el src de imagen1 a myimage.src.

Fuente

2008-10-02 19:47:04

Me debes un coque;) –

-3

Si está utilizando jQuery que puede hacer:

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

También puede agregar anchuras y cualquier otra cosa en la etiqueta img.

Fuente

2008-10-02 19:55:03

El lienzo no muestra elementos secundarios, es un contexto de mapa de bits programable que puedes dibujar con JS, una de las funciones de API es drawImage() que toma un elemento/elemento de imagen y lo dibuja en el buffer. Le permite hacer cosas ingeniosas que anteriormente no eran posibles, por ej. http://canvaspaint.org/ – olliej

Ahora que entiendo la pregunta, daría una respuesta diferente. :) –

Ah, incluso puedes borrar esta respuesta ... – Alberto

Si desea dibujar una imagen para hacer un lienzo también hay que esperar a que se cargue la imagen en realidad, así que la cosa correcta de hacer será:

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

Fuente

2008-10-03 02:03:55 olliej

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

Hacer algo como:

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

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

le permite ajustar la posición y dibuja a la lona sin demasiado trabajo.

La variable "posición" le permite moverlo por el lienzo.
lo que es posible hacer:

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 automáticamente atraerá a la lona al (20200).

El prototipo funciona para todos los objetos HTML y JavaScript nativos.Por lo tanto,

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

ofrece una nueva función para todas las matrices.

Sin embargo,

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

no va a funcionar (por múltiples razones, pero sólo voy a hablar de prototipos).
El prototipo es una "propiedad" de géneros, que contiene todas las 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 (puede hacer "myImg.position.x" en lugar de "myImg.prototype.position.x").

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

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

Fuente

2012-03-09 15:52:16 TheCrzyMan

¿Cómo recuperar una imagen remota para mostrarla en un lienzo?

Respuesta

Cuestiones relacionadas