जावास्क्रिप्ट चर

Question

से एक png को बचाने के लिए कैसे मैं एक छवि JavaScript वैरिएबल में बेस 64 में encoded: data:image/png;base64, base64 data

[संपादित करें] मैं आगंतुक के लिए आपको सही करने के लिए बिना डिस्क के लिए उस फ़ाइल को बचाने की जरूरत पर क्लिक करें [/ EDIT]

क्या यह संभव है? कैसे ?

अग्रिम धन्यवाद

सादर

Answer 1

(फ़ायरफ़ॉक्स एडऑन साइट की जांच) मैं जानता हूँ कि इस सवाल का 2 वर्ष है, लेकिन उम्मीद है कि लोगों को इस अपडेट देखेंगे।

आप उपयोगकर्ता पूछ एक करने के लिए बिना, एक बेस 64 स्ट्रिंग में एक छवि को बचाने के लिए (और यह भी फ़ाइल नाम सेट) उपयोगकर्ता का संकेत दे सकता सही क्लिक

var download = document.createElement('a'); 
download.href = dataURI; 
download.download = filename; 
download.click(); 

उदाहरण:

var download = document.createElement('a'); 
download.href = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='; 
download.download = 'reddot.png'; 
download.click(); 

फ़ायरफ़ॉक्स का उपयोग करके एक क्लिक ईवेंट ट्रिगर करने के लिए, आपको this SO answer में जो समझाया गया है उसे करने की आवश्यकता है। मूल रूप से:

function fireEvent(obj,evt){ 
    var fireOnThis = obj; 
    if(document.createEvent) { 
    var evObj = document.createEvent('MouseEvents'); 
    evObj.initEvent(evt, true, false); 
    fireOnThis.dispatchEvent(evObj); 
    } else if(document.createEventObject) { 
    var evObj = document.createEventObject(); 
    fireOnThis.fireEvent('on' + evt, evObj); 
    } 
} 
fireEvent(download, 'click') 

20/03/2013 के अनुसार, केवल ब्राउज़र कि पूरी तरह से download विशेषता का समर्थन करता है क्रोम है। Check the compatibility table here

Answer 2

आप नहीं कर सकते। आप यह post पढ़ सकते हैं।

Answer 3

... आगंतुक anyhing को पूछे बिना ... क्या यह संभव है?

नहीं, यह एक सुरक्षा छेद होता। यदि यह संभव था, तो अंत में एंड्यूसर की डिस्क पर मैलवेयर लिखने में सक्षम होगा। आपकी सर्वश्रेष्ठ शर्त एक (हस्ताक्षरित) Java Applet हो सकती है। सच है, इसे हस्ताक्षरित करने के लिए $$$ का थोड़ा सा खर्च होता है (ताकि वह सुरक्षा चेतावनियां पॉप न करे), लेकिन यह बिना अनुमति के एंड्यूसर की डिस्क पर डेटा लिखने में सक्षम है।

Answer 4

यह संभव नहीं है।

यदि ऐसा है तो ब्राउज़रों बड़े पैमाने पर असुरक्षित हो सकता है, उपयोगकर्ता को बताए बिना अपनी हार्ड डिस्क पर यादृच्छिक डेटा लिखने के लिए सक्षम किया जा रहा।

Answer 5

मुझे लगता है कि यदि आप ActiveX का उपयोग करते हैं तो जावास्क्रिप्ट के साथ यह संभव है।

एक और संभावना सर्वर एक अलग माइम प्रकार के साथ उस फ़ाइल थूक से बाहर बनाने के लिए इतना ब्राउज़र में सहेजने के लिए उपयोगकर्ता पूछता है।

Answer 6

जावास्क्रिप्ट के साथ, आप नहीं कर सकते। केवल वास्तविक संभावना मैं के बारे में सोच सकते हैं एक जावा एप्लेट-हो जाएगा, लेकिन शायद (मैं नहीं जानता कि कब तक उस छवि को बचाया जाना चाहिए) तो आप बस आप बल कैशिंग PNG और के साथ एक img-टैग जोड़ सकते हैं (लेकिन यदि उपयोगकर्ता अपने कैश को हटा देता है, छवि चली जाएगी)।

Answer 7

जैसा कि अन्य उत्तरों पहले से ही बताए गए हैं, आप इसे केवल जावास्क्रिप्ट के साथ नहीं कर सकते हैं। यदि आप चाहते हैं, तो आप एक PHP स्क्रिप्ट पर डेटा (सामान्य HTTP POST का उपयोग करके) भेज सकते हैं, header('Content-type: image/png') पर कॉल करें और echo base64_decode($base64data) का उपयोग करके पृष्ठ पर डीकोड किए गए छवि डेटा को आउटपुट करें।

यह बस के रूप में करता है, तो उपयोगकर्ता एक छवि पर क्लिक किया काम करते हैं और इसे खोलने या डिस्क पर फ़ाइल (सामान्य ब्राउज़र की बचाने फ़ाइल संवाद) को बचाने के लिए उसे संकेत देगा।

Answer 8

मुझे लगता है कि आप इसे कुछ कर सकते हैं (शायद न केवल जावास्क्रिप्ट के साथ ... xul प्रोग्रामिंग की आवश्यकता है)। फ़ायरफ़ॉक्स एडऑन कि एक फ़ोल्डर में चित्रों को सहेजने हैं

Answer 9

मुझे आश्चर्य है कि यहां कुछ भी अच्छे पुस्तकालयों के साथ एचटीएमएल 5 ब्लब्स का उपयोग करने का उल्लेख नहीं किया गया है।

आपको पहले https://github.com/eligrey/FileSaver.js/ और https://github.com/blueimp/JavaScript-Canvas-to-Blob की आवश्यकता है।

तो फिर तुम छवि एक कैनवास

base_image = new Image(); 
base_image.src ='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='; 

में कैनवास एक ब्लॉब में लोड कर सकते हैं

var canvas = document.getElementById('YourCanvas'); 
context = canvas.getContext('2d'); 
// Draw image within 
context.drawImage(base_image, 0,0); 

और अंत में बचाने के यह

x_canvas.toBlob(function(blob) { 
saveAs(blob, "screenshot.png"); 
}, "image/png"); 

एफएफ पूरी तरह से समर्थित नहीं है, लेकिन कम से कम से कम आप छवि के साथ एक अलग पृष्ठ मिलता है।

चेक इस बाहर: http://jsfiddle.net/khhmm/9/

संपादित करें: इस सफारी/मैक के साथ संगत नहीं है।

Answer 10

आप इस फ़ाइल को सर्वर पर ब्लॉब के रूप में बना सकते हैं और डाउनलोड को आग लगाने के लिए सेटटाइमआउट फ़ंक्शन का उपयोग कर सकते हैं।