☰

图片提取

可以提取绝大部分网站的图片,如千库网、包图网、花瓣网等等，以及youtube/bilibili的视频封面等等。点击右键后，即可看到图片提取选项

目前為 2021-01-08 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name            图片提取
  3. // @name:en         Fetch Image
  4. // @namespace       http://tampermonkey.net/
  5. // @description     可以提取绝大部分网站的图片,如千库网、包图网、花瓣网等等，以及youtube/bilibili的视频封面等等。点击右键后，即可看到图片提取选项
  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.1
  8. // @author          桃源隐叟
  9. // @include         *
  10. // @grant           GM_openInTab
  11. // @run-at            context-menu
  12. // @match        *
  13. // @match        https://www.bilibili.com/
  14. // @match        https://588ku.com/
  15. // @homepageURL       https://github.com/taoyuancun123/modifyText/blob/master/modifyText.js
  16. // @supportURL        https://greasyfork.org/zh-CN/scripts/419894/feedback
  17. // ==/UserScript==
  18.  
  19. (function () {
  20.     'use strict';
  21.  
  22.     try{
  23.         document.querySelector(".tyc-image-container").remove();
  24.     }catch{
  25.  
  26. }
  27.         let imgUrls = [];
  28.         let bodyStr = document.body.innerHTML;
  29.  
  30.         try {
  31.         let imgEles = document.getElementsByTagName("img")
  32.  
  33.         for (let i = 0; i < imgEles.length; i++) {
  34.             //console.log(imgEles[i].src);
  35.             if (!imgUrls.includes(imgEles[i].src)) {
  36.                 imgUrls.push(imgEles[i].src);
  37.             }
  38.  
  39.  
  40.         }
  41.  
  42.  
  43. } catch {
  44.  //alert("error");
  45.  }
  46.  
  47.  
  48.  try {
  49.  let imgRegs = bodyStr.match(/(?<=background-image:\s*url\()(\S+)(?=\))/g);
  50.  
  51. for (let i = 0; i < imgRegs.length; i++) {
  52.     //console.log(imgRegs[i]);
  53.     if (!imgUrls.includes(imgRegs[i].replace(/&quot;/g, ""))) {
  54.         imgUrls.push(imgRegs[i].replace(/&quot;/g, ""));
  55.     }
  56.  
  57. }
  58. } catch {
  59.     //alert("error");
  60. }
  61.  
  62.  
  63.     let imgContainer = `
  64.     <div class="tyc-image-container" style="position:fixed;
  65.     top:0px;right:0px;width:50vw;display:flex;justify-content:center;
  66.     align-items:center;flex-wrap:wrap;z-index:2147483646;
  67.     background-color: #dedede;
  68.     border: 1px solid #aaa;
  69.     overflow:scroll;height:100%;
  70.     ">
  71.     <button style="font-size:30px;position:fixed;top:0px;right:30px;border-radius:10px;">X</button>
  72.     </div>
  73.     `
  74.  
  75.     let showBigImage=`
  76.         <div class="show-big-image" style="position:fixed;left:30%;top:30%;z-index:2147483647;">
  77.         </div>
  78.     `
  79.  
  80.     document.body.insertAdjacentHTML("afterbegin", imgContainer);
  81.  
  82. document.querySelector(".tyc-image-container button").onclick=(e)=>{
  83.     document.querySelector(".tyc-image-container").remove();
  84. }
  85. imgUrls.forEach((img,index) => {
  86.     let insertImg = `<div class="tyc-img-item-container-${index}" style="text-align:center;font-size:12px;margin:5px;">
  87. <img class="tyc-image-preview" src="${img}"/ style="width:auto;height:200px;"></div>`
  88.         document.querySelector(".tyc-image-container").insertAdjacentHTML("beforeend", insertImg);
  89.         let naturalW=document.querySelector(`.tyc-img-item-container-${index} .tyc-image-preview`).naturalWidth;
  90.         let naturalH=document.querySelector(`.tyc-img-item-container-${index} .tyc-image-preview`).naturalHeight;
  91.  
  92.         let imgInfo=`<p style="line-height:14px;height:14px;font-size:12px;">${naturalW}X${naturalH}</p>`;
  93.         document.querySelector(`.tyc-img-item-container-${index}`).insertAdjacentHTML("beforeend", imgInfo);
  94.         //console.log(img);
  95.     });
  96.  
  97. document.body.onclick=(e)=>{
  98.     if(e.target.nodeName=="IMG" && e.target.className==="tyc-image-preview"){
  99.         try{
  100.             document.querySelector(".show-big-image").remove();
  101.         }
  102.         catch{
  103.  
  104.     }
  105.             document.body.insertAdjacentHTML("beforeend",showBigImage);
  106.         let showItem=`<img src="${e.target.src}"/>`
  107.  
  108.             document.querySelector(".show-big-image").insertAdjacentHTML("beforeend",showItem);
  109.  
  110.             let tempImg=document.querySelector(".show-big-image img");
  111.  
  112.             let dWidth=(window.innerWidth-tempImg.width)/2;
  113.             let dHeight=(window.innerHeight-tempImg.height)/2;
  114.  
  115.             document.querySelector(".show-big-image").style.left=dWidth+"px";
  116.             document.querySelector(".show-big-image").style.top=dHeight+"px";
  117.         }else if(e.target.parentElement.className==="show-big-image"){
  118.             document.querySelector(".show-big-image").remove();
  119.         }
  120.     }
  121.  
  122.  
  123. })();