|
|
@@ -1,131 +1,131 @@
|
|
|
-// ==UserScript==
|
|
|
-// @name 图片下载器
|
|
|
-// @namespace http://tampermonkey.net/
|
|
|
-// @version 1.1
|
|
|
-// @description 尝试在页面顶部添加一个按钮,点击后下载页面所有图片
|
|
|
-// @author Jack
|
|
|
-// @match *://*/*
|
|
|
-// @grant GM_download
|
|
|
-// @grant GM_addStyle
|
|
|
-// @require https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.min.js
|
|
|
-// ==/UserScript==
|
|
|
-
|
|
|
-(function () {
|
|
|
- 'use strict';
|
|
|
-
|
|
|
- // 添加样式以确保按钮在页面加载时可见
|
|
|
- GM_addStyle(`
|
|
|
- .download-pic-button {
|
|
|
- position: fixed;
|
|
|
- top: 5%; /* 默认位置 */
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- z-index: 10000;
|
|
|
- border: none;
|
|
|
- background-color: transparent; /* 背景颜色设置为透明 */
|
|
|
- color: rgb(113, 100, 156); /* 字体颜色设置为指定的 RGB 值 */
|
|
|
- cursor: pointer;
|
|
|
- font-size: 15px;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
-`);
|
|
|
-
|
|
|
- // 创建按钮并添加到页面顶部的中间
|
|
|
- var downloadButton = document.createElement("button");
|
|
|
- downloadButton.textContent = "New Btn";
|
|
|
- downloadButton.className = 'download-pic-button';
|
|
|
- document.body.appendChild(downloadButton);
|
|
|
-
|
|
|
- // 检查特定元素是否存在,并设置按钮位置
|
|
|
- function checkElementAndSetButtonPosition() {
|
|
|
- var targetElement = document.querySelector("body > div.o_action_manager > div > div.o_control_panel > div.o_cp_bottom > div.o_cp_bottom_left > div > div > button.btn.btn-secondary.fa.fa-download.o_list_export_xlsx");
|
|
|
-
|
|
|
- if (targetElement) {
|
|
|
- // 如果元素存在,获取元素的位置和尺寸
|
|
|
- var targetRect = targetElement.getBoundingClientRect();
|
|
|
- // 设置按钮的 top 值,使其与目标元素顶部对齐
|
|
|
- downloadButton.style.top = `${targetRect.top + window.scrollY}px`;
|
|
|
- // 设置按钮的 left 值,使其在目标元素右侧偏移量为 targetElementWidth + offset
|
|
|
- var targetElementWidth = targetRect.width;
|
|
|
- var offset = 10; // 你可以根据需要调整这个偏移量
|
|
|
- downloadButton.style.left = `${targetRect.right + offset}px`; // 偏移量在目标元素右侧
|
|
|
- downloadButton.style.transform = 'none';
|
|
|
- } else {
|
|
|
- // 如果元素不存在,恢复按钮的默认位置
|
|
|
- downloadButton.style.top = '5%';
|
|
|
- downloadButton.style.left = '50%';
|
|
|
- downloadButton.style.transform = 'translateX(-50%)';
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 初始检查
|
|
|
- checkElementAndSetButtonPosition();
|
|
|
-
|
|
|
- // 监听滚动事件,以便在滚动时更新按钮位置
|
|
|
- window.addEventListener('scroll', function () {
|
|
|
- checkElementAndSetButtonPosition();
|
|
|
- });
|
|
|
-
|
|
|
- // 监听 DOM 变化,以便在元素被添加到页面时更新按钮位置
|
|
|
- var observer = new MutationObserver(function (mutations) {
|
|
|
- mutations.forEach(function (mutation) {
|
|
|
- if (mutation.type === 'childList') {
|
|
|
- checkElementAndSetButtonPosition();
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
- observer.observe(document.body, { childList: true, subtree: true });
|
|
|
-
|
|
|
- // 点击按钮时执行的函数
|
|
|
- // 点击按钮时执行的函数
|
|
|
- downloadButton.onclick = function () {
|
|
|
- var images = document.querySelectorAll('img'); // 获取页面上所有的<img>元素
|
|
|
- var zip = new JSZip();
|
|
|
-
|
|
|
- console.log(images);
|
|
|
- images.forEach(function (img) {
|
|
|
- var src = img.src; // 获取图片的src属性
|
|
|
- var filename = img.alt || 'image'; // 使用alt属性作为文件名,如果没有alt则默认为'image'
|
|
|
-
|
|
|
- // 获取文件扩展名,如果没有扩展名则默认为 'jpg'
|
|
|
- var extensionMatch = src.match(/\.([^.\/\?]+)$/); // 正则表达式匹配文件扩展名
|
|
|
- var extension = extensionMatch ? extensionMatch[1].toLowerCase() : 'jpg';
|
|
|
-
|
|
|
- // 检查扩展名是否是图片格式
|
|
|
- var validExtensions = ['jpg', 'jpeg', 'png', 'gif', 'svg', 'bmp', 'webp'];
|
|
|
- if (validExtensions.includes(extension)) {
|
|
|
- // 异步获取图片数据
|
|
|
- fetch(src)
|
|
|
- .then(response => {
|
|
|
- if (response.ok) return response.blob();
|
|
|
- throw new Error('Network response was not ok.');
|
|
|
- })
|
|
|
- .then(blob => {
|
|
|
- // 将blob添加到zip文件中
|
|
|
- zip.file(filename + '.' + extension, blob);
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- console.error('There was a problem with the fetch operation:', error);
|
|
|
- });
|
|
|
- } else {
|
|
|
- // 如果不是图片格式,跳过这个文件
|
|
|
- console.log('Skipped non-image file:', src);
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 当所有图片都添加到zip中后,生成并下载zip文件
|
|
|
- Promise.all(zip.files).then(() => {
|
|
|
- zip.generateAsync({ type: 'blob' }).then(function (content) {
|
|
|
- var filename = 'images_' + new Date().toISOString() + '.zip'; // 使用时间戳生成唯一的文件名
|
|
|
- var eleLink = document.createElement('a');
|
|
|
- eleLink.download = filename;
|
|
|
- eleLink.style.display = 'none';
|
|
|
- eleLink.href = URL.createObjectURL(content);
|
|
|
- document.body.appendChild(eleLink);
|
|
|
- eleLink.click();
|
|
|
- document.body.removeChild(eleLink);
|
|
|
- });
|
|
|
- });
|
|
|
- };
|
|
|
+// ==UserScript==
|
|
|
+// @name 图片下载器
|
|
|
+// @namespace http://tampermonkey.net/
|
|
|
+// @version 1.1
|
|
|
+// @description 尝试在页面顶部添加一个按钮,点击后下载页面所有图片
|
|
|
+// @author Jack
|
|
|
+// @match *://*/*
|
|
|
+// @grant GM_download
|
|
|
+// @grant GM_addStyle
|
|
|
+// @require https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.min.js
|
|
|
+// ==/UserScript==
|
|
|
+
|
|
|
+(function () {
|
|
|
+ 'use strict';
|
|
|
+
|
|
|
+ // 添加样式以确保按钮在页面加载时可见
|
|
|
+ GM_addStyle(`
|
|
|
+ .download-pic-button {
|
|
|
+ position: fixed;
|
|
|
+ top: 5%; /* 默认位置 */
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ z-index: 10000;
|
|
|
+ border: none;
|
|
|
+ background-color: transparent; /* 背景颜色设置为透明 */
|
|
|
+ color: rgb(113, 100, 156); /* 字体颜色设置为指定的 RGB 值 */
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 15px;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+`);
|
|
|
+
|
|
|
+ // 创建按钮并添加到页面顶部的中间
|
|
|
+ var downloadButton = document.createElement("button");
|
|
|
+ downloadButton.textContent = "New Btn";
|
|
|
+ downloadButton.className = 'download-pic-button';
|
|
|
+ document.body.appendChild(downloadButton);
|
|
|
+
|
|
|
+ // 检查特定元素是否存在,并设置按钮位置
|
|
|
+ function checkElementAndSetButtonPosition() {
|
|
|
+ var targetElement = document.querySelector("body > div.o_action_manager > div > div.o_control_panel > div.o_cp_bottom > div.o_cp_bottom_left > div > div > button.btn.btn-secondary.fa.fa-download.o_list_export_xlsx");
|
|
|
+
|
|
|
+ if (targetElement) {
|
|
|
+ // 如果元素存在,获取元素的位置和尺寸
|
|
|
+ var targetRect = targetElement.getBoundingClientRect();
|
|
|
+ // 设置按钮的 top 值,使其与目标元素顶部对齐
|
|
|
+ downloadButton.style.top = `${targetRect.top + window.scrollY}px`;
|
|
|
+ // 设置按钮的 left 值,使其在目标元素右侧偏移量为 targetElementWidth + offset
|
|
|
+ var targetElementWidth = targetRect.width;
|
|
|
+ var offset = 10; // 你可以根据需要调整这个偏移量
|
|
|
+ downloadButton.style.left = `${targetRect.right + offset}px`; // 偏移量在目标元素右侧
|
|
|
+ downloadButton.style.transform = 'none';
|
|
|
+ } else {
|
|
|
+ // 如果元素不存在,恢复按钮的默认位置
|
|
|
+ downloadButton.style.top = '5%';
|
|
|
+ downloadButton.style.left = '50%';
|
|
|
+ downloadButton.style.transform = 'translateX(-50%)';
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 初始检查
|
|
|
+ checkElementAndSetButtonPosition();
|
|
|
+
|
|
|
+ // 监听滚动事件,以便在滚动时更新按钮位置
|
|
|
+ window.addEventListener('scroll', function () {
|
|
|
+ checkElementAndSetButtonPosition();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 监听 DOM 变化,以便在元素被添加到页面时更新按钮位置
|
|
|
+ var observer = new MutationObserver(function (mutations) {
|
|
|
+ mutations.forEach(function (mutation) {
|
|
|
+ if (mutation.type === 'childList') {
|
|
|
+ checkElementAndSetButtonPosition();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ observer.observe(document.body, { childList: true, subtree: true });
|
|
|
+
|
|
|
+ // 点击按钮时执行的函数
|
|
|
+ // 点击按钮时执行的函数
|
|
|
+ downloadButton.onclick = function () {
|
|
|
+ var images = document.querySelectorAll('img'); // 获取页面上所有的<img>元素
|
|
|
+ var zip = new JSZip();
|
|
|
+
|
|
|
+ console.log(images);
|
|
|
+ images.forEach(function (img) {
|
|
|
+ var src = img.src; // 获取图片的src属性
|
|
|
+ var filename = img.alt || 'image'; // 使用alt属性作为文件名,如果没有alt则默认为'image'
|
|
|
+
|
|
|
+ // 获取文件扩展名,如果没有扩展名则默认为 'jpg'
|
|
|
+ var extensionMatch = src.match(/\.([^.\/\?]+)$/); // 正则表达式匹配文件扩展名
|
|
|
+ var extension = extensionMatch ? extensionMatch[1].toLowerCase() : 'jpg';
|
|
|
+
|
|
|
+ // 检查扩展名是否是图片格式
|
|
|
+ var validExtensions = ['jpg', 'jpeg', 'png', 'gif', 'svg', 'bmp', 'webp'];
|
|
|
+ if (validExtensions.includes(extension)) {
|
|
|
+ // 异步获取图片数据
|
|
|
+ fetch(src)
|
|
|
+ .then(response => {
|
|
|
+ if (response.ok) return response.blob();
|
|
|
+ throw new Error('Network response was not ok.');
|
|
|
+ })
|
|
|
+ .then(blob => {
|
|
|
+ // 将blob添加到zip文件中
|
|
|
+ zip.file(filename + '.' + extension, blob);
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ console.error('There was a problem with the fetch operation:', error);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ // 如果不是图片格式,跳过这个文件
|
|
|
+ console.log('Skipped non-image file:', src);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 当所有图片都添加到zip中后,生成并下载zip文件
|
|
|
+ Promise.all(zip.files).then(() => {
|
|
|
+ zip.generateAsync({ type: 'blob' }).then(function (content) {
|
|
|
+ var filename = 'images_' + new Date().toISOString() + '.zip'; // 使用时间戳生成唯一的文件名
|
|
|
+ var eleLink = document.createElement('a');
|
|
|
+ eleLink.download = filename;
|
|
|
+ eleLink.style.display = 'none';
|
|
|
+ eleLink.href = URL.createObjectURL(content);
|
|
|
+ document.body.appendChild(eleLink);
|
|
|
+ eleLink.click();
|
|
|
+ document.body.removeChild(eleLink);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ };
|
|
|
})();
|