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...

例如，假设图像很大。我不想再次传输图像数据。我要保存加载的图像，就像Chrome中的Save image as...一样。

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>');
       }
    )

如何通过JavaScript保存图像（从浏览器）

1 个答案: