☰

图片下载器

某些网站图片，右键不能保存，使用此脚本,提取后可直接右键保存，如千库网、B战封面、淘宝天猫等网站。点击右键后，即可看到图片下载选项。

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

  1. // ==UserScript==
  2. // @name            图片下载器
  3. // @name:en         Image downloader
  4. // @namespace       http://tampermonkey.net/
  5. // @description     某些网站图片，右键不能保存，使用此脚本,提取后可直接右键保存，如千库网、B战封面、淘宝天猫等网站。点击右键后，即可看到图片下载选项。
  6. // @description:en  It can extract the images of most websites, such as qianku.com, baotu.com, huaban.com, and the video cover of YouTube / BiliBili. Right click to see the image extraction options
  7. // @version         1.6
  8. // @author          桃源隐叟
  9. // @include         *
  10. // @grant           GM_openInTab
  11. // @grant GM_download
  12. // @run-at            context-menu
  13. // @match        *
  14. // @match        https://www.bilibili.com/
  15. // @match        https://588ku.com/
  16. // @homepageURL       https://github.com/taoyuancun123/modifyText/blob/master/modifyText.js
  17. // @supportURL        https://greasyfork.org/zh-CN/scripts/419894/feedback
  18. //@updateURL https://greasyfork.org/zh-CN/scripts/419894
  19. //@downloadURL https://greasyfork.org/zh-CN/scripts/419894
  20. //@installURL https://greasyfork.org/zh-CN/scripts/419894
  21. // ==/UserScript==
  22.  
  23. (function () {
  24.     'use strict';
  25.  
  26.     try{
  27.         document.querySelector(".tyc-image-container").remove();
  28.     }catch{
  29.  
  30. }
  31.         let imgUrls = [];
  32.         let bodyStr = document.body.innerHTML;
  33.  
  34.         try {
  35.         let imgEles = document.getElementsByTagName("img")
  36.  
  37.         for (let i = 0; i < imgEles.length; i++) {
  38.             //console.log(imgEles[i].src);
  39.             if (!imgUrls.includes(imgEles[i].src)) {
  40.                 imgUrls.push(imgEles[i].src);
  41.             }
  42.  
  43.  
  44.         }
  45.  
  46.  
  47. } catch {
  48.  //alert("error");
  49.  }
  50.  
  51.  
  52.  try {
  53.  let imgRegs = bodyStr.match(/(?<=background-image:\s*url\()(\S+)(?=\))/g);
  54.  
  55. for (let i = 0; i < imgRegs.length; i++) {
  56.     //console.log(imgRegs[i]);
  57.     if (!imgUrls.includes(imgRegs[i].replace(/&quot;/g, ""))) {
  58.         imgUrls.push(imgRegs[i].replace(/&quot;/g, ""));
  59.     }
  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;display:flex;justify-content:center;
  70.     align-items:center;flex-wrap:wrap;z-index:2147483646;
  71.     background-color: #dedede;
  72.     border: 1px solid #aaa;
  73.     overflow:scroll;height:100%;
  74.     ">
  75.     <div class="control-section" style="width:50%;position:fixed;right:0;top:0px;">
  76.     <input class="select-all" type="checkbox" name="select-all" value="select-all">全选
  77.     <button class="btn-download" style="height:30px;border:1px solid #aaa;border-radius:5px;padding:5px;">download</button>
  78.     <button class="btn-close" style="font-size:30px;position:fixed;top:0px;right:30px;border-radius:10px;border:1px solid #aaa;width:50px;">X</button>
  79.     </div>
  80.     </div>
  81.     `
  82.  
  83.     let showBigImage=`
  84.         <div class="show-big-image" style="position:fixed;left:30%;top:30%;z-index:2147483647;">
  85.         </div>
  86.     `
  87.  
  88.     document.body.insertAdjacentHTML("afterbegin", imgContainer);
  89.  
  90. document.querySelector(".btn-close").onclick=(e)=>{
  91.     document.querySelector(".tyc-image-container").remove();
  92. }
  93.  
  94. document.querySelector(".btn-download").onclick=(e)=>{
  95.     if(document.querySelector(".select-all").checked){
  96.         imgUrls.forEach((img,index) => {
  97.             GM_download(img, `pic-${index}`);
  98.         });
  99.     }else{
  100.         alert("请勾选全选，下载全部，或者手动在图片上右键另存为指定图片");
  101.     }
  102. }
  103.  
  104.  
  105. imgUrls.forEach((img,index) => {
  106.     let insertImg = `<div class="tyc-img-item-container-${index}" style="text-align:center;font-size:12px;margin:5px;">
  107. <img class="tyc-image-preview" src="${img}"/ style="width:auto;height:200px;"></div>`
  108.         document.querySelector(".tyc-image-container").insertAdjacentHTML("beforeend", insertImg);
  109.         let naturalW=document.querySelector(`.tyc-img-item-container-${index} .tyc-image-preview`).naturalWidth;
  110.         let naturalH=document.querySelector(`.tyc-img-item-container-${index} .tyc-image-preview`).naturalHeight;
  111.  
  112.         let imgInfo=`<p style="line-height:14px;height:14px;font-size:12px;">${naturalW}X${naturalH}</p>`;
  113.         document.querySelector(`.tyc-img-item-container-${index}`).insertAdjacentHTML("beforeend", imgInfo);
  114.         //console.log(img);
  115.     });
  116.  
  117. document.body.onclick=(e)=>{
  118.     if(e.target.nodeName=="IMG" && e.target.className==="tyc-image-preview"){
  119.         try{
  120.             document.querySelector(".show-big-image").remove();
  121.         }
  122.         catch{
  123.  
  124.     }
  125.             document.body.insertAdjacentHTML("beforeend",showBigImage);
  126.         let showItem=`<img src="${e.target.src}"/>`
  127.  
  128.             document.querySelector(".show-big-image").insertAdjacentHTML("beforeend",showItem);
  129.  
  130.             let tempImg=document.querySelector(".show-big-image img");
  131.  
  132.             let dWidth=(window.innerWidth-tempImg.width)/2;
  133.             let dHeight=(window.innerHeight-tempImg.height)/2;
  134.  
  135.             document.querySelector(".show-big-image").style.left=dWidth+"px";
  136.             document.querySelector(".show-big-image").style.top=dHeight+"px";
  137.         }else if(e.target.parentElement.className==="show-big-image"){
  138.             document.querySelector(".show-big-image").remove();
  139.         }
  140.     }
  141.  
  142.  
  143. })();