🏠 Home　

图片下载器

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


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