☰

图片下载器

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

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

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