图片下载器

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

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

  1. // ==UserScript==
  2. // @name Image Downloader
  3. // @name:zh-CN 图片下载器
  4. // @name:zh-TW 图片下载器
  5. // @name:ja 画像ダウンローダー
  6. // @name:ko 이미지 다운로더
  7. // @name:de Image Downloader
  8. // @name:es Image Downloader
  9. // @name:eo Image Downloader
  10. // @name:fr Image Downloader
  11. // @name:it Image Downloader
  12. // @name:ru Image Downloader
  13. // @name:vi Image Downloader
  14. // @name:pt-BR Image Downloader
  15. // @name:id Image Downloader
  16. // @name:ar Image Downloader
  17. // @name:bg Image Downloader
  18. // @name:cs Image Downloader
  19. // @name:tr Image Downloader
  20. // @name:el Image Downloader
  21. // @name:hu Image Downloader
  22. // @name:th Image Downloader
  23. // @namespace http://tampermonkey.net/
  24. // @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)
  25. // @description:zh-CN 可以在绝大多数网站提取并批量下载图片。尤其是类似于千库网、包图网或者有妖气、腾讯漫画、b站漫画这种,不能右键保存图片或者保存的图片文件格式无法识别,均可以用脚本提取,然后用脚本提供的下载按钮,就可以下载到正确格式的图片文件。点击右键-tampermonkey-图片下载器-打开脚本(或快捷键alt+w),按这个顺序使用。(目前只适合chrome+tampermonkey,其他组合多少有问题)
  26. // @description:zh-TW 可以在绝大多数网站提取并批量下载图片。尤其是类似于千库网、包图网或者有妖气、腾讯漫画、b站漫画这种,不能右键保存图片或者保存的图片文件格式无法识别,均可以用脚本提取,然后用脚本提供的下载按钮,就可以下载到正确格式的图片文件。点击右键-tampermonkey-图片下载器-打开脚本(或快捷键alt+w),按这个顺序使用。(目前只适合chrome+tampermonkey,其他组合多少有问题)
  27. // @description:ja 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)
  28. // @description:ko 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)
  29. // @description:de 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)
  30. // @description:es 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)
  31. // @description:eo 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)
  32. // @description:fr 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)
  33. // @description:it 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)
  34. // @description:ru 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)
  35. // @description:vi 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)
  36. // @description:pt-BR 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)
  37. // @description:id 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)
  38. // @description:ar 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)
  39. // @description:bg 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)
  40. // @description:cs 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)
  41. // @description:tr 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)
  42. // @description:el 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)
  43. // @description:hu 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)
  44. // @description:th 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)
  45. // @version 1.95
  46. // @author 桃源隐叟
  47. // @include *
  48. // @connect *
  49. // @grant GM_openInTab
  50. // @grant GM_registerMenuCommand
  51. // @grant GM_setValue
  52. // @grant GM_getValue
  53. // @grant GM_xmlhttpRequest
  54. // @grant GM_download
  55. // @require https://cdn.jsdelivr.net/npm/hotkeys-js@3.7.2/dist/hotkeys.min.js
  56. // @require https://cdn.bootcss.com/jszip/3.7.1/jszip.min.js
  57. // @require https://cdn.bootcss.com/FileSaver.js/1.3.8/FileSaver.min.js
  58. // @run-at document-end
  59. // @match *
  60. // @match https://www.bilibili.com/
  61. // @match https://588ku.com/
  62. // @homepageURL https://github.com/taoyuancun123/modifyText/blob/master/modifyText.js
  63. // @supportURL https://gf.qytechs.cn/zh-CN/scripts/419894/feedback
  64. // @license GPLv3
  65. // ==/UserScript==
  66. (function () {
  67. 'use strict';
  68. var lang = navigator.appName == "Netscape" ? navigator.language : navigator.userLanguage;
  69. var langSet;
  70. var localization = {
  71. zh: {
  72. selectAll: "全选",
  73. downloadBtn: "下载",
  74. downloadMenuText: "打开脚本(Alt+w)",
  75. zipDownloadBtn: "zip下载",
  76. selectAlert:"请至少选中一张图片。",
  77. fetchTip:"准备抓取canvas图片",
  78. fetchCount1:`抓取canvas图片第`,
  79. fetchCount2:'张',
  80. fetchDoneTip1:"已选(0/",
  81. fetchDoneTip1Type2:"已选(",
  82. fetchDoneTip2:")张图片",
  83. },
  84. en: {
  85. selectAll: "selectAll",
  86. downloadBtn: "download",
  87. downloadMenuText: "Open(Alt+w)",
  88. zipDownloadBtn: "zip Download",
  89. selectAlert:"Please at last select one image.",
  90. fetchTip:"Ready to fetch canvas image.",
  91. fetchCount1:`Fetch the`,
  92. fetchCount2:' canvas image.',
  93. fetchDoneTip1:"(0/",
  94. fetchDoneTip1Type2:"(",
  95. fetchDoneTip2:") Images selected",
  96. }
  97. }
  98. if (lang.toLowerCase().includes("zh-")) {
  99. langSet = localization.zh;
  100. } else {
  101. langSet = localization.en;
  102. }
  103.  
  104. const autoBigImage={
  105. bigImageArray:[],
  106. defaultRules:[
  107. {originReg:/(?<=(.+sinaimg\.(?:cn|com)\/))([\w\.]+)(?=(\/.+))/i,replacement:"large"},
  108. {originReg:/(?<=(.+alicdn\.(?:cn|com)\/.+\.(jpg|jpeg|gif|png|bmp|webp)))_.+/i,replacement:""},
  109. {originReg:/(.+alicdn\.(?:cn|com)\/.+)(\.\d+x\d+)(\.(jpg|jpeg|gif|png|bmp|webp)).*/i,replacement:(match,p1,p2,p3)=>p1+p3},
  110. {originReg:/(?<=(.+360buyimg\.(?:cn|com)\/))(\w+\/)(?=(.+\.(jpg|jpeg|gif|png|bmp|webp)))/i,replacement:"n0/"},
  111. {originReg:/(?<=(.+hdslb\.(?:cn|com)\/.+\.(jpg|jpeg|gif|png|bmp|webp)))@.+/i,replacement:""},
  112. ],
  113. replace(originImgUrls){
  114. let that=this;
  115. that.bigImageArray=[];
  116. let tempArray=Array.from(new Set(originImgUrls));
  117. //console.log(that.bigImageArray);
  118. tempArray.forEach(replaceByReg);
  119. function replaceByReg(urlStr,urlIndex){
  120. if(urlStr.includes("data:image/"))return;
  121. that.defaultRules.forEach((rule,ruleIndex)=>{
  122. let bigImage=urlStr.replace(rule.originReg,rule.replacement);
  123. if(bigImage!==urlStr){
  124. that.bigImageArray.push(urlStr);
  125. that.bigImageArray.push(bigImage);
  126. }else{
  127. that.bigImageArray.push(urlStr);
  128. }
  129. })
  130. }
  131. },
  132. getBigImageArray(originImgUrls){
  133. this.replace(originImgUrls);
  134. let uniqueArray=Array.from(new Set(this.bigImageArray));
  135. return uniqueArray;
  136. },
  137. showRules(){
  138.  
  139. }
  140. }
  141. GM_registerMenuCommand(langSet.downloadMenuText, wrapper);
  142. hotkeys('alt+w', wrapper);
  143. function wrapper() {
  144. try {
  145. document.querySelector(".tyc-image-container").remove();
  146. } catch {
  147. }
  148. var imgUrls = [];
  149. var bodyStr = document.body.innerHTML;
  150. var imgSelected = [];
  151. var zipImgSelected = [];
  152. var imgWaitDownload = [];
  153. var zipImgWaitDownload = [];
  154. var widthFilter = { min: 0, max: 3000 };
  155. var heightFilter = { min: 0, max: 3000 };
  156. var filteredImgUrls = [];
  157. var zipFilteredImgUrls = [];
  158. try{
  159. var zipFolder = new JSZip();
  160. var zipSubFoler = zipFolder.folder('pics');
  161. }
  162. catch{
  163. }
  164. var fetchTip='';
  165. try {
  166. let imgEles = document.getElementsByTagName("img");
  167. let canvasEles=document.getElementsByTagName("canvas");
  168. for (let i = 0; i < imgEles.length; i++) {
  169. ////console.log(imgEles[i].src);
  170. if (!imgUrls.includes(imgEles[i].src)) {
  171. imgUrls.push(imgEles[i].src);
  172. } else if (!imgUrls.includes(imgEles[i].srcset)) {
  173. imgUrls.push(imgEles[i].srcset);
  174. }
  175. }
  176. let imgRegs = bodyStr.match(/(?<=background-image:\s*url\()(\S+)(?=\))/g);
  177. for (let i = 0; i < imgRegs.length; i++) {
  178. ////console.log(imgRegs[i]);
  179. if (!imgUrls.includes(imgRegs[i].replace(/&quot;/g, ""))) {
  180. imgUrls.push(imgRegs[i].replace(/&quot;/g, ""));
  181. }
  182. }
  183. if (window.location.href.includes("hathitrust.org")) {
  184. let imgs = document.querySelectorAll(".image img");
  185. if (imgs.length > 0) {
  186. let canvas = document.createElement("canvas");
  187. imgUrls = [];
  188. for (let pi = 0; pi < imgs.length; pi++) {
  189. canvas.width = imgs[pi].width;
  190. canvas.height = imgs[pi].height;
  191. canvas.getContext("2d").drawImage(imgs[pi], 0, 0);
  192. imgUrls.push(canvas.toDataURL("image/png"));
  193. }
  194. document.querySelector(".select-all").style = "position:relative;width:15px;height:15px;"
  195. } else {
  196. }
  197. }
  198. if(window.location.href.toString().includes("manga.bilibili.com/")){
  199. let iframeCanvas=`<iframe style="display:none;" id="tyc-insert-iframe"></iframe>`;
  200. if(document.getElementById("tyc-insert-iframe")==null){
  201. document.body.insertAdjacentHTML("afterbegin",iframeCanvas);
  202. document.getElementById("tyc-insert-iframe").contentDocument.body.insertAdjacentHTML("afterbegin",`<canvas id="tyc-insert-canvas"></canvas>`);
  203. document.body.getElementsByTagName('canvas')[0].__proto__.toBlob=document.getElementById("tyc-insert-iframe").contentDocument.getElementById("tyc-insert-canvas").__proto__.toBlob;
  204. }
  205. }
  206. let oldLength=imgUrls.length;
  207. if(canvasEles.length>0){
  208. fetchTip=langSet.fetchTip;
  209. var completeFlag=0;
  210. for(let j=0;j<canvasEles.length;j++){
  211. canvasEles[j].toBlob(blobCallback);
  212. function blobCallback(blob){
  213. let oFileReader = new FileReader();
  214. oFileReader.onloadend = function (e) {
  215. let base64 = e.target.result;
  216. if (base64.includes("data:image")) {
  217. if (!imgUrls.includes(base64)) {
  218. //imgUrls.push(base64);
  219. imgUrls[oldLength+j]=base64;
  220. }
  221. completeFlag++;
  222. document.querySelector(".num-tip").innerText=`${langSet.fetchCount1} ${completeFlag}/${canvasEles.length} ${langSet.fetchCount2}`;
  223. if(completeFlag===canvasEles.length){
  224. clean();
  225. init();
  226. }
  227. }
  228. };
  229. oFileReader.readAsDataURL(blob);
  230. }
  231. }
  232. }else{
  233. fetchTip=`${langSet.fetchDoneTip1}${imgUrls.length}${langSet.fetchDoneTip2}`;
  234. }
  235. } catch {
  236. //alert("error");
  237. }
  238. let imgContainer = `
  239. <style>
  240. .tyc-image-container{
  241. position:fixed;
  242. top:0px;
  243. left:10%;
  244. width:80vw;
  245. z-index:2147483645;
  246. background-color: #dedede;
  247. border: 1px solid #aaa;
  248. overflow:scroll;height:100%;
  249. }
  250. .tyc-image-container button{
  251. border:1px solid #aaa;
  252. border-radius:5px;
  253. height:32px;line-height:32px;
  254. margin:0px;padding:0 5px;
  255. }
  256. .tyc-image-container button:hover{
  257. background-color: #f50;
  258. color: #fff;
  259. }
  260. .control-section{
  261. width:80vw;
  262. z-index:2147483646;
  263. position:fixed;
  264. top:0px;
  265. left:10%;
  266. display: flex;
  267. flex-direction: column;
  268. justify-content: center;
  269. line-height:40px;
  270. background:#eee;border:1px solid #aaa;border-radius:2px;
  271. }
  272. .control-section-sub{
  273. display: flex;
  274. margin-bottom: 5px;
  275. }
  276. .tyc-normal-section{
  277. display: flex;
  278. align-items: center;
  279. flex-direction: row;
  280. justify-content: flex-start;
  281. flex-wrap: nowrap;
  282. align-content: normal;
  283. }
  284. .btn-download{
  285. border:1px solid #aaa;border-radius:5px;
  286. height:32px;line-height:32px;
  287. margin:0px;padding:0 5px;
  288. }
  289. .btn-zipDownload{
  290. border:1px solid #aaa;border-radius:5px;
  291. height:32px;line-height:32px;
  292. margin:0px;padding:0 5px;
  293. }
  294. .btn-close{
  295. font-size:20px;position:absolute;
  296. right:30px;top:4px;
  297. height:32px;line-height:32px;
  298. margin:0px;
  299. border-radius:10px;border:1px solid #aaa;
  300. width:30px;
  301. }
  302. .tyc-image-wrapper{
  303. margin-top:82px;display:flex;justify-content:center;
  304. align-items:center;flex-wrap:wrap;
  305. }
  306. .tyc-input-checkbox{
  307. background-color: initial;
  308. cursor: default;
  309. appearance: auto;
  310. box-sizing: border-box;
  311. margin: 3px 3px 3px 4px;
  312. padding: initial;
  313. border: initial;
  314. }
  315. .tyc-extend-set{
  316. padding: 10px;
  317. border-top: 1px solid rgba(100,100,100,0.1);
  318. }
  319. .tyc-extend-set{
  320. display: none;
  321. align-items: stretch;
  322. flex-direction: column;
  323. justify-content: flex-start;
  324. flex-wrap: nowrap;
  325. padding: 5px;
  326. width: auto;
  327. }
  328. .tyc-extend-set-container{
  329. display: flex;
  330. align-items: flex-start;
  331. flex-direction: column;
  332. justify-content: flex-start;
  333. flex-wrap: nowrap;
  334. align-content: normal;
  335. border: 1px solid rgba(100,100,100,0.5);
  336. padding: 5px;
  337. margin-bottom: 5px;
  338. }
  339. .tyc-autobigimg-set{
  340. display: flex;
  341. align-items: flex-start;
  342. flex-direction: column;
  343. justify-content: flex-start;
  344. flex-wrap: nowrap;
  345. align-content: normal;
  346. border: 1px solid rgba(100,100,100,0.5);
  347. padding: 5px;
  348. }
  349. .tyc-set-domain{
  350. display: flex;
  351. align-items: flex-start;
  352. flex-direction: column;
  353. justify-content: flex-start;
  354. flex-wrap: nowrap;
  355. align-content: normal;
  356. margin: 5px;
  357. padding: 5px;
  358. border: 1px solid rgba(100,100,100,0.3);
  359. width: 95%;
  360. }
  361. .tyc-abi-title{
  362. display: flex;
  363. flex-direction: row;
  364. align-items: center;
  365. justify-content: space-between;
  366. width: 100%;
  367. }
  368. .tyc-abi-domain-title{
  369. display: flex;
  370. flex-direction: row;
  371. align-items: center;
  372. justify-content: space-between;
  373. width: 95%;
  374. border-bottom: 1px solid #ddd;
  375. }
  376. .tyc-set-replacerule{
  377. display: flex;
  378. flex-direction: row;
  379. justify-content: flex-start;
  380. align-items: center;
  381. margin-bottom: 3px;
  382. flex-wrap: wrap;
  383. }
  384. .tyc-set-replacerule *,.tyc-set-replacerule button{
  385. margin-left: 5px;
  386. }
  387. </style>
  388. <div class="tyc-image-container">
  389. <div class="control-section">
  390. <div class="control-section-sub tyc-normal-section">
  391. <input class="select-all tyc-input-checkbox" type="checkbox" name="select-all" value="select-all">${langSet.selectAll}
  392. <button class="btn-download" style="margin-left:5px;">${langSet.downloadBtn}</button>
  393. <button class="btn-zipDownload" style="margin-left:5px;">${langSet.zipDownloadBtn}</button>
  394. <span style="margin-left:10px;" class="num-tip">${langSet.fetchDoneTip1}${imgUrls.length}${langSet.fetchDoneTip2}</span>
  395. <button cstyle="margin-left:10px;" class="btn-close" >X</button>
  396. </div>
  397. <div style="line-height:12px;" class="control-section-sub tyc-normal-section">
  398. <div style="float:left;display:block;">
  399. <input type="checkbox" class="width-check img-check tyc-input-checkbox" name="width-check" value="width-check">Width:
  400. <input type="text" class="width-value-min" size="1" style="height:15px;width:50px;"
  401. min="0" max="9999" value="0">-
  402. <input type="text" class="width-value-max" size="1" style="height:15px;width:50px;"
  403. min="0" max="9999" value="3000">
  404. </div>
  405. <div style="float:left;margin-left:30px;display:block;">
  406. <input type="checkbox" class="height-check img-check tyc-input-checkbox" name="height-check" value="height-check">Height:
  407. <input type="text" class="height-value-min" size="1" style="height:15px;width:50px;"
  408. min="0" max="9999" value="0">-
  409. <input type="text" class="height-value-max" size="1" style="height:15px;width:50px;"
  410. min="0" max="9999" value="3000">
  411. </div>
  412. <div style="float:left;margin-left:30px;display:block;" class="tyc-cors">
  413. <span class="tyc-tip" style="display: none;
  414. position: absolute;
  415. top: 5px;
  416. left: 50px;
  417. white-space: nowrap;
  418. background: rgb(204, 204, 204);
  419. border: 1px solid rgb(150, 150, 150);
  420. border-radius: 3px;
  421. padding: 5px;">勾选使用zip下载后,会请求跨域权限,否则zip下载基本下载不到图片。
  422. </span>
  423. <input type="checkbox" class="cors-check img-check tyc-input-checkbox" name="cors-check" value="cors-check">
  424. <span>使用zip下载</span>
  425. </div>
  426. <div style="float:left;margin-left:30px;display:block;" class="tyc-extend-btn">
  427. <span>更多设置 </span>
  428. <span style="top: 3px;position: relative;">
  429. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-double-down" viewBox="0 0 16 16">
  430. <path fill-rule="evenodd" d="M1.646 6.646a.5.5 0 0 1 .708 0L8 12.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
  431. <path fill-rule="evenodd" d="M1.646 2.646a.5.5 0 0 1 .708 0L8 8.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
  432. </svg>
  433. </span>
  434. </div>
  435. </div>
  436. <div class="tyc-extend-set control-section-sub">
  437. <div class="tyc-autobigimg-set tyc-extend-set-container">
  438. <div class="tyc-abi-title">
  439. <div>
  440. <input type="checkbox" name="sites" class="tyc-show-in-menu">开启自动大图
  441. </div>
  442. <div>
  443. <button>新增规则</button>
  444. </div>
  445. </div>
  446. <div class="tyc-set-domain">
  447. <div class="tyc-set-replacerule">
  448. <input type="checkbox" name="sites" class="tyc-show-in-menu">
  449. <input type="text" name="title" placeholder="输入待替换正则" class="tyc-search-title">
  450. <input type="text" name="urls" placeholder="输入替换它的字符串或者函数" class="tyc-search-url">
  451. <button class="tyc-delete">删除</button>
  452. </div>
  453. <div class="tyc-set-replacerule">
  454. <input type="checkbox" name="sites" class="tyc-show-in-menu">
  455. <input type="text" name="title" placeholder="输入将显示在菜单中的提示名" class="tyc-search-title">
  456. <input type="text" name="urls" placeholder="参考其他例子,输入除关键词外的网址部分" class="tyc-search-url">
  457. <button class="tyc-delete">删除</button>
  458. </div>
  459. </div>
  460. </div>
  461. </div>
  462. </div>
  463. <div class="tyc-image-wrapper" >
  464. </div>
  465. </div>`
  466. let showBigImage = `
  467. <div class="show-big-image" style="position:fixed;left:30%;top:30%;z-index:2147483647;">
  468. </div>
  469. `
  470. document.body.insertAdjacentHTML("afterbegin", imgContainer);
  471. document.body.onclick = (e) => {
  472. //console.log(e);
  473. if ((e.target.nodeName == "IMG" && e.target.className === "tyc-image-preview")) {
  474. let imgContainer = e.path.find(
  475. (ele) => {
  476. try {
  477. //console.log(ele);
  478. return ele.className.includes("tyc-img-item-container");
  479. }
  480. catch {
  481. }
  482. }
  483. )
  484. let path = imgContainer.getElementsByTagName("img")[0].src;
  485. try {
  486. let container = document.querySelector(".show-big-image");
  487. if (container.getElementsByTagName("img")[0].src === path) {
  488. container.remove();
  489. return;
  490. } else {
  491. container.remove();
  492. }
  493. }
  494. catch {
  495. }
  496. document.body.insertAdjacentHTML("beforeend", showBigImage);
  497. let showItem = `<img src="${path}"/>`
  498. document.querySelector(".show-big-image").insertAdjacentHTML("beforeend", showItem);
  499. let tempImg = document.querySelector(".show-big-image img");
  500. let dWidth = (window.innerWidth - tempImg.width) / 2;
  501. let dHeight = (window.innerHeight - tempImg.height) / 2;
  502. document.querySelector(".show-big-image").style.left = dWidth + "px";
  503. document.querySelector(".show-big-image").style.top = dHeight + "px";
  504. } else if (e.target.parentElement.className === "show-big-image") {
  505. try {
  506. document.querySelector(".show-big-image").remove();
  507. }
  508. catch
  509. {
  510. }
  511. } else if (e.target.classList[1] == "bi-download" || e.path.find(isDownload) != undefined) {
  512. let imgContainer = e.path.find(
  513. (ele) => {
  514. try {
  515. //console.log(ele);
  516. return ele.className.includes("tyc-img-item-container");
  517. }
  518. catch {
  519. }
  520. }
  521. )
  522. let path = imgContainer.getElementsByTagName("img")[0].src;
  523. let filename;
  524. if (path.indexOf("/") > 0)//如果包含有"/"号 从最后一个"/"号+1的位置开始截取字符串
  525. {
  526. filename = path.substring(path.lastIndexOf("/") + 1, path.lastIndexOf("."));
  527. }
  528. else {
  529. filename = path;
  530. }
  531. //console.log("download start" + path + " " + filename);
  532. GM_download(path, "pic");
  533. } else if (e.target.classList[1] == "bi-check" || e.path.find(isSelect) != undefined) {
  534. let checkSvg = e.path.find((ele) => ele.classList[1] === "bi-check");
  535. let currentImgIndex = parseInt(checkSvg.dataset.value);
  536. let container = e.path.find((ele) => ele.className === `tyc-img-item-container-${currentImgIndex}`);
  537. if (imgSelected.includes(currentImgIndex)) {
  538. imgSelected.splice(imgSelected.indexOf(currentImgIndex), 1);
  539. checkSvg.style.color = "black";
  540. container.style.border = "1px solid #99d";
  541. } else {
  542. imgSelected.push(currentImgIndex);
  543. checkSvg.style.color = "white";
  544. container.style.border = "1px solid white";
  545. }
  546. zipImgSelected=imgSelected;
  547. document.querySelector(".num-tip").innerText = `${langSet.fetchDoneTip1Type2}${imgSelected.length}/${imgUrls.length}${langSet.fetchDoneTip2}`;
  548. imgWaitDownload=transIndexToLink(filteredImgUrls,imgSelected);
  549. zipImgWaitDownload=transIndexToLink(zipFilteredImgUrls,zipImgSelected);
  550. zipImgWaitDownload=cutoffNotBase64Img(zipImgWaitDownload);
  551. }
  552. }
  553. document.querySelector(".btn-close").onclick = (e) => {
  554. document.querySelector(".tyc-image-container").remove();
  555. }
  556. document.querySelector(".btn-download").onclick = (e) => {
  557. if (imgWaitDownload.length >= 1) {
  558. //console.log(imgWaitDownload);
  559. imgWaitDownload.forEach(async (img, index) => {
  560. //let filename = `pic-${index}.jpg`;
  561. //filename=filename.replace(/\\/g, '/').replace(/\/{2,}/g, '/');
  562. await GM_download(img, `pic-${index}`);
  563. });
  564. } else {
  565. alert(`${langSet.selectAlert}`);
  566. }
  567. }
  568. document.querySelector(".btn-zipDownload").onclick = (e) => {
  569. //console.log(zipImgWaitDownload);
  570. try {
  571. if (zipImgWaitDownload.length >= 1) {
  572. //console.log(zipImgWaitDownload);
  573. zipImgWaitDownload.forEach(async (img, index) => {
  574. let fileExt = img.substring(img.indexOf("image/") + 6, img.indexOf(";"))
  575. fileExt=fileExt.includes("svg")?"svg":fileExt;
  576. let filename = `pic${index}.${fileExt}`;
  577. zipSubFoler.file(filename, img.split(",")[1], { base64: true });
  578. });
  579. zipFolder.generateAsync({ type: "blob" })
  580. .then(function (content) {
  581. // see FileSaver.js
  582. saveAs(content, "pics.zip");
  583. zipFolder.remove("pics");
  584. zipSubFoler = zipFolder.folder('pics');
  585. });
  586. } else {
  587. alert(`${langSet.selectAlert}`);
  588. }
  589. } catch (error) {
  590. //console.log(error);
  591. }
  592.  
  593. }
  594. document.querySelector(".tyc-cors").onmouseover=e=>{
  595. e.preventDefault();
  596. document.querySelector(".tyc-tip").style.display="block";
  597. }
  598. document.querySelector(".tyc-cors").onmouseout=e=>{
  599. e.preventDefault();
  600. document.querySelector(".tyc-tip").style.display="none";
  601. }
  602. document.body.onchange = (e) => {
  603. if (e.target.className.includes("width-check")) {
  604. GM_setValue('width-check', e.target.checked);
  605. }
  606. if (e.target.className.includes("height-check")) {
  607. GM_setValue('height-check', e.target.checked);
  608. }
  609. if (e.target.className.includes("cors-check")) {
  610. GM_setValue('cors-check', e.target.checked);
  611. if (document.querySelector(".cors-check").checked) {
  612. fetchBase64ImgsThenPushToZipArray();
  613. }
  614. }
  615. if (e.target.nodeName === "INPUT" && e.target.type === "text" && e.target.className.includes("value")) {
  616. GM_setValue(e.target.className, e.target.value);
  617. }
  618. (e.target.className.includes("width-check") || e.target.className.includes("height-check") ||
  619. (e.target.nodeName === "INPUT" && e.target.type === "text" && e.target.className.includes("value")))
  620. && (clean(), init());
  621. }
  622. document.querySelector(".select-all").onchange = (e) => {
  623. if (document.querySelector(".select-all").checked) {
  624. imgWaitDownload = filteredImgUrls;
  625. zipImgWaitDownload=cutoffNotBase64Img(zipFilteredImgUrls);
  626. } else {
  627. imgWaitDownload=transIndexToLink(filteredImgUrls,imgSelected);
  628. zipImgWaitDownload=transIndexToLink(zipFilteredImgUrls,zipImgSelected);
  629. }
  630. document.querySelector(".num-tip").innerText = `${langSet.fetchDoneTip1Type2}${imgWaitDownload.length}/${filteredImgUrls.length}${langSet.fetchDoneTip2}`;
  631. }
  632.  
  633. document.querySelector(".tyc-extend-btn").onclick=e=>{
  634. if(document.querySelector(".tyc-extend-btn").classList.contains("extend-open")){
  635. document.querySelector(".tyc-extend-btn").classList.remove("extend-open");
  636. document.querySelector(".tyc-extend-set").style.display="none";
  637. document.querySelector(".tyc-extend-btn").style.color="black";
  638. document.querySelector(".tyc-extend-btn").innerHTML=`<span>更多设置 </span>
  639. <span style="top: 3px;position: relative;">
  640. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-double-down" viewBox="0 0 16 16">
  641. <path fill-rule="evenodd" d="M1.646 6.646a.5.5 0 0 1 .708 0L8 12.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
  642. <path fill-rule="evenodd" d="M1.646 2.646a.5.5 0 0 1 .708 0L8 8.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
  643. </svg>
  644. </span> `
  645. ;
  646. }else{
  647. document.querySelector(".tyc-extend-btn").classList.add("extend-open");
  648. document.querySelector(".tyc-extend-set").style.display="flex";
  649. document.querySelector(".tyc-extend-btn").style.color="#f50";
  650. document.querySelector(".tyc-extend-btn").innerHTML=`<span>收起 </span>
  651. <span style="top: 3px;position: relative;">
  652. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-double-up" viewBox="0 0 16 16">
  653. <path fill-rule="evenodd" d="M7.646 2.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 3.707 2.354 9.354a.5.5 0 1 1-.708-.708l6-6z"/>
  654. <path fill-rule="evenodd" d="M7.646 6.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 7.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
  655. </svg>
  656. </span> `
  657.  
  658. }
  659. }
  660.  
  661.  
  662. init();
  663. function init() {
  664. filteredImgUrls = imgUrls;
  665. filteredImgUrls=autoBigImage.getBigImageArray(filteredImgUrls);
  666. getSavedValue();
  667. if (document.querySelector(".width-check").checked) {
  668. filteredImgUrls = filteredImgUrls.filter(filterByWidth);
  669. }
  670. if (document.querySelector(".height-check").checked) {
  671. filteredImgUrls = filteredImgUrls.filter(filterByHeight);
  672. }
  673. zipFilteredImgUrls = filteredImgUrls;
  674. if (document.querySelector(".cors-check").checked) {
  675. fetchBase64ImgsThenPushToZipArray();
  676. }
  677. showImage(filteredImgUrls);
  678. }
  679. function clean() {
  680. imgWaitDownload = [];
  681. imgSelected = [];
  682. document.querySelector(".num-tip").innerText = `${langSet.fetchDoneTip1Type2}${imgSelected.length}/${imgUrls.length}${langSet.fetchDoneTip2}`;
  683. document.querySelector(".tyc-image-wrapper").innerHTML = "";
  684. }
  685. function isDownload(ele) {
  686. return ele.className == "download-direct";
  687. }
  688. function isSelect(ele) {
  689. return ele.className == "select-image";
  690. }
  691. function transIndexToLink(WholeImgs,selectedImgs) {
  692. let transedImgs=[];
  693. selectedImgs.forEach((imgIndex, index) => {
  694. transedImgs.push(WholeImgs[imgIndex]);
  695. });
  696. return transedImgs;
  697. }
  698. function showImage(filtedImgUrls) {
  699. filtedImgUrls.forEach((img, index) => {
  700. if (window.location.href.includes("huaban.com")) {
  701. if (img.includes("/webp")) {
  702. img = img.replace(/\/webp/g, "/png");
  703. }
  704. }
  705. let insertImg = `<div class="tyc-img-item-container-${index}" style="text-align:center;font-size:0px;
  706. margin:5px;border:1px solid #99d;border-radius:3px;
  707. ">
  708. <img class="tyc-image-preview" src="${img}"/ style="width:auto;height:200px;"></div>`
  709. document.querySelector(".tyc-image-wrapper").insertAdjacentHTML("beforeend", insertImg);
  710. let naturalW = document.querySelector(`.tyc-img-item-container-${index} .tyc-image-preview`).naturalWidth;
  711. let naturalH = document.querySelector(`.tyc-img-item-container-${index} .tyc-image-preview`).naturalHeight;
  712. let imgInfoContainer = `
  713. <div style="font-size:0px;background-color:rgba(100,100,100,0.6);height:30px;position:relative;">
  714. </div>
  715. `;
  716. let thisImgContainer = document.querySelector(`.tyc-img-item-container-${index}`);
  717. let imgContainerWidth = thisImgContainer.getBoundingClientRect().width;
  718. let imgInfo = `
  719. <span style="font-size:16px;position:absolute;left:calc(50% - 80px);top:7px;">${naturalW}X${naturalH}</span>
  720. `;
  721. /*
  722. <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;">
  723. <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"/>
  724. </svg>*/
  725. let downAndFullBtn = `
  726. <span style="position:absolute;right:calc(50% - 30px);top:2px;border:1px solid #333;
  727. width:26px;height:26px;border-radius:20px;" class="select-image" data-value="${index}">
  728. <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}">
  729. <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"/>
  730. </svg>
  731. </span>
  732. <span style="position:absolute;right:calc(50% - 60px);top:2px;border:1px solid #333;
  733. width:26px;height:26px;border-radius:20px;
  734. " class="download-direct">
  735. <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;">
  736. <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"/>
  737. <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"/>
  738. </svg>
  739. </span>
  740. `;
  741. let downloadBtn = `
  742. <span style="position:absolute;right:calc(50% - 15px);top:2px;border:1px solid #333;
  743. width:26px;height:26px;border-radius:20px;
  744. " class="download-direct">
  745. <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;">
  746. <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"/>
  747. <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"/>
  748. </svg>
  749. </span>
  750. `
  751. thisImgContainer.insertAdjacentHTML("beforeend", imgInfoContainer);
  752. let thisImgInfoContainer = thisImgContainer.querySelector("div");
  753. let rectWidth = parseInt(thisImgContainer.getBoundingClientRect().width);
  754. if (rectWidth > 120) {
  755. thisImgInfoContainer.insertAdjacentHTML("beforeend", imgInfo);
  756. thisImgInfoContainer.insertAdjacentHTML("beforeend", downAndFullBtn);
  757. } else if (rectWidth <= 120 && rectWidth >= 50) {
  758. thisImgInfoContainer.insertAdjacentHTML("beforeend", downAndFullBtn);
  759. thisImgInfoContainer.getElementsByClassName("select-image")[0].style.right = "50%";
  760. thisImgInfoContainer.getElementsByClassName("download-direct")[0].style.right = "calc(50% - 30px)";
  761. } else {
  762. thisImgInfoContainer.insertAdjacentHTML("beforeend", downloadBtn);
  763. }
  764. ////console.log(img);
  765. });
  766. }
  767. function filterByWidth(src) {
  768. let tempImg = new Image();
  769. tempImg.src = src;
  770. if (tempImg.width >= parseInt(document.querySelector(".width-value-min").value)
  771. && tempImg.width <= parseInt(document.querySelector(".width-value-max").value)) {
  772. return src;
  773. }
  774. }
  775. function filterByHeight(src) {
  776. let tempImg = new Image();
  777. tempImg.src = src;
  778. if (tempImg.height >= parseInt(document.querySelector(".height-value-min").value)
  779. && tempImg.height <= parseInt(document.querySelector(".height-value-max").value)) {
  780. return src;
  781. }
  782. }
  783. function getSavedValue() {
  784. if(GM_getValue("width-check")!=undefined){
  785. //console.log(GM_getValue("width-check"));
  786. (document.querySelector(".width-check").checked = GM_getValue("width-check"));
  787. }
  788. if(GM_getValue("height-check")!=undefined){
  789. (document.querySelector(".height-check").checked = GM_getValue("height-check"));
  790. }
  791. if(GM_getValue("cors-check")!=undefined){
  792. (document.querySelector(".cors-check").checked = GM_getValue("cors-check"));
  793. }
  794. GM_getValue("width-value-min") && (document.querySelector(".width-value-min").value = GM_getValue("width-value-min"));
  795. GM_getValue("width-value-max") && (document.querySelector(".width-value-max").value = GM_getValue("width-value-max"));
  796. GM_getValue("height-value-min") && (document.querySelector(".height-value-min").value = GM_getValue("height-value-min"));
  797. GM_getValue("height-value-max") && (document.querySelector(".height-value-max").value = GM_getValue("height-value-max"));
  798. }
  799. function fetchBase64ImgsThenPushToZipArray() {
  800. zipFilteredImgUrls.forEach((imgUrl, urlIndex) => {
  801. if (imgUrl.includes("data:image")) {
  802. return;
  803. }
  804. /* fetch(imgUrl,{
  805. method: "get",
  806. mode: 'cors'
  807. }).then(response=>{
  808. if (!response.ok) {
  809. throw new Error('Network response was not OK');
  810. }
  811. return response.blob();
  812. }).then(myBlob=>{
  813. var blob = myBlob
  814. let oFileReader = new FileReader();
  815. oFileReader.onloadend = function (e) {
  816. let base64 = e.target.result;
  817. //console.log("》》", base64)
  818. if (base64.includes("data:image")) {
  819. zipFilteredImgUrls[urlIndex] = base64;
  820. //zipImgWaitDownload.push(base64);
  821. }
  822. };
  823. oFileReader.readAsDataURL(blob);
  824. })
  825. .catch((error)=>{ */
  826. try {
  827. GM_xmlhttpRequest({
  828. method: "get",
  829. url: imgUrl,
  830. responseType: "blob",
  831. onload: function (r) {
  832. var blob = r.response;
  833. let oFileReader = new FileReader();
  834. oFileReader.onloadend = function (e) {
  835. let base64 = e.target.result;
  836. if (base64.startsWith("data:image")) {
  837. zipFilteredImgUrls[urlIndex] = base64;
  838. //zipImgWaitDownload.push(base64);
  839. }
  840. };
  841. oFileReader.readAsDataURL(blob);
  842. }
  843. });
  844. } catch (error) {
  845. }
  846.  
  847. //})
  848. })
  849. }
  850. function cutoffNotBase64Img(imgsUrlArray) {
  851. let resultArr = [];
  852. imgsUrlArray.forEach((imgUrl, urlIndex) => {
  853. if (imgUrl.startsWith("data:image")&&imgUrl.includes("base64")) {
  854. resultArr.push(imgUrl);
  855. }
  856. }
  857. );
  858. return resultArr;
  859. }
  860. //下面这个括号是wrapper的括号
  861. }
  862. })();

QingJ © 2025

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