☰

图片下载器

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

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

  1. // ==UserScript==
  2. // @name:zh-CN   图片下载器
  3. // @name:zh-TW   图片下载器
  4. // @name         Image Downloader
  5. // @namespace       http://tampermonkey.net/
  6. // @description You can extract and download pictures in batches on most websites.Right Click-tampermonkey-Image Downloader,use in this order.(currently only suitable for tampermonkey and chrome,others have not tried it)
  7. // @description:zh-CN    可以在绝大多数网站提取并批量下载图片。尤其是类似于千库网、包图网这种，不能右键保存图片或者保存的图片文件格式无法识别，均可以用脚本提取，然后用脚本提供的下载按钮，就可以下载到正确格式的图片文件。其他的淘宝、天猫电商图片批量下载，youtube、B站封面下载，等等都可以的。点击右键-tampermonkey-图片下载器，按这个顺序使用。(目前只适合chrome+tampermonkey，其他组合多少有问题）
  8. // @description:zh-TW   可以在绝大多数网站提取并批量下载图片。尤其是类似于千库网、包图网这种，不能右键保存图片或者保存的图片文件格式无法识别，均可以用脚本提取，然后用脚本提供的下载按钮，就可以下载到正确格式的图片文件。其他的淘宝、天猫电商图片批量下载，youtube、B站封面下载，等等都可以的。点击右键-tampermonkey-图片下载器，按这个顺序使用。(目前只适合chrome+tampermonkey，其他组合多少有问题）
  9. // @version         1.56
  10. // @author          桃源隐叟
  11. // @include         *
  12. // @grant           GM_openInTab
  13. // @grant           GM_setValue
  14. // @grant           GM_getValue
  15. // @grant GM_download
  16. // @run-at            context-menu
  17. // @match        *
  18. // @match        https://www.bilibili.com/
  19. // @match        https://588ku.com/
  20. // @homepageURL       https://github.com/taoyuancun123/modifyText/blob/master/modifyText.js
  21. // @supportURL        https://greasyfork.org/zh-CN/scripts/419894/feedback
  22. // ==/UserScript==
  23.  
  24. (function () {
  25.     'use strict';
  26.  
  27.     try {
  28.         document.querySelector(".tyc-image-container").remove();
  29.     } catch {
  30.  
  31.     }
  32.     var imgUrls = [];
  33.     var bodyStr = document.body.innerHTML;
  34.     var imgSelected = [];
  35.     var imgWaitDownload = [];
  36.     var widthFilter = { min: 0, max: 3000 };
  37.     var heightFilter = { min: 0, max: 3000 };
  38.     var tempImgUrls=[];
  39.  
  40.     try {
  41.         let imgEles = document.getElementsByTagName("img")
  42.  
  43.         for (let i = 0; i < imgEles.length; i++) {
  44.             ////console.log(imgEles[i].src);
  45.             if (!imgUrls.includes(imgEles[i].src)) {
  46.                 imgUrls.push(imgEles[i].src);
  47.             }
  48.         }
  49.     } catch {
  50.         //alert("error");
  51.     }
  52.  
  53.     try {
  54.         let imgRegs = bodyStr.match(/(?<=background-image:\s*url\()(\S+)(?=\))/g);
  55.  
  56.         for (let i = 0; i < imgRegs.length; i++) {
  57.             ////console.log(imgRegs[i]);
  58.             if (!imgUrls.includes(imgRegs[i].replace(/&quot;/g, ""))) {
  59.                 imgUrls.push(imgRegs[i].replace(/&quot;/g, ""));
  60.             }
  61.         }
  62.     } catch {
  63.         //alert("error");
  64.     }
  65.  
  66.  
  67.     let imgContainer = `
  68.     <div class="tyc-image-container" style="position:fixed;
  69.     top:0px;right:0px;width:50vw;z-index:2147483645;
  70.     background-color: #dedede;
  71.     border: 1px solid #aaa;
  72.     overflow:scroll;height:100%;
  73.     ">
  74.     <div class="control-section" style="width:46vw;z-index:2147483646;
  75.     position:fixed;right:30px;
  76.     top:0px;display:block;
  77.     height:80px;line-height:40px;
  78.     background:#eee;border:1px solid #aaa;border-radius:2px;">
  79.  
  80.     <input class="select-all" type="checkbox" name="select-all" value="select-all">全选
  81.     <button class="btn-download" style="border:1px solid #aaa;border-radius:5px;
  82.     height:32px;line-height:32px;
  83.     margin:0px;padding:0 5px;
  84.     ">download</button>
  85. <span style="margin-left:10px;" class="num-tip">已选(0/${imgUrls.length})张图片</span>
  86.     <button class="btn-close" style="font-size:20px;position:absolute;
  87.     right:30px;top:4px;
  88.     height:32px;line-height:32px;
  89.     margin:0px;
  90.     border-radius:10px;border:1px solid #aaa;
  91.     width:30px;">X</button>
  92.  
  93.     <p style="line-height:12px;">
  94.         <div style="float:left;">
  95.         <input type="checkbox" class="width-check img-check" name="width-check" value="width-check">Width:
  96.         <input type="text" class="width-value-min" size="1" style="height:15px;width:50px;"
  97.             min="0" max="9999" value="0">-
  98.             <input type="text" class="width-value-max" size="1" style="height:15px;width:50px;"
  99.             min="0" max="9999" value="3000">
  100.         </div>
  101.         
  102.         <div style="float:left;margin-left:30px;">
  103.             <input type="checkbox" class="height-check img-check" name="height-check" value="height-check">Height:
  104.             <input type="text" class="height-value-min" size="1" style="height:15px;width:50px;"
  105.                 min="0" max="9999" value="0">-
  106.                 <input type="text" class="height-value-max" size="1" style="height:15px;width:50px;"
  107.                 min="0" max="9999" value="3000">
  108.         </div>
  109.     </p>
  110.  
  111.     </div>
  112. <div class="tyc-image-wrapper" style="margin-top:82px;display:flex;justify-content:center;
  113. align-items:center;flex-wrap:wrap;">
  114. </div>
  115.     </div>
  116.     `
  117.  
  118.     let showBigImage = `
  119.         <div class="show-big-image" style="position:fixed;left:30%;top:30%;z-index:2147483647;">
  120.         </div>
  121.     `
  122.  
  123.     document.body.insertAdjacentHTML("afterbegin", imgContainer);
  124.  
  125.  
  126.  
  127.     if (window.location.href.includes("hathitrust.org")) {
  128.         //imgUrls=[];
  129.  
  130.         let imgs = document.querySelectorAll(".image img");
  131.         if (imgs.length > 0) {
  132.             let canvas = document.createElement("canvas");
  133.             imgUrls = [];
  134.             for (let pi = 0; pi < imgs.length; pi++) {
  135.                 canvas.width = imgs[pi].width;
  136.                 canvas.height = imgs[pi].height;
  137.  
  138.                 canvas.getContext("2d").drawImage(imgs[pi], 0, 0);
  139.  
  140.                 imgUrls.push(canvas.toDataURL("image/png"));
  141.             }
  142.  
  143.             document.querySelector(".select-all").style = "position:relative;width:15px;height:15px;"
  144.         } else {
  145.  
  146.         }
  147.     }
  148.  
  149.  
  150.  
  151.     document.body.onclick = (e) => {
  152.         //console.log(e);
  153.         if ((e.target.nodeName == "IMG" && e.target.className === "tyc-image-preview")) {
  154.             let imgContainer = e.path.find(
  155.  
  156.                 (ele) => {
  157.                     try {
  158.                         //console.log(ele);
  159.                         return ele.className.includes("tyc-img-item-container");
  160.                     }
  161.                     catch {
  162.  
  163.                     }
  164.  
  165.                 }
  166.             )
  167.             let path = imgContainer.getElementsByTagName("img")[0].src;
  168.  
  169.             try {
  170.                 let container = document.querySelector(".show-big-image");
  171.                 if (container.getElementsByTagName("img")[0].src === path) {
  172.                     container.remove();
  173.                     return;
  174.                 } else {
  175.                     container.remove();
  176.                 }
  177.             }
  178.             catch {
  179.  
  180.             }
  181.             document.body.insertAdjacentHTML("beforeend", showBigImage);
  182.  
  183.             let showItem = `<img src="${path}"/>`
  184.  
  185.             document.querySelector(".show-big-image").insertAdjacentHTML("beforeend", showItem);
  186.  
  187.             let tempImg = document.querySelector(".show-big-image img");
  188.  
  189.             let dWidth = (window.innerWidth - tempImg.width) / 2;
  190.             let dHeight = (window.innerHeight - tempImg.height) / 2;
  191.  
  192.             document.querySelector(".show-big-image").style.left = dWidth + "px";
  193.             document.querySelector(".show-big-image").style.top = dHeight + "px";
  194.         } else if (e.target.parentElement.className === "show-big-image") {
  195.             try {
  196.                 document.querySelector(".show-big-image").remove();
  197.             }
  198.             catch
  199.             {
  200.  
  201.             }
  202.  
  203.         } else if (e.target.classList[1] == "bi-download" || e.path.find(isDownload) != undefined) {
  204.             let imgContainer = e.path.find(
  205.  
  206.                 (ele) => {
  207.                     try {
  208.                         //console.log(ele);
  209.                         return ele.className.includes("tyc-img-item-container");
  210.                     }
  211.                     catch {
  212.  
  213.                     }
  214.  
  215.                 }
  216.             )
  217.             let path = imgContainer.getElementsByTagName("img")[0].src;
  218.             var filename;
  219.             if (path.indexOf("/") > 0)//如果包含有"/"号 从最后一个"/"号+1的位置开始截取字符串
  220.             {
  221.                 filename = path.substring(path.lastIndexOf("/") + 1, path.lastIndexOf("."));
  222.             }
  223.             else {
  224.                 filename = path;
  225.             }
  226.             //console.log("download start" + path + " " + filename);
  227.             GM_download(path, "pic");
  228.         } else if (e.target.classList[1] == "bi-check" || e.path.find(isSelect) != undefined) {
  229.             let checkSvg = e.path.find((ele) => ele.classList[1] === "bi-check");
  230.             let currentImg = parseInt(checkSvg.dataset.value);
  231.  
  232.             let container = e.path.find((ele) => ele.className === `tyc-img-item-container-${currentImg}`);
  233.  
  234.  
  235.  
  236.             if (imgSelected.includes(currentImg)) {
  237.                 imgSelected.splice(imgSelected.indexOf(currentImg), 1);
  238.                 checkSvg.style.color = "black";
  239.                 container.style.border = "1px solid #99d";
  240.             } else {
  241.                 imgSelected.push(currentImg);
  242.                 checkSvg.style.color = "white";
  243.                 container.style.border = "1px solid white";
  244.             }
  245.  
  246.             document.querySelector(".num-tip").innerText = `已选(${imgSelected.length}/${imgUrls.length})张图片`;
  247.             transIndexToLink(tempImgUrls);
  248.         }
  249.     }
  250.  
  251.  
  252.     document.querySelector(".btn-close").onclick = (e) => {
  253.         document.querySelector(".tyc-image-container").remove();
  254.     }
  255.  
  256.     document.querySelector(".btn-download").onclick = (e) => {
  257.         /*         if (document.querySelector(".select-all").checked) {
  258.                     imgUrls.forEach((img, index) => {
  259.                         GM_download(img, `pic-${index}`);
  260.                     });
  261.                 } else {
  262.                     alert("请勾选全选，下载全部，或者手动在图片上右键另存为指定图片");
  263.                 } */
  264.         if (imgWaitDownload.length >= 1) {
  265.             imgWaitDownload.forEach(async (img, index) => {
  266.                 console.log(index);
  267.                 console.log(img);
  268.                 await GM_download(img, `pic-${index}`);
  269.             });
  270.         } else {
  271.             alert("请至少选中一张图片。");
  272.         }
  273.     }
  274.  
  275.     document.body.onchange = (e) => {
  276.         if (e.target.className.includes("width-check")) {
  277.             GM_setValue('width-check',e.target.checked);
  278.         } 
  279.         if (e.target.className.includes("height-check")) {
  280.             GM_setValue('height-check',e.target.checked);
  281.         }
  282.         if(e.target.nodeName==="INPUT" && e.target.type==="text" && e.target.className.includes("value")){            
  283.             GM_setValue(e.target.className,e.target.value);
  284.         }   
  285.         
  286.         (e.target.className.includes("width-check")||e.target.className.includes("height-check")||
  287.         (e.target.nodeName==="INPUT" && e.target.type==="text" && e.target.className.includes("value")))
  288.         &&(clean(),init());
  289.         
  290.         
  291.     }
  292.  
  293.     document.querySelector(".select-all").onchange = (e) => {
  294.         if (document.querySelector(".select-all").checked) {
  295.             imgWaitDownload = tempImgUrls;
  296.         } else {
  297.             transIndexToLink(tempImgUrls);
  298.         }
  299.  
  300.         document.querySelector(".num-tip").innerText = `已选(${imgWaitDownload.length}/${imgUrls.length})张图片`;
  301.     }
  302.  
  303.     init();
  304.     function init() {
  305.         tempImgUrls=imgUrls;
  306.         getSavedValue();
  307.         if (document.querySelector(".width-check").checked) {            
  308.             tempImgUrls=tempImgUrls.filter(filterByWidth);
  309.         } 
  310.  
  311.         if (document.querySelector(".height-check").checked) {
  312.             tempImgUrls=tempImgUrls.filter(filterByHeight);
  313.         }
  314.        
  315.         showImage(tempImgUrls);
  316.     }
  317.  
  318.     function clean(){
  319.         imgWaitDownload=[];
  320.         imgSelected=[];
  321.         document.querySelector(".num-tip").innerText = `已选(${imgSelected.length}/${imgUrls.length})张图片`;
  322.         document.querySelector(".tyc-image-wrapper").innerHTML="";
  323.     }
  324.  
  325.     function isDownload(ele) {
  326.         return ele.className == "download-direct";
  327.     }
  328.  
  329.     function isSelect(ele) {
  330.         return ele.className == "select-image";
  331.     }
  332.  
  333.     function transIndexToLink(tempImgUrls) {
  334.         imgWaitDownload = [];
  335.         imgSelected.forEach((imgIndex, index) => {
  336.             imgWaitDownload.push(tempImgUrls[imgIndex]);
  337.         });
  338.     }
  339.  
  340.     function showImage(filtedImgUrls) {
  341.         filtedImgUrls.forEach((img, index) => {      
  342.             if(window.location.href.includes("huaban.com")){
  343.                 if(img.includes("/webp")){
  344.                     img=img.replace(/\/webp/g,"/png");
  345.                 }
  346.                 
  347.             }     
  348.             let insertImg = `<div class="tyc-img-item-container-${index}" style="text-align:center;font-size:0px;
  349.     margin:5px;border:1px solid #99d;border-radius:3px;
  350.     ">
  351.     <img class="tyc-image-preview" src="${img}"/ style="width:auto;height:200px;"></div>`
  352.             document.querySelector(".tyc-image-wrapper").insertAdjacentHTML("beforeend", insertImg);
  353.             let naturalW = document.querySelector(`.tyc-img-item-container-${index} .tyc-image-preview`).naturalWidth;
  354.             let naturalH = document.querySelector(`.tyc-img-item-container-${index} .tyc-image-preview`).naturalHeight;
  355.  
  356.             let imgInfoContainer = `
  357.             <div style="font-size:0px;background-color:rgba(100,100,100,0.6);height:30px;position:relative;">
  358.     
  359.     
  360.     </div>
  361.             `;
  362.  
  363.             let thisImgContainer = document.querySelector(`.tyc-img-item-container-${index}`);
  364.             let imgContainerWidth = thisImgContainer.getBoundingClientRect().width;
  365.             let imgInfo = `
  366.             <span style="font-size:16px;position:absolute;left:calc(50% - 80px);top:7px;">${naturalW}X${naturalH}</span>
  367.             `;
  368.  
  369.  
  370.             /*
  371.             <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;">
  372.       <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"/>
  373.     </svg>*/
  374.  
  375.             let downAndFullBtn = `
  376.     <span style="position:absolute;right:calc(50% - 30px);top:2px;border:1px solid #333;
  377.     width:26px;height:26px;border-radius:20px;" class="select-image" data-value="${index}">
  378.     <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}">
  379.       <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"/>
  380.     </svg>
  381.     </span>
  382.     <span style="position:absolute;right:calc(50% - 60px);top:2px;border:1px solid #333;
  383.     width:26px;height:26px;border-radius:20px;
  384.     " class="download-direct">
  385.     <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;">
  386.       <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"/>
  387.       <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"/>
  388.     </svg>
  389.     </span>
  390.     
  391.     `;
  392.  
  393.             let downloadBtn = `
  394.             <span style="position:absolute;right:calc(50% - 15px);top:2px;border:1px solid #333;
  395.     width:26px;height:26px;border-radius:20px;
  396.     " class="download-direct">
  397.     <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;">
  398.       <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"/>
  399.       <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"/>
  400.     </svg>
  401.     </span>
  402.             `
  403.  
  404.  
  405.             thisImgContainer.insertAdjacentHTML("beforeend", imgInfoContainer);
  406.  
  407.             let thisImgInfoContainer = thisImgContainer.querySelector("div");
  408.  
  409.             let rectWidth = parseInt(thisImgContainer.getBoundingClientRect().width);
  410.  
  411.             if (rectWidth > 120) {
  412.                 thisImgInfoContainer.insertAdjacentHTML("beforeend", imgInfo);
  413.                 thisImgInfoContainer.insertAdjacentHTML("beforeend", downAndFullBtn);
  414.             } else if (rectWidth <= 120 && rectWidth >= 50) {
  415.                 thisImgInfoContainer.insertAdjacentHTML("beforeend", downAndFullBtn);
  416.                 thisImgInfoContainer.getElementsByClassName("select-image")[0].style.right = "50%";
  417.                 thisImgInfoContainer.getElementsByClassName("download-direct")[0].style.right = "calc(50% - 30px)";
  418.  
  419.  
  420.             } else {
  421.                 thisImgInfoContainer.insertAdjacentHTML("beforeend", downloadBtn);
  422.             }
  423.  
  424.  
  425.             ////console.log(img);
  426.         });
  427.     }
  428.  
  429.     function filterByWidth(src) {
  430.         let tempImg=new Image();
  431.         tempImg.src=src;
  432.         if(tempImg.width>=parseInt(document.querySelector(".width-value-min").value)
  433.          && tempImg.width<=parseInt(document.querySelector(".width-value-max").value))
  434.          {
  435.             return src;
  436.          }
  437.     }
  438.  
  439.     function filterByHeight(src) {
  440.         let tempImg=new Image();
  441.         tempImg.src=src;
  442.         if(tempImg.height>=parseInt(document.querySelector(".height-value-min").value)
  443.          && tempImg.height<=parseInt(document.querySelector(".height-value-max").value))
  444.          {
  445.             return src;
  446.          }
  447.     }
  448.  
  449.     function getSavedValue(){
  450.         GM_getValue("width-check")&&(document.querySelector(".width-check").checked=GM_getValue("width-check"));
  451.         GM_getValue("height-check")&&(document.querySelector(".height-check").checked=GM_getValue("height-check"));
  452.         GM_getValue("width-value-min")&&(document.querySelector(".width-value-min").value=GM_getValue("width-value-min"));
  453.         GM_getValue("width-value-max")&&(document.querySelector(".width-value-max").value=GM_getValue("width-value-max"));
  454.         GM_getValue("height-value-min")&&(document.querySelector(".height-value-min").value=GM_getValue("height-value-min"));
  455.         GM_getValue("height-value-max")&&(document.querySelector(".height-value-max").value=GM_getValue("height-value-max"));
  456.     }
  457.  
  458. })();