图片下载器

可以在绝大多数网站提取并批量下载图片。尤其是类似于千库网、包图网或者有妖气、腾讯漫画、b站漫画这种,右键失效或者图片不能另存的网站,用脚本均可以提取并下载。额外功能:zip下载/自动大图。详细见脚本描述(目前适合chrome/firefox+tampermonkey,其他组合多少有问题)

当前为 2023-09-24 提交的版本,查看 最新版本

  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 Images can be extracted and batch downloaded from most websites. Especially for websites the right click fails or image can not save. Extra features: zip download / auto-enlarge image. See the script description at info page (suitable for chrome/firefox+tampermonkey)
  25. // @description:zh-CN 可以在绝大多数网站提取并批量下载图片。尤其是类似于千库网、包图网或者有妖气、腾讯漫画、b站漫画这种,右键失效或者图片不能另存的网站,用脚本均可以提取并下载。额外功能:zip下载/自动大图。详细见脚本描述(目前适合chrome/firefox+tampermonkey,其他组合多少有问题)
  26. // @description:zh-TW 可以在绝大多数网站提取并批量下载图片。尤其是类似于千库网、包图网或者有妖气、腾讯漫画、b站漫画这种,右键失效或者图片不能另存的网站,用脚本均可以提取并下载。额外功能:zip下载/自动大图。详细见脚本描述(目前适合chrome/firefox+tampermonkey,其他组合多少有问题)
  27. // @description:ja Images can be extracted and batch downloaded from most websites. Especially for websites the right click fails or image can not save. Extra features: zip download / auto-enlarge image. See the script description at info page (suitable for chrome/firefox+tampermonkey)
  28. // @description:ko Images can be extracted and batch downloaded from most websites. Especially for websites the right click fails or image can not save. Extra features: zip download / auto-enlarge image. See the script description at info page (suitable for chrome/firefox+tampermonkey)
  29. // @description:de Images can be extracted and batch downloaded from most websites. Especially for websites the right click fails or image can not save. Extra features: zip download / auto-enlarge image. See the script description at info page (suitable for chrome/firefox+tampermonkey)
  30. // @description:es Images can be extracted and batch downloaded from most websites. Especially for websites the right click fails or image can not save. Extra features: zip download / auto-enlarge image. See the script description at info page (suitable for chrome/firefox+tampermonkey)
  31. // @description:eo Images can be extracted and batch downloaded from most websites. Especially for websites the right click fails or image can not save. Extra features: zip download / auto-enlarge image. See the script description at info page (suitable for chrome/firefox+tampermonkey)
  32. // @description:fr Images can be extracted and batch downloaded from most websites. Especially for websites the right click fails or image can not save. Extra features: zip download / auto-enlarge image. See the script description at info page (suitable for chrome/firefox+tampermonkey)
  33. // @description:it Images can be extracted and batch downloaded from most websites. Especially for websites the right click fails or image can not save. Extra features: zip download / auto-enlarge image. See the script description at info page (suitable for chrome/firefox+tampermonkey)
  34. // @description:ru Images can be extracted and batch downloaded from most websites. Especially for websites the right click fails or image can not save. Extra features: zip download / auto-enlarge image. See the script description at info page (suitable for chrome/firefox+tampermonkey)
  35. // @description:vi Images can be extracted and batch downloaded from most websites. Especially for websites the right click fails or image can not save. Extra features: zip download / auto-enlarge image. See the script description at info page (suitable for chrome/firefox+tampermonkey)
  36. // @description:pt-BR Images can be extracted and batch downloaded from most websites. Especially for websites the right click fails or image can not save. Extra features: zip download / auto-enlarge image. See the script description at info page (suitable for chrome/firefox+tampermonkey)
  37. // @description:id Images can be extracted and batch downloaded from most websites. Especially for websites the right click fails or image can not save. Extra features: zip download / auto-enlarge image. See the script description at info page (suitable for chrome/firefox+tampermonkey)
  38. // @description:ar Images can be extracted and batch downloaded from most websites. Especially for websites the right click fails or image can not save. Extra features: zip download / auto-enlarge image. See the script description at info page (suitable for chrome/firefox+tampermonkey)
  39. // @description:bg Images can be extracted and batch downloaded from most websites. Especially for websites the right click fails or image can not save. Extra features: zip download / auto-enlarge image. See the script description at info page (suitable for chrome/firefox+tampermonkey)
  40. // @description:cs Images can be extracted and batch downloaded from most websites. Especially for websites the right click fails or image can not save. Extra features: zip download / auto-enlarge image. See the script description at info page (suitable for chrome/firefox+tampermonkey)
  41. // @description:tr Images can be extracted and batch downloaded from most websites. Especially for websites the right click fails or image can not save. Extra features: zip download / auto-enlarge image. See the script description at info page (suitable for chrome/firefox+tampermonkey)
  42. // @description:el Images can be extracted and batch downloaded from most websites. Especially for websites the right click fails or image can not save. Extra features: zip download / auto-enlarge image. See the script description at info page (suitable for chrome/firefox+tampermonkey)
  43. // @description:hu Images can be extracted and batch downloaded from most websites. Especially for websites the right click fails or image can not save. Extra features: zip download / auto-enlarge image. See the script description at info page (suitable for chrome/firefox+tampermonkey)
  44. // @description:th Images can be extracted and batch downloaded from most websites. Especially for websites the right click fails or image can not save. Extra features: zip download / auto-enlarge image. See the script description at info page (suitable for chrome/firefox+tampermonkey)
  45. // @version 2.29
  46. // @author 桃源隐叟-The hide oldman in taoyuan mountain
  47. // @include *
  48. // @connect *
  49. // @grant GM_openInTab
  50. // @grant GM_registerMenuCommand
  51. // @grant GM_setValue
  52. // @grant GM_getValue
  53. // @grant GM_deleteValue
  54. // @grant GM_xmlhttpRequest
  55. // @grant GM_download
  56. // @require https://unpkg.com/hotkeys-js@3.9.4/dist/hotkeys.min.js
  57. // @require https://cdn.bootcdn.net/ajax/libs/jszip/3.7.1/jszip.min.js
  58. // @require https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js
  59. // @run-at document-end
  60. // @match *
  61. // @match https://www.bilibili.com/
  62. // @match https://588ku.com/
  63. // @homepageURL https://github.com/taoyuancun123/modifyText/blob/master/modifyText.js
  64. // @supportURL https://greasyfork.org/zh-CN/scripts/419894/feedback
  65. // @license GPLv3
  66. // ==/UserScript==
  67.  
  68. (function () {
  69. 'use strict';
  70.  
  71. var lang = navigator.appName == "Netscape" ? navigator.language : navigator.userLanguage;
  72. var langSet;
  73. var localization = {
  74. zh: {
  75. selectAll: "全选",
  76. downloadBtn: "下载",
  77. downloadMenuText: "打开脚本(Alt+w)",
  78. zipDownloadBtn: "zip下载",
  79. selectAlert:"请至少选中一张图片。",
  80. fetchTip:"准备抓取canvas图片",
  81. fetchCount1:`抓取canvas图片第`,
  82. fetchCount2:'张',
  83. fetchDoneTip1:"已选(0/",
  84. fetchDoneTip1Type2:"已选(",
  85. fetchDoneTip2:")张图片",
  86. regRulePlace:"输入待替换正则",
  87. regReplacePlace:"输入替换它的字符串或者函数",
  88. zipOptionDesc:"勾选使用zip下载后,会请求跨域权限,否则zip下载基本下载不到图片。",
  89. zipCheckText:"使用zip下载",
  90. downloadUrlFile:"下载图片地址",
  91. moreSetting:"更多设置",
  92. autoBitImgModule:"自动大图设置模块",
  93. defaultSettingRule:"设置默认规则",
  94. exportCustomRule:"导出自定规则",
  95. importCustomRule:"导入自定规则",
  96. fold:"收起",
  97. inputFilenameTip:"输入文件名",
  98.  
  99. },
  100. en: {
  101. selectAll: "selectAll",
  102. downloadBtn: "download",
  103. downloadMenuText: "Open(Alt+w)",
  104. zipDownloadBtn: "zip Download",
  105. selectAlert:"Please at last select one image.",
  106. fetchTip:"Ready to fetch canvas image.",
  107. fetchCount1:`Fetch the`,
  108. fetchCount2:' canvas image.',
  109. fetchDoneTip1:"(0/",
  110. fetchDoneTip1Type2:"(",
  111. fetchDoneTip2:") Images selected",
  112. regRulePlace:"enter reg express",
  113. regReplacePlace:"enter replace string or function",
  114. zipOptionDesc:"when zip option checked,will request cors right,otherwise zipDownload can not get pics",
  115. zipCheckText:"Use ZipDownload",
  116. downloadUrlFile:"Download Imgs Url",
  117. moreSetting:"More Setting",
  118. autoBitImgModule:"AutoBigImageModule",
  119. defaultSettingRule:"SetDefaultRule",
  120. exportCustomRule:"exportCustomRule",
  121. importCustomRule:"importCustomRule",
  122. fold:"fold",
  123. inputFilenameTip:"input filename",
  124. }
  125. }
  126.  
  127. if (lang.toLowerCase().includes("zh-")) {
  128. langSet = localization.zh;
  129. } else {
  130. langSet = localization.en;
  131. }
  132.  
  133. const autoBigImage={
  134. bigImageArray:[],
  135. defaultRules:[
  136. {originReg:/(?<=(.+sinaimg\.(?:cn|com)\/))([\w\.]+)(?=(\/.+))/i,replacement:"large",tip:"for weib.com"},
  137. {originReg:/(?<=(.+alicdn\.(?:cn|com)\/.+\.(jpg|jpeg|gif|png|bmp|webp)))_.+/i,replacement:"",tip:"for alibaba web"},
  138. {originReg:/(.+alicdn\.(?:cn|com)\/.+)(\.\d+x\d+)(\.(jpg|jpeg|gif|png|bmp|webp)).*/i,replacement:(match,p1,p2,p3)=>p1+p3,tip:"for 1688"},
  139. {originReg:/(?<=(.+360buyimg\.(?:cn|com)\/))(\w+\/)(?=(.+\.(jpg|jpeg|gif|png|bmp|webp)))/i,replacement:"n0/",tip:"for jd"},
  140. {originReg:/(?<=(.+hdslb\.(?:cn|com)\/.+\.(jpg|jpeg|gif|png|bmp|webp)))@.+/i,replacement:"",tip:"for bilibili"},
  141. {originReg:/th(\.wallhaven\.cc\/)(?!full).+\/(\w{2}\/)([\w\.]+)(\.jpg)/i,replacement:(match,p1,p2,p3)=>"w"+p1+"full/"+p2+"wallhaven-"+p3+".jpg",tip:"for wallhaven"},
  142. {originReg:/th(\.wallhaven\.cc\/)(?!full).+\/(\w{2}\/)([\w\.]+)(\.jpg)/i,replacement:(match,p1,p2,p3)=>"w"+p1+"full/"+p2+"wallhaven-"+p3+".png",tip:"for wallhaven"},
  143. {originReg:/(.*\.twimg\.\w+\/.+\&name=*)(.*)/i,replacement:(match,p1,p2,p3)=>p1+"orig",tip:"for twitter"},
  144.  
  145.  
  146. ],
  147. defaultRulesChecked:[
  148. ],
  149. userRules:[],
  150. userRulesChecked:[],
  151. replace(originImgUrls){
  152. let that=this;
  153. that.bigImageArray=[];
  154. let tempArray=Array.from(new Set(originImgUrls)).filter(item=>item&&item);
  155. that.setRulesChecked();
  156. //console.log(that.bigImageArray);
  157.  
  158. tempArray.forEach(replaceByReg);
  159. function replaceByReg(urlStr,urlIndex){
  160. //if(!urlStr)return;
  161. if(urlStr.includes("data:image/")){
  162. that.bigImageArray.push(urlStr);
  163. return;
  164. }
  165. that.defaultRules.forEach((rule,ruleIndex)=>{
  166. if(that.defaultRulesChecked[ruleIndex]!=="checked"){
  167. that.bigImageArray.push(urlStr);
  168. return;
  169. }
  170.  
  171. let bigImage=urlStr.replace(rule.originReg,rule.replacement);
  172. if(bigImage!==urlStr){
  173. that.bigImageArray.push(urlStr);
  174. that.bigImageArray.push(bigImage);
  175. }else{
  176. that.bigImageArray.push(urlStr);
  177. }
  178. })
  179. that.userRules.forEach((rule,ruleIndex)=>{
  180. if(that.userRulesChecked[ruleIndex]!=="checked"){
  181. that.bigImageArray.push(urlStr);
  182. return;
  183. }
  184.  
  185. let bigImage=urlStr.replace(rule.originReg,rule.replacement);
  186. if(bigImage!==urlStr){
  187. that.bigImageArray.push(urlStr);
  188. that.bigImageArray.push(bigImage);
  189. }else{
  190. that.bigImageArray.push(urlStr);
  191. }
  192. })
  193. }
  194. },
  195. getBigImageArray(originImgUrls){
  196. this.replace(originImgUrls);
  197. let uniqueArray=Array.from(new Set(this.bigImageArray));
  198. return uniqueArray;
  199. },
  200. showDefaultRules(){
  201. let that=this;
  202. let defaultContainer=document.body.querySelector(".tyc-set-domain-default");
  203. that.setRulesChecked();
  204.  
  205. this.defaultRules.forEach((v,i)=>{
  206. let rulesHtml=`<div class="tyc-set-replacerule">
  207. <input type="checkbox" name="active" class="tyc-default-active" ${that.defaultRulesChecked[i]}>
  208. <input type="text" name="regrule" placeholder="${langSet.regRulePlace}" class="tyc-search-title" value="${v.originReg}">
  209. <input type="text" name="replace" placeholder="${langSet.regReplacePlace}" class="tyc-search-url" value="${v.replacement}">
  210. <span class="tyc-default-tip">${v.tip}</span>
  211. </div>
  212. `
  213. defaultContainer.insertAdjacentHTML("beforeend",rulesHtml);
  214. })
  215. },//showDefaultRules
  216. showRules(containerName,rulesType,checkType,checkClassName){
  217. let that=this;
  218. let Container=document.body.querySelector("."+containerName);
  219. that.setRulesChecked();
  220. that.setCustomRules();
  221. //console.log(that.userRules);
  222. //console.log(that);
  223.  
  224. that[rulesType].forEach((v,i)=>{
  225. //console.log(that[checkType])
  226. let rulesHtml=`<div class="tyc-set-replacerule">
  227. <input type="checkbox" name="active" class="${checkClassName}" ${that[checkType][i]}>
  228. <input type="text" name="regrule" placeholder="${langSet.regRulePlace}" class="tyc-search-title" value="${v.originReg}">
  229. <input type="text" name="replace" placeholder="${langSet.regReplacePlace}" class="tyc-search-url" value="${v.replacement}">
  230. <span class="tyc-default-tip">${v.tip}</span>
  231. </div>
  232. `
  233. Container.insertAdjacentHTML("beforeend",rulesHtml);
  234. })
  235. },
  236. onclickShowDefaultBtn(){
  237. let defaultContainer=document.body.querySelector(".tyc-set-domain-default");
  238. if(defaultContainer.style.display==="none"||defaultContainer.style.display===''){
  239. defaultContainer.style.display="flex";
  240. }else{
  241. defaultContainer.style.display="none";
  242. }
  243. },
  244. oncheckChange(){
  245. let checks=document.body.querySelectorAll(".tyc-default-active");
  246. this.defaultRulesChecked=[];
  247.  
  248. checks.forEach((v,i)=>{
  249. if(v.checked){
  250. this.defaultRulesChecked.push("checked");
  251. }else{
  252. this.defaultRulesChecked.push("");
  253. }
  254. })
  255.  
  256. GM_setValue("defaultRulesChecked",this.defaultRulesChecked);
  257. },
  258. oncheckChangeCustom(){
  259. let checks=document.body.querySelectorAll(".tyc-custom-active");
  260. this.userRulesChecked=[];
  261.  
  262. checks.forEach((v,i)=>{
  263. if(v.checked){
  264. this.userRulesChecked.push("checked");
  265. }else{
  266. this.userRulesChecked.push("");
  267. }
  268. })
  269.  
  270. GM_setValue("userRulesChecked",this.userRulesChecked);
  271. },
  272. setRulesChecked(){
  273. if(GM_getValue("defaultRulesChecked")){
  274. this.defaultRulesChecked=GM_getValue("defaultRulesChecked");
  275.  
  276. if(this.defaultRulesChecked.length<this.defaultRules.length){
  277. let delta=this.defaultRules.length-this.defaultRulesChecked.length;
  278. for(let i=0;i<delta;i++){
  279. this.defaultRulesChecked.push("checked");
  280. }
  281. }
  282.  
  283. }else{
  284. this.defaultRules.forEach(v=>{
  285. this.defaultRulesChecked.push("checked");
  286. })
  287. GM_setValue("defaultRulesChecked",this.defaultRulesChecked);
  288. }
  289.  
  290. if(GM_getValue("userRulesChecked")&&GM_getValue("userRulesChecked").length>0){
  291. this.userRulesChecked=GM_getValue("userRulesChecked");
  292. }else{
  293. this.userRules.forEach(v=>{
  294. this.userRulesChecked.push("checked");
  295. })
  296. GM_setValue("userRulesChecked",this.userRulesChecked);
  297. }
  298. },
  299. getCustomRules(event){
  300. let that=autoBigImage;
  301. let file=document.querySelector("#tycfileElem").files[0];
  302. let fileReader=new FileReader();
  303. fileReader.onload=(e)=>{
  304. let result=e.target.result;
  305. that.userRules=eval(result);
  306.  
  307. GM_deleteValue("userRulesChecked")
  308. that.setRulesChecked();
  309. GM_setValue("userRules",result);
  310. //console.log(GM_getValue('userRules'));
  311. document.body.querySelector(".tyc-set-domain-custom").innerHTML="";
  312. that.showRules("tyc-set-domain-custom","userRules","userRulesChecked","tyc-custom-active");
  313. }
  314. fileReader.readAsText(file,'GB2312');
  315. },
  316. setCustomRules(){
  317. if(GM_getValue("userRules")){
  318. try {
  319. this.userRules=eval(GM_getValue("userRules"));
  320. } catch (error) {
  321. GM_setValue("userRules","");
  322. }
  323.  
  324. }
  325. },
  326. exportCustomRules(){
  327.  
  328. }
  329. }
  330.  
  331. var domainName=document.domain.split(".");
  332. var downloadFileName;
  333.  
  334. var shortCutString="alt+W";
  335. if(GM_getValue("shortCutString")!=undefined){
  336. shortCutString=GM_getValue("shortCutString");
  337. }
  338.  
  339.  
  340. GM_registerMenuCommand(langSet.downloadMenuText, wrapper);
  341.  
  342.  
  343. hotkeys(shortCutString, shortcutFunction);
  344.  
  345. function shortcutFunction(){
  346. let container=document.querySelector(".tyc-image-container");
  347. if(container!=null){
  348. try {
  349. document.querySelector(".tyc-image-container").remove();
  350. } catch {
  351. }
  352. }
  353. else{
  354. wrapper();
  355. }
  356. }
  357.  
  358. function wrapper() {
  359. downloadFileName=domainName[domainName.length-2];
  360. var timeStamp=new Date().getTime().toString();
  361. downloadFileName=downloadFileName+timeStamp.substring(7,timeStamp.length);
  362.  
  363. try {
  364. document.querySelector(".tyc-image-container").remove();
  365. } catch {
  366. }
  367. var imgUrls = [];
  368. var bodyStr = document.body.innerHTML;
  369. var imgSelected = [];
  370. var zipImgSelected = [];
  371. var imgWaitDownload = [];
  372. var zipImgWaitDownload = [];
  373. var widthFilter = { min: 0, max: 3000 };
  374. var heightFilter = { min: 0, max: 3000 };
  375. var filteredImgUrls = [];
  376. var zipFilteredImgUrls = [];
  377. try{
  378. var zipFolder = new JSZip();
  379. var zipSubFoler = zipFolder.folder('pics');
  380. }
  381. catch{
  382.  
  383. }
  384.  
  385. var fetchTip='';
  386.  
  387. try {
  388. let imgEles = document.getElementsByTagName("img");
  389. let canvasEles=document.getElementsByTagName("canvas");
  390. //console.log(canvasEles);
  391.  
  392. for (let i = 0; i < imgEles.length; i++) {
  393. ////console.log(imgEles[i].src);
  394. if (!imgUrls.includes(imgEles[i].src)) {
  395. imgUrls.push(imgEles[i].src);
  396. }/* else if (!imgUrls.includes(imgEles[i].srcset)) {
  397. imgUrls.push(imgEles[i].srcset);
  398. }*/
  399.  
  400. if(imgEles[i].srcset!==''){
  401. let srcArr=imgEles[i].srcset.split(",");
  402.  
  403. let srcUrl=srcArr[0].match(/\S+/gi)[0];
  404. for(let k=0;k<srcArr.length-1;k++){
  405. //srcArr[k].match(/\S+/gi),正则的结果一个数组,0是url,1是清晰度
  406. //所以用清晰度,选出最清晰的那张
  407. if(parseInt(srcArr[k].match(/\S+/gi)[1])>parseInt(srcArr[k+1].match(/\S+/gi)[1])){
  408. srcUrl=srcArr[k].match(/\S+/gi)[0];
  409. break;
  410. }else{
  411. srcUrl=srcArr[k+1].match(/\S+/gi)[0];
  412. }
  413. }
  414.  
  415. //将imgurls 中不包含的srcurl 加入到数组中
  416. if(!imgUrls.includes(srcUrl)){
  417. imgUrls.push(srcUrl);
  418. }
  419. }
  420. }
  421.  
  422. let imgRegs = bodyStr.match(/(?<=background-image:\s*url\()(\S+)(?=\))/g);
  423.  
  424. try{
  425. for (let i = 0; i < imgRegs.length; i++) {
  426. ////console.log(imgRegs[i]);
  427. if(imgRegs[i].includes('&quot;')){
  428. imgUrls.push(imgRegs[i].replace(/&quot;/g, ""));
  429. }else if(imgRegs[i].includes("'")){
  430. imgUrls.push(imgRegs[i].replace(/'/g, ""));
  431. }
  432. }
  433. }catch(e){
  434. console.log(e);
  435. }
  436.  
  437.  
  438. if (window.location.href.includes("hathitrust.org")) {
  439. let imgs = document.querySelectorAll(".image img");
  440. if (imgs.length > 0) {
  441. let canvas = document.createElement("canvas");
  442. imgUrls = [];
  443. for (let pi = 0; pi < imgs.length; pi++) {
  444. canvas.width = imgs[pi].width;
  445. canvas.height = imgs[pi].height;
  446. canvas.getContext("2d").drawImage(imgs[pi], 0, 0);
  447. imgUrls.push(canvas.toDataURL("image/png"));
  448. }
  449.  
  450. document.querySelector(".select-all").style = "position:relative;width:15px;height:15px;"
  451. } else {
  452.  
  453. }
  454. }
  455.  
  456. if(window.location.href.toString().includes("manga.bilibili.com/")){
  457. let iframeCanvas=`<iframe style="display:none;" id="tyc-insert-iframe"></iframe>`;
  458. if(document.getElementById("tyc-insert-iframe")==null){
  459. document.body.insertAdjacentHTML("afterbegin",iframeCanvas);
  460. document.getElementById("tyc-insert-iframe").contentDocument.body.insertAdjacentHTML("afterbegin",`<canvas id="tyc-insert-canvas"></canvas>`);
  461. document.body.getElementsByTagName('canvas')[0].__proto__.toBlob=document.getElementById("tyc-insert-iframe").contentDocument.getElementById("tyc-insert-canvas").__proto__.toBlob;
  462. }
  463.  
  464. }
  465.  
  466. let oldLength=imgUrls.length;
  467. if(canvasEles.length>0){
  468. //console.log(canvasEles);
  469. fetchTip=langSet.fetchTip;
  470. var completeFlag=0;
  471. for(let j=0;j<canvasEles.length;j++){
  472. canvasEles[j].toBlob(blobCallback);
  473. function blobCallback(blob){
  474. //console.log(blob);
  475. let oFileReader = new FileReader();
  476. oFileReader.onloadend = function (e) {
  477. let base64 = e.target.result;
  478. if (base64.includes("data:image")) {
  479. if (!imgUrls.includes(base64)) {
  480. //imgUrls.push(base64);
  481. imgUrls[oldLength+j]=base64;
  482. //console.log(base64);
  483. }
  484. completeFlag++;
  485. document.querySelector(".num-tip").innerText=`${langSet.fetchCount1} ${completeFlag}/${canvasEles.length} ${langSet.fetchCount2}`;
  486. if(completeFlag===canvasEles.length){
  487. clean();
  488. init();
  489. }
  490. }
  491. };
  492.  
  493. oFileReader.readAsDataURL(blob);
  494. }
  495. }
  496. }else{
  497. fetchTip=`${langSet.fetchDoneTip1}${imgUrls.length}${langSet.fetchDoneTip2}`;
  498. }
  499.  
  500. } catch(e) {
  501. //alert("error");
  502. console.log(e);
  503. }
  504.  
  505. let imgContainer = `<style>
  506. .tyc-image-container{
  507. color:black;
  508. position:fixed;
  509. top:0px;
  510. left:10%;
  511. width:80vw;
  512. z-index:2147483645;
  513. background-color: #dedede;
  514. border: 1px solid #aaa;
  515. overflow:scroll;height:100%;
  516. }
  517.  
  518. .tyc-image-container button{
  519. border:1px solid #aaa;
  520. border-radius:5px;
  521. height:32px;line-height:32px;
  522. margin:0px;padding:0 5px;
  523. }
  524.  
  525. .tyc-image-container button:hover{
  526. background-color: #f50;
  527. color: #fff;
  528. }
  529.  
  530. .control-section{
  531. width:80vw;
  532. z-index:2147483646;
  533. position:fixed;
  534. top:0px;
  535. left:10%;
  536. display: flex;
  537. flex-direction: column;
  538. justify-content: center;
  539. line-height:40px;
  540. background:#eee;border:1px solid #aaa;border-radius:2px;
  541. }
  542.  
  543. .control-section-sub{
  544. display: flex;
  545. margin-bottom: 5px;
  546. }
  547.  
  548. .tyc-normal-section{
  549. display: flex;
  550. align-items: center;
  551. flex-direction: row;
  552. flex-wrap: wrap;
  553. align-content: normal;
  554. justify-content: flex-start;
  555. font-size:10px;
  556. }
  557.  
  558. .tyc-normal-section *{
  559. padding-top:2px;
  560. }
  561.  
  562. .btn-download{
  563. border:1px solid #aaa;border-radius:5px;
  564. height:32px;line-height:32px;
  565. margin:0px;padding:0 5px;
  566. }
  567. .btn-zipDownload{
  568. border:1px solid #aaa;border-radius:5px;
  569. height:32px;line-height:32px;
  570. margin:0px;padding:0 5px;
  571. }
  572. .btn-close{
  573. font-size:20px;position:absolute;
  574. right:30px;top:4px;
  575. height:32px;line-height:32px;
  576. margin:0px;
  577. border-radius:10px;border:1px solid #aaa;
  578. width:30px;
  579. }
  580.  
  581. .tyc-image-wrapper{
  582. margin-top:82px;display:flex;justify-content:center;
  583. align-items:center;flex-wrap:wrap;
  584. }
  585.  
  586. .tyc-input-checkbox{
  587. background-color: initial;
  588. cursor: default;
  589. appearance: auto;
  590. box-sizing: border-box;
  591. margin: 3px 3px 3px 4px;
  592. padding: initial;
  593. border: initial;
  594. }
  595.  
  596. .tyc-extend-set{
  597. padding: 10px;
  598. border-top: 1px solid rgba(100,100,100,0.1);
  599. }
  600.  
  601. .tyc-extend-set{
  602. display: none;
  603. align-items: stretch;
  604. flex-direction: column;
  605. justify-content: flex-start;
  606. flex-wrap: nowrap;
  607. padding: 5px;
  608. width: auto;
  609. }
  610.  
  611. .tyc-extend-set-container{
  612. display: flex;
  613. align-items: flex-start;
  614. flex-direction: column;
  615. justify-content: flex-start;
  616. flex-wrap: nowrap;
  617. align-content: normal;
  618. border: 1px solid rgba(100,100,100,0.5);
  619. padding: 5px;
  620. margin-bottom: 5px;
  621. }
  622.  
  623. .tyc-autobigimg-set{
  624. display: flex;
  625. align-items: flex-start;
  626. flex-direction: column;
  627. justify-content: flex-start;
  628. flex-wrap: nowrap;
  629. align-content: normal;
  630. border: 1px solid rgba(100,100,100,0.5);
  631. padding: 5px;
  632. }
  633.  
  634. .tyc-set-domain{
  635. display: flex;
  636. align-items: flex-start;
  637. flex-direction: column;
  638. justify-content: flex-start;
  639. flex-wrap: nowrap;
  640. align-content: normal;
  641. margin: 5px;
  642. padding: 5px;
  643. border: 1px solid rgba(100,100,100,0.3);
  644. width: 95%;
  645. max-height: 150px;
  646. overflow: scroll;
  647. }
  648.  
  649. .tyc-abi-title{
  650. display: flex;
  651. flex-direction: row;
  652. align-items: center;
  653. justify-content: space-around;
  654. width: 100%;
  655. }
  656.  
  657. .tyc-abi-domain-title{
  658. display: flex;
  659. flex-direction: row;
  660. align-items: center;
  661. justify-content: space-between;
  662. width: 95%;
  663. border-bottom: 1px solid #ddd;
  664. }
  665. .tyc-set-replacerule{
  666. display: flex;
  667. flex-direction: row;
  668. justify-content: flex-start;
  669. align-items: center;
  670. margin-bottom: 3px;
  671. flex-wrap: wrap;
  672. }
  673.  
  674. .tyc-set-replacerule *,.tyc-set-replacerule button{
  675. margin-left: 5px;
  676. }
  677.  
  678. .tyc-set-domain-default{
  679. height: 200px;
  680. overflow: scroll;
  681. display: none;
  682. }
  683. </style>
  684. <div class="tyc-image-container">
  685. <div class="control-section">
  686. <div class="control-section-sub tyc-normal-section">
  687. <input class="select-all tyc-input-checkbox" type="checkbox" name="select-all" value="select-all">${langSet.selectAll}
  688. <button class="btn-download" style="margin-left:5px;">${langSet.downloadBtn}</button>
  689. <button class="btn-zipDownload" style="margin-left:5px;">${langSet.zipDownloadBtn}</button>
  690. <span style="margin-left:10px;" class="num-tip">${langSet.fetchDoneTip1}${imgUrls.length}${langSet.fetchDoneTip2}</span>
  691. <input type="text" class="tyc-file-name" style="height:15px;width:80px;margin-left:25px;font-size:10px;" value="${downloadFileName}">
  692. <input type="text" class="shortCutString" style="height:15px;width:80px;margin-left:25px;font-size:10px;" value="${shortCutString}">-ShortCut
  693. <button cstyle="margin-left:10px;" class="btn-close" >X</button>
  694. </div>
  695.  
  696.  
  697. <div style="line-height:12px;" class="control-section-sub tyc-normal-section">
  698. <div style="float:left;display:block;">
  699. <input type="checkbox" class="width-check img-check tyc-input-checkbox" name="width-check" value="width-check">Width:
  700. <input type="text" class="width-value-min" size="1" style="height:15px;width:50px;"
  701. min="0" max="9999" value="0">-
  702. <input type="text" class="width-value-max" size="1" style="height:15px;width:50px;"
  703. min="0" max="9999" value="3000">
  704. </div>
  705.  
  706. <div style="float:left;margin-left:30px;display:block;">
  707. <input type="checkbox" class="height-check img-check tyc-input-checkbox" name="height-check" value="height-check">Height:
  708. <input type="text" class="height-value-min" size="1" style="height:15px;width:50px;"
  709. min="0" max="9999" value="0">-
  710. <input type="text" class="height-value-max" size="1" style="height:15px;width:50px;"
  711. min="0" max="9999" value="3000">
  712. </div>
  713.  
  714. <div style="float:left;margin-left:30px;display:block;" class="tyc-cors">
  715. <span class="tyc-tip" style="display: none;
  716. position: absolute;
  717. top: 5px;
  718. left: 50px;
  719. white-space: nowrap;
  720. background: rgb(204, 204, 204);
  721. border: 1px solid rgb(150, 150, 150);
  722. border-radius: 3px;
  723. padding: 5px;">${langSet.zipOptionDesc}
  724. </span>
  725. <input type="checkbox" class="cors-check img-check tyc-input-checkbox" name="cors-check" value="cors-check">
  726. <span>${langSet.zipCheckText}</span>
  727. </div>
  728.  
  729. <div style="float:left;margin-left:30px;display:block;" class="tyc-download-url">
  730. <button class="tyc-download-url-btn">${langSet.downloadUrlFile}</button>
  731. </div>
  732.  
  733.  
  734. <div style="float:left;margin-left:30px;display:block;" class="tyc-extend-btn">
  735. <span>${langSet.moreSetting} </span>
  736. <span style="top: 3px;position: relative;">
  737. <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">
  738. <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"/>
  739. <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"/>
  740. </svg>
  741. </span>
  742. </div>
  743. </div>
  744. <div class="tyc-extend-set control-section-sub">
  745. <div class="tyc-autobigimg-set tyc-extend-set-container">
  746. <div class="tyc-abi-title">
  747. <div>
  748. ${langSet.autoBitImgModule}
  749. </div>
  750. <div>
  751. <button class="tyc-default-rule-show">${langSet.defaultSettingRule}</button>
  752. </div>
  753.  
  754. <div>
  755. <button>${langSet.exportCustomRule}</button>
  756. </div>
  757.  
  758. <div>
  759. <input type="file" id="tycfileElem" multiple accept="text/plain" style="display:none">
  760. <button id="tyc-file-select">${langSet.importCustomRule}</button>
  761. </div>
  762.  
  763. </div>
  764. <div class="tyc-set-domain tyc-set-domain-custom">
  765. </div>
  766. <div class="tyc-set-domain tyc-set-domain-default">
  767. </div>
  768. </div>
  769.  
  770. </div>
  771. </div>
  772. <div class="tyc-image-wrapper" >
  773. </div>
  774. </div>`
  775.  
  776. let showBigImage = `
  777. <div class="show-big-image" style="position:fixed;left:30%;top:30%;z-index:2147483647;">
  778. </div>
  779. `
  780.  
  781. let searchButton=`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
  782. <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
  783. </svg>`;
  784.  
  785. document.body.insertAdjacentHTML("afterbegin", imgContainer);
  786. autoBigImage.showDefaultRules();
  787. autoBigImage.showRules("tyc-set-domain-custom","userRules","userRulesChecked","tyc-custom-active");
  788.  
  789. document.querySelector(".tyc-image-wrapper").style=`margin-top:${document.querySelector(".control-section").clientHeight}px`;
  790.  
  791. document.body.onclick = (e) => {
  792. //console.log(e);
  793. let ePath=e.path || (e.composedPath && e.composedPath());
  794. if ((e.target.nodeName == "IMG" && e.target.className === "tyc-image-preview")) {
  795. let imagePreview = ePath.find((ele) => ele.classList[0] === "tyc-image-preview");
  796. let currentImgIndex = parseInt(imagePreview.dataset.value);
  797.  
  798.  
  799. let container = ePath.find((ele) => ele.className === `tyc-img-item-container-${currentImgIndex}`);
  800. let infoContainer=container.getElementsByClassName("tyc-image-info-container")[0];
  801.  
  802. if (imgSelected.includes(currentImgIndex)) {
  803. imgSelected.splice(imgSelected.indexOf(currentImgIndex), 1);
  804. container.style.border = "1px solid #99d";
  805. infoContainer.style.backgroundColor='rgba(100,100,100,0.6)';
  806. } else {
  807. imgSelected.push(currentImgIndex);
  808. container.style.border = "1px solid #f50";
  809. infoContainer.style.backgroundColor='rgba(88, 158, 255, 0.8)';
  810.  
  811. }
  812.  
  813. zipImgSelected=imgSelected;
  814.  
  815. document.querySelector(".num-tip").innerText = `${langSet.fetchDoneTip1Type2}${imgSelected.length}/${imgUrls.length}${langSet.fetchDoneTip2}`;
  816. imgWaitDownload=transIndexToLink(filteredImgUrls,imgSelected);
  817. zipImgWaitDownload=transIndexToLink(zipFilteredImgUrls,zipImgSelected);
  818. zipImgWaitDownload=cutoffNotBase64Img(zipImgWaitDownload);
  819.  
  820.  
  821. } else if (e.target.parentElement.className === "show-big-image") {
  822. try {
  823. document.querySelector(".show-big-image").remove();
  824. }
  825. catch
  826. {
  827.  
  828. }
  829.  
  830. } else if (e.target.classList[1] == "bi-download" || ePath.find(isDownload) != undefined) {
  831. let imgContainer = ePath.find(
  832. (ele) => {
  833. try {
  834. //console.log(ele);
  835. return ele.className.includes("tyc-img-item-container");
  836. }
  837. catch {
  838. }
  839.  
  840. }
  841. )
  842. let path = imgContainer.getElementsByTagName("img")[0].src;
  843. let filename;
  844. if (path.indexOf("/") > 0)//如果包含有"/"号 从最后一个"/"号+1的位置开始截取字符串
  845. {
  846. filename = path.substring(path.lastIndexOf("/") + 1, path.lastIndexOf("."));
  847. }
  848. else {
  849. filename = path;
  850. }
  851. //console.log("download start" + path + " " + filename);
  852. //GM_download(path, "pic");
  853. let saveFileName=document.querySelector(".tyc-file-name").value||"pic";
  854. saveAs(path,saveFileName);
  855. } else if (e.target.classList[1] == "bi-arrows-fullscreen" || ePath.find(isSelect) != undefined) {
  856. let imgContainer = ePath.find(
  857. (ele) => {
  858. try {
  859. //console.log(ele);
  860. return ele.className.includes("tyc-img-item-container");
  861. }
  862. catch {
  863. }
  864. }
  865. )
  866. let path = imgContainer.getElementsByTagName("img")[0].src;
  867.  
  868. try {
  869. let container = document.querySelector(".show-big-image");
  870. if (container.getElementsByTagName("img")[0].src === path) {
  871. container.remove();
  872. return;
  873. } else {
  874. container.remove();
  875. }
  876. }
  877. catch {
  878.  
  879. }
  880. document.body.insertAdjacentHTML("beforeend", showBigImage);
  881.  
  882. let showItem = `<img src="${path}"/>`
  883.  
  884. document.querySelector(".show-big-image").insertAdjacentHTML("beforeend", showItem);
  885.  
  886. let tempImg = document.querySelector(".show-big-image img");
  887.  
  888. let dWidth = (window.innerWidth - tempImg.width) / 2;
  889. let dHeight = (window.innerHeight - tempImg.height) / 2;
  890.  
  891. document.querySelector(".show-big-image").style.left = dWidth + "px";
  892. document.querySelector(".show-big-image").style.top = dHeight + "px";
  893.  
  894. if(tempImg.width>window.innerWidth || tempImg.height>window.innerHeight){
  895. document.querySelector(".show-big-image").style.overflow="scroll";
  896. if(tempImg.width>window.innerWidth){
  897. document.querySelector(".show-big-image").style.left="0px";
  898. document.querySelector(".show-big-image").style.width=window.innerWidth+"px";
  899. }
  900. if(tempImg.height>window.innerHeight){
  901. document.querySelector(".show-big-image").style.top="0px";
  902. document.querySelector(".show-big-image").style.height=window.innerHeight+"px";
  903. }
  904.  
  905. }
  906.  
  907. }
  908. }
  909.  
  910. document.querySelector(".btn-close").onclick = (e) => {
  911. document.querySelector(".tyc-image-container").remove();
  912. }
  913.  
  914. document.querySelector(".btn-download").onclick = async (e) => {
  915. if (imgWaitDownload.length >= 1) {
  916. //console.log(imgWaitDownload);
  917. /* imgWaitDownload.forEach(async (img, index) => {
  918. //let filename = `pic-${index}.jpg`;
  919. //filename=filename.replace(/\\/g, '/').replace(/\/{2,}/g, '/');
  920. //await GM_download(img, `pic-${index}`);
  921.  
  922. }); */
  923. function sleep(){
  924. return new Promise((resolve,reject)=>{
  925. setTimeout(() => {
  926. resolve(1);
  927. }, 200);
  928. })
  929. }
  930. for(let i=0;i<imgWaitDownload.length;i++){
  931. await sleep();
  932. let saveFileName=document.querySelector(".tyc-file-name").value||"pic";
  933. console.log(`${saveFileName}-${i}`);
  934. saveAs(imgWaitDownload[i],`${saveFileName}-${i}`);
  935. }
  936. } else {
  937. alert(`${langSet.selectAlert}`);
  938. }
  939. }
  940.  
  941. document.querySelector(".btn-zipDownload").onclick = (e) => {
  942. //console.log(zipImgWaitDownload);
  943. try {
  944. if (zipImgWaitDownload.length >= 1) {
  945. //console.log(zipImgWaitDownload);
  946. zipImgWaitDownload.forEach(async (img, index) => {
  947. let fileExt = img.substring(img.indexOf("image/") + 6, img.indexOf(";"))
  948. fileExt=fileExt.includes("svg")?"svg":fileExt;
  949. let saveFileName=document.querySelector(".tyc-file-name").value||"pic";
  950. let filename = `${saveFileName}-${index}.${fileExt}`;
  951. zipSubFoler.file(filename, img.split(",")[1], { base64: true });
  952. });
  953.  
  954. zipFolder.generateAsync({ type: "blob" })
  955. .then(function (content) {
  956. // see FileSaver.js
  957. let saveFileName=document.querySelector(".tyc-file-name").value||"pic";
  958. saveAs(content, `${saveFileName}s.zip`);
  959. zipFolder.remove("pics");
  960. zipSubFoler = zipFolder.folder('pics');
  961. });
  962.  
  963. } else {
  964. alert(`${langSet.selectAlert}`);
  965. }
  966. } catch (error) {
  967. //console.log(error);
  968. }
  969.  
  970.  
  971. }
  972.  
  973. document.querySelector(".tyc-cors").onmouseover=e=>{
  974. e.preventDefault();
  975. document.querySelector(".tyc-tip").style.display="block";
  976. }
  977.  
  978. document.querySelector(".tyc-cors").onmouseout=e=>{
  979. e.preventDefault();
  980. document.querySelector(".tyc-tip").style.display="none";
  981. }
  982.  
  983. document.body.onchange = (e) => {
  984. if (e.target.className.includes("width-check")) {
  985. GM_setValue('width-check', e.target.checked);
  986. }
  987. if (e.target.className.includes("height-check")) {
  988. GM_setValue('height-check', e.target.checked);
  989. }
  990.  
  991. if (e.target.className.includes("cors-check")) {
  992. GM_setValue('cors-check', e.target.checked);
  993. if (document.querySelector(".cors-check").checked) {
  994. fetchBase64ImgsThenPushToZipArray();
  995. }
  996. }
  997.  
  998. if(e.target.className.includes("tyc-default-active")){
  999. autoBigImage.oncheckChange();
  1000. }
  1001.  
  1002. if(e.target.className.includes("tyc-custom-active")){
  1003. autoBigImage.oncheckChangeCustom();
  1004. }
  1005.  
  1006. if (e.target.nodeName === "INPUT" && e.target.type === "text" && e.target.className.includes("value")) {
  1007. GM_setValue(e.target.className, e.target.value);
  1008. }
  1009.  
  1010. if (e.target.nodeName === "INPUT" && e.target.type === "text" && e.target.className.includes("shortCutString")) {
  1011. GM_setValue(e.target.className, e.target.value);
  1012. hotkeys(e.target.value, wrapper);
  1013. }
  1014.  
  1015. (e.target.className.includes("width-check") || e.target.className.includes("height-check") ||
  1016.  
  1017. (e.target.nodeName === "INPUT" && e.target.type === "text" && e.target.className.includes("value")))
  1018. && (clean(), init());
  1019.  
  1020. }
  1021.  
  1022. document.querySelector(".select-all").onchange = (e) => {
  1023. if (document.querySelector(".select-all").checked) {
  1024. imgWaitDownload = filteredImgUrls;
  1025. zipImgWaitDownload=cutoffNotBase64Img(zipFilteredImgUrls);
  1026. } else {
  1027. imgWaitDownload=transIndexToLink(filteredImgUrls,imgSelected);
  1028. zipImgWaitDownload=transIndexToLink(zipFilteredImgUrls,zipImgSelected);
  1029. }
  1030.  
  1031. document.querySelector(".num-tip").innerText = `${langSet.fetchDoneTip1Type2}${imgWaitDownload.length}/${filteredImgUrls.length}${langSet.fetchDoneTip2}`;
  1032. }
  1033.  
  1034. document.querySelector(".tyc-extend-btn").onclick=e=>{
  1035. if(document.querySelector(".tyc-extend-btn").classList.contains("extend-open")){
  1036. document.querySelector(".tyc-extend-btn").classList.remove("extend-open");
  1037. document.querySelector(".tyc-extend-set").style.display="none";
  1038. document.querySelector(".tyc-extend-btn").style.color="black";
  1039. document.querySelector(".tyc-extend-btn").innerHTML=`<span>${langSet.moreSetting}</span>
  1040. <span style="top: 3px;position: relative;">
  1041. <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">
  1042. <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"/>
  1043. <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"/>
  1044. </svg>
  1045. </span> `
  1046. ;
  1047. }else{
  1048. document.querySelector(".tyc-extend-btn").classList.add("extend-open");
  1049. document.querySelector(".tyc-extend-set").style.display="flex";
  1050. document.querySelector(".tyc-extend-btn").style.color="#f50";
  1051. document.querySelector(".tyc-extend-btn").innerHTML=`<span>${langSet.fold} </span>
  1052. <span style="top: 3px;position: relative;">
  1053. <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">
  1054. <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"/>
  1055. <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"/>
  1056. </svg>
  1057. </span> `
  1058.  
  1059. }
  1060. }
  1061.  
  1062. document.querySelector(".tyc-default-rule-show").onclick=autoBigImage.onclickShowDefaultBtn;
  1063.  
  1064. document.querySelector("#tyc-file-select").onclick=e=>{
  1065. document.querySelector("#tycfileElem").click();
  1066. }
  1067.  
  1068. document.querySelector("#tycfileElem").onchange=autoBigImage.getCustomRules;
  1069.  
  1070. document.querySelector(".tyc-download-url-btn").onclick=e=>{
  1071. let blob=new Blob([imgWaitDownload.join("\n")],{ type: "text/plain", endings: "native" });
  1072. saveAs(blob,"urls.txt");
  1073. }
  1074.  
  1075.  
  1076. init();
  1077. function init() {
  1078. filteredImgUrls = imgUrls;
  1079. filteredImgUrls=autoBigImage.getBigImageArray(filteredImgUrls);
  1080. getSavedValue();
  1081. if (document.querySelector(".width-check").checked) {
  1082. filteredImgUrls = filteredImgUrls.filter(filterByWidth);
  1083. }
  1084.  
  1085. if (document.querySelector(".height-check").checked) {
  1086. filteredImgUrls = filteredImgUrls.filter(filterByHeight);
  1087. }
  1088.  
  1089.  
  1090. zipFilteredImgUrls = filteredImgUrls;
  1091. if (document.querySelector(".cors-check").checked) {
  1092. fetchBase64ImgsThenPushToZipArray();
  1093. }
  1094. showImage(filteredImgUrls);
  1095. }
  1096.  
  1097. function clean() {
  1098. imgWaitDownload = [];
  1099. imgSelected = [];
  1100. document.querySelector(".num-tip").innerText = `${langSet.fetchDoneTip1Type2}${imgSelected.length}/${imgUrls.length}${langSet.fetchDoneTip2}`;
  1101. document.querySelector(".tyc-image-wrapper").innerHTML = "";
  1102. }
  1103.  
  1104. function isDownload(ele) {
  1105. return ele.className == "download-direct";
  1106. }
  1107.  
  1108. function isSelect(ele) {
  1109. return ele.className == "fullscreen-image";
  1110. }
  1111.  
  1112. function transIndexToLink(WholeImgs,selectedImgs) {
  1113. let transedImgs=[];
  1114. selectedImgs.forEach((imgIndex, index) => {
  1115. transedImgs.push(WholeImgs[imgIndex]);
  1116. });
  1117. return transedImgs;
  1118. }
  1119.  
  1120. function showImage(filtedImgUrls) {
  1121. filtedImgUrls.forEach((img, index) => {
  1122. if (window.location.href.includes("huaban.com")) {
  1123. if (img.includes("/webp")) {
  1124. img = img.replace(/\/webp/g, "/png");
  1125. }
  1126. }
  1127. let insertImg = `<div class="tyc-img-item-container-${index}" style="text-align:center;font-size:0px;
  1128. margin:5px;border:1px solid #99d;border-radius:3px;
  1129. ">
  1130. <img class="tyc-image-preview" src="${img}"/ style="width:auto;height:200px;" data-value="${index}"></div>`
  1131. document.querySelector(".tyc-image-wrapper").insertAdjacentHTML("beforeend", insertImg);
  1132. let naturalW = document.querySelector(`.tyc-img-item-container-${index} .tyc-image-preview`).naturalWidth;
  1133. let naturalH = document.querySelector(`.tyc-img-item-container-${index} .tyc-image-preview`).naturalHeight;
  1134.  
  1135. let imgInfoContainer = `
  1136. <div class="tyc-image-info-container" style="font-size:0px;background-color:rgba(100,100,100,0.6);height:30px;position:relative;">
  1137.  
  1138.  
  1139. </div>
  1140. `;
  1141.  
  1142. let thisImgContainer = document.querySelector(`.tyc-img-item-container-${index}`);
  1143. let imgContainerWidth = thisImgContainer.getBoundingClientRect().width;
  1144. let imgInfo = `
  1145. <span style="font-size:16px;position:absolute;left:calc(50% - 80px);top:7px;">${naturalW}X${naturalH}</span>
  1146. `;
  1147.  
  1148.  
  1149. /*
  1150. <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;">
  1151. <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"/>
  1152. </svg>*/
  1153.  
  1154. let downAndFullBtn = `
  1155. <span style="position:absolute;right:calc(50% - 30px);top:2px;border:1px solid #333;
  1156. width:26px;height:26px;border-radius:20px;" class="fullscreen-image" data-value="${index}">
  1157. <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:4px;right:4px;width:18px;height:18px;" data-value="${index}">
  1158. <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"/>
  1159. </svg>
  1160. </span>
  1161. <span style="position:absolute;right:calc(50% - 60px);top:2px;border:1px solid #333;
  1162. width:26px;height:26px;border-radius:20px;
  1163. " class="download-direct">
  1164. <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;">
  1165. <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"/>
  1166. <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"/>
  1167. </svg>
  1168. </span>
  1169.  
  1170. `;
  1171.  
  1172. let downloadBtn = `
  1173. <span style="position:absolute;right:calc(50% - 15px);top:2px;border:1px solid #333;
  1174. width:26px;height:26px;border-radius:20px;
  1175. " class="download-direct">
  1176. <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;">
  1177. <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"/>
  1178. <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"/>
  1179. </svg>
  1180. </span>
  1181. `
  1182. thisImgContainer.insertAdjacentHTML("beforeend", imgInfoContainer);
  1183.  
  1184. let thisImgInfoContainer = thisImgContainer.querySelector("div");
  1185.  
  1186. let rectWidth = parseInt(thisImgContainer.getBoundingClientRect().width);
  1187.  
  1188. if (rectWidth > 120) {
  1189. thisImgInfoContainer.insertAdjacentHTML("beforeend", imgInfo);
  1190. thisImgInfoContainer.insertAdjacentHTML("beforeend", downAndFullBtn);
  1191. } else if (rectWidth <= 120 && rectWidth >= 50) {
  1192. thisImgInfoContainer.insertAdjacentHTML("beforeend", downAndFullBtn);
  1193. thisImgInfoContainer.getElementsByClassName("fullscreen-image")[0].style.right = "50%";
  1194. thisImgInfoContainer.getElementsByClassName("download-direct")[0].style.right = "calc(50% - 30px)";
  1195. } else {
  1196. thisImgInfoContainer.insertAdjacentHTML("beforeend", downloadBtn);
  1197. }
  1198. ////console.log(img);
  1199. });
  1200. }
  1201.  
  1202. function filterByWidth(src) {
  1203. let tempImg = new Image();
  1204. tempImg.src = src;
  1205. if (tempImg.width >= parseInt(document.querySelector(".width-value-min").value)
  1206. && tempImg.width <= parseInt(document.querySelector(".width-value-max").value)) {
  1207. return src;
  1208. }
  1209. }
  1210.  
  1211. function filterByHeight(src) {
  1212. let tempImg = new Image();
  1213. tempImg.src = src;
  1214. if (tempImg.height >= parseInt(document.querySelector(".height-value-min").value)
  1215. && tempImg.height <= parseInt(document.querySelector(".height-value-max").value)) {
  1216. return src;
  1217. }
  1218. }
  1219.  
  1220. function getSavedValue() {
  1221. if(GM_getValue("width-check")!=undefined){
  1222. //console.log(GM_getValue("width-check"));
  1223. (document.querySelector(".width-check").checked = GM_getValue("width-check"));
  1224. }
  1225.  
  1226. if(GM_getValue("height-check")!=undefined){
  1227. (document.querySelector(".height-check").checked = GM_getValue("height-check"));
  1228. }
  1229.  
  1230. if(GM_getValue("cors-check")!=undefined){
  1231. (document.querySelector(".cors-check").checked = GM_getValue("cors-check"));
  1232.  
  1233. }
  1234.  
  1235. GM_getValue("width-value-min") && (document.querySelector(".width-value-min").value = GM_getValue("width-value-min"));
  1236. GM_getValue("width-value-max") && (document.querySelector(".width-value-max").value = GM_getValue("width-value-max"));
  1237. GM_getValue("height-value-min") && (document.querySelector(".height-value-min").value = GM_getValue("height-value-min"));
  1238. GM_getValue("height-value-max") && (document.querySelector(".height-value-max").value = GM_getValue("height-value-max"));
  1239. GM_getValue("shortCutString") && (document.querySelector(".shortCutString").value = GM_getValue("shortCutString"));
  1240. }
  1241.  
  1242. function fetchBase64ImgsThenPushToZipArray() {
  1243. zipFilteredImgUrls.forEach((imgUrl, urlIndex) => {
  1244. if (imgUrl.includes("data:image")) {
  1245. return;
  1246. }
  1247.  
  1248. /* fetch(imgUrl,{
  1249. method: "get",
  1250. mode: 'cors'
  1251. }).then(response=>{
  1252. if (!response.ok) {
  1253. throw new Error('Network response was not OK');
  1254. }
  1255. return response.blob();
  1256. }).then(myBlob=>{
  1257. var blob = myBlob
  1258. let oFileReader = new FileReader();
  1259. oFileReader.onloadend = function (e) {
  1260. let base64 = e.target.result;
  1261. //console.log("》》", base64)
  1262.  
  1263. if (base64.includes("data:image")) {
  1264. zipFilteredImgUrls[urlIndex] = base64;
  1265. //zipImgWaitDownload.push(base64);
  1266. }
  1267. };
  1268. oFileReader.readAsDataURL(blob);
  1269. })
  1270. .catch((error)=>{ */
  1271. try {
  1272. let host=window.location.origin+"/";
  1273. GM_xmlhttpRequest({
  1274. method: "get",
  1275. url: imgUrl,
  1276. headers: {referer: host},
  1277. responseType: "blob",
  1278. onload: function (r) {
  1279. var blob = r.response;
  1280. let oFileReader = new FileReader();
  1281. oFileReader.onloadend = function (e) {
  1282. let base64 = e.target.result;
  1283. if (base64.startsWith("data:image")) {
  1284. zipFilteredImgUrls[urlIndex] = base64;
  1285. //zipImgWaitDownload.push(base64);
  1286. }
  1287. };
  1288. oFileReader.readAsDataURL(blob);
  1289. }
  1290. });
  1291. } catch (error) {
  1292.  
  1293. }
  1294.  
  1295. //})
  1296. })
  1297. }
  1298.  
  1299. function cutoffNotBase64Img(imgsUrlArray) {
  1300. let resultArr = [];
  1301. imgsUrlArray.forEach((imgUrl, urlIndex) => {
  1302. if (imgUrl.startsWith("data:image")&&imgUrl.includes("base64")) {
  1303. resultArr.push(imgUrl);
  1304. }
  1305. }
  1306. );
  1307. return resultArr;
  1308. }
  1309. //下面这个括号是wrapper的括号
  1310. }
  1311. })();