2012-03-03 28 views
13

में फ़ाइल डेटा को जोड़ने के लिए निम्न कोड छवि फ़ाइल को पढ़ना है और फिर कैनवास मॉड्यूल की सहायता से फ़ाइल डेटा को कैनवास में जोड़ना है।nodejs - फ़ाइल से कैनवास

जब मैं इस कोड को चलाता हूं तो मुझे त्रुटि संदेश प्राप्त होता है छवि परिभाषित नहीं है। क्या छवि वस्तु है कि मैं एक मॉड्यूल से शुरू करने की कोशिश कर रहा हूं जिसे मैं बस आयात करता हूं?

var http = require('http'), fs = require('fs'), 
Canvas = require('canvas'); 

http.createServer(function (req, res) { 
    fs.readFile(__dirname + '/image.jpg', function(err, data) { 
     if (err) throw err; 
     img = new Image(); 
     img.src = data; 
     ctx.drawImage(img, 0, 0, img.width/4, img.height/4); 

     res.write('<html><body>'); 
     res.write('<img src="' + canvas.toDataURL() + '" />'); 
     res.write('</body></html>'); 
     res.end(); 
    }); 

}).listen(8124, "127.0.0.1"); 
console.log('Server running at http://127.0.0.1:8124/'); 

उत्तर

33

मैं माफी माँगता हूँ अगर मैं यहाँ गलत हूं, लेकिन लगता है कि यह कोड कहीं मिल गया है और वास्तव में समझ कवर के तहत हो रहा है बिना इसका इस्तेमाल करने की कोशिश की है यह लग रहा है। भले ही आप को ठीक करना चाहते हैं, छवि त्रुटि परिभाषित नहीं है, कई अन्य हैं।

मैं इस पोस्ट के अंत में निश्चित कोड है, लेकिन मैं अपने प्रश्न से कोड में इन मुद्दों के बारे में अधिक गहराई से सोच की सलाह देते हैं:

  • क्या Image है? यह कहां से आता है? आपने http, fs, और Canvas आयात किया है, इसलिए उन चीजों को स्पष्ट रूप से परिभाषित किया गया है। हालांकि, Image हैश को कहीं भी परिभाषित नहीं किया गया है और यह अंतर्निहित नहीं है।

    जैसा कि यह पता चला है, Image नोड-कैनवास मॉड्यूल से है, जिसे आपने Canvas = require('canvas') के साथ आयात किया है। इसका मतलब है कि ImageCanvas.Image के रूप में उपलब्ध है।

    यह समझना महत्वपूर्ण है कि यह आपके द्वारा सेट किए गए आयातों के कारण है। आप आसानी से abc = require('canvas') कर सकते हैं, और फिर Imageabc.Image के रूप में उपलब्ध होगा।

  • ctx क्या है? वह कहाँ से आ रहा है?

    फिर, यह एक और चर है जिसे अभी कहीं भी परिभाषित नहीं किया गया है। Image के विपरीत, यह Canvas.ctx के रूप में उपलब्ध नहीं है। यह सिर्फ एक यादृच्छिक परिवर्तनीय नाम है जो इस बिंदु पर किसी भी चीज़ के अनुरूप नहीं है, इसलिए drawImage पर कॉल करने का प्रयास अपवाद फेंकने जा रहा है।

  • canvas (लोअरकेस) के बारे में क्या? वो क्या है?

    आप canvas.toDataURL का उपयोग कर रहे हैं, लेकिन कहीं भी canvas नामक कोई चर नहीं है। कोड के इस टुकड़े को आप क्या करने की उम्मीद कर रहे हैं? अभी यह एक अपवाद फेंकने जा रहा है कि कैनवास अनिर्धारित है।

मैं प्रलेखन को अधिक बारीकी से पढ़ने और भविष्य में अपने स्वयं के अनुप्रयोगों में कॉपी किए गए किसी भी उदाहरण कोड पर अधिक बारीकी से देखने की सिफारिश करता हूं।


यहां कुछ निश्चित टिप्पणियों के साथ मेरे परिवर्तनों को समझाने के लिए निश्चित कोड है। मैंने https://github.com/learnboost/node-canvas पर प्रलेखन पर एक त्वरित नज़र डालने से यह पता लगाया।

var http = require('http'), fs = require('fs'), 
Canvas = require('canvas'); 

http.createServer(function (req, res) { 
    fs.readFile(__dirname + '/image.jpg', function(err, data) { 
     if (err) throw err; 
     var img = new Canvas.Image; // Create a new Image 
     img.src = data; 

     // Initialiaze a new Canvas with the same dimensions 
     // as the image, and get a 2D drawing context for it. 
     var canvas = new Canvas(img.width, img.height); 
     var ctx = canvas.getContext('2d'); 
     ctx.drawImage(img, 0, 0, img.width/4, img.height/4); 

     res.write('<html><body>'); 
     res.write('<img src="' + canvas.toDataURL() + '" />'); 
     res.write('</body></html>'); 
     res.end(); 
    }); 

}).listen(8124, "127.0.0.1"); 
console.log('Server running at http://127.0.0.1:8124/'); 
+0

धन्यवाद रोहन।मैं वास्तव में सीटीएक्स और कैनवास चर को परिभाषित करने के बारे में भूल गया था लेकिन कभी नहीं देखा क्योंकि मैंने अभी तक उन त्रुटियों को प्राप्त करने में प्रबंधन नहीं किया है। वह लिंक जो आपने दिया है वह है जहां मैंने उस पृष्ठ पर दिखाए गए उदाहरण से प्राप्त किया है लेखक ने ** कैनवास.इमेज ** के बजाय ** नई छवि ** का उपयोग किया है। – mesh

+1

हाँ, आलसी दस्तावेज वहाँ। नोड-कैनवास मॉड्यूल के कोड के संदर्भ में बस 'छवि' का उपयोग करना ही काम करेगा, क्योंकि यह इसके स्रोत (lib/canvas.js) में 'image = canvas.Image' को परिभाषित करता है। हालांकि, यह आपके कोड में तब तक काम नहीं करेगा जब तक आप एक ही परिभाषा नहीं करते। –

+0

यह एक दयालुता है, लेकिन वह खराब दस्तावेज अभी भी वहां है। हम इसे ठीक करने के लिए अपने गधे को कैसे दबा सकते हैं? – Dan

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