☰

图片下载器

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

当前为 2021-11-28 提交的版本，查看 最新版本。

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