Greasy Fork

Greasy Fork is available in English.

花瓣 - 添加下载按钮

给花瓣的图加上“下载”按钮,方便下载

目前为 2022-07-22 提交的版本,查看 最新版本

// ==UserScript==
// @name         花瓣 - 添加下载按钮
// @namespace    http://tampermonkey.net/
// @version      0.4.1
// @description  给花瓣的图加上“下载”按钮,方便下载
// @author       潘志城_Neo
// @match        *://huaban.com/*
// @match        *://hbimg.huabanimg.com/*
// @grant        GM_download
// @grant        GM_notification
// ==/UserScript==

(function () {
    'use strict';

    // 所有图片
    var allImages = []
    var interval = null
    function main() {
        document.addEventListener('scroll', throttle(addDownloadBtn, 300))
        document.onload = function(){
            addDownloadBtn()
        }
        interval = setInterval(() => {
            if (allImages.length === 0) {
                addDownloadBtn()
            } else {
                clearInterval(interval)
            }
        }, 1000);
        const interval1 = setInterval(()=>{
            // 点击搜索按钮时,添加一次下载按钮
            const searchBtn = document.querySelector('button .anticon-search')
            if(searchBtn){
                clearInterval(interval1)
                searchBtn.parentNode.addEventListener('click',()=>{
                    addDownloadBtn()
                })
            }
        },500)

        } main()

    /**
     * 添加下载按钮(如果已有按钮,就不添加)
     */
    function addDownloadBtn() {
        allImages = document.querySelectorAll('.main .infinite-scroll-component .hb-image')
        allImages.forEach(dom => {
            // 图片标题和样式
            var imgInfo = {
                title: dom.getAttribute('alt'),
                src: dom.getAttribute('src')
            }
            // 和包含图片的a标签同级的节点
            const tempList = dom.parentNode.parentNode.childNodes
            const imgNode = tempList[tempList.length - 1]

            const lookNode = tempList[tempList.length - 2]
            if (lookNode.querySelectorAll('.neo_add').length === 0) {

                var downloadBtn = document.createElement('div')
                downloadBtn.className = 'neo_add'
                downloadBtn.innerText = '下载'
                downloadBtn.addEventListener('click', () => {
                    downloadImage(imgInfo)
                    GM_notification({ text: imgInfo.title, title: "图片已添加下载", timeout: 2000 })
                })

                downloadBtn.style.cssText = 'color:#ffffff ;background-color:#1AB37D;border-radius:8px;padding:3px 12px;cursor:pointer'
                lookNode.insertBefore(downloadBtn, null)
            }
        });
    }

    /**
   * 下载图片
   * @param {Object} imgInfo src:图片链接; title:图片标题
   */
    function downloadImage(imgInfo) {

        //替换文件名中不能有的字符
        let sign_list = ["\\*", "\\'", '\\"', "<", ">", "\\?", "\\.", "\\|", "\\/"]
        for (let i = 0; i < sign_list.length; i++) {
            var reg = "/" + sign_list[i] + "/g";
            var title = imgInfo.title
            if (title) {
                imgInfo.title = imgInfo.title.replace(eval(reg), "_");
            } else {
                imgInfo.title = '无标题'
            }
        }

        imgInfo.src = imgInfo.src.replace('_fw240/format/webp', '')
        imgInfo.src = imgInfo.src.replace('_fw240', '')
        //启用油猴的增强下载函数,可跨域
        GM_download({
            url: imgInfo.src,
            name: imgInfo.title,
            onload: function () {
                //下载完成之后,右下角弹窗通知。
                GM_notification({ text: imgInfo.title, title: "图片已完成下载", timeout: 5000 })
            },
        });
    }
    function throttle(cb, wait = 300) {
        let last = 0;
        return function () {
            var now = new Date().getTime();;
            if (now - last > wait) {
                cb.call(this);
                last = new Date().getTime();;
            }
        }
    }

})();