Greasy Fork is available in English.

花瓣 - 添加下载按钮

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

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

/*
    *://huaban.com/* 页面:
        1.给每张图片添加了直接下载的按钮。点击下载的时候,右下角会有2秒的弹窗提示图片已添加下载。
        2.预览页面添加“下载”按钮,点击直接下载原图。
        3.预览页面添加“原图”按钮,点击跳转到原图。
    *://hbimg.huabanimg.com/* 页面:
        1.添加旋转和缩放快捷键。
        2.添加下载快捷键
*/

(function () {
    'use strict';

    //给每张图片添加“大图”按钮
    function huaban() {

        var all_img_link = $('.layer-view').each(function (i, o) {
            //有些“被隐藏的图片”会导致下面的程序出错,所以要捕获错误并处理,不然后面的图片都不会添加按钮
            try{
                //检测是不是已经添加用来备注的标签,如果没有就添加
                if ($(o).siblings(".actions").children(".Neo_btn_added_div").children(".Neo_btn_added").length > 0) {} else {


                    let img_link = $(o).children("img").attr("src");

                    let file_name = $(o).siblings(".description").attr("data-formatted");

                    if (file_name == "undefined" || file_name =="" || file_name == undefined) {
                        file_name = img_link.split("_fw")[0].split("com/")[1]
                    }


                    //把图片链接和名字拼起来,用{split}分隔开
                    img_link ="https:" + img_link.split("_fw")[0] + "{split}" + file_name;

                    //获取图片所在div的高度,减去40之后就是图片的top
                    let top_px = 'top:' + ($(o).children(".cover").height()-40)+"px";

                    //!!!重点!!!button的onclick事件不要写到标签里面,要用jq来绑定(看本函数的最后面)
                    $(o).siblings(".actions").append("<div class='Neo_btn_added_div' style=" + top_px + " ><button class='Neo_btn_added btn btn14 rbtn' style='color:#ffffff ;background-color:#1AB37D;border:0px solid red; position:relative;top:100%'>下载</button></div>");
                    $(o).siblings(".actions").children(".Neo_btn_added_div").children(".Neo_btn_added").attr("title",img_link)
                };
            }catch(err){
                //对于被隐藏的图片,什么都不做,直接跳过
            }

        });

        //新标签打开大图
        //window.NeoFile = function (img_info) {
        function NeoFile(img_info) {
            //图片链接
            let url = img_info.split("{split}")[0];
            //图片名称
            let name = img_info.split("{split}")[1];


            if (name == "undefined" || name =="") {
                name = url.split("com/")[1]
            }

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

            //启用油猴的增强下载函数,可跨域
            //GM_download(url,name)

            GM_download({
                url:url,
                name:name,
                onload: function(){
                    //alert("adsa")
                    //下载完成之后,右下角弹窗通知。
                    GM_notification({text:name,title:"以下图片已添加下载:",timeout:2000})
                }
            });

        }

        //给按钮绑定onclick事件
        //$(".Neo_btn_added").click(function(){NeoFile(this.title)})  //如果直接绑的话,会绑定多次,造成点击一次执行多次的问题

        //先解绑再重新绑定
        $(".Neo_btn_added").off("click").on("click",function(){NeoFile(this.title)})
    };


    //!!!程序入口! 每秒运行一次
    let interval = setInterval(function () {

        //获取当前网页链接
        let current_url = document.URL;

        //如果当前页面是“大图页面”的话,就添加一些操作快捷键
        if (current_url.includes("huabanimg")) {

            //这个页面不需要循环执行
            clearInterval(interval);

            $(document).ready(function() {

                $("body").append("<div style='position:fixed;bottom:15px; left:5px; color:#ccc'>快捷键:缩放(a、s); 旋转(q、w);下载并关闭(enter)</div>")
                var current_deg = 0
                //按键执行的操作
                document.onkeydown = function (event) {

                    var e = event || window.event || arguments.callee.caller.arguments[0];

                    //逆时针旋转90度  q
                    if (e && e.keyCode == 81 ) {
                        current_deg = (current_deg-90)%360
                        console.log(current_deg)
                        $("img").css("transform","rotate("+current_deg+"deg)")
                    }

                    //顺时针旋转90度  w
                    if (e && e.keyCode == 87 ) {
                        current_deg = (current_deg+90)%360
                        console.log(current_deg)
                        $("img").css("transform","rotate("+current_deg+"deg)")
                    }

                    //尺寸增加20%  s
                    if (e && e.keyCode == 83 ) {
                        // $("img").css("max-height","19999px")
                        //$("img").css("max-width","700px")
                        $("img").attr("width",$("img").attr("width")*1.2)
                        $("img").attr("height","auto")


                    }

                    //尺寸减少20%  a
                    if (e && e.keyCode == 65 ) {
                        $("img").attr("width",$("img").attr("width")*0.8)
                        $("img").attr("height","auto")
                    }

                    //下载图片并关闭 enter
                    if (e && e.keyCode == 13 ) {

                        var a = document.createElement("a");
                        a.target = "_blank"

                        a.href = $("img").attr("src").split("_fw")[0];
                        a.download =a.href.split("com/")[1]

                        $("body").append(a); // 修复firefox中无法触发click
                        a.click();
                        $(a).remove();
                    }
                }
            });

            //!!!预览页面:添加“下载”按钮
        } else if (current_url.includes("huaban.com/pins")) {

            //添加“下载”按钮
            try{
                //获取图片的链接-s
                var img_link = "";
                //因为有些图片有源网址,图片的前面会多了一层a标签,所以要判断一下。
                if ($(".like-btn").siblings(".Neo_btn_added_div").length > 0) {} else {
                    if ($("#baidu_image_holder").children("img").length > 0) {
                        img_link = $("#baidu_image_holder").children("img").attr("src");
                    } else {
                        img_link = $("#baidu_image_holder").children("a").children("img").attr("src");
                    }

                    img_link = "https:" + img_link.split("_fw")[0];
                    //获取图片的链接-e

                    //获取图片名称
                    var img_name = $(".info-piece").children(".description").text()

                    //按钮标题
                    var title = img_link+"{split}"+img_name

                    //添加下载按钮
                    $(".like-btn").after('<span class="Neo_btn_added_div repin-btn btn rbtn" style="background-color:#1AB37D; border:0px solid red;" ><span class="text">下载 <span class="num"></span></span></span>');
                    $(".Neo_btn_added_div").attr("title",title)

                    //新标签打开大图
                    //window.NeoFile1 = function (img_info) {
                    function NeoFile_previewPage (img_info) {
                        //function Neo_downloadFile(img_link) {
                        let url = img_info.split("{split}")[0];
                        let name = img_info.split("{split}")[1];


                        if (name == "undefined" || name =="") {
                            name = url.split("com/")[1]
                        }

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

                        //console.log(url,name)
                        //启用油猴的增强下载函数,可跨域
                        //GM_download(url,name)

                        GM_download({
                            url:url,
                            name:name,
                            onload: function(){
                                //下载完成之后,右下角弹窗通知。
                                GM_notification({text:name,title:"以下图片已添加下载:",timeout:2000})
                            }
                        });

                    }

                    //给按钮绑定onclick事件
                    //$(".Neo_btn_added").click(function(){NeoFile(this.title)})  //如果直接绑的话,会绑定多次
                    //先解绑再重新绑定
                    $(".Neo_btn_added_div").off("click").on("click",function(){NeoFile_previewPage(this.title)})

                };

            }catch(err){
                //对于被隐藏的图片,什么都不做,直接跳过
            }

            //添加“原图”按钮:跳转到原图
            try{

                //获取图片的链接-s
                var img_link_2 = "";
                //因为有些图片有源网址,图片的前面会多了一层a标签,所以要判断一下。
                if ($(".Neo_btn_openImg").length > 0) {} else {


                    function Neo_openImg(){

                        if ($("#baidu_image_holder").children("img").length > 0) {
                            img_link_2 = $("#baidu_image_holder").children("img").attr("src");
                        } else {
                            img_link_2 = $("#baidu_image_holder").children("a").children("img").attr("src");
                        }

                        img_link_2 = "https:" + img_link_2.split("_fw")[0];
                        window.open(img_link_2)
                    }

                    //添加下载按钮
                    $(".like-btn").after('<span class="Neo_btn_openImg repin-btn btn rbtn" style="background-color:#1AB37D; border:0px solid red;" ><span class="text">原图 <span class="num"></span></span></span>');
                    //先解绑再重新绑定
                    $(".Neo_btn_openImg").off("click").on("click",function(){Neo_openImg()})
                }
                //获取图片的链接-e
            }catch(err){

            }


            //如果当前页面是“花瓣的其他页面”的话,就启动huaban()程序(用于给每张图片添加“下载”按钮
        } else {
            huaban();
        }

    }, 1000);

})();