图片下载器

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

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

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