cross browser download image with javascript/jquery

Question

У меня есть изображение, которое я хочу скачать.

Я пробовал делать это с iframe, и это не сработало. Я попытался сделать это со ссылкой с атрибутом «загрузить» HTML5, и он работал на chrome, но в firefox он открывает новое окно.

мой код:

var href = $("#largeImageContaier img").attr("src") 

$("#dlpic").attr("href", href); 
document.getElementById("dlpic").click() 

HTML:

<a href="" id="dlpic" download="alternate-filename.png"> 

Я хочу, чтобы загрузить изображение непосредственно в браузере, как приведенный выше код делает в хроме, но как я могу сделать это сделать то же самое другие браузеры, в этом примере светлячок

Answer 1

От http://webdesign.tutsplus.com/tutorials/quick-tip-using-the-html5-download-attribute--cms-23880

You может использовать Modernizr, чтобы определить, поддерживает ли браузер его, а также отображать инструкции по ссылке, чтобы сообщить пользователю «щелкнуть правой кнопкой мыши и сохранить как».

if (! Modernizr.adownload) { 
    var $link = $('a'); 

    $link.each(function() { 
     var $download = $(this).attr('download'); 

     if (typeof $download !== typeof undefined && $download !== false) { 
      var $el = $('<div>').addClass('download-instruction').text('Right-click and select "Download Linked File"'); 
      $el.insertAfter($(this)); 
     } 

    }); 
} 

Вот список, какие браузеры поддерживают HTML5 скачать атрибут: http://caniuse.com/#search=download

Answer 2

Если вы используете FireFox, you should be able to use the download attribute

Try фактически устанавливая href к чему-то. После этого я работал как в Chrome, так и в FireFox.

<a href="resource.html" download="The-name-I-want-to-use.html">Download</a> 

MDN говорит, что download используется для установки имени, которое требуется ресурс, чтобы при загрузке. Вам все равно необходимо предоставить href.

Другая вещь, чтобы отметить о download согласно MDN:

Этот атрибут почитается только ссылки на ресурсы, с тем же происхождения.

---

Если вы хотите, чтобы проверить поддержку download без необходимости использовать какие-либо библиотеки, вы можете использовать:

var dlAttrSupported = (function() { 
    return !!("download" in document.createElement("a")); 
}());