2008-10-02 11 views
6

मैं सर्वर से छवियां कैसे प्राप्त कर सकता हूं?एक कैनवास में प्रदर्शित करने के लिए एक दूरस्थ छवि कैसे प्राप्त करें?

मुझे यह कोड मिला है जो मुझे कैनवास पर कुछ छवियां खींचने की अनुमति देता है।

<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 पर लूप करने के बजाय, मैं लगातार सर्वर से छवियां प्राप्त करना चाहता हूं।

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

उत्तर

20

अंतर्निहित JavaScript Image object का उपयोग करें।

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

यहाँ इस जवाब पर टिप्पणी से अपने परिदृश्य के लिए ज्यादा उपयुक्त तंत्र है:

यहाँ छवि वस्तु का उपयोग करने का एक बहुत ही सरल उदाहरण है।

धन्यवाद olliej!

यह ध्यान देने योग्य आप तुल्यकालिक एक संसाधन अनुरोध नहीं कर सकते कि लायक है, तो आप वास्तव में की तर्ज पर कुछ करना चाहिए:

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

यह तो आप वास्तव में myimage.onload = function() {ctx.drawImage (myimage, एक्स, वाई) की तर्ज पर कुछ करना चाहिए, आप तुल्यकालिक एक संसाधन अनुरोध नहीं कर सकते कि ध्यान देने योग्य है; } myimage.src = 'http: //myserver/nextimage.cgi'; – olliej

2

जावास्क्रिप्ट में एक छवि को जोड़ने के लिए आप कर सकते हैं निम्नलिखित :

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

अपने पृष्ठ पर एक छवि एक आईडी "Image1" है, तो आप myimage.src को Image1 का स्रोत प्रदान कर सकते हैं।

+0

आप मुझे एक कोक देना चाहते हैं;) –

-3

आप jQuery का उपयोग कर रहे हैं, तो आप कर सकते हैं:

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

तुम भी चौड़ाई और img टैग में कुछ और जोड़ सकते हैं।

+6

कैनवास बाल तत्व प्रदर्शित नहीं करता है, यह एक प्रोग्राम करने योग्य बिटमैप संदर्भ है जिसे आप जेएस के साथ आकर्षित कर सकते हैं, एपीआई कार्यों में से एक drawImage() है जो छवि तत्व/वस्तु लेता है और इसे खींचता है बफर। यह आपको निफ्टी चीजें करने की अनुमति देता है जो पहले संभव नहीं थे उदाहरण के लिए। http://canvaspaint.org/ – olliej

+0

अब जब मैं प्रश्न समझता हूं, तो मैं एक अलग उत्तर दूंगा। :) –

+0

ओह, आप यह जवाब भी हटा सकते हैं ... – Alberto

8

आप एक कैनवास तुम भी के लिए छवि वास्तव में लोड करने के लिए प्रतीक्षा करने की आवश्यकता के लिए एक छवि आकर्षित करने के लिए ऐसा करने के लिए सही बात होगी चाहते हैं:

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

मैं ने पाया है कि प्रोटोटाइप का उपयोग कर बहुत है यहां सहायक यदि आप उनसे परिचित नहीं हैं, तो प्रोटोटाइप उन वस्तुओं का हिस्सा हैं जो आपको अपने स्वयं के चर और/या विधियों को सेट करने की अनुमति देते हैं।

की तरह कुछ कर:

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

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

आप स्थिति सेट और बहुत अधिक काम के बिना कैनवास को आकर्षित करने के लिए अनुमति देता है।

"स्थिति" चर आपको कैनवास पर चारों ओर स्थानांतरित करने की अनुमति देता है।
तो यह करने के लिए संभव है:

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

और छवि स्वचालित रूप से (20,200) पर कैनवास को आकर्षित करेगा।

प्रोटोटाइप सभी HTML और मूल जावास्क्रिप्ट ऑब्जेक्ट्स के लिए काम करता है।तो

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

सभी Arrays को एक नया फ़ंक्शन देता है।

हालांकि,

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

काम नहीं करेगा (कई कारणों के लिए है, लेकिन मैं सिर्फ प्रोटोटाइप के बारे में चर्चा करेंगे)।
प्रोटोटाइप एक प्रकार की "संपत्ति" है, जिसमें आपके द्वारा इनपुट की जाने वाली सभी संपत्तियां/विधियां शामिल हैं, और पहले से ही HTML और मूल जावास्क्रिप्ट ऑब्जेक्ट्स में से प्रत्येक में हैं (न कि आपके द्वारा बनाए गए)।
प्रोटोटाइप भी आसान कॉलिंग की अनुमति देता है (आप "myImg.prototype.position.x" के बजाय "myImg.position.x" कर सकते हैं)।

इसके अलावा, यदि आप चर को परिभाषित कर रहे हैं, तो आपको इसे और अधिक करना चाहिए।

var Bob = function(){ 
    this.sayHi = function(){ 
     alert("Hello there."); 
    } 
} 
संबंधित मुद्दे

 संबंधित मुद्दे