图片下载器

可以在绝大多数网站提取并批量下载图片。抓取能力大提升!现在可以抓取,H5游戏素材(4399),图库网站(千库网、包图网),漫画网站(腾讯漫画、b站漫画),文库网站(道客巴巴、豆丁),以及其他右键失效或者图片不能另存的网站,用脚本均可以提取并下载。额外功能:zip下载/自动大图。详细见脚本描述(目前适合chrome/firefox+tampermonkey,其他组合多少有问题)

当前为 2023-12-08 提交的版本,查看 最新版本

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