जावास्क्रिप्ट: सर्वर पर कैनवास छवि भेजना

हैलो खब्रोवित्स।



मैंने कैनवास से सर्वर पर छवि भेजने का फैसला किया।

और यह क्या आया, कटौती के तहत देखें।



तो, हमें एक ब्राउज़र की आवश्यकता है जो कैनवास का समर्थन करता है।



मैंने माउस के साथ कैनवास पर कुछ आकर्षित करना और इस तस्वीर को सर्वर पर भेजना संभव बनाने का फैसला किया।

चलो चलते हैं

कैनवास

मुझे तुरंत कहना होगा कि जावास्क्रिप्ट में जावास्क्रिप्ट कोड लिखा जाएगा।

मेरे पास पुस्तकालयों के खिलाफ कुछ भी नहीं है, मैं खुद उनका उपयोग करता हूं। बस, यह अधिक सामान्य मामला है। यदि वांछित है, तो पुस्तकालय को फिर से लिखना संभव होगा।



कैनवास बनाएँ / कैनवास (आवश्यकतानुसार रेखांकित करें):

<canvas id="canvas" ...></canvas>









अब आपको इसे बनाने की आवश्यकता है ताकि आप कैनवास पर आकर्षित कर सकें।

आकर्षित करने के लिए, हमें 2 डी डिस्प्ले संदर्भ प्राप्त करने की आवश्यकता है, एक पथ बनाएं, प्रारंभिक बिंदु पर जाएं,

एक लाइन को अंतिम बिंदु तक खींचने के लिए लाइनटो () विधि को कॉल करें, पथ को खींचने के लिए स्ट्रोक () विधि को कॉल करें, पथ को बंद करें।

 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); ctx.closePath();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यह सब मेरे कोड में, ऑनमेसडाउन, ऑनमाउसअप और ऑनस्मोसोव हैंडलर में देखा जा सकता है।

सर्वर पर भेजा जा रहा है

लेकिन कैनवास के साथ, ठीक है, इसके साथ काम करने के लिए पुस्तकालयों का एक गुच्छा है। अब सर्वर पर चित्र कैसे भेजें।



हमें POST विधि का उपयोग करके एक ऐजैक्स अनुरोध करने की आवश्यकता है।

केवल चित्र को इस तरह नहीं भेजा जाना चाहिए:

"छवि =% 01% 02% 03 ...", लेकिन एक फ़ाइल के रूप में।



हमें कंटेंट-टाइप "एप्लीकेशन / x-www-form-urlencoded" नहीं, बल्कि "मल्टीपार्ट / फॉर्म-डेटा" डालना होगा।

इसका मतलब यह है कि अनुरोध निकाय में अन्य उपश्रेणियाँ शामिल होंगी, जिनमें स्वयं अपने हेडर और बॉडी होंगे।

आप इस तरह के अनुरोध को एक फॉर्म के साथ HTML पेज बनाकर फ़ायरफ़ॉक्स में LiveHttpHeaders में देख सकते हैं,

विशेषता के साथ enctype = "मल्टीपार्ट / फॉर्म-डेटा":







इस तरह की प्रत्येक उपश्रेणी एक विशिष्ट रूप क्षेत्र से मेल खाती है।

आकृति में, एक फॉर्म मुझे नाम = "आईडी" के साथ एक टेक्स्ट फ़ील्ड के साथ भेजा जाता है और फ़ाइल भेजने के लिए फ़ील्ड "फ़ाइल"।

मैं फ़ाइल "loading.gif" अपलोड करता हूं



हमें एक सीमा विभाजक के साथ आने की आवश्यकता है जो अनुरोध निकायों को अलग कर देगा।

आकृति में, यह विभाजक रेखा है "--------------------------- 12722593819037", इस विभाजक को इनका उपयोग करना चाहिए

उपश्रेणियाँ और उनमें घटित नहीं होनी चाहिए।

इस तरह की प्रत्येक उपश्रेणी से पहले एक पंक्ति होनी चाहिए "-" + सीमा, और आखिरकार - एक रेखा "-" + सीमा + जैसे - "



आप इसके बारे में यहां पढ़ सकते हैं: rfc 1521

आप rfc 1867 में फॉर्म-डेटा के बारे में पढ़ सकते हैं।



