Мгновенная загрузка изображения по нажатию кнопки

Question

Я пытаюсь сделать простую кнопку, которая при нажатии загружает изображение. В настоящее время, когда я нажимаю, это открытое изображение на пустой странице, где вы должны нажать «Сохранить как ..»

Как я могу "заставить" браузер загрузить его?

Это текущее изображение и кнопка

<img src="{{ $thumb }}" class="img-responsive">             
<a type="submit" download="{{ $thumb }}" href="{{ $thumb }}" class="btn btn-primary"> 
    Download Image
</a>

Я пробовал:

download="{{ $thumb }}"

Также

download="{{ $thumb }}" target="_blank"

Также пытался поместить тег <img...> внутрь тега <a href..> и все еще не работает.

Answer 1

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

<img src="{{ $thumb }}" class="img-responsive">             
<a href="{{ $thumb }}" class="btn btn-primary" download> 
    Download Image
</a>

Answer 2

Вы можете попробовать это, чтобы принудительно загрузить изображение.
Однако вы не можете загрузить то, что не находится в вашем домене, если вы не используете домен, который принимает запросы из разных источников (например: Imgur )

Вы можете использовать атрибут 'download' в HTML5, но вы все равно не сможете загрузить изображение из разных источников.

Также приведенный ниже метод также будет поддерживать устаревшие браузеры

function forceDownload(link){
    var url = link.getAttribute("data-href");
    var fileName = link.getAttribute("download");
    link.innerText = "Working...";
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";
    xhr.onload = function(){
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL(this.response);
        var tag = document.createElement('a');
        tag.href = imageUrl;
        tag.download = fileName;
        document.body.appendChild(tag);
        tag.click();
        document.body.removeChild(tag);
        link.innerText="Download Image";
    }
    xhr.send();
}

<a href="#" data-href='https://i.imgur.com/Mc12OXx.png' download="Image.jpg" onclick='forceDownload(this)'>Download Image</a>

Примечание : невозможно заставить браузер отображать диалоговое окно «Сохранить как», так как оно основано на пользовательских настройках.

Answer 3

<a href="/images/img.jpg" download> Добавив это, вы можете автоматически загрузить изображение одним щелчком мыши
Примечание. Атрибут загрузки не поддерживается в Edge версии 12, IE, Safari 10 (и более ранних версиях) или Opera версии 12 (и более ранних версиях).