JS下载图片保存到本地|极客笔记

JS下载图片保存到本地

在Web开发中，经常会遇到需要下载图片并保存到本地的需求，比如用户需要保存网页上的图片到自己的电脑。而使用JavaScript可以通过简单的代码来实现这个功能。

方法一：使用a标签的download属性

HTML5的<a>标签新增了一个download属性，可以设置下载的文件名。我们可以动态创建一个a标签，设置其href为图片的链接，然后触发点击事件来实现下载。

示例代码如下：

function downloadImage(url) {
    var a = document.createElement('a');
    a.href = url;
    a.download = 'image.jpg';
    a.click();
}

调用downloadImage函数并传入图片的URL即可实现下载保存的功能。

方法二：使用XMLHttpRequest和Blob

另一种方法是使用XMLHttpRequest和Blob对象来获取图片数据并保存到本地。

示例代码如下：

function downloadImage(url) {
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function() {
        var a = document.createElement('a');
        a.href = window.URL.createObjectURL(xhr.response);
        a.download = 'image.jpg';
        a.click();
    };
    xhr.open('GET', url);
    xhr.send();
}

在这个方法中，我们通过XMLHttpRequest获取到图片的Blob数据，然后创建一个a标签来保存文件。

方法三：使用fetch和Blob

fetch是ES6新增的API，可以简化网络请求的处理。结合Blob对象，也可以实现下载图片并保存到本地的功能。

示例代码如下：

function downloadImage(url) {
    fetch(url)
        .then(res => res.blob())
        .then(blob => {
            var a = document.createElement('a');
            a.href = URL.createObjectURL(blob);
            a.download = 'image.jpg';
            a.click();
        });
}

在这个方法中，我们使用fetch方法获取图片的Blob数据，然后同样创建一个a标签来保存文件。