☰

图片下载器

可以在绝大多数网站提取并批量下载图片。尤其是类似于千库网、包图网或者有妖气、腾讯漫画、b站漫画这种，右键失效或者图片不能另存的网站，用脚本均可以提取并下载。额外功能：zip下载/自动大图。详细见脚本描述(目前只适合chrome+tampermonkey，其他组合多少有问题）

当前为 2022-06-05 提交的版本，查看 最新版本。

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