图片下载器

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

当前为 2021-11-22 提交的版本,查看 最新版本

  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.61
  10. // @author 桃源隐叟
  11. // @include *
  12. // @connect *
  13. // @grant GM_openInTab
  14. // @grant GM_registerMenuCommand
  15. // @grant GM_setValue
  16. // @grant GM_getValue
  17. // @grant GM_xmlhttpRequest
  18. // @grant GM_download
  19. // @require https://cdn.jsdelivr.net/npm/hotkeys-js@3.7.2/dist/hotkeys.min.js
  20. // @require https://cdn.bootcss.com/jszip/3.7.1/jszip.min.js
  21. // @require https://cdn.bootcss.com/FileSaver.js/1.3.8/FileSaver.min.js
  22. // @run-at document-end
  23. // @match *
  24. // @match https://www.bilibili.com/
  25. // @match https://588ku.com/
  26. // @homepageURL https://github.com/taoyuancun123/modifyText/blob/master/modifyText.js
  27. // @supportURL https://gf.qytechs.cn/zh-CN/scripts/419894/feedback
  28. // @license GPLv3
  29. // ==/UserScript==
  30.  
  31. (function () {
  32. 'use strict';
  33.  
  34. var lang = navigator.appName == "Netscape" ? navigator.language : navigator.userLanguage;
  35. var langSet;
  36. var localization = {
  37. zh: {
  38. selectAll: "全选",
  39. downloadBtn: "下载",
  40. downloadMenuText: "打开脚本(Alt+w)",
  41. zipDownloadBtn: "zip下载"
  42. },
  43. en: {
  44. selectAll: "selectAll",
  45. downloadBtn: "download",
  46. downloadMenuText: "Open(Alt+w)",
  47. zipDownloadBtn: "zip Download"
  48. }
  49. }
  50.  
  51. if (lang.toLowerCase().includes("zh-")) {
  52. langSet = localization.zh;
  53. } else {
  54. langSet = localization.en;
  55. }
  56.  
  57. /* ~function(global){
  58. console.log(global.eHook);
  59. }(window); */
  60.  
  61. GM_registerMenuCommand(langSet.downloadMenuText, wrapper);
  62. hotkeys('alt+w', wrapper);
  63.  
  64. function wrapper() {
  65.  
  66. try {
  67. document.querySelector(".tyc-image-container").remove();
  68. } catch {
  69.  
  70. }
  71. var imgUrls = [];
  72. var bodyStr = document.body.innerHTML;
  73. var imgSelected = [];
  74. var zipImgSelected = [];
  75. var imgWaitDownload = [];
  76. var zipImgWaitDownload = [];
  77. var widthFilter = { min: 0, max: 3000 };
  78. var heightFilter = { min: 0, max: 3000 };
  79. var tempImgUrls = [];
  80. var zipFolder = new JSZip();
  81. var zipSubFoler = zipFolder.folder('pics');
  82.  
  83.  
  84. try {
  85. let imgEles = document.getElementsByTagName("img")
  86.  
  87. for (let i = 0; i < imgEles.length; i++) {
  88. ////console.log(imgEles[i].src);
  89. if (!imgUrls.includes(imgEles[i].src)) {
  90. imgUrls.push(imgEles[i].src);
  91. } else if (!imgUrls.includes(imgEles[i].srcset)) {
  92. imgUrls.push(imgEles[i].srcset);
  93. }
  94. }
  95. } catch {
  96. //alert("error");
  97. }
  98.  
  99. try {
  100. let imgRegs = bodyStr.match(/(?<=background-image:\s*url\()(\S+)(?=\))/g);
  101.  
  102. for (let i = 0; i < imgRegs.length; i++) {
  103. ////console.log(imgRegs[i]);
  104. if (!imgUrls.includes(imgRegs[i].replace(/&quot;/g, ""))) {
  105. imgUrls.push(imgRegs[i].replace(/&quot;/g, ""));
  106. }
  107. }
  108. } catch {
  109. //alert("error");
  110. }
  111.  
  112.  
  113. let imgContainer = `
  114. <div class="tyc-image-container" style="position:fixed;
  115. top:0px;right:0px;width:50vw;z-index:2147483645;
  116. background-color: #dedede;
  117. border: 1px solid #aaa;
  118. overflow:scroll;height:100%;
  119. ">
  120. <div class="control-section" style="width:46vw;z-index:2147483646;
  121. position:fixed;right:30px;
  122. top:0px;display:block;
  123. height:80px;line-height:40px;
  124. background:#eee;border:1px solid #aaa;border-radius:2px;">
  125. <input class="select-all" type="checkbox" name="select-all" value="select-all">${langSet.selectAll}
  126. <button class="btn-download" style="border:1px solid #aaa;border-radius:5px;
  127. height:32px;line-height:32px;
  128. margin:0px;padding:0 5px;
  129. ">${langSet.downloadBtn}</button>
  130.  
  131. <button class="btn-zipDownload" style="border:1px solid #aaa;border-radius:5px;
  132. height:32px;line-height:32px;
  133. margin:0px;padding:0 5px;
  134. ">${langSet.zipDownloadBtn}</button>
  135.  
  136. <span style="margin-left:10px;" class="num-tip">已选(0/${imgUrls.length})张图片</span>
  137. <button class="btn-close" style="font-size:20px;position:absolute;
  138. right:30px;top:4px;
  139. height:32px;line-height:32px;
  140. margin:0px;
  141. border-radius:10px;border:1px solid #aaa;
  142. width:30px;">X</button>
  143. <p style="line-height:12px;">
  144. <div style="float:left;">
  145. <input type="checkbox" class="width-check img-check" name="width-check" value="width-check">Width:
  146. <input type="text" class="width-value-min" size="1" style="height:15px;width:50px;"
  147. min="0" max="9999" value="0">-
  148. <input type="text" class="width-value-max" size="1" style="height:15px;width:50px;"
  149. min="0" max="9999" value="3000">
  150. </div>
  151. <div style="float:left;margin-left:30px;">
  152. <input type="checkbox" class="height-check img-check" name="height-check" value="height-check">Height:
  153. <input type="text" class="height-value-min" size="1" style="height:15px;width:50px;"
  154. min="0" max="9999" value="0">-
  155. <input type="text" class="height-value-max" size="1" style="height:15px;width:50px;"
  156. min="0" max="9999" value="3000">
  157. </div>
  158.  
  159.  
  160. </p>
  161. </div>
  162. <div class="tyc-image-wrapper" style="margin-top:82px;display:flex;justify-content:center;
  163. align-items:center;flex-wrap:wrap;">
  164. </div>
  165. </div>
  166. `
  167.  
  168. let showBigImage = `
  169. <div class="show-big-image" style="position:fixed;left:30%;top:30%;z-index:2147483647;">
  170. </div>
  171. `
  172.  
  173. document.body.insertAdjacentHTML("afterbegin", imgContainer);
  174.  
  175.  
  176.  
  177. if (window.location.href.includes("hathitrust.org")) {
  178. //imgUrls=[];
  179.  
  180. let imgs = document.querySelectorAll(".image img");
  181. if (imgs.length > 0) {
  182. let canvas = document.createElement("canvas");
  183. imgUrls = [];
  184. for (let pi = 0; pi < imgs.length; pi++) {
  185. canvas.width = imgs[pi].width;
  186. canvas.height = imgs[pi].height;
  187.  
  188. canvas.getContext("2d").drawImage(imgs[pi], 0, 0);
  189.  
  190. imgUrls.push(canvas.toDataURL("image/png"));
  191. }
  192.  
  193. document.querySelector(".select-all").style = "position:relative;width:15px;height:15px;"
  194. } else {
  195.  
  196. }
  197. }
  198.  
  199.  
  200.  
  201. document.body.onclick = (e) => {
  202. //console.log(e);
  203. if ((e.target.nodeName == "IMG" && e.target.className === "tyc-image-preview")) {
  204. let imgContainer = e.path.find(
  205.  
  206. (ele) => {
  207. try {
  208. //console.log(ele);
  209. return ele.className.includes("tyc-img-item-container");
  210. }
  211. catch {
  212.  
  213. }
  214.  
  215. }
  216. )
  217. let path = imgContainer.getElementsByTagName("img")[0].src;
  218.  
  219. try {
  220. let container = document.querySelector(".show-big-image");
  221. if (container.getElementsByTagName("img")[0].src === path) {
  222. container.remove();
  223. return;
  224. } else {
  225. container.remove();
  226. }
  227. }
  228. catch {
  229.  
  230. }
  231. document.body.insertAdjacentHTML("beforeend", showBigImage);
  232.  
  233. let showItem = `<img src="${path}"/>`
  234.  
  235. document.querySelector(".show-big-image").insertAdjacentHTML("beforeend", showItem);
  236.  
  237. let tempImg = document.querySelector(".show-big-image img");
  238.  
  239. let dWidth = (window.innerWidth - tempImg.width) / 2;
  240. let dHeight = (window.innerHeight - tempImg.height) / 2;
  241.  
  242. document.querySelector(".show-big-image").style.left = dWidth + "px";
  243. document.querySelector(".show-big-image").style.top = dHeight + "px";
  244. } else if (e.target.parentElement.className === "show-big-image") {
  245. try {
  246. document.querySelector(".show-big-image").remove();
  247. }
  248. catch
  249. {
  250.  
  251. }
  252.  
  253. } else if (e.target.classList[1] == "bi-download" || e.path.find(isDownload) != undefined) {
  254. let imgContainer = e.path.find(
  255.  
  256. (ele) => {
  257. try {
  258. //console.log(ele);
  259. return ele.className.includes("tyc-img-item-container");
  260. }
  261. catch {
  262.  
  263. }
  264.  
  265. }
  266. )
  267. let path = imgContainer.getElementsByTagName("img")[0].src;
  268. let filename;
  269. if (path.indexOf("/") > 0)//如果包含有"/"号 从最后一个"/"号+1的位置开始截取字符串
  270. {
  271. filename = path.substring(path.lastIndexOf("/") + 1, path.lastIndexOf("."));
  272. }
  273. else {
  274. filename = path;
  275. }
  276. //console.log("download start" + path + " " + filename);
  277. GM_download(path, "pic");
  278. } else if (e.target.classList[1] == "bi-check" || e.path.find(isSelect) != undefined) {
  279. let checkSvg = e.path.find((ele) => ele.classList[1] === "bi-check");
  280. let currentImgIndex = parseInt(checkSvg.dataset.value);
  281.  
  282. let container = e.path.find((ele) => ele.className === `tyc-img-item-container-${currentImgIndex}`);
  283.  
  284.  
  285.  
  286. if (imgSelected.includes(currentImgIndex)) {
  287. imgSelected.splice(imgSelected.indexOf(currentImgIndex), 1);
  288. checkSvg.style.color = "black";
  289. container.style.border = "1px solid #99d";
  290. } else {
  291. imgSelected.push(currentImgIndex);
  292. checkSvg.style.color = "white";
  293. container.style.border = "1px solid white";
  294. }
  295.  
  296. /* if(document.querySelector(".zip-check").checked){
  297. GM_xmlhttpRequest({
  298. method:"get",
  299. url:tempImgUrls[currentImgIndex],
  300. responseType:"blob",
  301. onload:function(r){
  302. var blob = r.response;
  303. let oFileReader = new FileReader();
  304. oFileReader.onloadend = function (e) {
  305. let base64 = e.target.result;
  306. //console.log("方式一》》》》》》》》》", base64)
  307. tempImgUrls[currentImgIndex]=base64;
  308. };
  309. oFileReader.readAsDataURL(blob);
  310. //imgZip.file(filename+".jpg",r.response);
  311. //console.log(r.response);
  312. }
  313. });
  314. } */
  315.  
  316. document.querySelector(".num-tip").innerText = `已选(${imgSelected.length}/${imgUrls.length})张图片`;
  317. transIndexToLink(tempImgUrls);
  318. }
  319. }
  320.  
  321.  
  322. document.querySelector(".btn-close").onclick = (e) => {
  323. document.querySelector(".tyc-image-container").remove();
  324. }
  325.  
  326. document.querySelector(".btn-download").onclick = (e) => {
  327. /* if (document.querySelector(".select-all").checked) {
  328. imgUrls.forEach((img, index) => {
  329. GM_download(img, `pic-${index}`);
  330. });
  331. } else {
  332. alert("请勾选全选,下载全部,或者手动在图片上右键另存为指定图片");
  333. } */
  334.  
  335.  
  336. if (imgWaitDownload.length >= 1) {
  337. console.log(imgWaitDownload);
  338. imgWaitDownload.forEach(async (img, index) => {
  339. //let filename = `pic-${index}.jpg`;
  340. //filename=filename.replace(/\\/g, '/').replace(/\/{2,}/g, '/');
  341. await GM_download(img, `pic-${index}`);
  342. });
  343. } else {
  344. alert("请至少选中一张图片。");
  345. }
  346. }
  347.  
  348. document.querySelector(".btn-zipDownload").onclick = (e) => {
  349. if (zipImgWaitDownload.length >= 1) {
  350. console.log(zipImgWaitDownload);
  351. zipImgWaitDownload.forEach(async (img, index) => {
  352. let fileExt=img.substring(img.indexOf("image/")+6,img.indexOf(";"))
  353. let filename=`pic${index}.${fileExt}`;
  354. zipSubFoler.file(filename,img.split(",")[1],{base64:true});
  355. });
  356.  
  357. zipFolder.generateAsync({type:"blob"})
  358. .then(function(content) {
  359. // see FileSaver.js
  360. saveAs(content, "pics.zip");
  361. });
  362. } else {
  363. alert("请至少选中一张图片。");
  364. }
  365. }
  366.  
  367. document.body.onchange = (e) => {
  368. if (e.target.className.includes("width-check")) {
  369. GM_setValue('width-check', e.target.checked);
  370. }
  371. if (e.target.className.includes("height-check")) {
  372. GM_setValue('height-check', e.target.checked);
  373. }
  374. if (e.target.nodeName === "INPUT" && e.target.type === "text" && e.target.className.includes("value")) {
  375. GM_setValue(e.target.className, e.target.value);
  376. }
  377.  
  378.  
  379.  
  380. (e.target.className.includes("width-check") || e.target.className.includes("height-check") ||
  381.  
  382. (e.target.nodeName === "INPUT" && e.target.type === "text" && e.target.className.includes("value")))
  383. && (clean(), init());
  384.  
  385.  
  386.  
  387. }
  388.  
  389. document.querySelector(".select-all").onchange = (e) => {
  390. if (document.querySelector(".select-all").checked) {
  391. imgWaitDownload = tempImgUrls;
  392.  
  393. fetchImgAndTrans();
  394.  
  395.  
  396. } else {
  397. transIndexToLink(tempImgUrls);
  398. }
  399.  
  400. document.querySelector(".num-tip").innerText = `已选(${imgWaitDownload.length}/${imgUrls.length})张图片`;
  401. }
  402.  
  403. init();
  404. function init() {
  405. tempImgUrls = imgUrls;
  406. getSavedValue();
  407. if (document.querySelector(".width-check").checked) {
  408. tempImgUrls = tempImgUrls.filter(filterByWidth);
  409. }
  410.  
  411. if (document.querySelector(".height-check").checked) {
  412. tempImgUrls = tempImgUrls.filter(filterByHeight);
  413. }
  414.  
  415. showImage(tempImgUrls);
  416. }
  417.  
  418. function clean() {
  419. imgWaitDownload = [];
  420. imgSelected = [];
  421. document.querySelector(".num-tip").innerText = `已选(${imgSelected.length}/${imgUrls.length})张图片`;
  422. document.querySelector(".tyc-image-wrapper").innerHTML = "";
  423. }
  424.  
  425. function isDownload(ele) {
  426. return ele.className == "download-direct";
  427. }
  428.  
  429. function isSelect(ele) {
  430. return ele.className == "select-image";
  431. }
  432.  
  433. function transIndexToLink(tempImgUrls) {
  434. imgWaitDownload = [];
  435. imgSelected.forEach((imgIndex, index) => {
  436. imgWaitDownload.push(tempImgUrls[imgIndex]);
  437. });
  438. }
  439.  
  440. function showImage(filtedImgUrls) {
  441. filtedImgUrls.forEach((img, index) => {
  442. if (window.location.href.includes("huaban.com")) {
  443. if (img.includes("/webp")) {
  444. img = img.replace(/\/webp/g, "/png");
  445. }
  446.  
  447. }
  448. let insertImg = `<div class="tyc-img-item-container-${index}" style="text-align:center;font-size:0px;
  449. margin:5px;border:1px solid #99d;border-radius:3px;
  450. ">
  451. <img class="tyc-image-preview" src="${img}"/ style="width:auto;height:200px;"></div>`
  452. document.querySelector(".tyc-image-wrapper").insertAdjacentHTML("beforeend", insertImg);
  453. let naturalW = document.querySelector(`.tyc-img-item-container-${index} .tyc-image-preview`).naturalWidth;
  454. let naturalH = document.querySelector(`.tyc-img-item-container-${index} .tyc-image-preview`).naturalHeight;
  455.  
  456. let imgInfoContainer = `
  457. <div style="font-size:0px;background-color:rgba(100,100,100,0.6);height:30px;position:relative;">
  458. </div>
  459. `;
  460.  
  461. let thisImgContainer = document.querySelector(`.tyc-img-item-container-${index}`);
  462. let imgContainerWidth = thisImgContainer.getBoundingClientRect().width;
  463. let imgInfo = `
  464. <span style="font-size:16px;position:absolute;left:calc(50% - 80px);top:7px;">${naturalW}X${naturalH}</span>
  465. `;
  466.  
  467.  
  468. /*
  469. <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;">
  470. <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"/>
  471. </svg>*/
  472.  
  473. let downAndFullBtn = `
  474. <span style="position:absolute;right:calc(50% - 30px);top:2px;border:1px solid #333;
  475. width:26px;height:26px;border-radius:20px;" class="select-image" data-value="${index}">
  476. <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}">
  477. <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"/>
  478. </svg>
  479. </span>
  480. <span style="position:absolute;right:calc(50% - 60px);top:2px;border:1px solid #333;
  481. width:26px;height:26px;border-radius:20px;
  482. " class="download-direct">
  483. <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;">
  484. <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"/>
  485. <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"/>
  486. </svg>
  487. </span>
  488. `;
  489.  
  490. let downloadBtn = `
  491. <span style="position:absolute;right:calc(50% - 15px);top:2px;border:1px solid #333;
  492. width:26px;height:26px;border-radius:20px;
  493. " class="download-direct">
  494. <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;">
  495. <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"/>
  496. <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"/>
  497. </svg>
  498. </span>
  499. `
  500.  
  501.  
  502. thisImgContainer.insertAdjacentHTML("beforeend", imgInfoContainer);
  503.  
  504. let thisImgInfoContainer = thisImgContainer.querySelector("div");
  505.  
  506. let rectWidth = parseInt(thisImgContainer.getBoundingClientRect().width);
  507.  
  508. if (rectWidth > 120) {
  509. thisImgInfoContainer.insertAdjacentHTML("beforeend", imgInfo);
  510. thisImgInfoContainer.insertAdjacentHTML("beforeend", downAndFullBtn);
  511. } else if (rectWidth <= 120 && rectWidth >= 50) {
  512. thisImgInfoContainer.insertAdjacentHTML("beforeend", downAndFullBtn);
  513. thisImgInfoContainer.getElementsByClassName("select-image")[0].style.right = "50%";
  514. thisImgInfoContainer.getElementsByClassName("download-direct")[0].style.right = "calc(50% - 30px)";
  515.  
  516.  
  517. } else {
  518. thisImgInfoContainer.insertAdjacentHTML("beforeend", downloadBtn);
  519. }
  520.  
  521.  
  522. ////console.log(img);
  523. });
  524. }
  525.  
  526. function filterByWidth(src) {
  527. let tempImg = new Image();
  528. tempImg.src = src;
  529. if (tempImg.width >= parseInt(document.querySelector(".width-value-min").value)
  530. && tempImg.width <= parseInt(document.querySelector(".width-value-max").value)) {
  531. return src;
  532. }
  533. }
  534.  
  535. function filterByHeight(src) {
  536. let tempImg = new Image();
  537. tempImg.src = src;
  538. if (tempImg.height >= parseInt(document.querySelector(".height-value-min").value)
  539. && tempImg.height <= parseInt(document.querySelector(".height-value-max").value)) {
  540. return src;
  541. }
  542. }
  543.  
  544. function getSavedValue() {
  545. GM_getValue("width-check") && (document.querySelector(".width-check").checked = GM_getValue("width-check"));
  546. GM_getValue("height-check") && (document.querySelector(".height-check").checked = GM_getValue("height-check"));
  547. GM_getValue("width-value-min") && (document.querySelector(".width-value-min").value = GM_getValue("width-value-min"));
  548. GM_getValue("width-value-max") && (document.querySelector(".width-value-max").value = GM_getValue("width-value-max"));
  549. GM_getValue("height-value-min") && (document.querySelector(".height-value-min").value = GM_getValue("height-value-min"));
  550. GM_getValue("height-value-max") && (document.querySelector(".height-value-max").value = GM_getValue("height-value-max"));
  551.  
  552. }
  553.  
  554. function getImgAndChangeToBase64(currentImgIndex) {
  555. document.querySelector(".btn-zipDownload").disabled = true;
  556. document.querySelector(".btn-zipDownload").style.color = "grey";
  557. GM_xmlhttpRequest({
  558. method: "get",
  559. url: tempImgUrls[currentImgIndex],
  560. responseType: "blob",
  561. onload: function (r) {
  562. var blob = r.response;
  563. let oFileReader = new FileReader();
  564. oFileReader.onloadend = function (e) {
  565. let base64 = e.target.result;
  566. //console.log("方式一》》》》》》》》》", base64)
  567. //将原来的图片地址替换为base64编码的地址
  568. tempImgUrls[currentImgIndex] = base64;
  569.  
  570. document.querySelector(".btn-zipDownload").disabled = false;
  571. document.querySelector(".btn-zipDownload").style.color = "";
  572. };
  573. oFileReader.readAsDataURL(blob);
  574. //imgZip.file(filename+".jpg",r.response);
  575. //console.log(r.response);
  576.  
  577. }
  578. });
  579. }
  580.  
  581. function fetchImgAndTrans() {
  582. tempImgUrls.forEach((imgUrl, urlIndex) => {
  583. if(imgUrl.includes("data:image")){
  584. return;
  585. }
  586. GM_xmlhttpRequest({
  587. method: "get",
  588. url: imgUrl,
  589. responseType: "blob",
  590. onload: function (r) {
  591. var blob = r.response;
  592. let oFileReader = new FileReader();
  593. oFileReader.onloadend = function (e) {
  594. let base64 = e.target.result;
  595. //console.log("》》", base64)
  596.  
  597. if(base64.includes("data:image")){
  598. tempImgUrls[urlIndex] = base64;
  599. zipImgWaitDownload.push(base64);
  600. }
  601. };
  602. oFileReader.readAsDataURL(blob);
  603. }
  604. });
  605. })
  606. }
  607.  
  608. //获取base64格式的图片后缀名
  609. function getFileExt(imgUrl){
  610. //data:image/png;base64,iVBORw0KGgoAAAANSUhE
  611. return imgUrl.substring(imgUrl.indexOf("image/")+6,imgUrl.indexOf(";"));
  612. }
  613. }
  614.  
  615. })();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址