// ==UserScript==
// @name            图片下载器
// @namespace       http://tampermonkey.net/
// @description     可以在绝大多数网站提取并批量下载图片。尤其是类似于千库网、包图网这种，不能右键保存图片或者保存的图片文件格式无法识别，均可以用脚本提取，然后用脚本提供的下载按钮，就可以下载到正确格式的图片文件。其他的淘宝、天猫电商图片批量下载，youtube、B站封面下载，等等都可以的。点击右键-tampermonkey-图片下载器，按这个顺序使用。(目前只适合tampermonkey，其他没试过行不行）
// @version         1.20
// @author          桃源隐叟
// @include         *
// @grant           GM_openInTab
// @grant GM_download
// @run-at            context-menu
// @match        *
// @match        https://www.bilibili.com/
// @match        https://588ku.com/
// @homepageURL       https://github.com/taoyuancun123/modifyText/blob/master/modifyText.js
// @supportURL        https://greasyfork.org/zh-CN/scripts/419894/feedback
// @downloadURL none
// ==/UserScript==

(function () {
    'use strict';

    try {
        document.querySelector(".tyc-image-container").remove();
    } catch {

    }
    let imgUrls = [];
    let bodyStr = document.body.innerHTML;
    let imgSelected=[];
    let imgWaitDownload=[];

    try {
        let imgEles = document.getElementsByTagName("img")

        for (let i = 0; i < imgEles.length; i++) {
            ////console.log(imgEles[i].src);
            if (!imgUrls.includes(imgEles[i].src)) {
                imgUrls.push(imgEles[i].src);
            }


        }


    } catch {
        //alert("error");
    }


    try {
        let imgRegs = bodyStr.match(/(?<=background-image:\s*url\()(\S+)(?=\))/g);

        for (let i = 0; i < imgRegs.length; i++) {
            ////console.log(imgRegs[i]);
            if (!imgUrls.includes(imgRegs[i].replace(/&quot;/g, ""))) {
                imgUrls.push(imgRegs[i].replace(/&quot;/g, ""));
            }

        }
    } catch {
        //alert("error");
    }


    let imgContainer = `
    <div class="tyc-image-container" style="position:fixed;
    top:0px;right:0px;width:50vw;z-index:2147483645;
    background-color: #dedede;
    border: 1px solid #aaa;
    overflow:scroll;height:100%;
    ">
    <div class="control-section" style="width:46vw;z-index:2147483646;
    position:fixed;right:30px;
    top:0px;display:block;
    height:40px;line-height:40px;
    background:#eee;border:1px solid #aaa;border-radius:10px;">
    <input class="select-all" type="checkbox" name="select-all" value="select-all">全选
    <button class="btn-download" style="border:1px solid #aaa;border-radius:5px;
    height:32px;line-height:32px;
    margin:0px;padding:0 5px;
    ">download</button>
<span style="margin-left:10px;" class="num-tip">已选(0/${imgUrls.length})张图片</span>
    <button class="btn-close" style="font-size:20px;position:absolute;
    right:30px;top:4px;
    height:32px;line-height:32px;
    margin:0px;
    border-radius:10px;border:1px solid #aaa;
    width:30px;">X</button>
    </div>
<div class="tyc-image-wrapper" style="margin-top:42px;display:flex;justify-content:center;
align-items:center;flex-wrap:wrap;">
</div>
    </div>
    `

    let showBigImage = `
        <div class="show-big-image" style="position:fixed;left:30%;top:30%;z-index:2147483647;">
        </div>
    `

    document.body.insertAdjacentHTML("afterbegin", imgContainer);

    document.querySelector(".btn-close").onclick = (e) => {
        document.querySelector(".tyc-image-container").remove();
    }

    document.querySelector(".btn-download").onclick = (e) => {
/*         if (document.querySelector(".select-all").checked) {
            imgUrls.forEach((img, index) => {
                GM_download(img, `pic-${index}`);
            });
        } else {
            alert("请勾选全选，下载全部，或者手动在图片上右键另存为指定图片");
        } */
        if(imgWaitDownload.length>=1){
            imgWaitDownload.forEach((img, index) => {
                GM_download(img, `pic-${index}`);
            });
        }else{
            alert("请至少选中一张图片。");
        }
    }


    imgUrls.forEach((img, index) => {
        let insertImg = `<div class="tyc-img-item-container-${index}" style="text-align:center;font-size:0px;
margin:5px;border:1px solid #99d;border-radius:3px;
">
<img class="tyc-image-preview" src="${img}"/ style="width:auto;height:200px;"></div>`
        document.querySelector(".tyc-image-wrapper").insertAdjacentHTML("beforeend", insertImg);
        let naturalW = document.querySelector(`.tyc-img-item-container-${index} .tyc-image-preview`).naturalWidth;
        let naturalH = document.querySelector(`.tyc-img-item-container-${index} .tyc-image-preview`).naturalHeight;

        let imgInfoContainer = `
        <div style="font-size:0px;background-color:rgba(100,100,100,0.6);height:30px;position:relative;">


</div>
        `;

        let thisImgContainer = document.querySelector(`.tyc-img-item-container-${index}`);
        let imgContainerWidth = thisImgContainer.getBoundingClientRect().width;
        let imgInfo = `
        <span style="font-size:16px;position:absolute;left:calc(50% - 80px);top:7px;">${naturalW}X${naturalH}</span>
        `;


        /*
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrows-fullscreen" viewBox="0 0 16 16" style="position:absolute;top:5px;right:5px;">
  <path fill-rule="evenodd" d="M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707zm4.344 0a.5.5 0 0 1 .707 0l4.096 4.096V11.5a.5.5 0 1 1 1 0v3.975a.5.5 0 0 1-.5.5H11.5a.5.5 0 0 1 0-1h2.768l-4.096-4.096a.5.5 0 0 1 0-.707zm0-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707zm-4.344 0a.5.5 0 0 1-.707 0L1.025 1.732V4.5a.5.5 0 0 1-1 0V.525a.5.5 0 0 1 .5-.5H4.5a.5.5 0 0 1 0 1H1.732l4.096 4.096a.5.5 0 0 1 0 .707z"/>
</svg>*/

        let downAndFullBtn = `
<span style="position:absolute;right:calc(50% - 30px);top:2px;border:1px solid #333;
width:26px;height:26px;border-radius:20px;" class="select-image" data-value="${index}">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16"  style="position:absolute;top:-1px;right:-2px;width:30px;height:30px;" data-value="${index}">
  <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
</svg>
</span>
<span style="position:absolute;right:calc(50% - 60px);top:2px;border:1px solid #333;
width:26px;height:26px;border-radius:20px;
" class="download-direct">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16" style="position:absolute;top:5px;right:5px;">
  <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
  <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
</svg>
</span>

`;

        let downloadBtn=`
        <span style="position:absolute;right:calc(50% - 15px);top:2px;border:1px solid #333;
width:26px;height:26px;border-radius:20px;
" class="download-direct">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16" style="position:absolute;top:5px;right:5px;">
  <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
  <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
</svg>
</span>
        `


        thisImgContainer.insertAdjacentHTML("beforeend", imgInfoContainer);

        let thisImgInfoContainer = thisImgContainer.querySelector("div");

        let rectWidth = parseInt(thisImgContainer.getBoundingClientRect().width);

        if (rectWidth > 120) {
            thisImgInfoContainer.insertAdjacentHTML("beforeend", imgInfo);
            thisImgInfoContainer.insertAdjacentHTML("beforeend", downAndFullBtn);
        } else if (rectWidth <= 120 && rectWidth >= 50) {
            thisImgInfoContainer.insertAdjacentHTML("beforeend", downAndFullBtn);
            thisImgInfoContainer.getElementsByClassName("preview-img")[0].style.right = "50%";
            thisImgInfoContainer.getElementsByClassName("download-direct")[0].style.right = "calc(50% - 30px)";


        }else{
            thisImgInfoContainer.insertAdjacentHTML("beforeend", downloadBtn);
        }


        ////console.log(img);
    });

    document.body.onclick = (e) => {
        //console.log(e);
        if ((e.target.nodeName == "IMG" && e.target.className === "tyc-image-preview") ) {
            let imgContainer = e.path.find(

                (ele) => {
                    try {
                        //console.log(ele);
                        return ele.className.includes("tyc-img-item-container");
                    }
                    catch {

                    }

                }
            )
            let path = imgContainer.getElementsByTagName("img")[0].src;

            try {
                let container = document.querySelector(".show-big-image");
                if (container.getElementsByTagName("img")[0].src === path) {
                    container.remove();
                    return;
                } else {
                    container.remove();
                }
            }
            catch {

            }
            document.body.insertAdjacentHTML("beforeend", showBigImage);

            let showItem = `<img src="${path}"/>`

            document.querySelector(".show-big-image").insertAdjacentHTML("beforeend", showItem);

            let tempImg = document.querySelector(".show-big-image img");

            let dWidth = (window.innerWidth - tempImg.width) / 2;
            let dHeight = (window.innerHeight - tempImg.height) / 2;

            document.querySelector(".show-big-image").style.left = dWidth + "px";
            document.querySelector(".show-big-image").style.top = dHeight + "px";
        } else if (e.target.parentElement.className === "show-big-image") {
            try {
                document.querySelector(".show-big-image").remove();
            }
            catch
            {

            }

        } else if (e.target.classList[1] == "bi-download" || e.path.find(isDownload) != undefined) {
            let imgContainer = e.path.find(

                (ele) => {
                    try {
                        //console.log(ele);
                        return ele.className.includes("tyc-img-item-container");
                    }
                    catch {

                    }

                }
            )
            let path = imgContainer.getElementsByTagName("img")[0].src;
            var filename;
            if (path.indexOf("/") > 0)//如果包含有"/"号 从最后一个"/"号+1的位置开始截取字符串
            {
                filename = path.substring(path.lastIndexOf("/") + 1, path.lastIndexOf("."));
            }
            else {
                filename = path;
            }
            //console.log("download start" + path + " " + filename);
            GM_download(path, "/\test/\pic");
        }else if(e.target.classList[1] == "bi-check" || e.path.find(isSelect) != undefined){
            let checkSvg=e.path.find((ele)=>ele.classList[1]==="bi-check");
            let currentImg=parseInt(checkSvg.dataset.value);

            let container=e.path.find((ele)=>ele.className===`tyc-img-item-container-${currentImg}`);



            if(imgSelected.includes(currentImg)){
                imgSelected.splice(imgSelected.indexOf(currentImg),1);
                checkSvg.style.color="black";
                container.style.border="1px solid #99d";
            }else{
                imgSelected.push(currentImg);
                checkSvg.style.color="white";
                container.style.border="1px solid white";
            }

            document.querySelector(".num-tip").innerText=`已选(${imgSelected.length}/${imgUrls.length})张图片`;
            transIndexToLink();
        }
    }

    document.querySelector(".select-all").onchange=(e)=>{
        if (document.querySelector(".select-all").checked) {
            imgWaitDownload=imgUrls;
        } else {
            transIndexToLink();
        }

        document.querySelector(".num-tip").innerText=`已选(${imgWaitDownload.length}/${imgUrls.length})张图片`;
    }

    function isDownload(ele) {
        return ele.className == "download-direct";
    }

    function isSelect(ele) {
        return ele.className == "select-image";
    }

    function transIndexToLink(){
        imgWaitDownload=[];
        imgSelected.forEach((imgIndex,index)=>{
            imgWaitDownload.push(imgUrls[imgIndex]);
        });
    }

})();