Como buscar uma imagem remota para exibir em uma tela?
-
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);
}
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.