图片下载器

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

当前为 2022-01-06 提交的版本,查看 最新版本

  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(e.g.instagram).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 可以在绝大多数网站提取并批量下载图片。尤其是类似于千库网、包图网或者有妖气、腾讯漫画、b站漫画这种,不能右键保存图片或者保存的图片文件格式无法识别,均可以用脚本提取,然后用脚本提供的下载按钮,就可以下载到正确格式的图片文件。点击右键-tampermonkey-图片下载器-打开脚本(或快捷键alt+w),按这个顺序使用。(目前只适合chrome+tampermonkey,其他组合多少有问题)
  8. // @description:zh-TW 可以在绝大多数网站提取并批量下载图片。尤其是类似于千库网、包图网或者有妖气、腾讯漫画、b站漫画这种,不能右键保存图片或者保存的图片文件格式无法识别,均可以用脚本提取,然后用脚本提供的下载按钮,就可以下载到正确格式的图片文件。点击右键-tampermonkey-图片下载器-打开脚本(或快捷键alt+w),按这个顺序使用。(目前只适合chrome+tampermonkey,其他组合多少有问题)
  9. // @version 1.85
  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. (function () {
  31. 'use strict';
  32. var lang = navigator.appName == "Netscape" ? navigator.language : navigator.userLanguage;
  33. var langSet;
  34. var localization = {
  35. zh: {
  36. selectAll: "全选",
  37. downloadBtn: "下载",
  38. downloadMenuText: "打开脚本(Alt+w)",
  39. zipDownloadBtn: "zip下载"
  40. },
  41. en: {
  42. selectAll: "selectAll",
  43. downloadBtn: "download",
  44. downloadMenuText: "Open(Alt+w)",
  45. zipDownloadBtn: "zip Download"
  46. }
  47. }
  48. if (lang.toLowerCase().includes("zh-")) {
  49. langSet = localization.zh;
  50. } else {
  51. langSet = localization.en;
  52. }
  53. GM_registerMenuCommand(langSet.downloadMenuText, wrapper);
  54. hotkeys('alt+w', wrapper);
  55. function wrapper() {
  56. try {
  57. document.querySelector(".tyc-image-container").remove();
  58. } catch {
  59. }
  60. var imgUrls = [];
  61. var bodyStr = document.body.innerHTML;
  62. var imgSelected = [];
  63. var zipImgSelected = [];
  64. var imgWaitDownload = [];
  65. var zipImgWaitDownload = [];
  66. var widthFilter = { min: 0, max: 3000 };
  67. var heightFilter = { min: 0, max: 3000 };
  68. var filteredImgUrls = [];
  69. var zipFilteredImgUrls = [];
  70. try{
  71. var zipFolder = new JSZip();
  72. var zipSubFoler = zipFolder.folder('pics');
  73. }
  74. catch{
  75. }
  76. var fetchTip='';
  77. try {
  78. let imgEles = document.getElementsByTagName("img");
  79. let canvasEles=document.getElementsByTagName("canvas");
  80. for (let i = 0; i < imgEles.length; i++) {
  81. ////console.log(imgEles[i].src);
  82. if (!imgUrls.includes(imgEles[i].src)) {
  83. imgUrls.push(imgEles[i].src);
  84. } else if (!imgUrls.includes(imgEles[i].srcset)) {
  85. imgUrls.push(imgEles[i].srcset);
  86. }
  87. }
  88.  
  89. let imgRegs = bodyStr.match(/(?<=background-image:\s*url\()(\S+)(?=\))/g);
  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. if (window.location.href.includes("hathitrust.org")) {
  97. let imgs = document.querySelectorAll(".image img");
  98. if (imgs.length > 0) {
  99. let canvas = document.createElement("canvas");
  100. imgUrls = [];
  101. for (let pi = 0; pi < imgs.length; pi++) {
  102. canvas.width = imgs[pi].width;
  103. canvas.height = imgs[pi].height;
  104. canvas.getContext("2d").drawImage(imgs[pi], 0, 0);
  105. imgUrls.push(canvas.toDataURL("image/png"));
  106. }
  107. document.querySelector(".select-all").style = "position:relative;width:15px;height:15px;"
  108. } else {
  109. }
  110. }
  111. if(window.location.href.toString().includes("manga.bilibili.com/")){
  112. let iframeCanvas=`<iframe style="display:none;" id="tyc-insert-iframe"></iframe>`;
  113. if(document.getElementById("tyc-insert-iframe")==null){
  114. document.body.insertAdjacentHTML("afterbegin",iframeCanvas);
  115. document.getElementById("tyc-insert-iframe").contentDocument.body.insertAdjacentHTML("afterbegin",`<canvas id="tyc-insert-canvas"></canvas>`);
  116. document.body.getElementsByTagName('canvas')[0].__proto__.toBlob=document.getElementById("tyc-insert-iframe").contentDocument.getElementById("tyc-insert-canvas").__proto__.toBlob;
  117. }
  118. }
  119.  
  120.  
  121. let oldLength=imgUrls.length;
  122. if(canvasEles.length>0){
  123. fetchTip="准备抓取canvas图片";
  124. var completeFlag=0;
  125. for(let j=0;j<canvasEles.length;j++){
  126. canvasEles[j].toBlob(blobCallback);
  127. function blobCallback(blob){
  128. let oFileReader = new FileReader();
  129. oFileReader.onloadend = function (e) {
  130. let base64 = e.target.result;
  131. if (base64.includes("data:image")) {
  132. if (!imgUrls.includes(base64)) {
  133. //imgUrls.push(base64);
  134. imgUrls[oldLength+j]=base64;
  135. }
  136. completeFlag++;
  137. document.querySelector(".num-tip").innerText=`抓取canvas图片第${completeFlag}/${canvasEles.length}张`;
  138. if(completeFlag===canvasEles.length){
  139. clean();
  140. init();
  141. }
  142. }
  143. };
  144. oFileReader.readAsDataURL(blob);
  145. }
  146. }
  147. }else{
  148. fetchTip=`已选(0/${imgUrls.length})张图片`;
  149. }
  150. } catch {
  151. //alert("error");
  152. }
  153. let imgContainer = `
  154. <style>
  155. .tyc-image-container{
  156. position:fixed;
  157. top:0px;right:0px;width:50vw;z-index:2147483645;
  158. background-color: #dedede;
  159. border: 1px solid #aaa;
  160. overflow:scroll;height:100%;
  161. }
  162. .control-section{
  163. width:46vw;z-index:2147483646;
  164. position:fixed;right:30px;
  165. top:0px;display:block;
  166. height:80px;line-height:40px;
  167. background:#eee;border:1px solid #aaa;border-radius:2px;
  168. }
  169. .btn-download{
  170. border:1px solid #aaa;border-radius:5px;
  171. height:32px;line-height:32px;
  172. margin:0px;padding:0 5px;
  173. }
  174. .btn-zipDownload{
  175. border:1px solid #aaa;border-radius:5px;
  176. height:32px;line-height:32px;
  177. margin:0px;padding:0 5px;
  178. }
  179. .btn-close{
  180. font-size:20px;position:absolute;
  181. right:30px;top:4px;
  182. height:32px;line-height:32px;
  183. margin:0px;
  184. border-radius:10px;border:1px solid #aaa;
  185. width:30px;
  186. }
  187. .tyc-image-wrapper{
  188. margin-top:82px;display:flex;justify-content:center;
  189. align-items:center;flex-wrap:wrap;
  190. }
  191. .tyc-input-checkbox{
  192. background-color: initial;
  193. cursor: default;
  194. appearance: auto;
  195. box-sizing: border-box;
  196. margin: 3px 3px 3px 4px;
  197. padding: initial;
  198. border: initial;
  199. }
  200. </style>
  201. <div class="tyc-image-container">
  202. <div class="control-section">
  203. <input class="select-all tyc-input-checkbox" type="checkbox" name="select-all" value="select-all">${langSet.selectAll}
  204. <button class="btn-download" >${langSet.downloadBtn}</button>
  205. <button class="btn-zipDownload" >${langSet.zipDownloadBtn}</button>
  206. <span style="margin-left:10px;" class="num-tip">${fetchTip}</span>
  207. <button class="btn-close" >X</button>
  208. <p style="line-height:12px;">
  209. <div style="float:left;display:block;">
  210. <input type="checkbox" class="width-check img-check tyc-input-checkbox" name="width-check" value="width-check">Width:
  211. <input type="text" class="width-value-min" size="1" style="height:15px;width:50px;"
  212. min="0" max="9999" value="0">-
  213. <input type="text" class="width-value-max" size="1" style="height:15px;width:50px;"
  214. min="0" max="9999" value="3000">
  215. </div>
  216. <div style="float:left;margin-left:30px;display:block;">
  217. <input type="checkbox" class="height-check img-check tyc-input-checkbox" name="height-check" value="height-check">Height:
  218. <input type="text" class="height-value-min" size="1" style="height:15px;width:50px;"
  219. min="0" max="9999" value="0">-
  220. <input type="text" class="height-value-max" size="1" style="height:15px;width:50px;"
  221. min="0" max="9999" value="3000">
  222. </div>
  223. </p>
  224. </div>
  225. <div class="tyc-image-wrapper" >
  226. </div>
  227. </div>
  228. `
  229. let showBigImage = `
  230. <div class="show-big-image" style="position:fixed;left:30%;top:30%;z-index:2147483647;">
  231. </div>
  232. `
  233. document.body.insertAdjacentHTML("afterbegin", imgContainer);
  234. document.body.onclick = (e) => {
  235. //console.log(e);
  236. if ((e.target.nodeName == "IMG" && e.target.className === "tyc-image-preview")) {
  237. let imgContainer = e.path.find(
  238. (ele) => {
  239. try {
  240. //console.log(ele);
  241. return ele.className.includes("tyc-img-item-container");
  242. }
  243. catch {
  244. }
  245. }
  246. )
  247. let path = imgContainer.getElementsByTagName("img")[0].src;
  248. try {
  249. let container = document.querySelector(".show-big-image");
  250. if (container.getElementsByTagName("img")[0].src === path) {
  251. container.remove();
  252. return;
  253. } else {
  254. container.remove();
  255. }
  256. }
  257. catch {
  258. }
  259. document.body.insertAdjacentHTML("beforeend", showBigImage);
  260. let showItem = `<img src="${path}"/>`
  261. document.querySelector(".show-big-image").insertAdjacentHTML("beforeend", showItem);
  262. let tempImg = document.querySelector(".show-big-image img");
  263. let dWidth = (window.innerWidth - tempImg.width) / 2;
  264. let dHeight = (window.innerHeight - tempImg.height) / 2;
  265. document.querySelector(".show-big-image").style.left = dWidth + "px";
  266. document.querySelector(".show-big-image").style.top = dHeight + "px";
  267. } else if (e.target.parentElement.className === "show-big-image") {
  268. try {
  269. document.querySelector(".show-big-image").remove();
  270. }
  271. catch
  272. {
  273. }
  274. } else if (e.target.classList[1] == "bi-download" || e.path.find(isDownload) != undefined) {
  275. let imgContainer = e.path.find(
  276. (ele) => {
  277. try {
  278. //console.log(ele);
  279. return ele.className.includes("tyc-img-item-container");
  280. }
  281. catch {
  282. }
  283. }
  284. )
  285. let path = imgContainer.getElementsByTagName("img")[0].src;
  286. let filename;
  287. if (path.indexOf("/") > 0)//如果包含有"/"号 从最后一个"/"号+1的位置开始截取字符串
  288. {
  289. filename = path.substring(path.lastIndexOf("/") + 1, path.lastIndexOf("."));
  290. }
  291. else {
  292. filename = path;
  293. }
  294. //console.log("download start" + path + " " + filename);
  295. GM_download(path, "pic");
  296. } else if (e.target.classList[1] == "bi-check" || e.path.find(isSelect) != undefined) {
  297. let checkSvg = e.path.find((ele) => ele.classList[1] === "bi-check");
  298. let currentImgIndex = parseInt(checkSvg.dataset.value);
  299. let container = e.path.find((ele) => ele.className === `tyc-img-item-container-${currentImgIndex}`);
  300. if (imgSelected.includes(currentImgIndex)) {
  301. imgSelected.splice(imgSelected.indexOf(currentImgIndex), 1);
  302. checkSvg.style.color = "black";
  303. container.style.border = "1px solid #99d";
  304. } else {
  305. imgSelected.push(currentImgIndex);
  306. checkSvg.style.color = "white";
  307. container.style.border = "1px solid white";
  308. }
  309. zipImgSelected=imgSelected;
  310. document.querySelector(".num-tip").innerText = `已选(${imgSelected.length}/${imgUrls.length})张图片`;
  311. imgWaitDownload=transIndexToLink(filteredImgUrls,imgSelected);
  312. zipImgWaitDownload=transIndexToLink(zipFilteredImgUrls,zipImgSelected);
  313. zipImgWaitDownload=cutoffNotBase64Img(zipImgWaitDownload);
  314. }
  315. }
  316. document.querySelector(".btn-close").onclick = (e) => {
  317. document.querySelector(".tyc-image-container").remove();
  318. }
  319. document.querySelector(".btn-download").onclick = (e) => {
  320. if (imgWaitDownload.length >= 1) {
  321. console.log(imgWaitDownload);
  322. imgWaitDownload.forEach(async (img, index) => {
  323. //let filename = `pic-${index}.jpg`;
  324. //filename=filename.replace(/\\/g, '/').replace(/\/{2,}/g, '/');
  325. await GM_download(img, `pic-${index}`);
  326. });
  327. } else {
  328. alert("请至少选中一张图片。");
  329. }
  330. }
  331. document.querySelector(".btn-zipDownload").onclick = (e) => {
  332. if (zipImgWaitDownload.length >= 1) {
  333. //console.log(zipImgWaitDownload);
  334. zipImgWaitDownload.forEach(async (img, index) => {
  335. let fileExt = img.substring(img.indexOf("image/") + 6, img.indexOf(";"))
  336. fileExt=fileExt.includes("svg")?"svg":fileExt;
  337. let filename = `pic${index}.${fileExt}`;
  338. zipSubFoler.file(filename, img.split(",")[1], { base64: true });
  339. });
  340. zipFolder.generateAsync({ type: "blob" })
  341. .then(function (content) {
  342. // see FileSaver.js
  343. saveAs(content, "pics.zip");
  344. zipFolder.remove("pics");
  345. zipSubFoler = zipFolder.folder('pics');
  346. });
  347. } else {
  348. alert("请至少选中一张图片。");
  349. }
  350. }
  351. document.body.onchange = (e) => {
  352. if (e.target.className.includes("width-check")) {
  353. GM_setValue('width-check', e.target.checked);
  354. }
  355. if (e.target.className.includes("height-check")) {
  356. GM_setValue('height-check', e.target.checked);
  357. }
  358. if (e.target.nodeName === "INPUT" && e.target.type === "text" && e.target.className.includes("value")) {
  359. GM_setValue(e.target.className, e.target.value);
  360. }
  361. (e.target.className.includes("width-check") || e.target.className.includes("height-check") ||
  362. (e.target.nodeName === "INPUT" && e.target.type === "text" && e.target.className.includes("value")))
  363. && (clean(), init());
  364. }
  365. document.querySelector(".select-all").onchange = (e) => {
  366. if (document.querySelector(".select-all").checked) {
  367. imgWaitDownload = filteredImgUrls;
  368. zipImgWaitDownload=cutoffNotBase64Img(zipFilteredImgUrls);
  369. } else {
  370. imgWaitDownload=transIndexToLink(filteredImgUrls,imgSelected);
  371. zipImgWaitDownload=transIndexToLink(zipFilteredImgUrls,zipImgSelected);
  372. }
  373. document.querySelector(".num-tip").innerText = `已选(${imgWaitDownload.length}/${filteredImgUrls.length})张图片`;
  374. }
  375. init();
  376. function init() {
  377. filteredImgUrls = imgUrls;
  378. getSavedValue();
  379. if (document.querySelector(".width-check").checked) {
  380. filteredImgUrls = filteredImgUrls.filter(filterByWidth);
  381. }
  382. if (document.querySelector(".height-check").checked) {
  383. filteredImgUrls = filteredImgUrls.filter(filterByHeight);
  384. }
  385. zipFilteredImgUrls = filteredImgUrls;
  386. fetchBase64ImgsThenPushToZipArray();
  387. showImage(filteredImgUrls);
  388. }
  389. function clean() {
  390. imgWaitDownload = [];
  391. imgSelected = [];
  392. document.querySelector(".num-tip").innerText = `已选(${imgSelected.length}/${imgUrls.length})张图片`;
  393. document.querySelector(".tyc-image-wrapper").innerHTML = "";
  394. }
  395. function isDownload(ele) {
  396. return ele.className == "download-direct";
  397. }
  398. function isSelect(ele) {
  399. return ele.className == "select-image";
  400. }
  401. function transIndexToLink(WholeImgs,selectedImgs) {
  402. let transedImgs=[];
  403. selectedImgs.forEach((imgIndex, index) => {
  404. transedImgs.push(WholeImgs[imgIndex]);
  405. });
  406. return transedImgs;
  407. }
  408. function showImage(filtedImgUrls) {
  409. filtedImgUrls.forEach((img, index) => {
  410. if (window.location.href.includes("huaban.com")) {
  411. if (img.includes("/webp")) {
  412. img = img.replace(/\/webp/g, "/png");
  413. }
  414. }
  415. let insertImg = `<div class="tyc-img-item-container-${index}" style="text-align:center;font-size:0px;
  416. margin:5px;border:1px solid #99d;border-radius:3px;
  417. ">
  418. <img class="tyc-image-preview" src="${img}"/ style="width:auto;height:200px;"></div>`
  419. document.querySelector(".tyc-image-wrapper").insertAdjacentHTML("beforeend", insertImg);
  420. let naturalW = document.querySelector(`.tyc-img-item-container-${index} .tyc-image-preview`).naturalWidth;
  421. let naturalH = document.querySelector(`.tyc-img-item-container-${index} .tyc-image-preview`).naturalHeight;
  422. let imgInfoContainer = `
  423. <div style="font-size:0px;background-color:rgba(100,100,100,0.6);height:30px;position:relative;">
  424. </div>
  425. `;
  426. let thisImgContainer = document.querySelector(`.tyc-img-item-container-${index}`);
  427. let imgContainerWidth = thisImgContainer.getBoundingClientRect().width;
  428. let imgInfo = `
  429. <span style="font-size:16px;position:absolute;left:calc(50% - 80px);top:7px;">${naturalW}X${naturalH}</span>
  430. `;
  431. /*
  432. <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;">
  433. <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"/>
  434. </svg>*/
  435. let downAndFullBtn = `
  436. <span style="position:absolute;right:calc(50% - 30px);top:2px;border:1px solid #333;
  437. width:26px;height:26px;border-radius:20px;" class="select-image" data-value="${index}">
  438. <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}">
  439. <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"/>
  440. </svg>
  441. </span>
  442. <span style="position:absolute;right:calc(50% - 60px);top:2px;border:1px solid #333;
  443. width:26px;height:26px;border-radius:20px;
  444. " class="download-direct">
  445. <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;">
  446. <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"/>
  447. <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"/>
  448. </svg>
  449. </span>
  450. `;
  451. let downloadBtn = `
  452. <span style="position:absolute;right:calc(50% - 15px);top:2px;border:1px solid #333;
  453. width:26px;height:26px;border-radius:20px;
  454. " class="download-direct">
  455. <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;">
  456. <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"/>
  457. <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"/>
  458. </svg>
  459. </span>
  460. `
  461. thisImgContainer.insertAdjacentHTML("beforeend", imgInfoContainer);
  462. let thisImgInfoContainer = thisImgContainer.querySelector("div");
  463. let rectWidth = parseInt(thisImgContainer.getBoundingClientRect().width);
  464. if (rectWidth > 120) {
  465. thisImgInfoContainer.insertAdjacentHTML("beforeend", imgInfo);
  466. thisImgInfoContainer.insertAdjacentHTML("beforeend", downAndFullBtn);
  467. } else if (rectWidth <= 120 && rectWidth >= 50) {
  468. thisImgInfoContainer.insertAdjacentHTML("beforeend", downAndFullBtn);
  469. thisImgInfoContainer.getElementsByClassName("select-image")[0].style.right = "50%";
  470. thisImgInfoContainer.getElementsByClassName("download-direct")[0].style.right = "calc(50% - 30px)";
  471. } else {
  472. thisImgInfoContainer.insertAdjacentHTML("beforeend", downloadBtn);
  473. }
  474. ////console.log(img);
  475. });
  476. }
  477. function filterByWidth(src) {
  478. let tempImg = new Image();
  479. tempImg.src = src;
  480. if (tempImg.width >= parseInt(document.querySelector(".width-value-min").value)
  481. && tempImg.width <= parseInt(document.querySelector(".width-value-max").value)) {
  482. return src;
  483. }
  484. }
  485. function filterByHeight(src) {
  486. let tempImg = new Image();
  487. tempImg.src = src;
  488. if (tempImg.height >= parseInt(document.querySelector(".height-value-min").value)
  489. && tempImg.height <= parseInt(document.querySelector(".height-value-max").value)) {
  490. return src;
  491. }
  492. }
  493. function getSavedValue() {
  494. GM_getValue("width-check") && (document.querySelector(".width-check").checked = GM_getValue("width-check"));
  495. GM_getValue("height-check") && (document.querySelector(".height-check").checked = GM_getValue("height-check"));
  496. GM_getValue("width-value-min") && (document.querySelector(".width-value-min").value = GM_getValue("width-value-min"));
  497. GM_getValue("width-value-max") && (document.querySelector(".width-value-max").value = GM_getValue("width-value-max"));
  498. GM_getValue("height-value-min") && (document.querySelector(".height-value-min").value = GM_getValue("height-value-min"));
  499. GM_getValue("height-value-max") && (document.querySelector(".height-value-max").value = GM_getValue("height-value-max"));
  500. }
  501. function fetchBase64ImgsThenPushToZipArray() {
  502. zipFilteredImgUrls.forEach((imgUrl, urlIndex) => {
  503. if (imgUrl.includes("data:image")) {
  504. return;
  505. }
  506. fetch(imgUrl,{
  507. method: "get",
  508. mode: 'cors'
  509. }).then(response=>{
  510. if (!response.ok) {
  511. throw new Error('Network response was not OK');
  512. }
  513. return response.blob();
  514. }).then(myBlob=>{
  515. var blob = myBlob
  516. let oFileReader = new FileReader();
  517. oFileReader.onloadend = function (e) {
  518. let base64 = e.target.result;
  519. //console.log("》》", base64)
  520. if (base64.includes("data:image")) {
  521. zipFilteredImgUrls[urlIndex] = base64;
  522. //zipImgWaitDownload.push(base64);
  523. }
  524. };
  525. oFileReader.readAsDataURL(blob);
  526. })
  527. .catch((error)=>{
  528. GM_xmlhttpRequest({
  529. method: "get",
  530. url: imgUrl,
  531. responseType: "blob",
  532. onload: function (r) {
  533. var blob = r.response;
  534. let oFileReader = new FileReader();
  535. oFileReader.onloadend = function (e) {
  536. let base64 = e.target.result;
  537. if (base64.includes("data:image")) {
  538. zipFilteredImgUrls[urlIndex] = base64;
  539. //zipImgWaitDownload.push(base64);
  540. }
  541. };
  542. oFileReader.readAsDataURL(blob);
  543. }
  544. });
  545. })
  546. })
  547. }
  548. function cutoffNotBase64Img(imgsUrlArray) {
  549. let resultArr = [];
  550. imgsUrlArray.forEach((imgUrl, urlIndex) => {
  551. if (imgUrl.includes("data:image")) {
  552. resultArr.push(imgUrl);
  553. }
  554. }
  555. );
  556. return resultArr;
  557. }
  558. }
  559. })();

QingJ © 2025

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