TamperMonkeyScript/scripts/download_pic.js

// ==UserScript==
// @name         图片下载器
// @namespace    http://tampermonkey.net/ 
// @version      1.1
// @description  尝试在页面顶部添加一个按钮，点击后下载页面所有图片
// @author       Jack
// @match        *://*/*
// @grant        GM_download
// @grant        GM_addStyle
// @require      https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.min.js 
// ==/UserScript==

(function () {
    'use strict';

    // 添加样式以确保按钮在页面加载时可见
    GM_addStyle(`
    .download-pic-button {
        position: fixed;
        top: 5%; /* 默认位置 */
        left: 50%;
        transform: translateX(-50%);
        z-index: 10000;
        border: none;
        background-color: transparent; /* 背景颜色设置为透明 */
        color: rgb(113, 100, 156); /* 字体颜色设置为指定的 RGB 值 */
        cursor: pointer;
        font-size: 15px;
        padding: 0;
    }
`);

    // 创建按钮并添加到页面顶部的中间
    var downloadButton = document.createElement("button");
    downloadButton.textContent = "New Btn";
    downloadButton.className = 'download-pic-button';
    document.body.appendChild(downloadButton);

    // 点击按钮时执行的函数
    downloadButton.onclick = function () {
        // 将NodeList转换为数组
        var images = Array.prototype.slice.call(document.querySelectorAll('img'));

        var zip = new JSZip();
        var imageDownloads = images.map(function (img, index) {
            var src = img.src; // 获取图片的src属性
            var filename = img.alt || 'image_' + index; // 使用alt属性作为文件名，如果没有alt则使用图片索引
            var extensionMatch = src.match(/\.([^.]+)$/); // 正则表达式匹配文件扩展名
            var extension = extensionMatch ? extensionMatch[1].toLowerCase() : 'jpg';

            // 检查扩展名是否是图片格式
            var validExtensions = ['jpg', 'jpeg', 'png', 'gif', 'svg', 'bmp', 'webp'];
            if (validExtensions.includes(extension)) {
                // 返回一个Promise，用于获取图片数据
                return fetch(src).then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok for ' + src);
                    }
                    return response.blob();
                }).then(blob => {
                    // 将blob添加到zip文件中
                    zip.file(filename + '.' + extension, blob);
                }).catch(error => {
                    console.error('Error fetching the image:', error);
                });
            }
            // 如果不是图片格式或者不包含有效的src属性，不返回Promise，这样就不会影响Promise.all
        });

        // 使用filter去除那些非图片格式或不包含有效src的Promise
        var validPromises = imageDownloads.filter(p => p);

        // 等待所有有效的图片都添加到zip中
        Promise.all(validPromises).then(() => {
            // 生成zip文件并下载
            zip.generateAsync({ type: 'blob' }).then(function (content) {
                var filename = 'images_' + new Date().toISOString() + '.zip'; // 使用时间戳生成唯一的文件名
                var eleLink = document.createElement('a');
                eleLink.download = filename;
                eleLink.style.display = 'none';
                eleLink.href = URL.createObjectURL(content);
                document.body.appendChild(eleLink);
                eleLink.click();
                document.body.removeChild(eleLink);
            }).catch(error => {
                console.error('Error generating the zip file:', error);
            });
        });
    };
}
)();