☰

Image Downloader

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)

2022-01-23 يوللانغان نەشرى. ئەڭ يېڭى نەشرىنى كۆرۈش.

  1. // ==UserScript==
  2. // @name         Image Downloader
  3. // @name:zh-CN   图片下载器
  4. // @name:zh-TW   图片下载器
  5. // @name:ja   画像ダウンローダー
  6. // @name:ko   이미지 다운로더
  7. // @name:de   Image Downloader
  8. // @name:es   Image Downloader
  9. // @name:eo   Image Downloader
  10. // @name:fr   Image Downloader
  11. // @name:it   Image Downloader
  12. // @name:ru   Image Downloader
  13. // @name:vi   Image Downloader
  14. // @name:pt-BR   Image Downloader
  15. // @name:id   Image Downloader
  16. // @name:ar   Image Downloader
  17. // @name:bg   Image Downloader
  18. // @name:cs   Image Downloader
  19. // @name:tr   Image Downloader
  20. // @name:el   Image Downloader
  21. // @name:hu   Image Downloader
  22. // @name:th   Image Downloader
  23. // @namespace       http://tampermonkey.net/
  24. // @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)
  25. // @description:zh-CN    可以在绝大多数网站提取并批量下载图片。尤其是类似于千库网、包图网或者有妖气、腾讯漫画、b站漫画这种，不能右键保存图片或者保存的图片文件格式无法识别，均可以用脚本提取，然后用脚本提供的下载按钮，就可以下载到正确格式的图片文件。点击右键-tampermonkey-图片下载器-打开脚本(或快捷键alt+w)，按这个顺序使用。(目前只适合chrome+tampermonkey，其他组合多少有问题）
  26. // @description:zh-TW   可以在绝大多数网站提取并批量下载图片。尤其是类似于千库网、包图网或者有妖气、腾讯漫画、b站漫画这种，不能右键保存图片或者保存的图片文件格式无法识别，均可以用脚本提取，然后用脚本提供的下载按钮，就可以下载到正确格式的图片文件。点击右键-tampermonkey-图片下载器-打开脚本(或快捷键alt+w)，按这个顺序使用。(目前只适合chrome+tampermonkey，其他组合多少有问题）
  27. // @description:ja  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)
  28. // @description:ko  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)
  29. // @description:de  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)
  30. // @description:es  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)
  31. // @description:eo  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)
  32. // @description:fr  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)
  33. // @description:it  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)
  34. // @description:ru  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)
  35. // @description:vi  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)
  36. // @description:pt-BR  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)
  37. // @description:id  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)
  38. // @description:ar  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)
  39. // @description:bg  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)
  40. // @description:cs  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)
  41. // @description:tr  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)
  42. // @description:el  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)
  43. // @description:hu  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)
  44. // @description:th  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)
  45. // @version         1.96
  46. // @author          桃源隐叟
  47. // @include         *
  48. // @connect *
  49. // @grant           GM_openInTab
  50. // @grant        GM_registerMenuCommand
  51. // @grant           GM_setValue
  52. // @grant           GM_getValue
  53. // @grant           GM_deleteValue
  54. // @grant        GM_xmlhttpRequest
  55. // @grant GM_download
  56. // @require      https://cdn.jsdelivr.net/npm/hotkeys-js@3.7.2/dist/hotkeys.min.js
  57. // @require      https://cdn.bootcss.com/jszip/3.7.1/jszip.min.js
  58. // @require      https://cdn.bootcss.com/FileSaver.js/1.3.8/FileSaver.min.js
  59. // @run-at         document-end
  60. // @match        *
  61. // @match        https://www.bilibili.com/
  62. // @match        https://588ku.com/
  63. // @homepageURL       https://github.com/taoyuancun123/modifyText/blob/master/modifyText.js
  64. // @supportURL        https://greatest.deepsurf.us/zh-CN/scripts/419894/feedback
  65. // @license GPLv3
  66. // ==/UserScript==
  67.  
  68. (function () {
  69.     'use strict';
  70.  
  71.     var lang = navigator.appName == "Netscape" ? navigator.language : navigator.userLanguage;
  72.     var langSet;
  73.     var localization = {
  74.         zh: {
  75.             selectAll: "全选",
  76.             downloadBtn: "下载",
  77.             downloadMenuText: "打开脚本(Alt+w)",
  78.             zipDownloadBtn: "zip下载",
  79.             selectAlert:"请至少选中一张图片。",
  80.             fetchTip:"准备抓取canvas图片",
  81.             fetchCount1:`抓取canvas图片第`,
  82.             fetchCount2:'张',
  83.             fetchDoneTip1:"已选(0/",
  84.             fetchDoneTip1Type2:"已选(",
  85.             fetchDoneTip2:")张图片",
  86.         },
  87.         en: {
  88.             selectAll: "selectAll",
  89.             downloadBtn: "download",
  90.             downloadMenuText: "Open(Alt+w)",
  91.             zipDownloadBtn: "zip Download",
  92.             selectAlert:"Please at last select one image.",
  93.             fetchTip:"Ready to fetch canvas image.",
  94.             fetchCount1:`Fetch the`,
  95.             fetchCount2:' canvas image.',
  96.             fetchDoneTip1:"(0/",
  97.             fetchDoneTip1Type2:"(",
  98.             fetchDoneTip2:") Images selected",
  99.         }
  100.     }
  101.  
  102.     if (lang.toLowerCase().includes("zh-")) {
  103.         langSet = localization.zh;
  104.     } else {
  105.         langSet = localization.en;
  106.     }
  107.  
  108.     const autoBigImage={
  109.         bigImageArray:[],
  110.         defaultRules:[            
  111.             {originReg:/(?<=(.+sinaimg\.(?:cn|com)\/))([\w\.]+)(?=(\/.+))/i,replacement:"large",tip:"用于新浪微博"},
  112.             {originReg:/(?<=(.+alicdn\.(?:cn|com)\/.+\.(jpg|jpeg|gif|png|bmp|webp)))_.+/i,replacement:"",tip:"用于淘宝系网站"},
  113.             {originReg:/(.+alicdn\.(?:cn|com)\/.+)(\.\d+x\d+)(\.(jpg|jpeg|gif|png|bmp|webp)).*/i,replacement:(match,p1,p2,p3)=>p1+p3,tip:"用于1688"},
  114.             {originReg:/(?<=(.+360buyimg\.(?:cn|com)\/))(\w+\/)(?=(.+\.(jpg|jpeg|gif|png|bmp|webp)))/i,replacement:"n0/",tip:"用于京东"},
  115.             {originReg:/(?<=(.+hdslb\.(?:cn|com)\/.+\.(jpg|jpeg|gif|png|bmp|webp)))@.+/i,replacement:"",tip:"用于B站"},
  116.         ],
  117.         defaultRulesChecked:[           
  118.         ],
  119.         userRules:[],
  120.         userRulesChecked:[],
  121.         replace(originImgUrls){            
  122.             let that=this;   
  123.             that.bigImageArray=[];
  124.             let tempArray=Array.from(new Set(originImgUrls)).filter(item=>item&&item);
  125.             that.setRulesChecked();
  126.             //console.log(that.bigImageArray);
  127.             
  128.             tempArray.forEach(replaceByReg);
  129.             function replaceByReg(urlStr,urlIndex){
  130.                 //if(!urlStr)return;
  131.                 if(urlStr.includes("data:image/"))return;
  132.                 that.defaultRules.forEach((rule,ruleIndex)=>{
  133.                     if(that.defaultRulesChecked[ruleIndex]!=="checked"){
  134.                         that.bigImageArray.push(urlStr);
  135.                         return;
  136.                     }
  137.  
  138.                     let bigImage=urlStr.replace(rule.originReg,rule.replacement); 
  139.                     if(bigImage!==urlStr){                        
  140.                         that.bigImageArray.push(urlStr);
  141.                         that.bigImageArray.push(bigImage);
  142.                     }else{
  143.                         that.bigImageArray.push(urlStr);
  144.                     }                    
  145.                 })
  146.                 that.userRules.forEach((rule,ruleIndex)=>{
  147.                     if(that.userRulesChecked[ruleIndex]!=="checked"){
  148.                         that.bigImageArray.push(urlStr);
  149.                         return;
  150.                     }
  151.  
  152.                     let bigImage=urlStr.replace(rule.originReg,rule.replacement); 
  153.                     if(bigImage!==urlStr){                        
  154.                         that.bigImageArray.push(urlStr);
  155.                         that.bigImageArray.push(bigImage);
  156.                     }else{
  157.                         that.bigImageArray.push(urlStr);
  158.                     }                    
  159.                 })
  160.             }
  161.         },
  162.         getBigImageArray(originImgUrls){            
  163.             this.replace(originImgUrls);
  164.             let uniqueArray=Array.from(new Set(this.bigImageArray));            
  165.             return uniqueArray;
  166.         },
  167.         showDefaultRules(){
  168.             let that=this;
  169.             let defaultContainer=document.body.querySelector(".tyc-set-domain-default");
  170.             that.setRulesChecked();
  171.  
  172.             this.defaultRules.forEach((v,i)=>{
  173.                 let rulesHtml=`<div class="tyc-set-replacerule">                        
  174.                             <input type="checkbox" name="active" class="tyc-default-active" ${that.defaultRulesChecked[i]}>
  175.                             <input type="text" name="regrule" placeholder="输入待替换正则" class="tyc-search-title" value="${v.originReg}">
  176.                             <input type="text" name="replace" placeholder="输入替换它的字符串或者函数" class="tyc-search-url" value="${v.replacement}">
  177.                             <span class="tyc-default-tip">${v.tip}</span>                        
  178.                     </div>
  179.                 `
  180.                 defaultContainer.insertAdjacentHTML("beforeend",rulesHtml);                
  181.             })
  182.         },//showDefaultRules
  183.         showRules(containerName,rulesType,checkType,checkClassName){
  184.             let that=this;
  185.             let Container=document.body.querySelector("."+containerName);
  186.             that.setRulesChecked();
  187.             that.setCustomRules();
  188.             //console.log(that.userRules);
  189.             //console.log(that);
  190.  
  191.             that[rulesType].forEach((v,i)=>{
  192.                 //console.log(that[checkType])
  193.                 let rulesHtml=`<div class="tyc-set-replacerule">                        
  194.                             <input type="checkbox" name="active" class="${checkClassName}" ${that[checkType][i]}>
  195.                             <input type="text" name="regrule" placeholder="输入待替换正则" class="tyc-search-title" value="${v.originReg}">
  196.                             <input type="text" name="replace" placeholder="输入替换它的字符串或者函数" class="tyc-search-url" value="${v.replacement}">
  197.                             <span class="tyc-default-tip">${v.tip}</span>                        
  198.                     </div>
  199.                 `
  200.                 Container.insertAdjacentHTML("beforeend",rulesHtml);                
  201.             })
  202.         },
  203.         onclickShowDefaultBtn(){
  204.             let defaultContainer=document.body.querySelector(".tyc-set-domain-default");
  205.             if(defaultContainer.style.display==="none"||defaultContainer.style.display===''){
  206.                 defaultContainer.style.display="flex";
  207.             }else{
  208.                 defaultContainer.style.display="none";
  209.             }
  210.         },
  211.         oncheckChange(){
  212.             let checks=document.body.querySelectorAll(".tyc-default-active");
  213.             this.defaultRulesChecked=[];
  214.  
  215.             checks.forEach((v,i)=>{
  216.                 if(v.checked){
  217.                     this.defaultRulesChecked.push("checked");                        
  218.                 }else{
  219.                     this.defaultRulesChecked.push("");  
  220.                 }
  221.             })
  222.  
  223.             GM_setValue("defaultRulesChecked",this.defaultRulesChecked);
  224.         },
  225.         oncheckChangeCustom(){
  226.             let checks=document.body.querySelectorAll(".tyc-custom-active");
  227.             this.userRulesChecked=[];
  228.  
  229.             checks.forEach((v,i)=>{
  230.                 if(v.checked){
  231.                     this.userRulesChecked.push("checked");                        
  232.                 }else{
  233.                     this.userRulesChecked.push("");  
  234.                 }
  235.             })
  236.  
  237.             GM_setValue("userRulesChecked",this.userRulesChecked);
  238.         },
  239.         setRulesChecked(){
  240.             if(GM_getValue("defaultRulesChecked")){
  241.                 this.defaultRulesChecked=GM_getValue("defaultRulesChecked");
  242.             }else{
  243.                 this.defaultRules.forEach(v=>{
  244.                     this.defaultRulesChecked.push("checked");
  245.                 })
  246.                 GM_setValue("defaultRulesChecked",this.defaultRulesChecked);
  247.             }
  248.  
  249.             if(GM_getValue("userRulesChecked")&&GM_getValue("userRulesChecked").length>0){
  250.                 this.userRulesChecked=GM_getValue("userRulesChecked");
  251.                 
  252.             }else{
  253.                 this.userRules.forEach(v=>{
  254.                     this.userRulesChecked.push("checked");
  255.                 })
  256.                 GM_setValue("userRulesChecked",this.userRulesChecked);
  257.             }
  258.         },
  259.         getCustomRules(event){
  260.             let that=autoBigImage;
  261.             let file=document.querySelector("#tycfileElem").files[0];
  262.             let fileReader=new FileReader();
  263.             fileReader.onload=(e)=>{
  264.                 let result=e.target.result;
  265.                 that.userRules=eval(result);
  266.  
  267.                 GM_deleteValue("userRulesChecked")
  268.                 that.setRulesChecked();
  269.                 GM_setValue("userRules",result);
  270.                 //console.log(GM_getValue('userRules'));
  271.                 document.body.querySelector(".tyc-set-domain-custom").innerHTML="";
  272.                 that.showRules("tyc-set-domain-custom","userRules","userRulesChecked","tyc-custom-active");
  273.             }
  274.             fileReader.readAsText(file,'GB2312');
  275.         },
  276.         setCustomRules(){
  277.             if(GM_getValue("userRules")){
  278.                 try {
  279.                     this.userRules=eval(GM_getValue("userRules"));
  280.                 } catch (error) {
  281.                     GM_setValue("userRules","");
  282.                 }
  283.                 
  284.             }
  285.         }
  286.     }
  287.  
  288.     GM_registerMenuCommand(langSet.downloadMenuText, wrapper);
  289.     hotkeys('alt+w', wrapper);
  290.  
  291.     function wrapper() {  
  292.         try {
  293.             document.querySelector(".tyc-image-container").remove();
  294.         } catch { 
  295.         }
  296.         var imgUrls = [];
  297.         var bodyStr = document.body.innerHTML;
  298.         var imgSelected = [];
  299.         var zipImgSelected = [];
  300.         var imgWaitDownload = [];
  301.         var zipImgWaitDownload = [];
  302.         var widthFilter = { min: 0, max: 3000 };
  303.         var heightFilter = { min: 0, max: 3000 };
  304.         var filteredImgUrls = [];
  305.         var zipFilteredImgUrls = [];
  306.         try{
  307.             var zipFolder = new JSZip();
  308.             var zipSubFoler = zipFolder.folder('pics');
  309.         }
  310.         catch{
  311.             
  312.         }        
  313.  
  314.         var fetchTip='';
  315.  
  316.         try {
  317.             let imgEles = document.getElementsByTagName("img");
  318.             let canvasEles=document.getElementsByTagName("canvas");
  319.  
  320.             for (let i = 0; i < imgEles.length; i++) {
  321.                 ////console.log(imgEles[i].src);
  322.                 if (!imgUrls.includes(imgEles[i].src)) {
  323.                     imgUrls.push(imgEles[i].src);
  324.                 } else if (!imgUrls.includes(imgEles[i].srcset)) {
  325.                     imgUrls.push(imgEles[i].srcset);
  326.                 }
  327.             }
  328.  
  329.             let imgRegs = bodyStr.match(/(?<=background-image:\s*url\()(\S+)(?=\))/g);
  330.  
  331.             for (let i = 0; i < imgRegs.length; i++) {
  332.                 ////console.log(imgRegs[i]);
  333.                 if (!imgUrls.includes(imgRegs[i].replace(/&quot;/g, ""))) {
  334.                     imgUrls.push(imgRegs[i].replace(/&quot;/g, ""));
  335.                 }
  336.             }
  337.  
  338.             if (window.location.href.includes("hathitrust.org")) {
  339.                 let imgs = document.querySelectorAll(".image img");
  340.                 if (imgs.length > 0) {
  341.                     let canvas = document.createElement("canvas");
  342.                     imgUrls = [];
  343.                     for (let pi = 0; pi < imgs.length; pi++) {
  344.                         canvas.width = imgs[pi].width;
  345.                         canvas.height = imgs[pi].height;     
  346.                         canvas.getContext("2d").drawImage(imgs[pi], 0, 0);     
  347.                         imgUrls.push(canvas.toDataURL("image/png"));
  348.                     }
  349.      
  350.                     document.querySelector(".select-all").style = "position:relative;width:15px;height:15px;"
  351.                 } else {
  352.      
  353.                 }
  354.             }
  355.  
  356.             if(window.location.href.toString().includes("manga.bilibili.com/")){
  357.                 let iframeCanvas=`<iframe style="display:none;" id="tyc-insert-iframe"></iframe>`;
  358.                 if(document.getElementById("tyc-insert-iframe")==null){
  359.                     document.body.insertAdjacentHTML("afterbegin",iframeCanvas);
  360.                     document.getElementById("tyc-insert-iframe").contentDocument.body.insertAdjacentHTML("afterbegin",`<canvas id="tyc-insert-canvas"></canvas>`);
  361.                     document.body.getElementsByTagName('canvas')[0].__proto__.toBlob=document.getElementById("tyc-insert-iframe").contentDocument.getElementById("tyc-insert-canvas").__proto__.toBlob;
  362.                 }
  363.  
  364.             }
  365.  
  366.             let oldLength=imgUrls.length;
  367.             if(canvasEles.length>0){ 
  368.                 fetchTip=langSet.fetchTip;
  369.                 var completeFlag=0;                
  370.                 for(let j=0;j<canvasEles.length;j++){                    
  371.                     canvasEles[j].toBlob(blobCallback);    
  372.                     function blobCallback(blob){
  373.                         let oFileReader = new FileReader();
  374.                         oFileReader.onloadend = function (e) {
  375.                             let base64 = e.target.result;                                 
  376.                             if (base64.includes("data:image")) {
  377.                                 if (!imgUrls.includes(base64)) {                                
  378.                                     //imgUrls.push(base64);                                
  379.                                     imgUrls[oldLength+j]=base64;
  380.                                 }
  381.                                 completeFlag++;                                                         
  382.                                 document.querySelector(".num-tip").innerText=`${langSet.fetchCount1} ${completeFlag}/${canvasEles.length} ${langSet.fetchCount2}`;                                      
  383.                                 if(completeFlag===canvasEles.length){
  384.                                     clean();
  385.                                     init();
  386.                                 }
  387.                             }
  388.                         };
  389.                         
  390.                         oFileReader.readAsDataURL(blob);
  391.                     }
  392.                 }
  393.             }else{
  394.                 fetchTip=`${langSet.fetchDoneTip1}${imgUrls.length}${langSet.fetchDoneTip2}`;
  395.             }           
  396.  
  397.         } catch {
  398.             //alert("error");
  399.         }
  400.  
  401.         let imgContainer = `
  402.         <style>
  403.             .tyc-image-container{
  404.                 position:fixed;
  405.                 top:0px;
  406.                 left:10%;
  407.                 width:80vw;
  408.                 z-index:2147483645;
  409.                 background-color: #dedede;
  410.                 border: 1px solid #aaa;
  411.                 overflow:scroll;height:100%;
  412.             }
  413.     
  414.             .tyc-image-container button{
  415.                 border:1px solid #aaa;
  416.                 border-radius:5px;
  417.                 height:32px;line-height:32px;
  418.                 margin:0px;padding:0 5px;
  419.             }
  420.     
  421.             .tyc-image-container button:hover{
  422.                 background-color: #f50;
  423.                 color: #fff;
  424.             }
  425.     
  426.             .control-section{
  427.                 width:80vw;
  428.                 z-index:2147483646;
  429.                 position:fixed;
  430.                 top:0px;
  431.                 left:10%;
  432.                 display: flex;
  433.                 flex-direction: column;
  434.                 justify-content: center;                
  435.                 line-height:40px;
  436.                 background:#eee;border:1px solid #aaa;border-radius:2px;                
  437.             }
  438.     
  439.             .control-section-sub{
  440.                 display: flex;
  441.                 margin-bottom: 5px;               
  442.             }
  443.     
  444.             .tyc-normal-section{
  445.                 display: flex;
  446.                 align-items: center;
  447.                 flex-direction: row;
  448.                 justify-content: flex-start;    
  449.                 flex-wrap: nowrap;            
  450.                 align-content: normal;
  451.     
  452.             }
  453.             .btn-download{
  454.                 border:1px solid #aaa;border-radius:5px;
  455.                 height:32px;line-height:32px;
  456.                 margin:0px;padding:0 5px;
  457.             }
  458.             .btn-zipDownload{
  459.                 border:1px solid #aaa;border-radius:5px;
  460.                 height:32px;line-height:32px;
  461.                 margin:0px;padding:0 5px;
  462.             }
  463.             .btn-close{
  464.                 font-size:20px;position:absolute;
  465.                 right:30px;top:4px;
  466.                 height:32px;line-height:32px;
  467.                 margin:0px;
  468.                 border-radius:10px;border:1px solid #aaa;
  469.                 width:30px;
  470.             }
  471.     
  472.             .tyc-image-wrapper{
  473.                 margin-top:82px;display:flex;justify-content:center;
  474.                 align-items:center;flex-wrap:wrap;
  475.             }
  476.     
  477.             .tyc-input-checkbox{
  478.                 background-color: initial;
  479.                 cursor: default;
  480.                 appearance: auto;
  481.                 box-sizing: border-box;
  482.                 margin: 3px 3px 3px 4px;
  483.                 padding: initial;
  484.                 border: initial;
  485.             }
  486.     
  487.             .tyc-extend-set{
  488.                 padding: 10px;
  489.                 border-top: 1px solid rgba(100,100,100,0.1);
  490.             }
  491.     
  492.             .tyc-extend-set{
  493.                 display: none;
  494.                 align-items: stretch;
  495.                 flex-direction: column;
  496.                 justify-content: flex-start;
  497.                 flex-wrap: nowrap;
  498.                 padding: 5px;
  499.                 width: auto;
  500.             }
  501.     
  502.             .tyc-extend-set-container{
  503.                 display: flex;
  504.                 align-items: flex-start;
  505.                 flex-direction: column;
  506.                 justify-content: flex-start;
  507.                 flex-wrap: nowrap;
  508.                 align-content: normal;
  509.                 border: 1px solid rgba(100,100,100,0.5);
  510.                 padding: 5px;
  511.                 margin-bottom: 5px;
  512.             }
  513.     
  514.             .tyc-autobigimg-set{
  515.                 display: flex;
  516.                 align-items: flex-start;
  517.                 flex-direction: column;
  518.                 justify-content: flex-start;
  519.                 flex-wrap: nowrap;
  520.                 align-content: normal;
  521.                 border: 1px solid rgba(100,100,100,0.5);
  522.                 padding: 5px;
  523.             }
  524.     
  525.             .tyc-set-domain{
  526.                 display: flex;
  527.                 align-items: flex-start;
  528.                 flex-direction: column;
  529.                 justify-content: flex-start;
  530.                 flex-wrap: nowrap;
  531.                 align-content: normal;
  532.                 margin: 5px;
  533.                 padding: 5px;
  534.                 border: 1px solid rgba(100,100,100,0.3);
  535.                 width: 95%;
  536.                 max-height: 150px;
  537.                 overflow: scroll;
  538.             }
  539.     
  540.             .tyc-abi-title{
  541.                 display: flex;
  542.                 flex-direction: row;
  543.                 align-items: center;
  544.                 justify-content: space-around;
  545.                 width: 100%;
  546.             }
  547.     
  548.             .tyc-abi-domain-title{
  549.                 display: flex;
  550.                 flex-direction: row;
  551.                 align-items: center;
  552.                 justify-content: space-between;
  553.                 width: 95%;
  554.                 border-bottom: 1px solid #ddd;
  555.             }
  556.             .tyc-set-replacerule{
  557.                 display: flex;
  558.                 flex-direction: row;
  559.                 justify-content: flex-start;
  560.                 align-items: center;
  561.                 margin-bottom: 3px;
  562.                 flex-wrap: wrap;
  563.             }
  564.     
  565.             .tyc-set-replacerule *,.tyc-set-replacerule button{
  566.                 margin-left: 5px;
  567.             }
  568.     
  569.             .tyc-set-domain-default{
  570.                 height: 200px;
  571.                 overflow: scroll;
  572.                 display: none;
  573.             }
  574.         </style>
  575.         <div class="tyc-image-container">
  576.             <div class="control-section">
  577.                 <div class="control-section-sub tyc-normal-section">
  578.                     <input class="select-all tyc-input-checkbox" type="checkbox" name="select-all" value="select-all">${langSet.selectAll}
  579.                     <button class="btn-download" style="margin-left:5px;">${langSet.downloadBtn}</button> 
  580.                     <button class="btn-zipDownload" style="margin-left:5px;">${langSet.zipDownloadBtn}</button> 
  581.                     <span style="margin-left:10px;" class="num-tip">${langSet.fetchDoneTip1}${imgUrls.length}${langSet.fetchDoneTip2}</span>
  582.                     <button cstyle="margin-left:10px;" class="btn-close" >X</button>
  583.                 </div>
  584.     
  585.             
  586.                 <div style="line-height:12px;" class="control-section-sub tyc-normal-section">
  587.                     <div style="float:left;display:block;">
  588.                     <input type="checkbox" class="width-check img-check tyc-input-checkbox" name="width-check" value="width-check">Width:
  589.                     <input type="text" class="width-value-min" size="1" style="height:15px;width:50px;"
  590.                         min="0" max="9999" value="0">-
  591.                         <input type="text" class="width-value-max" size="1" style="height:15px;width:50px;"
  592.                         min="0" max="9999" value="3000">
  593.                     </div>
  594.             
  595.                     <div style="float:left;margin-left:30px;display:block;">
  596.                         <input type="checkbox" class="height-check img-check tyc-input-checkbox" name="height-check" value="height-check">Height:
  597.                         <input type="text" class="height-value-min" size="1" style="height:15px;width:50px;"
  598.                             min="0" max="9999" value="0">-
  599.                             <input type="text" class="height-value-max" size="1" style="height:15px;width:50px;"
  600.                             min="0" max="9999" value="3000">
  601.                     </div>
  602.             
  603.                     <div style="float:left;margin-left:30px;display:block;" class="tyc-cors">
  604.                         <span class="tyc-tip" style="display: none;
  605.                         position: absolute;
  606.                         top: 5px;
  607.                         left: 50px;
  608.                         white-space: nowrap;
  609.                         background: rgb(204, 204, 204);
  610.                         border: 1px solid rgb(150, 150, 150);
  611.                         border-radius: 3px;
  612.                         padding: 5px;">勾选使用zip下载后，会请求跨域权限，否则zip下载基本下载不到图片。
  613.                         </span>        
  614.                         <input type="checkbox" class="cors-check img-check tyc-input-checkbox" name="cors-check" value="cors-check">
  615.                         <span>使用zip下载</span>     
  616.                     </div>
  617.                     <div style="float:left;margin-left:30px;display:block;" class="tyc-extend-btn">
  618.                         <span>更多设置 </span>
  619.                         <span style="top: 3px;position: relative;">
  620.                             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-double-down" viewBox="0 0 16 16">
  621.                                 <path fill-rule="evenodd" d="M1.646 6.646a.5.5 0 0 1 .708 0L8 12.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
  622.                                 <path fill-rule="evenodd" d="M1.646 2.646a.5.5 0 0 1 .708 0L8 8.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
  623.                             </svg>
  624.                         </span> 
  625.                     </div>
  626.                 </div>
  627.                 <div class="tyc-extend-set control-section-sub">
  628.                     <div class="tyc-autobigimg-set tyc-extend-set-container">
  629.                         <div class="tyc-abi-title">  
  630.                             <div>
  631.                                 自动大图设置模块
  632.                             </div> 
  633.                             <div>
  634.                                 <button class="tyc-default-rule-show">设置默认规则</button>
  635.                             </div>
  636.     
  637.                             <div>
  638.                                 <button>导出自定规则</button>
  639.                             </div>
  640.     
  641.                             <div>
  642.                                 <input type="file" id="tycfileElem" multiple accept="text/plain" style="display:none">
  643.                                 <button id="tyc-file-select">导入自定规则</button>
  644.                             </div>
  645.                             
  646.                         </div>
  647.                         <div class="tyc-set-domain tyc-set-domain-custom">
  648.                         </div>
  649.                         <div class="tyc-set-domain tyc-set-domain-default">
  650.                         </div>
  651.                     </div> 
  652.                
  653.                 </div>
  654.             </div>
  655.             <div class="tyc-image-wrapper" >
  656.             </div>
  657.         </div>
  658.         `
  659.  
  660.         let showBigImage = `
  661.         <div class="show-big-image" style="position:fixed;left:30%;top:30%;z-index:2147483647;">
  662.         </div>
  663.     `
  664.  
  665.         document.body.insertAdjacentHTML("afterbegin", imgContainer);
  666.         autoBigImage.showDefaultRules();
  667.         autoBigImage.showRules("tyc-set-domain-custom","userRules","userRulesChecked","tyc-custom-active");
  668.   
  669.         document.body.onclick = (e) => {
  670.             //console.log(e);
  671.             if ((e.target.nodeName == "IMG" && e.target.className === "tyc-image-preview")) {
  672.                 let imgContainer = e.path.find( 
  673.                     (ele) => {
  674.                         try {
  675.                             //console.log(ele);
  676.                             return ele.className.includes("tyc-img-item-container");
  677.                         }
  678.                         catch { 
  679.                         } 
  680.                     }
  681.                 )
  682.                 let path = imgContainer.getElementsByTagName("img")[0].src;
  683.  
  684.                 try {
  685.                     let container = document.querySelector(".show-big-image");
  686.                     if (container.getElementsByTagName("img")[0].src === path) {
  687.                         container.remove();
  688.                         return;
  689.                     } else {
  690.                         container.remove();
  691.                     }
  692.                 }
  693.                 catch {
  694.  
  695.                 }
  696.                 document.body.insertAdjacentHTML("beforeend", showBigImage);
  697.  
  698.                 let showItem = `<img src="${path}"/>`
  699.  
  700.                 document.querySelector(".show-big-image").insertAdjacentHTML("beforeend", showItem);
  701.  
  702.                 let tempImg = document.querySelector(".show-big-image img");
  703.  
  704.                 let dWidth = (window.innerWidth - tempImg.width) / 2;
  705.                 let dHeight = (window.innerHeight - tempImg.height) / 2;
  706.  
  707.                 document.querySelector(".show-big-image").style.left = dWidth + "px";
  708.                 document.querySelector(".show-big-image").style.top = dHeight + "px";
  709.             } else if (e.target.parentElement.className === "show-big-image") {
  710.                 try {
  711.                     document.querySelector(".show-big-image").remove();
  712.                 }
  713.                 catch
  714.                 {
  715.  
  716.                 }
  717.  
  718.             } else if (e.target.classList[1] == "bi-download" || e.path.find(isDownload) != undefined) {
  719.                 let imgContainer = e.path.find( 
  720.                     (ele) => {
  721.                         try {
  722.                             //console.log(ele);
  723.                             return ele.className.includes("tyc-img-item-container");
  724.                         }
  725.                         catch { 
  726.                         }
  727.  
  728.                     }
  729.                 )
  730.                 let path = imgContainer.getElementsByTagName("img")[0].src;
  731.                 let filename;
  732.                 if (path.indexOf("/") > 0)//如果包含有"/"号 从最后一个"/"号+1的位置开始截取字符串
  733.                 {
  734.                     filename = path.substring(path.lastIndexOf("/") + 1, path.lastIndexOf("."));
  735.                 }
  736.                 else {
  737.                     filename = path;
  738.                 }
  739.                 //console.log("download start" + path + " " + filename);
  740.                 GM_download(path, "pic");
  741.             } else if (e.target.classList[1] == "bi-check" || e.path.find(isSelect) != undefined) {
  742.                 let checkSvg = e.path.find((ele) => ele.classList[1] === "bi-check");
  743.                 let currentImgIndex = parseInt(checkSvg.dataset.value);
  744.  
  745.                 let container = e.path.find((ele) => ele.className === `tyc-img-item-container-${currentImgIndex}`);
  746.   
  747.                 if (imgSelected.includes(currentImgIndex)) {
  748.                     imgSelected.splice(imgSelected.indexOf(currentImgIndex), 1);
  749.                     checkSvg.style.color = "black";
  750.                     container.style.border = "1px solid #99d";
  751.                 } else {
  752.                     imgSelected.push(currentImgIndex);
  753.                     checkSvg.style.color = "white";
  754.                     container.style.border = "1px solid white";
  755.                 }
  756.  
  757.                 zipImgSelected=imgSelected;
  758.  
  759.                 document.querySelector(".num-tip").innerText = `${langSet.fetchDoneTip1Type2}${imgSelected.length}/${imgUrls.length}${langSet.fetchDoneTip2}`;
  760.                 imgWaitDownload=transIndexToLink(filteredImgUrls,imgSelected);
  761.                 zipImgWaitDownload=transIndexToLink(zipFilteredImgUrls,zipImgSelected);
  762.                 zipImgWaitDownload=cutoffNotBase64Img(zipImgWaitDownload);
  763.             }
  764.         }
  765.  
  766.         document.querySelector(".btn-close").onclick = (e) => {
  767.             document.querySelector(".tyc-image-container").remove();
  768.         }
  769.  
  770.         document.querySelector(".btn-download").onclick = (e) => {
  771.             if (imgWaitDownload.length >= 1) {
  772.                 //console.log(imgWaitDownload);
  773.                 imgWaitDownload.forEach(async (img, index) => {
  774.                     //let filename = `pic-${index}.jpg`;
  775.                     //filename=filename.replace(/\\/g, '/').replace(/\/{2,}/g, '/');
  776.                     await GM_download(img, `pic-${index}`);
  777.                 });
  778.             } else {
  779.                 alert(`${langSet.selectAlert}`);
  780.             }
  781.         }
  782.  
  783.         document.querySelector(".btn-zipDownload").onclick = (e) => {
  784.             //console.log(zipImgWaitDownload);
  785.             try {
  786.                 if (zipImgWaitDownload.length >= 1) {
  787.                     //console.log(zipImgWaitDownload);
  788.                     zipImgWaitDownload.forEach(async (img, index) => {
  789.                         let fileExt = img.substring(img.indexOf("image/") + 6, img.indexOf(";"))
  790.                         fileExt=fileExt.includes("svg")?"svg":fileExt;
  791.                         let filename = `pic${index}.${fileExt}`;  
  792.                         zipSubFoler.file(filename, img.split(",")[1], { base64: true });                        
  793.                     });
  794.      
  795.                     zipFolder.generateAsync({ type: "blob" })
  796.                         .then(function (content) {
  797.                             // see FileSaver.js
  798.                             saveAs(content, "pics.zip");
  799.                             zipFolder.remove("pics");
  800.                             zipSubFoler = zipFolder.folder('pics');
  801.                         });
  802.      
  803.                 } else {
  804.                     alert(`${langSet.selectAlert}`);
  805.                 }
  806.             } catch (error) {
  807.                 //console.log(error);
  808.             }
  809.  
  810.  
  811.         }
  812.  
  813.         document.querySelector(".tyc-cors").onmouseover=e=>{
  814.             e.preventDefault();
  815.             document.querySelector(".tyc-tip").style.display="block";
  816.         }
  817.  
  818.         document.querySelector(".tyc-cors").onmouseout=e=>{
  819.             e.preventDefault();
  820.             document.querySelector(".tyc-tip").style.display="none";
  821.         }
  822.  
  823.         document.body.onchange = (e) => {
  824.             if (e.target.className.includes("width-check")) {
  825.                 GM_setValue('width-check', e.target.checked);
  826.             }
  827.             if (e.target.className.includes("height-check")) {
  828.                 GM_setValue('height-check', e.target.checked);
  829.             }
  830.  
  831.             if (e.target.className.includes("cors-check")) {
  832.                 GM_setValue('cors-check', e.target.checked);
  833.                 if (document.querySelector(".cors-check").checked) {
  834.                     fetchBase64ImgsThenPushToZipArray();
  835.                 }                
  836.             }
  837.  
  838.             if(e.target.className.includes("tyc-default-active")){
  839.                 autoBigImage.oncheckChange();
  840.             }
  841.  
  842.             if(e.target.className.includes("tyc-custom-active")){
  843.                 autoBigImage.oncheckChangeCustom();
  844.             }
  845.  
  846.             if (e.target.nodeName === "INPUT" && e.target.type === "text" && e.target.className.includes("value")) {
  847.                 GM_setValue(e.target.className, e.target.value);
  848.             }
  849.  
  850.             (e.target.className.includes("width-check") || e.target.className.includes("height-check") ||
  851.  
  852.                 (e.target.nodeName === "INPUT" && e.target.type === "text" && e.target.className.includes("value")))
  853.                 && (clean(), init());
  854.  
  855.         }
  856.  
  857.         document.querySelector(".select-all").onchange = (e) => {
  858.             if (document.querySelector(".select-all").checked) {
  859.                 imgWaitDownload = filteredImgUrls;
  860.                 zipImgWaitDownload=cutoffNotBase64Img(zipFilteredImgUrls);
  861.             } else {
  862.                 imgWaitDownload=transIndexToLink(filteredImgUrls,imgSelected);
  863.                 zipImgWaitDownload=transIndexToLink(zipFilteredImgUrls,zipImgSelected);
  864.             }
  865.  
  866.             document.querySelector(".num-tip").innerText = `${langSet.fetchDoneTip1Type2}${imgWaitDownload.length}/${filteredImgUrls.length}${langSet.fetchDoneTip2}`;
  867.         }
  868.  
  869.         document.querySelector(".tyc-extend-btn").onclick=e=>{
  870.             if(document.querySelector(".tyc-extend-btn").classList.contains("extend-open")){
  871.                 document.querySelector(".tyc-extend-btn").classList.remove("extend-open");
  872.                 document.querySelector(".tyc-extend-set").style.display="none";
  873.                 document.querySelector(".tyc-extend-btn").style.color="black";
  874.                 document.querySelector(".tyc-extend-btn").innerHTML=`<span>更多设置 </span>
  875.                 <span style="top: 3px;position: relative;">
  876.                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-double-down" viewBox="0 0 16 16">
  877.                         <path fill-rule="evenodd" d="M1.646 6.646a.5.5 0 0 1 .708 0L8 12.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
  878.                         <path fill-rule="evenodd" d="M1.646 2.646a.5.5 0 0 1 .708 0L8 8.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
  879.                     </svg>
  880.                 </span> `
  881.                 ;
  882.             }else{
  883.                 document.querySelector(".tyc-extend-btn").classList.add("extend-open");
  884.                 document.querySelector(".tyc-extend-set").style.display="flex";
  885.                 document.querySelector(".tyc-extend-btn").style.color="#f50";
  886.                 document.querySelector(".tyc-extend-btn").innerHTML=`<span>收起 </span>
  887.                 <span style="top: 3px;position: relative;">
  888.                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-double-up" viewBox="0 0 16 16">
  889.                     <path fill-rule="evenodd" d="M7.646 2.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 3.707 2.354 9.354a.5.5 0 1 1-.708-.708l6-6z"/>
  890.                     <path fill-rule="evenodd" d="M7.646 6.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 7.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
  891.                     </svg>
  892.                 </span> `
  893.                 
  894.             }
  895.         }
  896.  
  897.         document.querySelector(".tyc-default-rule-show").onclick=autoBigImage.onclickShowDefaultBtn;
  898.  
  899.         document.querySelector("#tyc-file-select").onclick=e=>{
  900.             document.querySelector("#tycfileElem").click();
  901.         }
  902.  
  903.         document.querySelector("#tycfileElem").onchange=autoBigImage.getCustomRules;
  904.  
  905.  
  906.         init();
  907.         function init() {            
  908.             filteredImgUrls = imgUrls;
  909.             filteredImgUrls=autoBigImage.getBigImageArray(filteredImgUrls);
  910.             getSavedValue();
  911.             if (document.querySelector(".width-check").checked) {
  912.                 filteredImgUrls = filteredImgUrls.filter(filterByWidth);
  913.             }
  914.  
  915.             if (document.querySelector(".height-check").checked) {
  916.                 filteredImgUrls = filteredImgUrls.filter(filterByHeight);
  917.             }
  918.  
  919.  
  920.             zipFilteredImgUrls = filteredImgUrls;
  921.             if (document.querySelector(".cors-check").checked) {
  922.                 fetchBase64ImgsThenPushToZipArray();
  923.             }            
  924.             showImage(filteredImgUrls);
  925.         }
  926.  
  927.         function clean() {
  928.             imgWaitDownload = [];
  929.             imgSelected = [];
  930.             document.querySelector(".num-tip").innerText = `${langSet.fetchDoneTip1Type2}${imgSelected.length}/${imgUrls.length}${langSet.fetchDoneTip2}`;
  931.             document.querySelector(".tyc-image-wrapper").innerHTML = "";
  932.         }
  933.  
  934.         function isDownload(ele) {
  935.             return ele.className == "download-direct";
  936.         }
  937.  
  938.         function isSelect(ele) {
  939.             return ele.className == "select-image";
  940.         }
  941.  
  942.         function transIndexToLink(WholeImgs,selectedImgs) {
  943.             let transedImgs=[];
  944.             selectedImgs.forEach((imgIndex, index) => {
  945.                 transedImgs.push(WholeImgs[imgIndex]);
  946.             });
  947.             return transedImgs;
  948.         }
  949.  
  950.         function showImage(filtedImgUrls) {
  951.             filtedImgUrls.forEach((img, index) => {
  952.                 if (window.location.href.includes("huaban.com")) {
  953.                     if (img.includes("/webp")) {
  954.                         img = img.replace(/\/webp/g, "/png");
  955.                     }
  956.                 }
  957.                 let insertImg = `<div class="tyc-img-item-container-${index}" style="text-align:center;font-size:0px;
  958.     margin:5px;border:1px solid #99d;border-radius:3px;
  959.     ">
  960.     <img class="tyc-image-preview" src="${img}"/ style="width:auto;height:200px;"></div>`
  961.                 document.querySelector(".tyc-image-wrapper").insertAdjacentHTML("beforeend", insertImg);
  962.                 let naturalW = document.querySelector(`.tyc-img-item-container-${index} .tyc-image-preview`).naturalWidth;
  963.                 let naturalH = document.querySelector(`.tyc-img-item-container-${index} .tyc-image-preview`).naturalHeight;
  964.  
  965.                 let imgInfoContainer = `
  966.             <div style="font-size:0px;background-color:rgba(100,100,100,0.6);height:30px;position:relative;">
  967.  
  968.  
  969.     </div>
  970.             `;
  971.  
  972.                 let thisImgContainer = document.querySelector(`.tyc-img-item-container-${index}`);
  973.                 let imgContainerWidth = thisImgContainer.getBoundingClientRect().width;
  974.                 let imgInfo = `
  975.             <span style="font-size:16px;position:absolute;left:calc(50% - 80px);top:7px;">${naturalW}X${naturalH}</span>
  976.             `;
  977.  
  978.  
  979.                 /*
  980.                 <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;">
  981.           <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"/>
  982.         </svg>*/
  983.  
  984.                 let downAndFullBtn = `
  985.     <span style="position:absolute;right:calc(50% - 30px);top:2px;border:1px solid #333;
  986.     width:26px;height:26px;border-radius:20px;" class="select-image" data-value="${index}">
  987.     <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}">
  988.       <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"/>
  989.     </svg>
  990.     </span>
  991.     <span style="position:absolute;right:calc(50% - 60px);top:2px;border:1px solid #333;
  992.     width:26px;height:26px;border-radius:20px;
  993.     " class="download-direct">
  994.     <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;">
  995.       <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"/>
  996.       <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"/>
  997.     </svg>
  998.     </span>
  999.  
  1000.     `;
  1001.  
  1002.                 let downloadBtn = `
  1003.             <span style="position:absolute;right:calc(50% - 15px);top:2px;border:1px solid #333;
  1004.     width:26px;height:26px;border-radius:20px;
  1005.     " class="download-direct">
  1006.     <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;">
  1007.       <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"/>
  1008.       <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"/>
  1009.     </svg>
  1010.     </span>
  1011.             `
  1012.                 thisImgContainer.insertAdjacentHTML("beforeend", imgInfoContainer);
  1013.  
  1014.                 let thisImgInfoContainer = thisImgContainer.querySelector("div");
  1015.  
  1016.                 let rectWidth = parseInt(thisImgContainer.getBoundingClientRect().width);
  1017.  
  1018.                 if (rectWidth > 120) {
  1019.                     thisImgInfoContainer.insertAdjacentHTML("beforeend", imgInfo);
  1020.                     thisImgInfoContainer.insertAdjacentHTML("beforeend", downAndFullBtn);
  1021.                 } else if (rectWidth <= 120 && rectWidth >= 50) {
  1022.                     thisImgInfoContainer.insertAdjacentHTML("beforeend", downAndFullBtn);
  1023.                     thisImgInfoContainer.getElementsByClassName("select-image")[0].style.right = "50%";
  1024.                     thisImgInfoContainer.getElementsByClassName("download-direct")[0].style.right = "calc(50% - 30px)";
  1025.                 } else {
  1026.                     thisImgInfoContainer.insertAdjacentHTML("beforeend", downloadBtn);
  1027.                 }
  1028.                 ////console.log(img);
  1029.             });
  1030.         }
  1031.  
  1032.         function filterByWidth(src) {
  1033.             let tempImg = new Image();
  1034.             tempImg.src = src;
  1035.             if (tempImg.width >= parseInt(document.querySelector(".width-value-min").value)
  1036.                 && tempImg.width <= parseInt(document.querySelector(".width-value-max").value)) {
  1037.                 return src;
  1038.             }
  1039.         }
  1040.  
  1041.         function filterByHeight(src) {
  1042.             let tempImg = new Image();
  1043.             tempImg.src = src;
  1044.             if (tempImg.height >= parseInt(document.querySelector(".height-value-min").value)
  1045.                 && tempImg.height <= parseInt(document.querySelector(".height-value-max").value)) {
  1046.                 return src;
  1047.             }
  1048.         }
  1049.  
  1050.         function getSavedValue() {
  1051.             if(GM_getValue("width-check")!=undefined){
  1052.                 //console.log(GM_getValue("width-check"));
  1053.                 (document.querySelector(".width-check").checked = GM_getValue("width-check"));
  1054.             }
  1055.  
  1056.             if(GM_getValue("height-check")!=undefined){
  1057.                 (document.querySelector(".height-check").checked = GM_getValue("height-check"));
  1058.             }
  1059.  
  1060.             if(GM_getValue("cors-check")!=undefined){
  1061.                 (document.querySelector(".cors-check").checked = GM_getValue("cors-check"));
  1062.                 
  1063.             }
  1064.  
  1065.             GM_getValue("width-value-min") && (document.querySelector(".width-value-min").value = GM_getValue("width-value-min"));
  1066.             GM_getValue("width-value-max") && (document.querySelector(".width-value-max").value = GM_getValue("width-value-max"));
  1067.             GM_getValue("height-value-min") && (document.querySelector(".height-value-min").value = GM_getValue("height-value-min"));
  1068.             GM_getValue("height-value-max") && (document.querySelector(".height-value-max").value = GM_getValue("height-value-max"));
  1069.  
  1070.         }
  1071.  
  1072.         function fetchBase64ImgsThenPushToZipArray() {
  1073.             zipFilteredImgUrls.forEach((imgUrl, urlIndex) => {
  1074.                 if (imgUrl.includes("data:image")) {
  1075.                     return;
  1076.                 }
  1077.  
  1078. /*                 fetch(imgUrl,{
  1079.                     method: "get",
  1080.                     mode: 'cors'
  1081.                 }).then(response=>{
  1082.                     if (!response.ok) {
  1083.                         throw new Error('Network response was not OK');
  1084.                       }
  1085.                       return response.blob();
  1086.                     }).then(myBlob=>{
  1087.                     var blob = myBlob
  1088.                         let oFileReader = new FileReader();
  1089.                         oFileReader.onloadend = function (e) {
  1090.                             let base64 = e.target.result;
  1091.                             //console.log("》》", base64)
  1092.  
  1093.                             if (base64.includes("data:image")) {
  1094.                                 zipFilteredImgUrls[urlIndex] = base64;
  1095.                                 //zipImgWaitDownload.push(base64);
  1096.                             }
  1097.                         };
  1098.                         oFileReader.readAsDataURL(blob);                    
  1099.                 })
  1100.                 .catch((error)=>{ */
  1101.                 try {
  1102.                     GM_xmlhttpRequest({
  1103.                         method: "get",
  1104.                         url: imgUrl,
  1105.                         responseType: "blob",
  1106.                         onload: function (r) {
  1107.                             var blob = r.response;
  1108.                             let oFileReader = new FileReader();
  1109.                             oFileReader.onloadend = function (e) {
  1110.                                 let base64 = e.target.result; 
  1111.                                 if (base64.startsWith("data:image")) {
  1112.                                     zipFilteredImgUrls[urlIndex] = base64;
  1113.                                     //zipImgWaitDownload.push(base64);
  1114.                                 }
  1115.                             };
  1116.                             oFileReader.readAsDataURL(blob);
  1117.                         }
  1118.                     });
  1119.                 } catch (error) {
  1120.                     
  1121.                 }
  1122.  
  1123.                 //})
  1124.             })
  1125.         }
  1126.  
  1127.         function cutoffNotBase64Img(imgsUrlArray) {
  1128.             let resultArr = [];
  1129.             imgsUrlArray.forEach((imgUrl, urlIndex) => {
  1130.                 if (imgUrl.startsWith("data:image")&&imgUrl.includes("base64")) {
  1131.                     resultArr.push(imgUrl);
  1132.                 }
  1133.             }
  1134.             );
  1135.             return resultArr;
  1136.         }
  1137.     //下面这个括号是wrapper的括号   
  1138.     }
  1139. })();