2009-05-27 12 views
6

एचटीएमएल कैनवास तत्व की सामग्री से छवि डेटा उत्पन्न करने का सबसे अच्छा तरीका क्या है?एचटीएमएल कैनवास तत्व से छवि डेटा जेनरेट करें

मैं छवि डेटा बनाना चाहता हूं जैसे कि इसे किसी सर्वर पर प्रेषित किया जा सकता है (उपयोगकर्ता के लिए फ़ाइल में सीधे सहेजने में सक्षम होना आवश्यक नहीं है)। छवि डेटा एक सामान्य प्रारूप में होना चाहिए जैसे पीएनजी या जेपीईजी।

कई ब्राउज़र में सही ढंग से काम करने वाले समाधान पसंद किए जाते हैं, लेकिन यदि प्रत्येक समाधान ब्राउज़र पर निर्भर करता है, तो फ़ायरफ़ॉक्स के हाल के संस्करणों को लक्षित किया जाना चाहिए।

उत्तर

2

मुझे लगता है कि आप जिस lib का उपयोग कर सकते हैं वह Canvas2Image है, यह कैनवास से मूल सुविधाओं का उपयोग करता है, लेकिन यह किसी भी ब्राउज़र पर काम नहीं करेगा। यदि आप चाहते हैं, तो मेरे पास इस lib का एक अनुकूलित संस्करण है, मैं इसे आपके साथ साझा करूंगा।

फिर आप उत्पन्न Data URI प्राप्त कर सकते हैं और इसे सर्वर पर अजाक्स का उपयोग करके भेज सकते हैं।

+0

धन्यवाद, ऐसा लगता है कि मुझे क्या चाहिए। मैं अनुकूलित संस्करण की सराहना करता हूं। आपको मेरी प्रोफ़ाइल में सूचीबद्ध मेरी वेबसाइट पर जाकर अपना ईमेल पता ढूंढने में सक्षम होना चाहिए। – Doug

+0

कोई समस्या नहीं! http://flotr.googlecode.com/svn/trunk/flotr/flotr/prototype/lib/canvas2image.js मैंने बीएमपी को अल्फा चैनल, और कुछ गति अनुकूलन रखने के लिए प्रस्तुत किया। असल में मैंने एक मुफ्त पुस्तकालय में उपयोग किया जिस पर मैं काम कर रहा हूं, इसलिए यह मुफ़्त है, और हमेशा रहेगा। –

+0

धन्यवाद, बहुत कुछ! जिस परियोजना की मैं योजना बना रहा हूं, उसके पास स्रोत स्वतंत्र रूप से उपलब्ध होगा क्योंकि यह ज्यादातर व्यक्तिगत उपयोग के लिए होगा। – Doug

4

फ़ायरफ़ॉक्स और ओपेरा में toDataURL() विधि है जो डेटा-यूआरएल स्वरूपित पीएनजी देता है। आप सर्वर को सबमिट करने के लिए परिणाम को फॉर्म फ़ील्ड में असाइन कर सकते हैं।

डेटा यूआरएल आधार -64 एन्कोडेड है, इसलिए आपको इसे सर्वर की तरफ डीकोड करना होगा। आपको "डेटा: छवि/पीएनजी" को भी बंद करना होगा; पाठ्यक्रम का हिस्सा

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