केवल जावास्क्रिप्ट का उपयोग कर एस 3 पर बेस 64 एन्कोडेड छवि डेटा अपलोड करने के लिए कैसे?

Question

मेरे पास हेरोकू (सीडर एनवी) पर रेल ऐप है। इसमें एक पृष्ठ है जहां मैं toDataURL() विधि का उपयोग कर कैनवास डेटा को एक छवि में प्रस्तुत करता हूं। मैं जावास्क्रिप्ट (सर्वर-साइड को छोड़कर) का उपयोग कर सीधे res3 पर वापस बेस 64 छवि डेटा स्ट्रिंग अपलोड करने का प्रयास कर रहा हूं। समस्या यह है कि चूंकि यह कोई फ़ाइल नहीं है, इसलिए मैं बेस 64 एन्कोडेड डेटा को सीधे S3 पर कैसे अपलोड करूं और इसे वहां फ़ाइल के रूप में सहेजूं?

Answer 1

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

आपको डेटा यूआरआई को ब्लॉब में परिवर्तित करना होगा और फिर उस फ़ाइल को CORS का उपयोग करके S3 पर अपलोड करना होगा, यदि आप एकाधिक फ़ाइलों के साथ काम कर रहे हैं तो मेरे पास प्रत्येक के लिए अलग XHR अनुरोध हैं।

मैं इस समारोह जो एक ब्लॉब तो S3 पर अपलोड किया जा सकता है जो सीधे CORS (Convert Data URI to Blob)

function dataURItoBlob(dataURI) { 
    var binary = atob(dataURI.split(',')[1]); 
    var array = []; 
    for(var i = 0; i < binary.length; i++) { 
     array.push(binary.charCodeAt(i)); 
    } 
    return new Blob([new Uint8Array(array)], {type: 'image/jpeg'}); 
} 

Here is a great tutorial on uploading directly to S3, you will need to customise the code to allow for the blob instead of files.

Answer 2

यह सुनिश्चित नहीं है कि ओपी ने पहले ही इसे हल कर लिया है, लेकिन मैं एक बहुत ही समान सुविधा पर काम कर रहा हूं। थोड़ा सा शोध करने में, मैं इन लेखों में आया जो सहायक हो सकते हैं।

• http://blog.danguer.com/2011/10/25/upload-s3-files-directly-with-ajax/
• http://www.tweetegy.com/2012/01/save-an-image-file-directly-to-s3-from-a-web-browser-using-html5-and-backbone-js/

Answer 3

का उपयोग करके अपने डाटा यूआरआई बदल जाता है पाया अगर कोई परवाह करता है: यहाँ coffescript है ऊपर दिए गए समारोह का संस्करण!

convertToBlob = (base64) -> 
    binary = atob base64.split(',')[1] 
    array = [] 
    for i in [0...binary.length] 
     array.push binary.charCodeAt i 
    new Blob [new Uint8Array array], {type: 'image/jpeg'} 

Answer 4

जामकोप का जवाब बहुत अच्छा है, हालांकि ब्लॉब कन्स्ट्रक्टर सभी ब्राउज़रों द्वारा समर्थित नहीं है। सबसे विशेष रूप से एंड्रॉइड 4.1 और एंड्रॉइड 4.3। Blob पॉलीफिल हैं, लेकिन xhr.send(...) पॉलीफिल के साथ काम नहीं करेगा। सबसे अच्छी शर्त इस तरह कुछ है:

var u = dataURI.split(',')[1], 
    binary = atob(u), 
    array = []; 

for (var i = 0; i < binary.length; i++) { 
    array.push(binary.charCodeAt(i)); 
} 

var typedArray = Uint8Array(array); 

// now typedArray.buffer can be passed to xhr.send