javascript - w3school - ¿Cómo recuperar una imagen remota para mostrarla en un lienzo?
new image javascript canvas (5)
¿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 pasar sobre 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);
}
Para agregar una imagen en JavaScript, puede hacer lo siguiente:
myimage = new Image()
myimage.src=''http://....''
Si una imagen en su página tiene una ID "imagen1", puede asignar el src de image1 a myimage.src.
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ía:
myimage = new Image();
myimage.onload = function() {
context.drawImage(myimage, ...);
}
myimage.src = ''http://myserver/nextimage.cgi'';
He descubierto que usar 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.
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 demasiado trabajo.
La variable "posición" le permite moverlo en el lienzo.
Entonces 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 se dibujará automáticamente en el lienzo en (20,200).
El prototipo funciona para todos los objetos HTML y JavaScript nativos. Asi que
Array.prototype.sum = function(){
var _sum = 0.0;
for (var i=0; i<this.length; i++){
_sum += parseFloat(this[i]);
}
return _sum;
}
da una nueva función a todas las matrices.
Sin embargo,
var Bob;
Bob.Prototype.sayHi = function(){
alert("Hello there.");
}
no funcionará (por varias razones, pero solo hablaré de prototipos).
Prototype es una especie de "propiedad", que contiene todas las propiedades / métodos que usted ingresa, y ya está en cada uno de los objetos HTML y Javascript nativos (no los que usted 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ás definiendo tu variable, deberías hacerlo más así.
var Bob = function(){
this.sayHi = function(){
alert("Hello there.");
}
}
Si está utilizando jQuery, puede hacer:
$.(''<img src="http://myserver/nextimage.cgi" />'').appendTo(''#canv'');
También puede agregar anchuras y cualquier otra cosa en la etiqueta img.
Use el objeto de imagen de JavaScript incorporado.
Aquí hay un ejemplo muy simple de usar el objeto Imagen:
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 sincrónicamente, 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'';