☰

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)

As of 2022-01-06. See the latest version.

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