如何通过js下载图片

如何通过js下载图片：使用标签、创建Blob对象、使用FileSaver.js库

使用JavaScript下载图片可以通过多种方式实现，其中常用的方法包括使用<a>标签、创建Blob对象以及使用第三方库如FileSaver.js。今天我们将详细介绍这些方法的具体实现过程。

一、使用 标签

使用<a>标签是最简单的方式之一，通过设置href属性和download属性即可实现图片的下载。

1、创建 标签并设置属性

首先，我们需要创建一个<a>标签，并设置其href属性为图片的URL，并添加download属性。这样，当用户点击这个链接时，图片将被下载而不是在浏览器中打开。

<a id="download-link" href="image-url.jpg" download="downloaded-image.jpg">Download Image</a>

2、使用JavaScript动态创建和触发点击事件

如果我们需要通过JavaScript动态创建这个<a>标签并自动触发下载，可以使用以下代码：

function downloadImage(imageUrl, imageName) {
    const link = document.createElement('a');
    link.href = imageUrl;
    link.download = imageName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}
// 调用函数下载图片
downloadImage('https://example.com/image.jpg', 'downloaded-image.jpg');

二、创建Blob对象

使用Blob对象可以更灵活地处理图片的下载，尤其是当我们需要处理图片数据（如转换、修改）时。

1、获取图片数据并创建Blob对象

我们首先需要通过fetch或其他方式获取图片数据，并将其转换为Blob对象。

async function fetchImage(url) {
    const response = await fetch(url);
    const blob = await response.blob();
    return blob;
}
async function downloadImage(url, filename) {
    const blob = await fetchImage(url);
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}
// 调用函数下载图片
downloadImage('https://example.com/image.jpg', 'downloaded-image.jpg');

2、释放URL对象

为了防止内存泄漏，我们需要在下载完成后释放创建的URL对象。

URL.revokeObjectURL(link.href);

三、使用FileSaver.js库

如果你需要一个更简洁的方式来处理文件下载，可以使用第三方库FileSaver.js。

1、引入FileSaver.js

首先，我们需要引入FileSaver.js库，可以通过CDN或npm安装。

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

2、使用FileSaver.js下载图片

引入库后，我们可以使用saveAs方法来实现图片的下载。

async function downloadImage(url, filename) {
    const response = await fetch(url);
    const blob = await response.blob();
    saveAs(blob, filename);
}
// 调用函数下载图片
downloadImage('https://example.com/image.jpg', 'downloaded-image.jpg');

四、总结

通过以上三种方法，我们可以灵活地使用JavaScript实现图片的下载。使用<a>标签、创建Blob对象、使用FileSaver.js库，都各有优缺点。<a>标签适用于简单的下载需求，Blob对象适用于需要处理图片数据的场景，而FileSaver.js库则提供了更简洁的接口，适用于各种文件的下载需求。根据具体的需求选择合适的方法，将大大提高我们的开发效率和代码的可维护性。