JS下载图片|极客笔记

JS下载图片

在网页开发中，经常会遇到需要下载图片的情况，比如用户想要保存网页上的图片，或者需要在网页中提供图片下载功能。在这种情况下，可以通过JavaScript来实现图片的下载功能。本文将介绍如何使用JavaScript下载图片，并提供示例代码演示。

方法一：使用a标签下载图片

我们可以创建一个隐藏的a标签，然后设置其href属性为图片的地址，再通过JavaScript模拟点击a标签，从而实现下载图片的功能。

<!DOCTYPE html>
<html>

<head>
    <title>Download Image</title>
</head>

<body>
    <img id="image" src="https://picsum.photos/200" style="display: none;">
    <button id="downloadBtn">Download Image</button>

    <script>
        const image = document.getElementById('image');
        const downloadBtn = document.getElementById('downloadBtn');

        downloadBtn.addEventListener('click', () => {
            const imageURL = image.src;
            const link = document.createElement('a');
            link.href = imageURL;
            link.download = 'image.jpg';
            link.click();
        });
    </script>
</body>

</html>

在上面的示例代码中，我们首先创建了一个img标签，设置了其src属性为一张图片的地址，然后创建了一个按钮，当点击按钮时，会通过JavaScript模拟点击a标签来下载图片。这种方法实现了比较简单，适用于下载单张图片的情况。

方法二：使用fetch API下载图片

除了使用a标签下载图片，我们也可以使用fetch API来下载图片。通过fetch API，我们可以发送GET请求获取图片的二进制数据，然后将其转换成Blob，并使用URL.createObjectURL来生成一个对象URL，最终实现下载图片的功能。

<!DOCTYPE html>
<html>

<head>
    <title>Download Image</title>
</head>

<body>
    <button id="downloadBtn">Download Image</button>

    <script>
        const downloadBtn = document.getElementById('downloadBtn');

        downloadBtn.addEventListener('click', () => {
            fetch('https://picsum.photos/200')
                .then(response => response.blob())
                .then(blob => {
                    const url = URL.createObjectURL(blob);
                    const link = document.createElement('a');
                    link.href = url;
                    link.download = 'image.jpg';
                    link.click();
                    URL.revokeObjectURL(url);
                });
        });
    </script>
</body>

</html>

在上面的示例代码中，我们创建了一个按钮，当点击按钮时，会通过fetch API发送GET请求获取图片的二进制数据，然后转换成Blob，最后生成对象URL并下载图片。这种方法实现了动态下载图片的功能，适用于下载任意图片的情况。