Как сохранить изображение с помощью JavaScript (из браузера)

Question

Рассмотрим изображение, загруженное как

<img src="https://www.example.com/image.jpg" />

Как добавить кнопку сохранения, чтобы сохранить изображение из загруженного в браузер изображения, вместо повторного подключения к серверу для загрузки изображения из src.

document.getElementById("save").addEventListener("click", 
function(){
// Save the image from the browser cache without connecting to the server again
});

На самом деле, я хочу имитировать браузер Save image as...

Например, представьте, что изображение очень большое.Я не хочу снова передавать данные изображения.Я хочу сохранить загруженное изображение, как Save image as... в Chrome.

Answer 1

В этом примере я извлек изображение через запрос XMLHttpRequest, затем использовал необработанное изображение в качестве URL-адреса данных.

 // credit to https://www.tutorialspoint.com/How-to-convert-the-image-into-a-base64-string-using-JavaScript

function toDataURL(url, callback) {
       var httpRequest = new XMLHttpRequest();
       httpRequest.onload = function() {
          var fileReader = new FileReader();
             fileReader.onloadend = function() {
                callback(fileReader.result);
             }
             fileReader.readAsDataURL(httpRequest.response);
       };
       httpRequest.open('GET', url);
       httpRequest.responseType = 'blob';
       httpRequest.send();
    }
    toDataURL(
       'http://placehold.it/512x512',
        function(dataUrl) {
          document.write('<a href="'+dataUrl+'" download>Save as</a><img src="'+dataUrl+'"></a>');
       }
    )