☰

图片下载器

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

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

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