☰

图片下载器

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

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