Bir tuvalde görüntülemek için uzak bir görüntü nasıl getirilir?

Görüntüleri bir sunucudan nasıl alabilirim?Bir tuvalde görüntülemek için uzak bir görüntü nasıl getirilir?

Bir resim üzerinde bir resim çizmeme izin veren bir kod var.

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

document.images üzerinde döngü yapmak yerine, görüntüleri bir sunucudan sürekli olarak almak istiyorum.

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

kaynak

2008-10-02 Mark Harrison

kullanın yerleşik JavaScript Image object.

İşte

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

Bu yanıt yorumlardan senin senaryo için daha uygun bir mekanizmadır:

İşte Görüntü nesnesi kullanılarak çok basit bir örnektir.

Teşekkürler olliej!

O zaman uyumlu bir kaynak isteğinde bulunamaz fazlalaştı, bu yüzden aslında çizgisinde bir şey yapmalıyım: Aşağıdaki

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

kaynak

2008-10-02 19:44:43

zaman uyumlu bir kaynak talep edemez aslında myimage.onload = function() {ctx.drawImage (myImage, x, y) çizgisinde bir şeyler yapmalıyım, bu yüzden dikkate değerdir } myimage.src = 'http: //myserver/nextimage.cgi'; – olliej

Yapabileceğiniz JavaScript resim eklemek için :

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

sayfanızdaki bir görüntü bir kimliği "image1" varsa, image1 src myimage.src için atayabilirsiniz.

kaynak

2008-10-02 19:47:04

Bana bir kok borcun var;) –

-3

sen yapabileceğiniz jQuery kullanıyorsanız:

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

Ayrıca genişlikleri ve img etiketi başka bir şey ekleyebilir.

kaynak

2008-10-02 19:55:03

Tuval, alt öğeleri göstermiyor, JS ile çizebileceğiniz programlanabilir bir bitmap içeriğidir, API işlevlerinden biri, bir Resim öğesi/nesnesi alan drawImage() öğesidir ve içine çizer. tampon. Önceden mümkün olmayan güzel şeyleri yapmanıza izin verir örn. http://canvaspaint.org/ – olliej

Şimdi bu soruyu anladım, farklı bir cevap verecektim. :) –

Oh, bu cevabı bile silebilirsiniz ... – Alberto

Yapmanız doğru şey olacak, böylece, aynı zamanda görüntü aslında yüklenmesini beklemeniz gereken tuvale bir görüntü çizmek isterseniz:

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

kaynak

2008-10-03 02:03:55 olliej

Ben prototipler kullanarak çok olduğunu bulduk burada yardımcı olur. Onlara aşina değilseniz, prototipler kendi değişkenlerinizi ve/veya yöntemlerinizi bunlara ayarlamanıza izin veren nesnelerin bir parçasıdır.

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

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

Eğer pozisyon ayarlamak ve çok fazla iş olmadan tuvale çizebiliriz: Böyle bir şey yapmak

"position" değişkeni onu tuval üzerinde taşımanıza izin verir.

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

ve görüntü otomatik (20,200) de tuvale çekecek:
Yani bunu yapmak mümkün.

Prototip, tüm HTML ve yerel Javascript nesneleri için çalışır.Bu nedenle, tüm Dizilere yeni bir işlev kazandırır.

Ancak

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

(çoklu nedenlerle, ama ben sadece prototipler bahsedeceğiz) çalışmaz.
Prototip, girdiğiniz tüm özelliklerinizi/yöntemlerinizi içeren ve zaten HTML ve yerel Javascript nesnelerine (yaptığınız öğelere değil) sahip olan bir "özellik" türüdür.
Prototipler ayrıca kolay arama yapmanızı sağlar ("myImg.prototype.position.x" yerine "myImg.position.x" ifadesini kullanabilirsiniz).

Ayrıca, siz değişkeninizi tanımlıyorsanız, bunu daha çok yapmalısınız.

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

kaynak

2012-03-09 15:52:16 TheCrzyMan

Bir tuvalde görüntülemek için uzak bir görüntü nasıl getirilir?

cevap

İlgili konular