如何用JavaScript/JQuery实现点击按钮自动下载页面图片至指定文件夹

嘿，我来帮你搞定这个需求～首先得明确一个关键限制：浏览器出于安全策略，不允许前端JavaScript直接指定文件保存到本地的具体文件夹路径，也就是说没法自动让图片直接存到你的saveImage文件夹里，用户需要在下载弹窗里手动选择这个文件夹。不过我们可以实现点击按钮触发图片下载，同时让下载的文件名更清晰，方便用户保存到目标文件夹。

下面是两种可行的实现方案，分别用原生JavaScript和jQuery：

原生JavaScript实现 #

<!DOCTYPE HTML>
<html>
<head>
    <title>save image from a page</title>
</head>
<body>
    <img id="targetImage" src="car.jpg" alt="汽车图片"/>
    <button id="saveBtn">save Image in my folder</button>

    <script>
        // 获取按钮和图片元素
        const saveBtn = document.getElementById('saveBtn');
        const targetImg = document.getElementById('targetImage');

        saveBtn.addEventListener('click', function() {
            // 创建一个隐藏的<a>标签
            const downloadLink = document.createElement('a');
            // 设置下载链接为图片地址
            downloadLink.href = targetImg.src;
            // 设置下载后的文件名（可以自定义，比如保持原名）
            downloadLink.download = 'car.jpg';
            // 模拟点击<a>标签触发下载
            downloadLink.click();
            // 下载完成后移除这个<a>标签
            downloadLink.remove();
        });
    </script>
</body>
</html>

jQuery实现 #

如果你想用已引入的jQuery来实现，代码可以这样写：

<!DOCTYPE HTML>
<html>
<head>
    <title>save image from a page</title>
    <script src="jquery-1.11.3.min.js"></script>
</head>
<body>
    <img id="targetImage" src="car.jpg" alt="汽车图片"/>
    <button id="saveBtn">save Image in my folder</button>

    <script>
        $('#saveBtn').on('click', function() {
            const imgSrc = $('#targetImage').attr('src');
            const $downloadLink = $('<a>')
                .attr('href', imgSrc)
                .attr('download', 'car.jpg');
            
            // 模拟点击下载
            $downloadLink[0].click();
            // 移除临时创建的<a>标签
            $downloadLink.remove();
        });
    </script>
</body>
</html>

额外说明 #

• 为什么不能自动保存到saveImage文件夹？

  浏览器的安全机制禁止前端代码直接操作本地文件系统的具体路径，防止恶意网站未经授权访问或修改用户本地文件，所以必须由用户手动选择保存位置。

• 如果你的图片是跨域资源，可能会出现下载失败的情况，这时候需要服务器配置CORS允许下载，或者把图片转为Blob对象再进行下载（这个场景如果需要的话可以再补充细节）。

内容的提问来源于stack exchange，提问作者Nassim Nasri