मैं ध्यान देता हूं कि 19 दिसंबर, 2010 को क्रोम में फॉर्म-डेटा बनाने के लिए पहले से ही फॉर्मडैट ऑब्जेक्ट है, और फ़ायरफ़ॉक्स में यह केवल 4 संस्करणों में होगा।



कैनवास की सामग्री भेजने के लिए, हम डेटाुरल विधि का उपयोग करेंगे, जो बेस 64 स्ट्रिंग के रूप में एक तस्वीर देता है।



एक उदाहरण:

 var canvas = document.getElementById('canvas'); var body = canvas.todataURL(); ... xmlhttprequest.open('POST', url); ... xmlhttprequest.setRequestHeader("Content-type", "multipart/form-data; boundary=" + boundary); ... var data =  /*--boundary*/  "--" + boundary + "\n" +    /**/  "Content-Disposition: form-data; name=\"file\"; filename=\"filename\"\n" +  "Content-type: image/png\n\n" +    /**/  body +    /*--boundary--*/  "\n--" + boundary + "--\n"; ... xmlhttprequest.send(data);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

सर्वर साइड

ईमेल के लिए, आप इंगित करने के लिए "base64" के मान के साथ "सामग्री-स्थानांतरण-एन्कोडिंग" शीर्षक लिख सकते हैं

कि संलग्न फ़ाइल base64 में एन्क्रिप्ट की गई है। दुर्भाग्य से, इस तरह के शीर्षक को जोड़ने से मेरे लिए काम नहीं किया गया।

मुझे सर्वर पर बेस 64 को डिकोड करना पड़ा।



सिर्फ एक छोटा "लेकिन," मैं कहूंगा।

जब आप फ़ाइल को स्लाइस में पढ़ते हैं और बेस 64 से डिकोड करते हैं, तो आपको एक बार में 4 के गुणक में बाइट्स की संख्या को पढ़ना होगा।

यह बेस 64 एनकोडिंग के कारण है। यह प्रत्येक 3 बाइट्स को 4 6-बिट वर्णों के एक सेट के रूप में मानता है, और फिर प्रत्येक

इस तरह के 6-बिट चरित्र किसी भी सामान्य 8-बिट टेक्स्ट वर्ण की तरह प्रदर्शित होते हैं।

(यदि अंत में पर्याप्त दो या एक बाइट्स नहीं हैं, तो शून्य बाइट्स लिया जाता है, और प्राप्त पाठ में "=" या "==" जोड़ा जाता है)



तदनुसार, यदि आप एक बार में वर्णों की संख्या 4 के एक से अधिक नहीं पढ़ते हैं, तो हमें चित्र नहीं मिलेगा (आप मेरे कोड को सही करके जांच सकते हैं)।

दरअसल, यहाँ PHP में कोड डिकोडिंग का चित्र दिया गया है:

 $f = fopen ($filename, 'r') or die('Cannot open file');#   $f2 = fopen ($path . '/' . $name, 'w') or die('Cannot open file');#   $length = 64;//   4! $error = FALSE; while ($content = fread($f, $length)) {  $content = base64_decode($content, TRUE);    if ($content === FALSE) {    $error = TRUE;    break;  }    fwrite($f2, $content); } fclose($f); fclose($f2);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

दरअसल, यह सब Trukoding.rf / कैनवस / पर देखा जा सकता है

बाईं ओर एक चित्र होगा, उस पर कुछ खींचें, "भेजें" बटन दबाएं, तस्वीर सर्वर पर भेजी जाती है,

और फिर दाईं ओर प्रदर्शित किया गया।







कोड यहाँ: trukoding.rf / कैनवस / कैनवस.ज़िप ,

और यहां: http://www.rapidshare.ru/1709200 ,

और यहाँ: http://narod.ru/disk/1762612001/canvas.zip.html



यैंडेक्स पर कभी-कभी संदेश "फ़ाइल नहीं मिली" छोड़ देता है, कई बार प्रयास करें।



यहाँ उदाहरण: trukoding.rf / कैनवस /



संदर्भ:

RFC MIME

फार्म डेटा

कैनवास



सौभाग्य है



अपडेट: यहां उपयोगकर्ताओं द्वारा अपलोड की गई कुछ अच्छी छवियां हैं: http: //trukoding.rf/cpg/thumbn.php? album = 1

अपडेट: एक समान यहां लागू किया गया है: http://www.nihilogic.dk/labs/canvas2image/