图片下载器

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

目前為 2021-02-26 提交的版本,檢視 最新版本

  1. // ==UserScript==
  2. // @name 图片下载器
  3. // @namespace http://tampermonkey.net/
  4. // @description 可以在绝大多数网站提取并批量下载图片。尤其是类似于千库网、包图网这种,不能右键保存图片或者保存的图片文件格式无法识别,均可以用脚本提取,然后用脚本提供的下载按钮,就可以下载到正确格式的图片文件。其他的淘宝、天猫电商图片批量下载,youtube、B站封面下载,等等都可以的。点击右键-tampermonkey-图片下载器,按这个顺序使用。(目前只适合tampermonkey,其他没试过行不行)
  5. // @version 1.21
  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.  
  124. imgUrls.forEach((img, index) => {
  125. let insertImg = `<div class="tyc-img-item-container-${index}" style="text-align:center;font-size:0px;
  126. margin:5px;border:1px solid #99d;border-radius:3px;
  127. ">
  128. <img class="tyc-image-preview" src="${img}"/ style="width:auto;height:200px;"></div>`
  129. document.querySelector(".tyc-image-wrapper").insertAdjacentHTML("beforeend", insertImg);
  130. let naturalW = document.querySelector(`.tyc-img-item-container-${index} .tyc-image-preview`).naturalWidth;
  131. let naturalH = document.querySelector(`.tyc-img-item-container-${index} .tyc-image-preview`).naturalHeight;
  132.  
  133. let imgInfoContainer = `
  134. <div style="font-size:0px;background-color:rgba(100,100,100,0.6);height:30px;position:relative;">
  135.  
  136.  
  137. </div>
  138. `;
  139.  
  140. let thisImgContainer = document.querySelector(`.tyc-img-item-container-${index}`);
  141. let imgContainerWidth = thisImgContainer.getBoundingClientRect().width;
  142. let imgInfo = `
  143. <span style="font-size:16px;position:absolute;left:calc(50% - 80px);top:7px;">${naturalW}X${naturalH}</span>
  144. `;
  145.  
  146.  
  147. /*
  148. <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;">
  149. <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"/>
  150. </svg>*/
  151.  
  152. let downAndFullBtn = `
  153. <span style="position:absolute;right:calc(50% - 30px);top:2px;border:1px solid #333;
  154. width:26px;height:26px;border-radius:20px;" class="select-image" data-value="${index}">
  155. <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}">
  156. <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"/>
  157. </svg>
  158. </span>
  159. <span style="position:absolute;right:calc(50% - 60px);top:2px;border:1px solid #333;
  160. width:26px;height:26px;border-radius:20px;
  161. " class="download-direct">
  162. <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;">
  163. <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"/>
  164. <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"/>
  165. </svg>
  166. </span>
  167.  
  168. `;
  169.  
  170. let downloadBtn=`
  171. <span style="position:absolute;right:calc(50% - 15px);top:2px;border:1px solid #333;
  172. width:26px;height:26px;border-radius:20px;
  173. " class="download-direct">
  174. <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;">
  175. <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"/>
  176. <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"/>
  177. </svg>
  178. </span>
  179. `
  180.  
  181.  
  182. thisImgContainer.insertAdjacentHTML("beforeend", imgInfoContainer);
  183.  
  184. let thisImgInfoContainer = thisImgContainer.querySelector("div");
  185.  
  186. let rectWidth = parseInt(thisImgContainer.getBoundingClientRect().width);
  187.  
  188. if (rectWidth > 120) {
  189. thisImgInfoContainer.insertAdjacentHTML("beforeend", imgInfo);
  190. thisImgInfoContainer.insertAdjacentHTML("beforeend", downAndFullBtn);
  191. } else if (rectWidth <= 120 && rectWidth >= 50) {
  192. thisImgInfoContainer.insertAdjacentHTML("beforeend", downAndFullBtn);
  193. thisImgInfoContainer.getElementsByClassName("select-image")[0].style.right = "50%";
  194. thisImgInfoContainer.getElementsByClassName("download-direct")[0].style.right = "calc(50% - 30px)";
  195.  
  196.  
  197. }else{
  198. thisImgInfoContainer.insertAdjacentHTML("beforeend", downloadBtn);
  199. }
  200.  
  201.  
  202. ////console.log(img);
  203. });
  204.  
  205. document.body.onclick = (e) => {
  206. //console.log(e);
  207. if ((e.target.nodeName == "IMG" && e.target.className === "tyc-image-preview") ) {
  208. let imgContainer = e.path.find(
  209.  
  210. (ele) => {
  211. try {
  212. //console.log(ele);
  213. return ele.className.includes("tyc-img-item-container");
  214. }
  215. catch {
  216.  
  217. }
  218.  
  219. }
  220. )
  221. let path = imgContainer.getElementsByTagName("img")[0].src;
  222.  
  223. try {
  224. let container = document.querySelector(".show-big-image");
  225. if (container.getElementsByTagName("img")[0].src === path) {
  226. container.remove();
  227. return;
  228. } else {
  229. container.remove();
  230. }
  231. }
  232. catch {
  233.  
  234. }
  235. document.body.insertAdjacentHTML("beforeend", showBigImage);
  236.  
  237. let showItem = `<img src="${path}"/>`
  238.  
  239. document.querySelector(".show-big-image").insertAdjacentHTML("beforeend", showItem);
  240.  
  241. let tempImg = document.querySelector(".show-big-image img");
  242.  
  243. let dWidth = (window.innerWidth - tempImg.width) / 2;
  244. let dHeight = (window.innerHeight - tempImg.height) / 2;
  245.  
  246. document.querySelector(".show-big-image").style.left = dWidth + "px";
  247. document.querySelector(".show-big-image").style.top = dHeight + "px";
  248. } else if (e.target.parentElement.className === "show-big-image") {
  249. try {
  250. document.querySelector(".show-big-image").remove();
  251. }
  252. catch
  253. {
  254.  
  255. }
  256.  
  257. } else if (e.target.classList[1] == "bi-download" || e.path.find(isDownload) != undefined) {
  258. let imgContainer = e.path.find(
  259.  
  260. (ele) => {
  261. try {
  262. //console.log(ele);
  263. return ele.className.includes("tyc-img-item-container");
  264. }
  265. catch {
  266.  
  267. }
  268.  
  269. }
  270. )
  271. let path = imgContainer.getElementsByTagName("img")[0].src;
  272. var filename;
  273. if (path.indexOf("/") > 0)//如果包含有"/"号 从最后一个"/"号+1的位置开始截取字符串
  274. {
  275. filename = path.substring(path.lastIndexOf("/") + 1, path.lastIndexOf("."));
  276. }
  277. else {
  278. filename = path;
  279. }
  280. //console.log("download start" + path + " " + filename);
  281. GM_download(path, "pic");
  282. }else if(e.target.classList[1] == "bi-check" || e.path.find(isSelect) != undefined){
  283. let checkSvg=e.path.find((ele)=>ele.classList[1]==="bi-check");
  284. let currentImg=parseInt(checkSvg.dataset.value);
  285.  
  286. let container=e.path.find((ele)=>ele.className===`tyc-img-item-container-${currentImg}`);
  287.  
  288.  
  289.  
  290. if(imgSelected.includes(currentImg)){
  291. imgSelected.splice(imgSelected.indexOf(currentImg),1);
  292. checkSvg.style.color="black";
  293. container.style.border="1px solid #99d";
  294. }else{
  295. imgSelected.push(currentImg);
  296. checkSvg.style.color="white";
  297. container.style.border="1px solid white";
  298. }
  299.  
  300. document.querySelector(".num-tip").innerText=`已选(${imgSelected.length}/${imgUrls.length})张图片`;
  301. transIndexToLink();
  302. }
  303. }
  304.  
  305. document.querySelector(".select-all").onchange=(e)=>{
  306. if (document.querySelector(".select-all").checked) {
  307. imgWaitDownload=imgUrls;
  308. } else {
  309. transIndexToLink();
  310. }
  311.  
  312. document.querySelector(".num-tip").innerText=`已选(${imgWaitDownload.length}/${imgUrls.length})张图片`;
  313. }
  314.  
  315. function isDownload(ele) {
  316. return ele.className == "download-direct";
  317. }
  318.  
  319. function isSelect(ele) {
  320. return ele.className == "select-image";
  321. }
  322.  
  323. function transIndexToLink(){
  324. imgWaitDownload=[];
  325. imgSelected.forEach((imgIndex,index)=>{
  326. imgWaitDownload.push(imgUrls[imgIndex]);
  327. });
  328. }
  329.  
  330. })();