का उपयोग कर छवि के रूप में कैनवास संदर्भ अपलोड करना मेरे पास कैनवास है और मैं AJAX और php का उपयोग कर सर्वर पर कैनवास संदर्भ अपलोड करना चाहता हूं। मैं चाहता हूं कि अंतिम आउटपुट सर्वर पर संग्रहीत एक छवि हो। मैंने फ़ॉर्म का उपयोग कर छवि अपलोड किया है। लेकिन अब मैं कैनवास संदर्भ को छवि में परिवर्तित करना चाहता हूं और सर्वर पर अपलोड करना चाहता हूं!AJAX और php
तो, मैं यह कैसे कर सकता हूं? किसी भी सुझाव, algos या समाधान की सराहना की जाती है!
This blog post AJAX प्रश्नों के साथ सर्वर पर कैनवस सहेजने की विधि का उचित वर्णन करता है, मुझे लगता है कि यह आपके लिए उपयुक्त होना चाहिए।
असल में, आपको जावास्क्रिप्ट में कैनवास सामग्री को पुनर्प्राप्त करने के लिए var canvasData = testCanvas.toDataURL("image/png"); की आवश्यकता होगी। यह Base64 एन्कोडेड स्ट्रिंग होगा, इस तरह कुछ: data:image/png;base64,fooooooooooobaaaaaaaaaaar==।
निम्नलिखित कोड यकीन है कि AJAX क्वेरी एचटीएमएल के लिए सामग्री भेजता है कर देगा:,
var ajax = new XMLHttpRequest();
ajax.open("POST",'testSave.php',false);
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(canvasData);
सर्वर पर PHP स्क्रिप्ट में, आप, इस वसीयत $GLOBALS सरणी में HTTP_RAW_POST_DATA नाम के एक कुंजी होगा उस डेटा को शामिल करें जिसे हमने अभी लाया था।
// Remove the headers (data:,) part.
$filteredData=substr($GLOBALS['HTTP_RAW_POST_DATA'], strpos($GLOBALS['HTTP_RAW_POST_DATA'], ",")+1);
// Need to decode before saving since the data we received is already base64 encoded
$decodedData=base64_decode($filteredData);
$fp = fopen('test.png', 'wb');
fwrite($fp, $decodedData);
fclose($fp);
, test.png फ़ाइल नाम आप को बचा नहीं है। एन्कोडेड छवि के data:image/png;base64, भाग को हटाने के लिए पहली पंक्ति आवश्यक है, ताकि इसे बाद में base64_decode() द्वारा डीकोड किया जा सके। यह आउटपुट ($decodedData) फ़ाइल में सहेजा जाएगा।
@MJQ ['fopen() '] (http://php.net/manual/en/function.fopen.php) अपना 'फ़ाइल नाम' तर्क लेता है, जो फ़ाइल पथ भी हो सकता है। इसलिए यदि आप 'test.png' को 'somefolder/test.png' में बदलते हैं, तो यह' test.png' के फ़ाइल नाम के साथ' somefolder' में सहेज जाएगा। सावधान रहें क्योंकि यह विधि ** सभी ** फ़ाइलों को 'test.png' के रूप में सहेजती है, अनिवार्य रूप से ** पिछली बचत ** ओवरराइटिंग। – Whisperity
मैं 'file_get_contents ('php: // input')' 'HTTP_RAW_POST_DATA' से अधिक की सिफारिश करता हूं, आईआईआरसी उत्तरार्द्ध हमेशा पॉप्युलेट नहीं होता है। – deceze
सही उत्तर के लिए धन्यवाद! – MJQ
संभावित डुप्लिकेट [सर्वर पर 'कैनवास' छवि डेटा अपलोड करना] (http://stackoverflow.com/questions/1590965/uploading-canvas-image-data-to-the-server) – rsplak