Загрузить изображение через Firefox с помощью Javascript?

Question

Я работаю над расширением для Firefox прямо сейчас, написанным на javascript. По существу, при наведении указателя мыши на миниатюру изображения (которое при нажатии на вас выводит на веб-страницу с полным изображением) расширение находит URL-адрес полного изображения и пытается загрузить его с помощью нажатия клавиши. («D» в этом случае.) Файл, с которым я буду работать, обычно является .jpg и .pngs, однако .swfs и .mp3s также могут присутствовать. На данный момент я просто ищу, чтобы получить первые два типа файлов.

код я использую сейчас просто

function ExtendedDownload(image_src) { 
    var a = document.createElement('a'); 
    document.body.appendChild(a); 
    a.download = image_src.split('/').pop().split('?')[0]; 
    a.href = image_src; 
    a.click(); 
} 

1. image_src является URL к изображению.
2. a.download - это имя файла изображения, которое анализируется с полного URL-адреса.

Раньше в файле javascript он ожидал нажатия клавиши, когда видит, что верный эскиз наводится курсором. Эта часть работает отлично. С загрузкой я столкнулся с проблемой.

При загрузке в хром это удлинитель прекрасно работает по назначению. Однако в Firefox (v49.0.2) он просто отображает изображение (аналогично вставке ссылки изображения в адресной строке и нажатию enter). Это не желаемый эффект.

Одно решение, которое я тестировал, преобразовывало изображение в base64 через javascript и пыталось загрузить его, что работает в теории, и я протестировал его, чтобы преобразовать малые base64 .pngs. Однако файлы, которые я пытаюсь загрузить приведут к тому, что строки base64 размером более мегабайта будут отправлены в браузере, поэтому это неверный вариант.

Каждое решение, которое я натолкнулся на stackexchange для подобных проблем, возвращает меня обратно на это место, однако, когда «загрузка» изображения просто открывается в браузере.

Любые предложения будут оценены.

Редактировать: Проблема, с которой я сталкиваюсь, определенно основана на том, что веб-страница, на которой я использую это расширение, и веб-страницу, на которой находится изображение, находятся в разных доменах. Решение @Mayank Pandeyz убедило меня в этом, так как когда я пытаюсь загрузить контент и изображение в том же домене, что и сама страница, он работает по назначению. Каковы мои возможности для решения таких проблем?

Answer 1

Попробуйте это:

var a = document.createElement('a'); 
a.href = "/favicon.png"; 
a.download = "favicon.png"; 
document.body.appendChild(a); 
a.click(); 
document.body.removeChild(a); 

Demo Fiddle

Answer 2

вы могли бы это сделать, как это в JQuery.

где вы даете выбор пользователю, следует ли загружать или не

<a href="yourPath" class="download">download</a> 


$('.download').click(function(){ 
      var url = $(this).attr('href'); 
      $(this).attr("target", "_blank"); 
      window.open(url,'Download'); 
     }); 

здесь скрипку: https://jsfiddle.net/s1ojfbrt/2/

Answer 3

Ваш сервер должен иметь возможность поставлять изображение со следующими заголовками ответа:

Content-Type: application/octet-stream 
Content-Disposition: attachment; filename="picture.png" 

В этом случае браузер отобразит диалог «Сохранить как ...».

Для этого у вас может быть специальный URL-адрес/сценарий.