图片打包下载工具

Greasy Fork is available in English.
图片打包下载工具

A tool that helps you quickly capture web images and package them for download
当前为 2024-04-18 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         图片打包下载工具
// @namespace    http://tampermonkey.net/
// @description  A tool that helps you quickly capture web images and package them for download
// @description:zh-CN  一个帮你快速捕获网页图片并打包下载的工具
// @author       <[email protected]>
// @version      v2.1.1
// @license      GPLv3
// @icon         https://s21.ax1x.com/2024/04/16/pFxNgjH.jpg
// @require      https://code.jquery.com/jquery-3.6.0.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/jszip/3.6.0/jszip.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js
// @grant        GM_xmlhttpRequest
// @match       *://*/*
// @include     *://medium.com/*
// @include     *://twitter.com/*
// @include     *://*.twitter.com/*
// @include     *://weibo.com/*
// @include     *://*.weibo.com/*
// @include     *://*.vmgirls.com/*
// @include     *://wallpaperhub.app/*
// @include     *://*.bing.com/*
// @include     *://*.msn.cn/*
// @include     *://instagram.com/*
// @include     *://*.instagram.com/*
// @include     *://instagram.com/*
// @include     *://*.instagram.com/*
// @include     *://tiktok.com/*
// @include     *://*.tiktok.com/*
// @include     *://*.douyin.com/*
// @include     *://*.kuaishou.com/*
// @include     *://*.xiaohongshu.com/*

// ==/UserScript==

let btnStyle = `
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
    height: 40px;
    width: 90px;
    border-radius: 6px;
    background: #333;
    justify-content: center;
    align-items: center;
    font-family: 'Damion', cursive;
    cursor: pointer;
    border: none;
    font-size: 14px;
    transition: 500ms;
    color: rgb(161, 161, 161);
    box-shadow: -5px -5px 15px #444, 5px 5px 15px #222, inset 5px 5px 10px #444,inset -5px -5px 10px #222;
`
let divStyle = `
    padding: 20px 10px 20px 30px;
    position: fixed;
    right: 0;
    bottom: 10px;
    z-index: 99999;
    transition: 500ms;
`
var lock = true
const handleDownload = () => {
    let imageUrls = []
    document.querySelectorAll('img').forEach(item => {
        if (!item.src) return
        imageUrls.push(item.src)
    })
    const zip = new JSZip();
    lock = false
    Promise.all(imageUrls.map((url, index) => {
        return new Promise((resolve, reject) => {
            GM_xmlhttpRequest({
                method: "GET",
                url: url, 
                responseType: "blob",
                onload: function (response) {
                    if (response.status === 200) {
                        let blob = response.response
                        const filename = `image${index + 1}.jpg`;
                        zip.file(filename, blob, { binary: true });

                    } else {
                        console.error("Request failed with status " + response.status);
                    }
                    resolve()
                },
                onerror: function (e) {
                    console.error("Request failed: " + e.message);
                    resolve()
                }
            });
        })

    })).then(() => {
        zip.generateAsync({ type: 'blob' }).then(blob => {
            saveAs(blob, 'images.zip');
        });
        unlock()
    }).catch(error => {
        unlock()
        console.error('Error downloading images:', error);
    });
}
const unlock = (delay = 3000) => {
    setTimeout(() => {
        lock = true
    }, delay)
}
const createEle = () => {
    let div = document.createElement('div')
    div.style.cssText = divStyle
    div.setAttribute("id", "ccc_load_container");
    function hoverOn() {
        div.style.cssText = `
            ${divStyle}
            right: 0;
        `
    }
    function hoverOff() {
        div.style.cssText = `
        ${divStyle}
                right: -92px;
            `
    }
    setTimeout(() => { hoverOff() }, 1000)
    div.addEventListener('mouseover', hoverOn);
    div.addEventListener('mouseout', hoverOff);
    $(div).append(`
        <button style="${btnStyle}">下载图片</button>
    `)
    document.body.appendChild(div)
    $("#ccc_load_container > button").click(() => {
        lock && handleDownload()
    })
}
const init = () => {
    createEle()
}
(function () {
    init()
})();