☰

图片下载器

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

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

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