फोर्स पेस्ट घटना बेस 64 में छवियों एन्कोड करने के लिए

Question

पृष्ठभूमि:

मैं अपनी कंपनी के लिए एक HTML5 webapp जो मूल रूप से एक रिच टेक्स्ट संपादक (गूगल डॉक्स के समान) है कि एक डेटाबेस में जानकारी का भंडार विकसित करने कर रहा हूँ।

हम सीकेएडिटर 3 का उपयोग रिचटेक्स्ट संपादक और Jquery के रूप में करने के लिए कर रहे हैं।

हमने Google के क्रोम को पसंदीदा ब्राउज़र के रूप में चुना है।

हमारा ऐप वर्तमान में अल्फा परीक्षण अवधि में है, जिसमें 18 परीक्षक का समूह है (जो वही हैं जो ऐप का उपयोग करेंगे)। ये लोग विषम हैं, लेकिन उनमें से लगभग सभी में बुनियादी कंप्यूटर कौशल हैं, जो ज्यादातर एमएस वर्ड और एमएस एक्सेल तक ही सीमित हैं।

।

समस्या:

हमारे उपयोगकर्ताओं के अधिकांश अभी भी शब्द का उपयोग मुख्य रूप से की वजह से अमीर फ़्लोचार्ट पैदा करने की अपनी क्षमता को विस्तृत करने के दस्तावेज़,। जब वे जेनरेट की गई सामग्री को क्रोम पर कॉपी/पेस्ट करते हैं, तो छवियों को स्थानीय फ़ाइल (ओएस द्वारा उत्पन्न ऑटो, उपयोगकर्ता/*/temp फ़ोल्डर में) के रूप में चिपकाया जाता है। इसका अर्थ यह है कि सर्वर इन फ़ाइलों तक नहीं पहुंच सकता है और परिणामी दस्तावेज़ (जेनरेट किए गए पीडीएफ) में छवियां नहीं हैं।

।

प्रश्न

मैं चिपकाया छवियों बेस 64 में एन्कोड करने की कैसे मजबूर कर सकते हैं, क्या फ़ायरफ़ॉक्स में होता है समान?

।

नोट्स

यदि यह सर्वर के लिए एक छवि src = के रूप में संदर्भित "अपलोड" संभव है "file: // c: \ कुछ", कि मेरी समस्या का समाधान होगा, जैसा कि मैंने base64 बाद में उस छवि को सांकेतिक शब्दों में बदलना कर सकते हैं ।

हम फ़ायरफ़ॉक्स पर स्विच नहीं कर सकते क्योंकि यह हमारी समस्या को पूरी तरह से हल नहीं करता है (यदि कोई छवि पाठ के साथ "चिपकाया" है, तो फ़ायरफ़ॉक्स आधार 64 एन्कोड नहीं करता है) और अन्य मुद्दों को उठाता है जैसे एक क्षैतिज स्क्रॉलबार दिखाना जब पाठ textarea में फिट करने के लिए बहुत लंबा है।

Answer 1

हाँ और नहीं मुझे विश्वास है।

पेस्ट ईवेंट को रोकना और चिपकने वाली छवि को फ़ाइल के रूप में लाने के लिए संभव है, फिर डेटा यूआरआई (बेस 64 एन्कोडेड पीएनजी) के रूप में फ़ाइल को पढ़ने के लिए FileReader का उपयोग करें।

हालांकि, शब्द एक स्थानीय फ़ाइल का संदर्भ भेजता प्रतीत होता है, जो क्रॉस-डोमेन अनुरोध (http://... और file:///...) के कारण सुरक्षा अपवाद (कम से कम क्रोम पर) उत्पन्न करता है। जहां तक ​​मुझे चिंतित है, ऐसी स्थानीय फाइलों की वास्तविक सामग्री प्राप्त करने का कोई तरीका नहीं है, और सामग्री क्लिपबोर्ड डेटा के रूप में भेजी गई है।

यदि आप "शुद्ध" छवि (उदा। पेंट से बाहर) की प्रतिलिपि बनाते हैं, तो आप आधार 64 एन्कोडेड डेटा निम्नानुसार प्राप्त कर सकते हैं: http://jsfiddle.net/pimvdb/zTAuR/। या div में 64 64 एन्कोडेड पीएनजी के रूप में छवि को संलग्न करें: http://jsfiddle.net/pimvdb/zTAuR/2/।

div.onpaste = function(e) { 
    var data = e.clipboardData.items[0].getAsFile(); 

    var fr = new FileReader; 

    fr.onloadend = function() { 
     alert(fr.result.substring(0, 100)); // fr.result is all data 
    }; 

    fr.readAsDataURL(data); 
};