☰

图片下载器

可以在绝大多数网站提取并批量下载图片。尤其是类似于千库网、包图网或者有妖气、腾讯漫画、b站漫画这种，不能右键保存图片或者保存的图片文件格式无法识别，均可以用脚本提取，然后用脚本提供的下载按钮，就可以下载到正确格式的图片文件。点击右键-tampermonkey-图片下载器-打开脚本(或快捷键alt+w)，按这个顺序使用。(目前只适合chrome+tampermonkey，其他组合多少有问题）

目前为 2021-12-21 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Image Downloader
  3. // @name:zh-CN   图片下载器
  4. // @name:zh-TW   图片下载器
  5. // @namespace       http://tampermonkey.net/
  6. // @description You can extract and download pictures in batches on most websites(e.g.instagram).Right Click-tampermonkey-Image Downloader(or alt+w),use in this order.(currently only suitable for tampermonkey and chrome,others have not tried it)
  7. // @description:zh-CN    可以在绝大多数网站提取并批量下载图片。尤其是类似于千库网、包图网或者有妖气、腾讯漫画、b站漫画这种，不能右键保存图片或者保存的图片文件格式无法识别，均可以用脚本提取，然后用脚本提供的下载按钮，就可以下载到正确格式的图片文件。点击右键-tampermonkey-图片下载器-打开脚本(或快捷键alt+w)，按这个顺序使用。(目前只适合chrome+tampermonkey，其他组合多少有问题）
  8. // @description:zh-TW   可以在绝大多数网站提取并批量下载图片。尤其是类似于千库网、包图网或者有妖气、腾讯漫画、b站漫画这种，不能右键保存图片或者保存的图片文件格式无法识别，均可以用脚本提取，然后用脚本提供的下载按钮，就可以下载到正确格式的图片文件。点击右键-tampermonkey-图片下载器-打开脚本(或快捷键alt+w)，按这个顺序使用。(目前只适合chrome+tampermonkey，其他组合多少有问题）
  9. // @version         1.80
  10. // @author          桃源隐叟
  11. // @include         *
  12. // @connect *
  13. // @grant           GM_openInTab
  14. // @grant        GM_registerMenuCommand
  15. // @grant           GM_setValue
  16. // @grant           GM_getValue
  17. // @grant        GM_xmlhttpRequest
  18. // @grant GM_download
  19. // @require      https://cdn.jsdelivr.net/npm/hotkeys-js@3.7.2/dist/hotkeys.min.js
  20. // @require      https://cdn.bootcss.com/jszip/3.7.1/jszip.min.js
  21. // @require      https://cdn.bootcss.com/FileSaver.js/1.3.8/FileSaver.min.js
  22. // @run-at         document-end
  23. // @match        *
  24. // @match        https://www.bilibili.com/
  25. // @match        https://588ku.com/
  26. // @homepageURL       https://github.com/taoyuancun123/modifyText/blob/master/modifyText.js
  27. // @supportURL        https://greasyfork.org/zh-CN/scripts/419894/feedback
  28. // @license GPLv3
  29. // ==/UserScript==
  30.  
  31. (function () {
  32.     'use strict';
  33.  
  34.     var lang = navigator.appName == "Netscape" ? navigator.language : navigator.userLanguage;
  35.     var langSet;
  36.     var localization = {
  37.         zh: {
  38.             selectAll: "全选",
  39.             downloadBtn: "下载",
  40.             downloadMenuText: "打开脚本(Alt+w)",
  41.             zipDownloadBtn: "zip下载"
  42.         },
  43.         en: {
  44.             selectAll: "selectAll",
  45.             downloadBtn: "download",
  46.             downloadMenuText: "Open(Alt+w)",
  47.             zipDownloadBtn: "zip Download"
  48.         }
  49.     }
  50.  
  51.     if (lang.toLowerCase().includes("zh-")) {
  52.         langSet = localization.zh;
  53.     } else {
  54.         langSet = localization.en;
  55.     }
  56.  
  57.  
  58.  
  59.     GM_registerMenuCommand(langSet.downloadMenuText, wrapper);
  60.     hotkeys('alt+w', wrapper);
  61.  
  62.     function wrapper() {
  63.  
  64.         try {
  65.             document.querySelector(".tyc-image-container").remove();
  66.         } catch {
  67.  
  68.         }
  69.         var imgUrls = [];
  70.         var bodyStr = document.body.innerHTML;
  71.         var imgSelected = [];
  72.         var zipImgSelected = [];
  73.         var imgWaitDownload = [];
  74.         var zipImgWaitDownload = [];
  75.         var widthFilter = { min: 0, max: 3000 };
  76.         var heightFilter = { min: 0, max: 3000 };
  77.         var filteredImgUrls = [];
  78.         var zipFilteredImgUrls = [];
  79.         try{
  80.             var zipFolder = new JSZip();
  81.             var zipSubFoler = zipFolder.folder('pics');
  82.         }
  83.         catch{
  84.             
  85.         }
  86.  
  87.         var fetchTip='';
  88.  
  89.  
  90.         try {
  91.             let imgEles = document.getElementsByTagName("img");
  92.             let canvasEles=document.getElementsByTagName("canvas");
  93.  
  94.             for (let i = 0; i < imgEles.length; i++) {
  95.                 ////console.log(imgEles[i].src);
  96.                 if (!imgUrls.includes(imgEles[i].src)) {
  97.                     imgUrls.push(imgEles[i].src);
  98.                 } else if (!imgUrls.includes(imgEles[i].srcset)) {
  99.                     imgUrls.push(imgEles[i].srcset);
  100.                 }
  101.             }
  102.  
  103.             if (window.location.href.includes("hathitrust.org")) {
  104.                 let imgs = document.querySelectorAll(".image img");
  105.                 if (imgs.length > 0) {
  106.                     let canvas = document.createElement("canvas");
  107.                     imgUrls = [];
  108.                     for (let pi = 0; pi < imgs.length; pi++) {
  109.                         canvas.width = imgs[pi].width;
  110.                         canvas.height = imgs[pi].height;     
  111.                         canvas.getContext("2d").drawImage(imgs[pi], 0, 0);     
  112.                         imgUrls.push(canvas.toDataURL("image/png"));
  113.                     }
  114.      
  115.                     document.querySelector(".select-all").style = "position:relative;width:15px;height:15px;"
  116.                 } else {
  117.      
  118.                 }
  119.             }
  120.  
  121.             if(window.location.href.toString().includes("manga.bilibili.com/")){
  122.                 let iframeCanvas=`<iframe style="display:none;" id="tyc-insert-iframe"></iframe>`;
  123.                 if(document.getElementById("tyc-insert-iframe")==null){
  124.                     document.body.insertAdjacentHTML("afterbegin",iframeCanvas);
  125.                     document.getElementById("tyc-insert-iframe").contentDocument.body.insertAdjacentHTML("afterbegin",`<canvas id="tyc-insert-canvas"></canvas>`);
  126.                     document.body.getElementsByTagName('canvas')[0].__proto__.toBlob=document.getElementById("tyc-insert-iframe").contentDocument.getElementById("tyc-insert-canvas").__proto__.toBlob;
  127.                 }
  128.  
  129.             }
  130.  
  131.             if(canvasEles.length>0){ 
  132.                 fetchTip="准备抓取canvas图片";
  133.                 var completeFlag=0;                
  134.                 for(let j=0;j<canvasEles.length;j++){                    
  135.                     canvasEles[j].toBlob(blobCallback);    
  136.                     function blobCallback(blob){
  137.                         let oFileReader = new FileReader();
  138.                         oFileReader.onloadend = function (e) {
  139.                             let base64 = e.target.result;                                 
  140.                             if (base64.includes("data:image")) {
  141.                                 if (!imgUrls.includes(base64)) {                                
  142.                                     imgUrls.push(base64);                                
  143.                                 }
  144.                                 completeFlag++;                                                         
  145.                                 document.querySelector(".num-tip").innerText=`抓取canvas图片第${completeFlag}/${canvasEles.length}张`;                                      
  146.                                 if(completeFlag===canvasEles.length){
  147.                                     clean();
  148.                                     init();
  149.                                 }
  150.                             }
  151.                         };
  152.                         
  153.                         oFileReader.readAsDataURL(blob);
  154.                     }
  155.                 }
  156.             }else{
  157.                 fetchTip=`已选(0/${imgUrls.length})张图片`;
  158.             }
  159.  
  160.         } catch {
  161.             //alert("error");
  162.         }
  163.  
  164.         try {
  165.             let imgRegs = bodyStr.match(/(?<=background-image:\s*url\()(\S+)(?=\))/g);
  166.  
  167.             for (let i = 0; i < imgRegs.length; i++) {
  168.                 ////console.log(imgRegs[i]);
  169.                 if (!imgUrls.includes(imgRegs[i].replace(/&quot;/g, ""))) {
  170.                     imgUrls.push(imgRegs[i].replace(/&quot;/g, ""));
  171.                 }
  172.             }
  173.         } catch {
  174.             //alert("error");
  175.         }
  176.  
  177.         let imgContainer = `
  178.         <style>
  179.             .tyc-image-container{
  180.                 position:fixed;
  181.                 top:0px;right:0px;width:50vw;z-index:2147483645;
  182.                 background-color: #dedede;
  183.                 border: 1px solid #aaa;
  184.                 overflow:scroll;height:100%;
  185.             }
  186.  
  187.             .control-section{
  188.                 width:46vw;z-index:2147483646;
  189.                 position:fixed;right:30px;
  190.                 top:0px;display:block;
  191.                 height:80px;line-height:40px;
  192.                 background:#eee;border:1px solid #aaa;border-radius:2px;
  193.             }
  194.             .btn-download{
  195.                 border:1px solid #aaa;border-radius:5px;
  196.                 height:32px;line-height:32px;
  197.                 margin:0px;padding:0 5px;
  198.             }
  199.             .btn-zipDownload{
  200.                 border:1px solid #aaa;border-radius:5px;
  201.                 height:32px;line-height:32px;
  202.                 margin:0px;padding:0 5px;
  203.             }
  204.             .btn-close{
  205.                 font-size:20px;position:absolute;
  206.                 right:30px;top:4px;
  207.                 height:32px;line-height:32px;
  208.                 margin:0px;
  209.                 border-radius:10px;border:1px solid #aaa;
  210.                 width:30px;
  211.             }
  212.  
  213.             .tyc-image-wrapper{
  214.                 margin-top:82px;display:flex;justify-content:center;
  215.                 align-items:center;flex-wrap:wrap;
  216.             }
  217.  
  218.             .tyc-input-checkbox{
  219.                 background-color: initial;
  220.                 cursor: default;
  221.                 appearance: auto;
  222.                 box-sizing: border-box;
  223.                 margin: 3px 3px 3px 4px;
  224.                 padding: initial;
  225.                 border: initial;
  226.             }
  227.         </style>
  228.     <div class="tyc-image-container">
  229.     <div class="control-section"> 
  230.     <input class="select-all tyc-input-checkbox" type="checkbox" name="select-all" value="select-all">${langSet.selectAll}
  231.     <button class="btn-download" >${langSet.downloadBtn}</button> 
  232.     <button class="btn-zipDownload" >${langSet.zipDownloadBtn}</button> 
  233.     <span style="margin-left:10px;" class="num-tip">${fetchTip}</span>
  234.     <button class="btn-close" >X</button>
  235.  
  236.     <p style="line-height:12px;">
  237.         <div style="float:left;display:block;">
  238.         <input type="checkbox" class="width-check img-check tyc-input-checkbox" name="width-check" value="width-check">Width:
  239.         <input type="text" class="width-value-min" size="1" style="height:15px;width:50px;"
  240.             min="0" max="9999" value="0">-
  241.             <input type="text" class="width-value-max" size="1" style="height:15px;width:50px;"
  242.             min="0" max="9999" value="3000">
  243.         </div>
  244.  
  245.         <div style="float:left;margin-left:30px;display:block;">
  246.             <input type="checkbox" class="height-check img-check tyc-input-checkbox" name="height-check" value="height-check">Height:
  247.             <input type="text" class="height-value-min" size="1" style="height:15px;width:50px;"
  248.                 min="0" max="9999" value="0">-
  249.                 <input type="text" class="height-value-max" size="1" style="height:15px;width:50px;"
  250.                 min="0" max="9999" value="3000">
  251.         </div> 
  252.     </p> 
  253.     </div>
  254.         <div class="tyc-image-wrapper" >
  255.         </div>
  256.     </div>
  257.     `
  258.  
  259.         let showBigImage = `
  260.         <div class="show-big-image" style="position:fixed;left:30%;top:30%;z-index:2147483647;">
  261.         </div>
  262.     `
  263.  
  264.         document.body.insertAdjacentHTML("afterbegin", imgContainer);
  265.   
  266.         document.body.onclick = (e) => {
  267.             //console.log(e);
  268.             if ((e.target.nodeName == "IMG" && e.target.className === "tyc-image-preview")) {
  269.                 let imgContainer = e.path.find(
  270.  
  271.                     (ele) => {
  272.                         try {
  273.                             //console.log(ele);
  274.                             return ele.className.includes("tyc-img-item-container");
  275.                         }
  276.                         catch {
  277.  
  278.                         }
  279.  
  280.                     }
  281.                 )
  282.                 let path = imgContainer.getElementsByTagName("img")[0].src;
  283.  
  284.                 try {
  285.                     let container = document.querySelector(".show-big-image");
  286.                     if (container.getElementsByTagName("img")[0].src === path) {
  287.                         container.remove();
  288.                         return;
  289.                     } else {
  290.                         container.remove();
  291.                     }
  292.                 }
  293.                 catch {
  294.  
  295.                 }
  296.                 document.body.insertAdjacentHTML("beforeend", showBigImage);
  297.  
  298.                 let showItem = `<img src="${path}"/>`
  299.  
  300.                 document.querySelector(".show-big-image").insertAdjacentHTML("beforeend", showItem);
  301.  
  302.                 let tempImg = document.querySelector(".show-big-image img");
  303.  
  304.                 let dWidth = (window.innerWidth - tempImg.width) / 2;
  305.                 let dHeight = (window.innerHeight - tempImg.height) / 2;
  306.  
  307.                 document.querySelector(".show-big-image").style.left = dWidth + "px";
  308.                 document.querySelector(".show-big-image").style.top = dHeight + "px";
  309.             } else if (e.target.parentElement.className === "show-big-image") {
  310.                 try {
  311.                     document.querySelector(".show-big-image").remove();
  312.                 }
  313.                 catch
  314.                 {
  315.  
  316.                 }
  317.  
  318.             } else if (e.target.classList[1] == "bi-download" || e.path.find(isDownload) != undefined) {
  319.                 let imgContainer = e.path.find(
  320.  
  321.                     (ele) => {
  322.                         try {
  323.                             //console.log(ele);
  324.                             return ele.className.includes("tyc-img-item-container");
  325.                         }
  326.                         catch {
  327.  
  328.                         }
  329.  
  330.                     }
  331.                 )
  332.                 let path = imgContainer.getElementsByTagName("img")[0].src;
  333.                 let filename;
  334.                 if (path.indexOf("/") > 0)//如果包含有"/"号 从最后一个"/"号+1的位置开始截取字符串
  335.                 {
  336.                     filename = path.substring(path.lastIndexOf("/") + 1, path.lastIndexOf("."));
  337.                 }
  338.                 else {
  339.                     filename = path;
  340.                 }
  341.                 //console.log("download start" + path + " " + filename);
  342.                 GM_download(path, "pic");
  343.             } else if (e.target.classList[1] == "bi-check" || e.path.find(isSelect) != undefined) {
  344.                 let checkSvg = e.path.find((ele) => ele.classList[1] === "bi-check");
  345.                 let currentImgIndex = parseInt(checkSvg.dataset.value);
  346.  
  347.                 let container = e.path.find((ele) => ele.className === `tyc-img-item-container-${currentImgIndex}`);
  348.   
  349.                 if (imgSelected.includes(currentImgIndex)) {
  350.                     imgSelected.splice(imgSelected.indexOf(currentImgIndex), 1);
  351.                     checkSvg.style.color = "black";
  352.                     container.style.border = "1px solid #99d";
  353.                 } else {
  354.                     imgSelected.push(currentImgIndex);
  355.                     checkSvg.style.color = "white";
  356.                     container.style.border = "1px solid white";
  357.                 }
  358.  
  359.                 zipImgSelected=imgSelected;
  360.  
  361.                 document.querySelector(".num-tip").innerText = `已选(${imgSelected.length}/${imgUrls.length})张图片`;
  362.                 imgWaitDownload=transIndexToLink(filteredImgUrls,imgSelected);
  363.                 zipImgWaitDownload=transIndexToLink(zipFilteredImgUrls,zipImgSelected);
  364.                 zipImgWaitDownload=cutoffNotBase64Img(zipImgWaitDownload);
  365.             }
  366.         }
  367.  
  368.         document.querySelector(".btn-close").onclick = (e) => {
  369.             document.querySelector(".tyc-image-container").remove();
  370.         }
  371.  
  372.         document.querySelector(".btn-download").onclick = (e) => {
  373.             if (imgWaitDownload.length >= 1) {
  374.                 console.log(imgWaitDownload);
  375.                 imgWaitDownload.forEach(async (img, index) => {
  376.                     //let filename = `pic-${index}.jpg`;
  377.                     //filename=filename.replace(/\\/g, '/').replace(/\/{2,}/g, '/');
  378.                     await GM_download(img, `pic-${index}`);
  379.                 });
  380.             } else {
  381.                 alert("请至少选中一张图片。");
  382.             }
  383.         }
  384.  
  385.         document.querySelector(".btn-zipDownload").onclick = (e) => {
  386.             if (zipImgWaitDownload.length >= 1) {
  387.                 console.log(zipImgWaitDownload);
  388.                 zipImgWaitDownload.forEach(async (img, index) => {
  389.                     let fileExt = img.substring(img.indexOf("image/") + 6, img.indexOf(";"))
  390.                     fileExt=fileExt.includes("svg")?"svg":fileExt;
  391.                     let filename = `pic${index}.${fileExt}`;
  392.                     zipSubFoler.file(filename, img.split(",")[1], { base64: true });
  393.                 });
  394.  
  395.                 zipFolder.generateAsync({ type: "blob" })
  396.                     .then(function (content) {
  397.                         // see FileSaver.js
  398.                         saveAs(content, "pics.zip");
  399.                         zipFolder.remove("pics");
  400.                         zipSubFoler = zipFolder.folder('pics');
  401.                     });
  402.  
  403.             } else {
  404.                 alert("请至少选中一张图片。");
  405.             }
  406.  
  407.         }
  408.  
  409.         document.body.onchange = (e) => {
  410.             if (e.target.className.includes("width-check")) {
  411.                 GM_setValue('width-check', e.target.checked);
  412.             }
  413.             if (e.target.className.includes("height-check")) {
  414.                 GM_setValue('height-check', e.target.checked);
  415.             }
  416.             if (e.target.nodeName === "INPUT" && e.target.type === "text" && e.target.className.includes("value")) {
  417.                 GM_setValue(e.target.className, e.target.value);
  418.             }
  419.  
  420.             (e.target.className.includes("width-check") || e.target.className.includes("height-check") ||
  421.  
  422.                 (e.target.nodeName === "INPUT" && e.target.type === "text" && e.target.className.includes("value")))
  423.                 && (clean(), init());
  424.  
  425.         }
  426.  
  427.         document.querySelector(".select-all").onchange = (e) => {
  428.             if (document.querySelector(".select-all").checked) {
  429.                 imgWaitDownload = filteredImgUrls;
  430.                 zipImgWaitDownload=cutoffNotBase64Img(zipFilteredImgUrls);
  431.             } else {
  432.                 imgWaitDownload=transIndexToLink(filteredImgUrls,imgSelected);
  433.                 zipImgWaitDownload=transIndexToLink(zipFilteredImgUrls,zipImgSelected);
  434.             }
  435.  
  436.             document.querySelector(".num-tip").innerText = `已选(${imgWaitDownload.length}/${filteredImgUrls.length})张图片`;
  437.         }
  438.  
  439.         init();
  440.         function init() {
  441.             filteredImgUrls = imgUrls;
  442.             getSavedValue();
  443.             if (document.querySelector(".width-check").checked) {
  444.                 filteredImgUrls = filteredImgUrls.filter(filterByWidth);
  445.             }
  446.  
  447.             if (document.querySelector(".height-check").checked) {
  448.                 filteredImgUrls = filteredImgUrls.filter(filterByHeight);
  449.             }
  450.  
  451.  
  452.             zipFilteredImgUrls = filteredImgUrls;
  453.             fetchBase64ImgsThenPushToZipArray();
  454.             showImage(filteredImgUrls);
  455.         }
  456.  
  457.         function clean() {
  458.             imgWaitDownload = [];
  459.             imgSelected = [];
  460.             document.querySelector(".num-tip").innerText = `已选(${imgSelected.length}/${imgUrls.length})张图片`;
  461.             document.querySelector(".tyc-image-wrapper").innerHTML = "";
  462.         }
  463.  
  464.         function isDownload(ele) {
  465.             return ele.className == "download-direct";
  466.         }
  467.  
  468.         function isSelect(ele) {
  469.             return ele.className == "select-image";
  470.         }
  471.  
  472.         function transIndexToLink(WholeImgs,selectedImgs) {
  473.             let transedImgs=[];
  474.             selectedImgs.forEach((imgIndex, index) => {
  475.                 transedImgs.push(WholeImgs[imgIndex]);
  476.             });
  477.             return transedImgs;
  478.         }
  479.  
  480.         function showImage(filtedImgUrls) {
  481.             filtedImgUrls.forEach((img, index) => {
  482.                 if (window.location.href.includes("huaban.com")) {
  483.                     if (img.includes("/webp")) {
  484.                         img = img.replace(/\/webp/g, "/png");
  485.                     }
  486.                 }
  487.                 let insertImg = `<div class="tyc-img-item-container-${index}" style="text-align:center;font-size:0px;
  488.     margin:5px;border:1px solid #99d;border-radius:3px;
  489.     ">
  490.     <img class="tyc-image-preview" src="${img}"/ style="width:auto;height:200px;"></div>`
  491.                 document.querySelector(".tyc-image-wrapper").insertAdjacentHTML("beforeend", insertImg);
  492.                 let naturalW = document.querySelector(`.tyc-img-item-container-${index} .tyc-image-preview`).naturalWidth;
  493.                 let naturalH = document.querySelector(`.tyc-img-item-container-${index} .tyc-image-preview`).naturalHeight;
  494.  
  495.                 let imgInfoContainer = `
  496.             <div style="font-size:0px;background-color:rgba(100,100,100,0.6);height:30px;position:relative;">
  497.  
  498.  
  499.     </div>
  500.             `;
  501.  
  502.                 let thisImgContainer = document.querySelector(`.tyc-img-item-container-${index}`);
  503.                 let imgContainerWidth = thisImgContainer.getBoundingClientRect().width;
  504.                 let imgInfo = `
  505.             <span style="font-size:16px;position:absolute;left:calc(50% - 80px);top:7px;">${naturalW}X${naturalH}</span>
  506.             `;
  507.  
  508.  
  509.                 /*
  510.                 <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;">
  511.           <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"/>
  512.         </svg>*/
  513.  
  514.                 let downAndFullBtn = `
  515.     <span style="position:absolute;right:calc(50% - 30px);top:2px;border:1px solid #333;
  516.     width:26px;height:26px;border-radius:20px;" class="select-image" data-value="${index}">
  517.     <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}">
  518.       <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"/>
  519.     </svg>
  520.     </span>
  521.     <span style="position:absolute;right:calc(50% - 60px);top:2px;border:1px solid #333;
  522.     width:26px;height:26px;border-radius:20px;
  523.     " class="download-direct">
  524.     <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;">
  525.       <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"/>
  526.       <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"/>
  527.     </svg>
  528.     </span>
  529.  
  530.     `;
  531.  
  532.                 let downloadBtn = `
  533.             <span style="position:absolute;right:calc(50% - 15px);top:2px;border:1px solid #333;
  534.     width:26px;height:26px;border-radius:20px;
  535.     " class="download-direct">
  536.     <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;">
  537.       <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"/>
  538.       <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"/>
  539.     </svg>
  540.     </span>
  541.             `
  542.                 thisImgContainer.insertAdjacentHTML("beforeend", imgInfoContainer);
  543.  
  544.                 let thisImgInfoContainer = thisImgContainer.querySelector("div");
  545.  
  546.                 let rectWidth = parseInt(thisImgContainer.getBoundingClientRect().width);
  547.  
  548.                 if (rectWidth > 120) {
  549.                     thisImgInfoContainer.insertAdjacentHTML("beforeend", imgInfo);
  550.                     thisImgInfoContainer.insertAdjacentHTML("beforeend", downAndFullBtn);
  551.                 } else if (rectWidth <= 120 && rectWidth >= 50) {
  552.                     thisImgInfoContainer.insertAdjacentHTML("beforeend", downAndFullBtn);
  553.                     thisImgInfoContainer.getElementsByClassName("select-image")[0].style.right = "50%";
  554.                     thisImgInfoContainer.getElementsByClassName("download-direct")[0].style.right = "calc(50% - 30px)";
  555.                 } else {
  556.                     thisImgInfoContainer.insertAdjacentHTML("beforeend", downloadBtn);
  557.                 }
  558.                 ////console.log(img);
  559.             });
  560.         }
  561.  
  562.         function filterByWidth(src) {
  563.             let tempImg = new Image();
  564.             tempImg.src = src;
  565.             if (tempImg.width >= parseInt(document.querySelector(".width-value-min").value)
  566.                 && tempImg.width <= parseInt(document.querySelector(".width-value-max").value)) {
  567.                 return src;
  568.             }
  569.         }
  570.  
  571.         function filterByHeight(src) {
  572.             let tempImg = new Image();
  573.             tempImg.src = src;
  574.             if (tempImg.height >= parseInt(document.querySelector(".height-value-min").value)
  575.                 && tempImg.height <= parseInt(document.querySelector(".height-value-max").value)) {
  576.                 return src;
  577.             }
  578.         }
  579.  
  580.         function getSavedValue() {
  581.             GM_getValue("width-check") && (document.querySelector(".width-check").checked = GM_getValue("width-check"));
  582.             GM_getValue("height-check") && (document.querySelector(".height-check").checked = GM_getValue("height-check"));
  583.             GM_getValue("width-value-min") && (document.querySelector(".width-value-min").value = GM_getValue("width-value-min"));
  584.             GM_getValue("width-value-max") && (document.querySelector(".width-value-max").value = GM_getValue("width-value-max"));
  585.             GM_getValue("height-value-min") && (document.querySelector(".height-value-min").value = GM_getValue("height-value-min"));
  586.             GM_getValue("height-value-max") && (document.querySelector(".height-value-max").value = GM_getValue("height-value-max"));
  587.  
  588.         }
  589.  
  590.         function getImgAndChangeToBase64(currentImgIndex) {
  591.             GM_xmlhttpRequest({
  592.                 method: "get",
  593.                 url: filteredImgUrls[currentImgIndex],
  594.                 responseType: "blob",
  595.                 onload: function (r) {
  596.                     var blob = r.response;
  597.                     let oFileReader = new FileReader();
  598.                     oFileReader.onloadend = function (e) {
  599.                         let base64 = e.target.result;
  600.                         filteredImgUrls[currentImgIndex] = base64; 
  601.                         document.querySelector(".btn-zipDownload").disabled = false;
  602.                         document.querySelector(".btn-zipDownload").style.color = "";
  603.                     };
  604.                     oFileReader.readAsDataURL(blob);
  605.                     //imgZip.file(filename+".jpg",r.response);
  606.                     //console.log(r.response); 
  607.                 }
  608.             });
  609.         }
  610.  
  611.         function fetchBase64ImgsThenPushToZipArray() {
  612.             zipFilteredImgUrls.forEach((imgUrl, urlIndex) => {
  613.                 if (imgUrl.includes("data:image")) {
  614.                     return;
  615.                 }
  616.                 
  617.                 GM_xmlhttpRequest({
  618.                     method: "get",
  619.                     url: imgUrl,
  620.                     responseType: "blob",
  621.                     onload: function (r) {
  622.                         var blob = r.response;
  623.                         let oFileReader = new FileReader();
  624.                         oFileReader.onloadend = function (e) {
  625.                             let base64 = e.target.result;
  626.                             //console.log("》》", base64)
  627.  
  628.                             if (base64.includes("data:image")) {
  629.                                 zipFilteredImgUrls[urlIndex] = base64;
  630.                                 //zipImgWaitDownload.push(base64);
  631.                             }
  632.                         };
  633.                         oFileReader.readAsDataURL(blob);
  634.                     }
  635.                 });
  636.             })
  637.         }
  638.  
  639.         function cutoffNotBase64Img(imgsUrlArray) {
  640.             let resultArr = [];
  641.             imgsUrlArray.forEach((imgUrl, urlIndex) => {
  642.                 if (imgUrl.includes("data:image")) {
  643.                     resultArr.push(imgUrl);
  644.                 }
  645.             }
  646.             );
  647.             return resultArr;
  648.         }
  649.     }
  650. })();