से एक png को बचाने के लिए कैसे मैं एक छवि JavaScript वैरिएबल में बेस 64 में encoded: data:image/png;base64, base64 dataजावास्क्रिप्ट चर
[संपादित करें] मैं आगंतुक के लिए आपको सही करने के लिए बिना डिस्क के लिए उस फ़ाइल को बचाने की जरूरत पर क्लिक करें [/ EDIT]
क्या यह संभव है? कैसे ?
अग्रिम धन्यवाद
सादर
(फ़ायरफ़ॉक्स एडऑन साइट की जांच) मैं जानता हूँ कि इस सवाल का 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
आप नहीं कर सकते। आप यह post पढ़ सकते हैं।
... आगंतुक anyhing को पूछे बिना ... क्या यह संभव है?
नहीं, यह एक सुरक्षा छेद होता। यदि यह संभव था, तो अंत में एंड्यूसर की डिस्क पर मैलवेयर लिखने में सक्षम होगा। आपकी सर्वश्रेष्ठ शर्त एक (हस्ताक्षरित) Java Applet हो सकती है। सच है, इसे हस्ताक्षरित करने के लिए $$$ का थोड़ा सा खर्च होता है (ताकि वह सुरक्षा चेतावनियां पॉप न करे), लेकिन यह बिना अनुमति के एंड्यूसर की डिस्क पर डेटा लिखने में सक्षम है।
यह संभव नहीं है।
यदि ऐसा है तो ब्राउज़रों बड़े पैमाने पर असुरक्षित हो सकता है, उपयोगकर्ता को बताए बिना अपनी हार्ड डिस्क पर यादृच्छिक डेटा लिखने के लिए सक्षम किया जा रहा।
मुझे लगता है कि यदि आप ActiveX का उपयोग करते हैं तो जावास्क्रिप्ट के साथ यह संभव है।
एक और संभावना सर्वर एक अलग माइम प्रकार के साथ उस फ़ाइल थूक से बाहर बनाने के लिए इतना ब्राउज़र में सहेजने के लिए उपयोगकर्ता पूछता है।
ActiveX का उपयोग करने से आप एक वेबब्रोसर प्रकार (एमएसआईई) को प्रतिबंधित कर सकते हैं और फिर भी, एमएसआईई अपने डिफ़ॉल्ट सेटअप में जारी रखने से पहले सभी प्रकार की सुरक्षा चेतावनियों के साथ एंडुसर को डरा देगा। ActiveX, नहीं धन्यवाद। – BalusC
बेशक। लेकिन मैंने सोचा कि यह अभी भी उल्लेखनीय है। –
जावास्क्रिप्ट के साथ, आप नहीं कर सकते। केवल वास्तविक संभावना मैं के बारे में सोच सकते हैं एक जावा एप्लेट-हो जाएगा, लेकिन शायद (मैं नहीं जानता कि कब तक उस छवि को बचाया जाना चाहिए) तो आप बस आप बल कैशिंग PNG और के साथ एक img-टैग जोड़ सकते हैं (लेकिन यदि उपयोगकर्ता अपने कैश को हटा देता है, छवि चली जाएगी)।
जैसा कि अन्य उत्तरों पहले से ही बताए गए हैं, आप इसे केवल जावास्क्रिप्ट के साथ नहीं कर सकते हैं। यदि आप चाहते हैं, तो आप एक PHP स्क्रिप्ट पर डेटा (सामान्य HTTP POST का उपयोग करके) भेज सकते हैं, header('Content-type: image/png') पर कॉल करें और echo base64_decode($base64data) का उपयोग करके पृष्ठ पर डीकोड किए गए छवि डेटा को आउटपुट करें।
यह बस के रूप में करता है, तो उपयोगकर्ता एक छवि पर क्लिक किया काम करते हैं और इसे खोलने या डिस्क पर फ़ाइल (सामान्य ब्राउज़र की बचाने फ़ाइल संवाद) को बचाने के लिए उसे संकेत देगा।
मुझे लगता है कि आप इसे कुछ कर सकते हैं (शायद न केवल जावास्क्रिप्ट के साथ ... xul प्रोग्रामिंग की आवश्यकता है)। फ़ायरफ़ॉक्स एडऑन कि एक फ़ोल्डर में चित्रों को सहेजने हैं
मुझे खेद है, लेकिन "मुझे लगता है कि आप कर सकते हैं, एडॉन्स जांचें" एक जवाब नहीं है। –
मुझे आश्चर्य है कि यहां कुछ भी अच्छे पुस्तकालयों के साथ एचटीएमएल 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/
संपादित करें: इस सफारी/मैक के साथ संगत नहीं है।
मान लीजिए कि जेएस का उपयोग कैनवास में एन्कोडेड डेटा खींचने के लिए किया जाता है और यह कि ब्राउज़र में किसी भी तरह से कैश नहीं किया गया है ----- क्या कैनवास को डंप करना संभव है (शायद "डुप्लिकेट "एक बेहतर शब्द होगा) और फिर प्रोग्रामेटिक रूप से इसे अपने ब्राउज़र के कैश (या अन्यत्र) में सहेज लें? क्या आपके पास कोई ब्लॉग या कोई अन्य संपर्क बिंदु है? (संभावित परामर्श प्रस्ताव?) – telefunkenvf14
क्षमा करें मुझे यकीन नहीं है कि आप इसे कैसे प्राप्त कर सकते हैं। – malber
धन्यवाद! इसने मुझे बहुत दिल का दर्द बचाया। मैं ब्लॉब और फाइलसेवर को मिला था।जेएस लेकिन यह समझ नहीं सका कि उन्हें एक साथ कैसे रखा जाए। उत्तम सामग्री। – Vinny
आप इस फ़ाइल को सर्वर पर ब्लॉब के रूप में बना सकते हैं और डाउनलोड को आग लगाने के लिए सेटटाइमआउट फ़ंक्शन का उपयोग कर सकते हैं।
आपके उत्तर के लिए धन्यवाद। यह वास्तव में उपयोगी है – hotips
क्रोम में पूरी तरह से काम किया, लेकिन Google क्रोम फ्रेम के साथ चल रहे IE8 में कुछ भी नहीं किया। –
यदि आप jQuery का उपयोग कर रहे हैं, तो '$ (डाउनलोड) का उपयोग करें। क्लिक करें()'। यदि आप jQuery का उपयोग नहीं कर रहे हैं, तो [यह अन्य SO प्रश्न] देखें (http://stackoverflow.com/a/827793/756000) – davoclavo