स्थानीय डिस्क पर .png फ़ाइल

Question

के रूप में जावास्क्रिप्ट द्वारा प्रदान की गई svg छवि को सहेजें I SVG के लिए नया है और जावास्क्रिप्ट का एक उन्नत उपयोगकर्ता नहीं है। मेरे पास जावास्क्रिप्ट द्वारा गतिशील रूप से प्रस्तुत एसवीजी सामग्री वाला एक वेबपृष्ठ है। इंटरनेट एक्सप्लोरर में जब मैं svg सामग्री पर राइट क्लिक करता हूं, तो मुझे "पिक्चर एज़ सहेजें" विकल्प मिलता है और मैं सामग्री को पीएनजी या एसवीजी के रूप में सहेजने में सक्षम हूं।

मैं बटन के जरिए इसे प्रोग्रामेटिक तरीके से कैसे कर सकता हूं और उपयोगकर्ता को अपनी मशीन पर पीएनजी में सामग्री को सहेजने की अनुमति देता हूं।

Answer 1

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

हालांकि, यहां तक ​​कि यह एक एकल AJAX-शैली अनुरोध के साथ प्राप्त करना मुश्किल है और समाधान आश्चर्यजनक रूप से घुल गया है। अन्य ने अन्य पदों से जुड़ा हुआ है जो इसे समझाते हैं, लेकिन मैं पहले से ही एक ही जवाब से गुजर चुका हूं और उनमें से कोई भी इसे बहुत अच्छी तरह से समझाता है।

1. उपयोग जावास्क्रिप्ट एसवीजी सामग्री को क्रमानुसार करने:

   ये कदम उठाएँ कि मेरे लिए काम किया है।

   var svgString = new XMLSerializer().serializeToString(svgElement);

2. बनाएं एक छिपा iframe जिसका src यूआरएल जमा करें। इसे id दें।
3. एक छिपा input बनाएं। Serialized एसवीजी सामग्री के लिए input के value सेट करें।
4. को पर दिया गया एक फॉर्म बनाएं जिसका लक्ष्य action सबमिट यूआरएल है। form के अंदर input डालें।
5. form सबमिट करें।

6. अपने सर्वर पर, एसवीजी दस्तावेज़ को पीएनजी में परिवर्तित करने के लिए जो भी टूल्स उपलब्ध हैं (मैं .NET का उपयोग नहीं करता हूं, इसलिए आप यहां पर हैं ...) का उपयोग करें। ग्राहक के लिए वापस पीएनजी सामग्री भेजें, हेडर उपयोग सुनिश्चित करते हुए:

   Content-Type:image/png

   Content-Disposition:attachment; filename=mypng.png

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

यहां एक (अपूर्ण) फ़ंक्शन है जो AJAX कार्य करेगा (JQuery का उपयोग करता है लेकिन आपको विचार प्राप्त करना चाहिए)।

function ajaxFileDownload(url, data) { 
    var iframeId = "uniqueIFrameId";  // Change this to fit your code 
    var iframe = $("#" + iframeId); 

    // Remove old iframe if there 
    if(iframe) { 
     iframe.remove(); 
    } 

    // Create new iframe 
    iframe = $('<iframe src=""' + url + '"" name="' + iframeId + '" id="' + iframeId + '"></iframe>') 
     .appendTo(document.body) 
     .hide(); 

    // Create input 
    var input = '<input type="hidden" name="data" value="' + encodeURIComponent(data) + '" />'; 

    // Create form to send request 
    $('<form action="' + url + '" method="' + 'POST' + '" target="' + iframeId + '">' + input + '</form>') 
     .appendTo(document.body) 
     .submit() 
     .remove(); 
} 

ध्यान दें कि यह यूआरएल-एन्कोड एसवीजी सामग्री है, तो आप PNG में परिवर्तित करने से पहले अपने सर्वर पर डिकोड करने के लिए करना होगा: data धारावाहिक एसवीजी है।

यह भी ध्यान रखें कि यदि आपने बाहरी एसबीजी में अपने एसवीजी के लिए शैलियों को परिभाषित किया है, तो उन्हें क्रमबद्ध नहीं किया जाएगा। मैंने इस कारण से सभी शैलियों को तत्वों पर presentation attributes के रूप में डालने का निर्णय लिया।

मुझे उम्मीद है कि इससे मदद मिलती है।