Como buscar uma imagem remota para exibir em uma tela?

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

  •  03-07-2019
  •  | 
  •  

Pergunta

Como posso obter imagens de um servidor?

Eu tenho este pedaço de código que me permite tirar algumas imagens em uma 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>

Em vez de looping sobre document.images, eu gostaria de buscar continuamente imagens de um servidor. 

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

Solução

Use o built-in JavaScript objeto Imagem .

Aqui está um exemplo muito simples de usar o objeto Image: 

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

Aqui é um mecanismo mais apropriado para seu cenário a partir dos comentários sobre esta resposta.

olliej !

É importante notar que você não pode de forma síncrona solicitar um recurso, então você deve realmente fazer algo ao longo das linhas de: 

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

Outras dicas

Se você quiser desenhar uma imagem para uma tela você também precisa esperar para que a imagem realmente de carga, assim que a coisa correta a fazer será: 

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

Para adicionar uma imagem em JavaScript que você pode fazer o seguinte: 

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

Se uma imagem na sua página tem um ID "image1", você pode atribuir o src de image1 para myimage.src.

Eu descobri que usando protótipos é muito útil aqui. Se você não estiver familiarizado com eles, os protótipos são parte de objetos que permitem que você defina suas próprias variáveis ??e / ou métodos para eles.

Fazer algo como: 

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

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

permite que você posição definida e desenhar para a tela sem muito trabalho.

A variável "posição" permite que você movê-lo na tela.
Portanto, é possível fazer: 

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 a imagem vai chamar automaticamente para a tela em (20.200).

Prototype funciona para todos os HTML e objetos JavaScript nativas. Então 

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

dá uma nova função para todas as matrizes.

No entanto, 

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

não vai funcionar (por várias razões, mas vou apenas falar sobre protótipos).
Prototype é uma "propriedade" das sortes, que contém todas as suas propriedades / métodos que você entrada, e já está em cada um dos HTML e Javascript nativo objetos (não aqueles que você faz).
Protótipos também permitir a fácil de chamada (que você pode fazer "myImg.position.x" em vez de "myImg.prototype.position.x").

Além disso, se você está definindo você variável, você deve fazê-lo mais como este. 

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

Se você estiver usando jQuery você pode fazer: 

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

Você também pode adicionar larguras e qualquer outra coisa na tag img.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top