एक नए पेज में खोलने के बजाय सफारी और आईई डाउनलोड छवि कैसे बनाएं?

Question

फ़ायरफ़ॉक्स और क्रोम में यह लिंक संपत्ति "डाउनलोड = img.jpg" ठीक काम करती है और एक नए टैब या पेज की बजाय डाउनलोड विंडो दिखाती है।

<a href="img.jpg" download="img.jpg">Download Image</a> 

लेकिन सफारी और आईई में यह लिंक मुझे एक नया पृष्ठ देता है।

तो सफारी और आईई ब्राउज़र के साथ इसे संभालने के लिए एक सरल और प्रभावी वर्कफ़्लो क्या है?

Answer 1

क्या आप अपाचे सर्वर पर काम कर रहे हैं? यदि हां, तो आप सिर्फ अपनी .htaccess फाइल करने के लिए इस जोड़ सकते हैं:

RewriteCond %{REQUEST_FILENAME} -f 
RewriteCond %{QUERY_STRING} fdl=1 
RewriteRule .? - [T=application/octet-stream] 

चेकों यह एक फ़ाइल चेकों अगर पैरामीटर FDL = 1 ओकटेट धारा/बल डाउनलोड के रूप में आउटपुट querystring में है देखने के लिए

अब जब आप उस साइट में कुछ भी डाउनलोड करना प्रारंभ करने ब्राउज़र चाहते हैं, बस यूआरएल पर पैरामीटर डाल:

<a href="img.jpg?fdl=1">Download Image</a> 

एक आईआईएस विंडोज़ सर्वर पर एक ही बात करने के लिए web.config आउटबाउंड नियम जोड़ने:

<?xml version="1.0" encoding="UTF-8"?> 
<configuration> 
    <system.webServer> 
     <rewrite> 
      <outboundRules> 
       <rule name="Force Download"> 
        <match serverVariable="RESPONSE_Content_Disposition" pattern=".?" negate="false" /> 
        <action type="Rewrite" value="application/octet-stream" replace="true" /> 
        <conditions> 
         <add input="{QUERY_STRING}" pattern="fdl=1" /> 
        </conditions> 
       </rule> 
      </outboundRules> 
     </rewrite> 
    </system.webServer> 
</configuration> 

संपादित करें (2016/10/04):

download विशेषता की तरह लग रहा है अभी भी not fully adopted सभी ब्राउज़रों द्वारा होता है।

एक जावास्क्रिप्ट/ब्राउज़र आधारित कार्यान्वयन आप FileSaver.js जो ब्राउज़रों कि इसका समर्थन नहीं करते में कार्यक्षमता को बचाने के लिए एक polyfill है पर दिखाई दे सकता है के लिए। हालांकि इसमें सही कवरेज नहीं है।

Answer 2

PHP जैसी सर्वर-साइड भाषा का उपयोग करना सबसे आसान है। इस पृष्ठ पर गहराई से यह वास्तव में अधिक चर्चा की गई है, जिसमें शीर्षलेखों को हेरफेर करने के लिए कुछ परीक्षण कोड शामिल हैं। दुर्भाग्यवश, आईई और सफारी पकड़ने तक ये एकमात्र समाधान हैं।

Refrence:

• HTML href image link download on click

Answer 3

navigator.msSaveBlob(blob, filename) 

https://msdn.microsoft.com/sv-se/library/windows/apps/hh772331

दुर्भाग्य से मैं सफारी में यह करने के लिए एक तरह से पता नहीं है।

Answer 4

यह आईई में जावास्क्रिप्ट के साथ ऐसा करने का एक तरीका है। हालांकि, मुझे सफारी के लिए अभी तक समाधान नहीं मिला है

var canvas = document.createElement('canvas'); 
var img = document.createElement('img'); 
img.onload = function(e) { 
    canvas.width = img.width; 
    canvas.height = img.height; 
    var context = canvas.getContext('2d'); 
    context.drawImage(img, 0, 0, img.width, img.height); 
    window.navigator.msSaveBlob(canvas.msToBlob(),'image.jpg'); 
} 
img.src = 'img.jpg;