图片下载器

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

当前为 2021-10-29 提交的版本,查看 最新版本

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