简单纯洁的网页图片下载工具，侵入性小不影响原网页显示，可集中展示页面所有图片，可点击预览放大，可旋转，可查看图片信息(尺寸，格式，图片大小) | （Ctrl+鼠标右键）下载单个图片
// ==UserScript==
// @name 图片下载 | 页面所有图片打包下载 | 单张下载 | 图片预览放大,旋转,信息展示 | 简单有效，想要哪张点哪张
// @namespace http://tampermonkey.net/
// @description 简单纯洁的网页图片下载工具，侵入性小不影响原网页显示，可集中展示页面所有图片，可点击预览放大，可旋转，可查看图片信息(尺寸，格式，图片大小) | （Ctrl+鼠标右键）下载单个图片
// @description:zh-CN 一个帮你快速捕获网页图片并打包下载、也可单张下载的小工具🔧
// @author <shing0727@foxmail.com>
// @version v4.1.0
// @license GPLv3
// @icon https://s21.ax1x.com/2024/05/14/pkmNM0s.png
// @require https://code.jquery.com/jquery-3.6.0.min.js
// @require https://cdnjs.cloudflare.com/ajax/libs/jszip/3.6.0/jszip.min.js
// @require https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js
// @require https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.6/viewer.min.js
// @grant GM_xmlhttpRequest
// @grant GM_addStyle
// @grant GM_download
// @grant GM_registerMenuCommand
// @match *://*/*
// @connect *
// @grant GM_getValue
// @grant GM_setValue
// ==/UserScript==
var isPackLoad = false
// 多图片打包下载
const downloadPackZipImgs = (all_imgs = []) => {
if (!all_imgs.length || isPackLoad) return;
isPackLoad = true
isTopLoading(true, all_imgs.length)
const zip = new JSZip();
var currNum = 0;
let total = all_imgs.length
Promise.all(
all_imgs.map((item, index) => {
if (item.blob) {
zip.file(item.imgName, item.blob, { binary: true });
realTimeSchedule(++currNum, total)
return Promise.resolve()
}
return new Promise((resolve, reject) => {
GM_xmlhttpRequest({
method: "GET",
url: item.src,
responseType: "blob",
onload: function (response) {
if (response.status === 200) {
let blob = response.response;
item.blob = blob
if (blob.size > (1024 * 1024)) {
item.size = (blob.size / (1024 * 1024)).toFixed(1) + 'MB'
} else if (blob.size < (1024 * 1024) && blob.size > 1024) {
item.size = (blob.size / 1024).toFixed(1) + 'KB'
} else {
item.size = blob.size + '字节'
}
setItemImgsName(item)
updateNodeItem(item)
const filename = item.imgName;
zip.file(filename, blob, { binary: true });
} else {
console.error("请求报错，状态码： " + response.status);
}
realTimeSchedule(++currNum, total)
resolve();
},
onerror: function (e) {
console.error("请求失败: " + e.message);
realTimeSchedule(++currNum, total)
resolve();
},
});
});
})
)
.then(() => {
// let domain = window.location.href.replace(/^https?:\/\//i, "");
zip.generateAsync({ type: "blob" }).then((blob) => {
// saveAs(blob, `【${document.title}】【${domain}】.zip`);
let str = $('#ccc_all_page_rename_val').val()
str = str.length > 245 ? str.substring(0, 245) : str;
saveAs(blob, `${str}.zip`);
});
}).finally(() => {
isPackLoad = false
isTopLoading(false)
})
}
// 指定数组元素对象属性去重、去除宽高小于1的
function removeDuplicatesByProperty(arr = [], property) {
const seenIds = new Set();
return arr.filter(item => {
const isUnique = !seenIds.has(item[property]);
if (isUnique) {
seenIds.add(item[property]);
}
return isUnique;
});
}
// 根据blob设置图片后缀名
function setItemImgsName(item) {
try {
let { src = "", blob = {} } = item
let name = src.match(/\/([^\/?#]+)(?:[?#]|$)/)[1].split('.')[0]
if (blob?.type && blob?.type.includes('image')) {
item.lastName = blob.type.match(/^image\/([a-zA-Z0-9]+)/)[1]
item.isImg = true
} else {
item.isImg = false
}
item.imgName = decodeURIComponent(name + '.' + item.lastName)
} catch (e) {
console.log('e = ', e)
}
}
// 更新节点显示信息
function updateNodeItem(item) {
try {
$('.ccc_image_item').each(function () {
if ($(this).attr('data-imgsrc') == item.src) {
let info = ''
let imgDom = $(this).children('img')[0]
if (imgDom.naturalWidth || imgDom.naturalHeight) {
info = imgDom.naturalWidth + ' x ' + imgDom.naturalHeight
item.width = imgDom.naturalWidth
item.height = imgDom.naturalHeight
}
if (item.lastName) {
info += (' | ' + item.lastName.toUpperCase())
}
if (item.size) {
info += (' | ' + item.size)
}
$(this).find('.ccc_imgItem_info').text(info)
item.isFullInfo = true
}
})
} catch (e) {
console.log(e)
}
}
// 获取单张图片blob
const getSingleBlob = (item) => {
return new Promise((resolve, reject) => {
GM_xmlhttpRequest({
method: "GET",
url: item.src,
responseType: "blob",
onload: function (response) {
if (response.status === 200) {
let blob = response.response;
item.blob = blob
if (blob.size > (1024 * 1024)) {
item.size = (blob.size / (1024 * 1024)).toFixed(1) + 'MB'
} else if (blob.size < (1024 * 1024) && blob.size > 1024) {
item.size = (blob.size / 1024).toFixed(1) + 'KB'
} else {
item.size = blob.size + '字节'
}
setItemImgsName(item)
updateNodeItem(item)
resolve(item);
} else {
console.error("请求报错，状态码： " + response.status);
}
},
onerror: function (e) {
console.error("请求失败: " + e.message);
reject();
},
});
})
}
// 根据svg元素返回{src，blob}
const getSvgAsFile = (svgElement) => {
// 将 SVG 元素序列化为字符串
const svgString = new XMLSerializer().serializeToString(svgElement);
// 创建一个包含 SVG 数据的 Blob 对象
const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
// 创建一个 URL 对象
const src = URL.createObjectURL(blob);
return {
src,
blob,
}
}
// 获取页面所有图片
const loadAllImgUrls = async () => {
all_imgs = []
document.querySelectorAll("img").forEach((item) => {
let src = item?.src || item.getAttribute("srcset");
if (!src) return;
if (origin_all_imageUrls.some(n => {
if (n.src === src) {
all_imgs.push(n)
return true
} else {
false
}
})) return;
let imgName = getImageFileNameFromUrl(src)
let lastName = ''
if (imgName.includes('.')) {
let last = imgName.split('.').pop()
if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg', 'tiff', 'tif', 'avif'].includes(last)) {
lastName = last
}
}
all_imgs.push({
src,
imgName,
lastName,
width: item.naturalWidth,
height: item.naturalHeight,
});
});
// 获取SVG标签图片
// document.querySelectorAll("svg").forEach((svgDom, index) => {
// let {src, blob} = getSvgAsFile(svgDom)
// const { width, height } = svgDom.getBoundingClientRect();
// all_imgs.push({
// src,
// blob,
// imgName: `svg_${index}.svg`,
// lastName: 'svg',
// width,
// height
// });
// })
resetImgsObj(all_imgs)
}
const reFetchImgs = () => {
loadAllImgUrls()
let w_min = parseInt($('#ccc_w_min').val()) || 0
let w_max = parseInt($('#ccc_w_max').val()) || 99999
let h_min = parseInt($('#ccc_h_min').val()) || 0
let h_max = parseInt($('#ccc_h_max').val()) || 99999
all_imageUrls = valid_all_imageUrls.filter(item => {
if (item.width < w_min || item.width > w_max) return false
if (item.height < h_min || item.height > h_max) return false
return true
})
reRender()
showNotify('已刷新')
}
// 显示通知
var notifyTimer = null;
function showNotify(msg) {
if (notifyTimer) {
clearTimeout(notifyTimer)
$('#ccc_notify').remove()
}
$('#ccc_popUps_container').append(`<div id="ccc_notify">${msg}</div>`)
setTimeout(() => {
$('#ccc_notify').addClass('active')
}, 16);
notifyTimer = setTimeout(() => {
$('#ccc_notify').remove()
}, 1000);
}
// 获取图片名称
function getImageFileNameFromUrl(url) {
// 正则表达式匹配最后一个'/'和第一个'?'之间的内容（如果存在）
// 或者最后一个'/'和字符串结尾之间的内容（如果不存在查询参数）
const regex = /\/([^?\/]+?)(?:\?|$|@)/;
const match = url.match(regex);
if (match && match[1]) {
// match[1] 是文件名（不包括查询参数及其后面的部分）
return match[1];
}
return "default.jpg";
}
// 获取图片扩展名
function getImageExtension(url) {
var extension = url.match(/\.(jpg|jpeg|png|gif|bmp|webp|svg|tiff|tif|avif)$/i);
if (extension) {
return '';
}
if (url.includes("data:image/png")) {
return '.png'
}
if (url.includes("data:image/gif")) {
return '.gif'
}
return '.jpg'
}
function deepClone(source) {
if (!source && typeof source !== 'object') {
throw new Error('error arguments', 'deepClone')
}
const targetObj = source.constructor === Array ? [] : {}
Object.keys(source).forEach(keys => {
if (source[keys] && typeof source[keys] === 'object') {
targetObj[keys] = deepClone(source[keys])
} else {
targetObj[keys] = source[keys]
}
})
return targetObj
}
var origin_all_imageUrls = []; // 所有图片
var valid_all_imageUrls = []; // 有效图片 = 所有图片 - 移除图片
var all_imageUrls = []; // 筛选后的图片
// 初始化加载图片数据
const resetImgsObj = (imgsObj = []) => {
imgsObj = removeDuplicatesByProperty(imgsObj, 'src')
if (imgsObj.length) {
origin_all_imageUrls = deepClone(imgsObj)
valid_all_imageUrls = deepClone(imgsObj)
all_imageUrls = deepClone(imgsObj)
$('.pop_title_num').text(all_imageUrls.length)
$('#load_mask').css('display', 'none')
$('#open_popUps_icon>.pop_title_num').css('display', 'block')
reRender()
} else {
}
}
// blob图片下载
const blobDownload = (item = {}) => {
let { blob, imgName } = item
// 创建一个Blob UFRL
const url = window.URL.createObjectURL(blob);
// 创建一个<a>标签用于下载
const a = document.createElement("a");
a.href = url;
a.download = imgName; // 设置下载的文件名
a.style.display = "none";
// 触发点击事件
document.body.appendChild(a);
a.click();
// 释放URL对象
window.URL.revokeObjectURL(url);
// 清理<a>标签
document.body.removeChild(a);
}
// 渲染图片列表
var viewer = null;
const reRender = () => {
// // 去除宽高小于1
// all_imageUrls = all_imageUrls.filter(item => {
// return item.width > 1 && item.height > 1
// })
$('.pop_title_num').text(all_imageUrls.length)
var $newElements = $();
all_imageUrls.forEach(item => {
let addCss = item.isFullInfo === true ? 'hide_more' : ''
var $el = $('<div>', { class: 'ccc_image_item ' + addCss, "data-imgsrc": item.src });
var $img = $('<img>', { src: item.src, alt: item.imgName, title: '预览' });
let info = '';
if (item.width || item.height) {
info = item.width + ' x ' + item.height
}
if (item.lastName) {
let s = (item.width || item.height) ? ' | ' : ''
info += (s + item.lastName.toUpperCase())
}
if (item.size) {
info += (' | ' + item.size)
}
var $infoBox = $('<div>', { text: info, class: 'ccc_imgItem_info' });
$img.appendTo($el);
$infoBox.appendTo($el);
$newElements = $.merge($newElements, $el);
});
$('#ccc_image_container').empty().append($newElements);
$('.ccc_image_item').each(function () {
$(this).append(`
<div class="ccc_imgItem_ctrl">
<div class="click_style" title="下载"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" t="1723013152119" class="icon" viewBox="0 0 1024 1024" version="1.1" p-id="6158" width="200" height="200"><path d="M862.39 161.61A222.53 222.53 0 0 0 704 96H320A224 224 0 0 0 96 320v384a224 224 0 0 0 224 224h384a224 224 0 0 0 224-224V320a222.53 222.53 0 0 0-65.61-158.39zM704 736a32 32 0 0 1-32 32H352a32 32 0 0 1-32-32 32 32 0 0 1 32-32h320a32 32 0 0 1 32 32z m-8.88-211.62L529.75 634.63a32 32 0 0 1-35.5 0L328.88 524.38A32 32 0 0 1 320 480a32 32 0 0 1 44.38-8.88l103.18 68.8a8 8 0 0 0 12.44-6.66V288a32 32 0 0 1 32-32 32 32 0 0 1 32 32v245.26a8 8 0 0 0 12.44 6.66l103.18-68.8A32 32 0 0 1 704 480a32 32 0 0 1-8.88 44.38z" fill="#ffffff" p-id="6159"/></svg></div>
</div>
<div class="ccc_imgItem_delete click_style" title="移除"><span></span></div>
`)
$(this).find('.ccc_imgItem_info').append(`
<span class="ccc_more"> ···</span>
`)
})
viewer && viewer.destroy();
viewer = new Viewer(document.getElementById('ccc_image_container'));
}
const setLoading = (target, isLoading = true) => {
if (isLoading) {
$(target).append(
`
<div id="ccc_itemImgLoading">
<div class="loader"></div>
</div>
`
)
} else {
$(target).find('#ccc_itemImgLoading').remove();
}
}
var ccc_currentVersion = 'v4.1.0';
var hasUpdate = false;
var onlineVersion = null; // 线上版本号
var online_homeUrl = 'https://greasyfork.org/zh-CN/scripts/492706-%E5%9B%BE%E7%89%87%E4%B8%8B%E8%BD%BD-%E9%A1%B5%E9%9D%A2%E6%89%80%E6%9C%89%E5%9B%BE%E7%89%87%E6%89%93%E5%8C%85%E4%B8%8B%E8%BD%BD-%E5%8D%95%E5%BC%A0%E4%B8%8B%E8%BD%BD-%E5%9B%BE%E7%89%87%E9%A2%84%E8%A7%88%E6%94%BE%E5%A4%A7-%E6%97%8B%E8%BD%AC-%E4%BF%A1%E6%81%AF%E5%B1%95%E7%A4%BA-%E7%AE%80%E5%8D%95%E6%9C%89%E6%95%88-%E6%83%B3%E8%A6%81%E5%93%AA%E5%BC%A0%E7%82%B9%E5%93%AA%E5%BC%A0'; // 脚本首页地址
var online_update_url = 'https://update.greasyfork.org/scripts/492706/%E5%9B%BE%E7%89%87%E4%B8%8B%E8%BD%BD%20%7C%20%E9%A1%B5%E9%9D%A2%E6%89%80%E6%9C%89%E5%9B%BE%E7%89%87%E6%89%93%E5%8C%85%E4%B8%8B%E8%BD%BD%20%7C%20%E5%8D%95%E5%BC%A0%E4%B8%8B%E8%BD%BD%20%7C%20%E5%9B%BE%E7%89%87%E9%A2%84%E8%A7%88%E6%94%BE%E5%A4%A7,%E6%97%8B%E8%BD%AC,%E4%BF%A1%E6%81%AF%E5%B1%95%E7%A4%BA%20%7C%20%E7%AE%80%E5%8D%95%E6%9C%89%E6%95%88%EF%BC%8C%E6%83%B3%E8%A6%81%E5%93%AA%E5%BC%A0%E7%82%B9%E5%93%AA%E5%BC%A0.user.js'; // 脚本首页地址
const loadUpdateTamp = () => {
const extractVersion = (htmlString) => {
// 使用正则表达式匹配 data-script-version 属性的值
const versionMatch = htmlString.match(/data-script-version="([^"]+)"/);
// 如果匹配成功，返回版本号；否则返回 null
return versionMatch ? versionMatch[1] : null;
}
const isUpdateAvailable = (ccc_currentVersion, onlineVersion) => {
const current = ccc_currentVersion.replace('v', '').split('.').map(Number);
const online = onlineVersion.replace('v', '').split('.').map(Number);
for (let i = 0; i < Math.max(current.length, online.length); i++) {
const currentPart = current[i] || 0; // 如果当前版本号部分不存在，则默认为 0
const onlinePart = online[i] || 0; // 如果线上版本号部分不存在，则默认为 0
if (onlinePart > currentPart) {
return true; // 如果线上版本号更高，则需要更新
} else if (onlinePart < currentPart) {
return false; // 如果线上版本号更低，则不需要更新
}
// 如果当前部分的版本号相等，继续比较下一部分
}
// 如果所有部分的版本号都相等，则不需要更新
return false;
}
GM_xmlhttpRequest({
method: "GET",
url: online_homeUrl,
onload: function (res) {
if (res.status === 200) {
onlineVersion = extractVersion(res.response)
hasUpdate = isUpdateAvailable(ccc_currentVersion, onlineVersion)
if (hasUpdate) {
GM_registerMenuCommand("有新版本啦~(♥ω", function () {
window.open(online_update_url, '_blank');
});
$('#ccc_gotoUpdate').append(`
<a href="${online_update_url}" target="_blank">有新版本啦，快去体验下吧~(♥ω</a>
`)
}
}
},
onerror: function (e) {
console.error(e);
},
});
}
// 渲染展示筛选条件
function renderViewFilter() {
let w_min = $('#ccc_w_min').val()
let w_max = $('#ccc_w_max').val() || '∞'
let h_min = $('#ccc_h_min').val()
let h_max = $('#ccc_h_max').val() || '∞'
let isView = false
$('#ccc_view_filter_itembox').empty();
if (w_min || $('#ccc_w_max').val()) {
$('#ccc_view_filter_itembox').append(`
<span>宽 ${w_min || 0} - ${w_max}</span>
`)
isView = true
}
if (h_min || $('#ccc_h_max').val()) {
$('#ccc_view_filter_itembox').append(`
<span>高 ${h_min || 0} - ${h_max}</span>
`)
isView = true
}
if (isView) {
$('.ccc_view_filter').css({ display: 'flex' })
} else {
$('.ccc_view_filter').css({ display: 'none' })
}
}
// 主要交互操作逻辑
const loadMainOperations = () => {
GM_registerMenuCommand("打开图片列表（ALT + Q）", function () {
handleOpenPopPus()
});
var isOpenPop = false;
// 处理打开弹窗
const handleOpenPopPus = () => {
isOpenPop = true;
document.querySelector('#ccc_popUps_out').style.display = 'block';
setLayout();
}
// 处理关闭弹窗
const handleClosePop = () => {
isOpenPop = false
document.querySelector('#ccc_popUps_out').style.display = 'none';
}
// 关闭弹窗
document.querySelector('#ccc_close_popUps').onclick = function () {
handleClosePop()
}
// 快捷键事件
document.addEventListener('keydown', function (event) {
// 按alt + ` 显隐弹窗
if (event.altKey && (event.key === 'Q' || event.key === 'q')) {
isOpenPop ? handleClosePop() : handleOpenPopPus()
}
// Esc键-关闭弹窗
if (event.key === 'Escape' || event.key === 'Esc') {
handleClosePop()
}
});
const setLayout = () => {
reRender() //渲染图片
let container_h = ccc_popUps_container.offsetHeight - 30;
ccc_image_container.style.height = (container_h - ccc_popUps_top.offsetHeight - 30) + 'px';
}
var isShowFilter = false;
// 显示筛选
const showHideFilter = (is, key) => {
isShowFilter = is
let speed = 300
key === 'leave' && (speed = 500)
if (key === 'enter') {
$('#ccc_filter_container').stop();
$('#ccc_filter_container').css('opacity', 1)
return;
}
if (isShowFilter) {
$('#ccc_filter_container').fadeIn(speed);
} else {
$('#ccc_filter_container').fadeOut(speed);
}
}
$('#ccc_filter_btn').click(function (e) {
e.stopPropagation(); // 阻止事件冒泡
isShowFilter = !isShowFilter
showHideFilter(isShowFilter)
})
$('#ccc_filter_container').click(function (e) {
e.stopPropagation(); // 阻止事件冒泡
})
$(document).click(function (e) {
showHideFilter(false)
})
$('#ccc_filter_container').mouseleave(function () {
showHideFilter(false, 'leave')
});
$('#ccc_filter_container').mouseenter(function () {
showHideFilter(true, 'enter')
});
// 筛选input触发
$('.ccc_filter_input').on('input', function () {
let w_min = parseInt($('#ccc_w_min').val()) || 0
let w_max = parseInt($('#ccc_w_max').val()) || 99999
let h_min = parseInt($('#ccc_h_min').val()) || 0
let h_max = parseInt($('#ccc_h_max').val()) || 99999
all_imageUrls = valid_all_imageUrls.filter(item => {
if (item.width < w_min || item.width > w_max) return false
if (item.height < h_min || item.height > h_max) return false
return true
})
reRender()
renderViewFilter()
});
// 重置筛选触发
$("#refilter_btn").click(function () {
$('#ccc_w_min').val('')
$('#ccc_w_max').val('')
$('#ccc_h_min').val('')
$('#ccc_h_max').val('')
all_imageUrls = valid_all_imageUrls
reRender()
renderViewFilter()
})
// 点击按钮下载单张图片
$('#ccc_image_container').on('click', '.ccc_imgItem_ctrl svg', function () {
let url = $(this).closest('.ccc_image_item').attr('data-imgsrc')
let item = all_imageUrls.filter(item => item.src === url)[0]
if (item.lock) return;
item.lock = true
let target = $(this).closest('.ccc_image_item')
setLoading(target, true)
if (item.lastName && item.blob) {
blobDownload(item)
item.lock = false
setLoading(target, false)
} else {
getSingleBlob(item).then(res => {
blobDownload(res)
item.lock = false
setLoading(target, false)
})
}
})
// 移除图片
$('#ccc_image_container').on('click', '.ccc_imgItem_delete', function () {
let url = $(this).closest('.ccc_image_item').attr('data-imgsrc')
valid_all_imageUrls = valid_all_imageUrls.filter(item => item.src !== url)
all_imageUrls = all_imageUrls.filter(item => item.src !== url)
reRender()
})
// 显示更多
$('#ccc_image_container').on('click', '.ccc_imgItem_info', function () {
let url = $(this).closest('.ccc_image_item').attr('data-imgsrc')
let item = all_imageUrls.filter(item => item.src === url)[0]
if (item.lock) return;
item.lock = true
$(this).find('.ccc_more').empty().append(`<div class="loader"></div>`);
$(this).closest('.ccc_image_item').find('.ccc_imgItem_ctrl>div').css('cursor', 'no-drop').removeClass('click_style')
getSingleBlob(item).then(res => {
}).finally(() => {
$(this).find('.ccc_more').remove();
$(this).css('cursor', 'initial')
$(this).closest('.ccc_image_item').find('.ccc_imgItem_ctrl>div').css('cursor', 'pointer').addClass('click_style')
item.lock = false
})
})
// 显隐主体icon
var isShowMainIcon = GM_getValue('ccc_main_icon_isshow', true);
$(document).on('click', '#showhide_main_btn', function () {
isShowMainIcon = !isShowMainIcon
handleShowHide()
})
const handleShowHide = () => {
let speed = 600
$('#ccc_main_icon_container').css({
transition: `all ${speed}ms`
})
GM_setValue('ccc_main_icon_isshow', isShowMainIcon);
if (isShowMainIcon) {
$('#ccc_main_icon_container').css({
'right': '20px',
})
$('#showhide_main_btn').css({
left: 'auto',
right: '0',
opacity: '0',
}).text('»')
} else {
$('#ccc_main_icon_container').css({
'right': '-30px',
})
$('#showhide_main_btn').css({
right: 'auto',
left: '-40px',
opacity: '1',
}).text('«')
}
setTimeout(() => {
$('#ccc_main_icon_container').css({
transition: 'none'
})
}, speed);
}
handleShowHide()
$('#ccc_popUps_container').click(function (e) {
e.stopPropagation()
})
document.getElementById('ccc_popUps_out').addEventListener("mousedown", function (event) {
if (event.target.id === 'ccc_popUps_out') {
let flag = document.querySelector('.ccc_all_pack_down_container').classList.contains('ccc_focus_rename');
if (flag) return;
handleClosePop()
}
});
// 声明拖动事件
function bindHandleDrag() {
let isMove = false
let mouseToEleY;
let mainContainerDom = document.querySelector('#ccc_main_icon_container')
let iconDom = document.querySelector('#open_popUps_icon')
let isOpen = true;
// 拖动处理
mainContainerDom.addEventListener("mousedown", function (e) {
isMove = true
// 获取鼠标相对于元素的位置
mouseToEleY = e.clientY - mainContainerDom.getBoundingClientRect().top;
});
// 当鼠标移动时
window.addEventListener('mousemove', (e) => {
if (!isMove) return
document.body.style.userSelect = 'none';
iconDom.style.cursor = 'grabbing'
// 防止默认的拖动选择文本行为
e.preventDefault();
let newTop = e.clientY - mouseToEleY;
// 防止元素超出视口下方
let maxTop = window.innerHeight - mainContainerDom.offsetHeight;
if (newTop < 0) {
newTop = 0;
} else if (newTop > maxTop) {
newTop = maxTop;
}
mainContainerDom.style.top = `${newTop}px`;
mainContainerDom.style.bottom = 'auto';
isOpen = false;
})
// 当鼠标松开时
document.querySelector('#open_popUps_icon').addEventListener('mouseup', () => {
isOpen && handleOpenPopPus() // 打开弹窗
});
window.addEventListener('mouseup', () => {
isMove = false;
iconDom.style.cursor = 'pointer'
isOpen = true
document.body.style.userSelect = 'auto';
});
}
bindHandleDrag();
// 刷新抓取
document.querySelector('#ccc_fetch_btn').onclick = () => {
reFetchImgs()
}
// 检测是否移除icon
var isRemoveIcon = GM_getValue('ccc_main_icon_isRemoveIcon', true);
handleRemoveIcon(isRemoveIcon)
GM_registerMenuCommand('（显示/移除）右下角图标', function () {
isRemoveIcon = !isRemoveIcon
GM_setValue('ccc_main_icon_isRemoveIcon', isRemoveIcon);
handleRemoveIcon(isRemoveIcon)
});
// 处理是否显示右下角图片及注册油猴Menu
function handleRemoveIcon(flag){
if(flag === true){
$('#ccc_main_icon_container').show()
}else{
$('#ccc_main_icon_container').hide()
}
}
}
// 初始声明事件
const initEvents = () => {
// ctrl+右键 下载图片
document.addEventListener("mousedown", function (event) {
if (event.ctrlKey && event.button === 2) {
event.preventDefault();
var targetElement = event.target;
const getUrl = (dom) => {
return dom.getAttribute("src") || dom.getAttribute("srcset") || "";
};
if (targetElement) {
let url = getUrl(targetElement);
let srcArr = [];
if (url) {
srcArr = [url];
} else {
let arrDom = targetElement.querySelectorAll("img");
arrDom.forEach((item) => {
srcArr.push(getUrl(item));
});
}
srcArr.forEach((url) => {
let item = {
src: url
}
getSingleBlob(item).then(res => {
blobDownload(res)
})
});
}
}
});
document.querySelector('#ccc_all_pack_down_btn').onclick = function () {
downloadPackZipImgs(all_imageUrls)
}
// 获取textarea元素
var textareaDom = document.getElementById('ccc_all_page_rename_val')
// 监听focus事件
textareaDom.addEventListener('focus', function () {
document.querySelector('.ccc_all_pack_down_container').classList.add('ccc_focus_rename');
});
// 监听blur事件
textareaDom.addEventListener('blur', function () {
setTimeout(() => {
document.querySelector('.ccc_all_pack_down_container').classList.remove('ccc_focus_rename');
}, 100);
});
var ccc_domain = window.location.href.replace(/^https?:\/\//i, "");
var ccc_zipFileName = `【${document.title}】【${ccc_domain}】`
$(textareaDom).val(ccc_zipFileName)
}
// 打包下载loading
function isTopLoading(flag, total) {
if (flag) {
if ($('#ccc_load_tip_style').length) {
$('#ccc_load_tip_style').remove();
}
$('body').append(`
<div id="ccc_load_tip_style">
<div>稍等片刻，正在打包下载...</div>
<div class="ccc_schedule_container">
<div class="ccc_schedule_bg"><div class="ccc_schedule_curr"></div></div>
<div class="ccc_schedule_text"><span id="curr_ing">0</span>/${total}</div>
</div>
</div>
`)
$('#ccc_all_pack_down_btn').css('cursor', 'no-drop').removeClass('click_style')
} else {
$('#ccc_load_tip_style').length && $('#ccc_load_tip_style').css('right', '-280px')
$('#ccc_all_pack_down_btn').css('cursor', 'pointer').addClass('click_style')
setTimeout(() => {
$('#ccc_load_tip_style').remove();
}, 800);
}
}
// 实时计算进度条
const realTimeSchedule = (curr, total) => {
try {
if ($('#curr_ing').length) {
$('#curr_ing').text(curr)
let w = ((curr / total) * 100).toFixed(1) + '%'
$('.ccc_schedule_curr').css('width', w)
}
} catch (e) {
console.log(e)
}
}
// 初始化加载页面
const init = () => {
window.addEventListener("load", function () {
if (window.self !== window.top) return;
setTimeout(() => {
loadCss()
loadElementDOM()
loadAllImgUrls();
loadMainOperations();
initEvents();
// loadUpdateTamp()
}, 300);
});
};
(function () {
init();
})();
const loadElementDOM = () => {
$("body").append(`
<!-- 主体Icom -->
<div id="ccc_main_icon_container">
<div id="showhide_main_btn" class="none_select">»</div>
<div id="open_popUps_icon" title="ALT + Q">
<span class="pop_title_num none_select">0</span>
<svg t="1719977292759" class="icon" viewBox="0 0 1248 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="9887" width="256" height="256">
<path
d="M0 159.430165V865.420028c0 65.985105 13.006679 78.509585 76.517343 78.509585h867.120413c62.977707 0 76.504653-12.029592 76.504653-78.458827v-706.040621c0-64.322788-11.991524-78.446138-76.504653-78.446138H76.504653C13.247779 80.984027 0 92.214184 0 159.430165z m900.02414 601.479609H120.638537c85.184232-127.389321 236.670806-339.721774 275.157887-339.721774 37.268895 0 163.693818 171.561272 220.796312 231.950332 0 0 73.484566-100.665353 111.984336-100.665353 39.261137 0 170.114676 207.358192 171.38362 208.398726zM671.017758 316.33513c0-53.295662 42.065504-96.439769 94.092221-96.439768s94.092222 43.144107 94.092222 96.439768-42.065504 96.439769-94.092222 96.439769-94.092222-43.144107-94.092221-96.439769zM478.39201 33.652403L329.265673 4.631647c-49.488829-9.631287-69.132087-6.167069-81.212437 29.020756z m702.792123 136.741441l-116.742877-22.714104c0 2.905882 0.076137 5.799076 0.076136 8.654201v710.050485c0 32.992552-2.131826 70.236068-27.536092 95.767228-24.706346 24.820551-60.503265 26.90162-92.099979 26.901619h-70.439099l149.824256 29.18572c61.873725 12.042282 77.405604 2.804367 89.435196-62.44475l128.379097-693.693793c11.699667-63.206117 2.537889-79.372467-60.909327-91.706606z"
p-id="9888" fill="#333333"></path>
</svg>
</div>
</div>
<!-- 弹窗 -->
<div id="ccc_popUps_out">
<div id="ccc_popUps_container">
<div id="ccc_popUps_top">
<div id="ccc_title_ctrl">
<div class="ccc_title_text">网页图片列表 (共 <span class="pop_title_num">0</span> 张)</div>
<div id="ccc_filter_out">
<svg id="ccc_filter_btn" class="click_style" t="1719976985515" class="icon"
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6880"
width="256" height="256">
<path
d="M577.499296 1023.99875a99.999878 99.999878 0 0 1-47.999942-11.999985l-131.999839-72.999911a99.999878 99.999878 0 0 1-51.999936-87.999893V431.999473a19.999976 19.999976 0 0 0-7.99999-15.999981L32.499961 171.99979l-3.999995-3.999995C0.5 138.99983-6.499991 96.999882 9.499989 59.999927S60.499927 0 100.499878 0h821.998997c39.999951 0 75.999907 22.999972 91.999887 59.999927s8.999989 77.999905-17.999978 107.999868l-3.999995 3.999995-307.999624 246.999699a19.999976 19.999976 0 0 0-6.999991 15.99998v488.999403a99.999878 99.999878 0 0 1-99.999878 99.999878zM84.499897 111.999863l302.999631 241.999705a98.999879 98.999879 0 0 1 37.999953 77.999905v418.999488a19.999976 19.999976 0 0 0 9.999988 17.999978l131.999839 71.999912a19.999976 19.999976 0 0 0 29.999963-17.999978V434.999469a99.999878 99.999878 0 0 1 36.999955-77.999905l303.999629-244.999701a19.999976 19.999976 0 0 0-15.99998-31.999961H100.499878a19.999976 19.999976 0 0 0-15.999981 31.999961z m881.998924 28.999965z"
fill="#333333" p-id="6881"></path>
<path
d="M983.4988 520.999364H757.499076a39.999951 39.999951 0 0 1 0-79.999902h225.999724a39.999951 39.999951 0 0 1 0 79.999902zM983.4988 670.999181H757.499076a39.999951 39.999951 0 0 1 0-79.999902h225.999724a39.999951 39.999951 0 0 1 0 79.999902zM983.4988 819.998999H757.499076a39.999951 39.999951 0 0 1 0-79.999902h225.999724a39.999951 39.999951 0 0 1 0 79.999902z"
fill="#333333" p-id="6882"></path>
</svg>
<div id="ccc_filter_container">
<div>宽：<input id="ccc_w_min" class="ccc_filter_input" type="text"
placeholder="0"><span>-</span><input id="ccc_w_max" class="ccc_filter_input"
type="text" placeholder="∞">
</div>
<div>高：<input id="ccc_h_min" class="ccc_filter_input" type="text"
placeholder="0"><span>-</span><input id="ccc_h_max" class="ccc_filter_input"
type="text" placeholder="∞">
</div>
<div>
<div id="refilter_btn" class="click_style">重置</div>
</div>
</div>
</div>
<div class="ccc_view_filter">
<span style="font-weight: bold;">筛选条件：</span>
<div id="ccc_view_filter_itembox">
</div>
</div>
</div>
<div class="ccc_popUps_top_right">
<div id="ccc_gotoUpdate"></div>
<div id="ccc_fetch_pageImgs_text">
<div id="ccc_fetch_btn" class="click_style none_select">刷新抓取</div>
<div class="ccc_fetch_tips none_select">(非首屏载入网页的图片，需刷新抓取)</div>
</div>
<div class="ccc_all_pack_down_container">
<div id="ccc_all_pack_down_btn" class="none_select click_style"><span
class="pop_title_num">0</span>打包下载
</div>
<!-- 🖊✍ -->
<div id="ccc_all_page_rename"><span class="ccc_all_page_rename_icon">✍</span>
<div class="ccc_all_page_rename_out">
<div class="ccc_all_page_rename_container">
<div class="ccc_all_page_rename_container_tips_font">重命名压缩包文件名称：</div>
<textarea id="ccc_all_page_rename_val" maxlength="255"></textarea>
</div>
</div>
</div>
</div>
<div id="ccc_close_popUps" class="none_select" title="Esc">❌</div>
</div>
</div>
<div id="load_mask">图片加载中...</div>
<div id="ccc_image_container">
<!-- <div class="ccc_image_item"></div> -->
</div>
</div>
</div>
`)
}
const loadCss = () => {
GM.addStyle(
`
/*!
* Viewer.js v1.10.5
* https://fengyuanchen.github.io/viewerjs
*
* Copyright 2015-present Chen Fengyuan
* Released under the MIT license
*
* Date: 2022-04-05T08:21:00.150Z
*/
.viewer-zoom-in::before, .viewer-zoom-out::before, .viewer-one-to-one::before, .viewer-reset::before, .viewer-prev::before, .viewer-play::before, .viewer-next::before, .viewer-rotate-left::before, .viewer-rotate-right::before, .viewer-flip-horizontal::before, .viewer-flip-vertical::before, .viewer-fullscreen::before, .viewer-fullscreen-exit::before, .viewer-close::before {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAAUCAYAAABWOyJDAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAQPSURBVHic7Zs/iFxVFMa/0U2UaJGksUgnIVhYxVhpjDbZCBmLdAYECxsRFBTUamcXUiSNncgKQbSxsxH8gzAP3FU2jY0kKKJNiiiIghFlccnP4p3nPCdv3p9778vsLOcHB2bfveeb7955c3jvvNkBIMdxnD64a94GHMfZu3iBcRynN7zAOI7TG15gHCeeNUkr8zaxG2lbYDYsdgMbktBsP03jdQwljSXdtBhLOmtjowC9Mg9L+knSlcD8TNKpSA9lBpK2JF2VdDSR5n5J64m0qli399hNFMUlpshQii5jbXTbHGviB0nLNeNDSd9VO4A2UdB2fp+x0eCnaXxWXGA2X0au/3HgN9P4LFCjIANOJdrLr0zzZ+BEpNYDwKbpnQMeAw4m8HjQtM6Z9qa917zPQwFr3M5KgA6J5rTJCdFZJj9/lyvGhsDvwFNVuV2MhhjrK6b9bFiE+j1r87eBl4HDwCF7/U/k+ofAX5b/EXBv5JoLMuILzf3Ap6Z3EzgdqHMCuF7hcQf4HDgeoHnccncqdK/TvSDWffFXI/exICY/xZyqc6XLWF1UFZna4gJ7q8BsRvgd2/xXpo6P+D9dfT7PpECtA3cnWPM0GXGFZh/wgWltA+cDNC7X+AP4GzjZQe+k5dRxuYPeiuXU7e1qwLpDz7dFjXKRaSwuMLvAlG8zZlG+YmiK1HoFqT7wP2z+4Q45TfEGcMt01xLoNZEBTwRqD4BLpnMLeC1A41UmVxsXgXeBayV/Wx20rpTyrpnWRft7p6O/FdqzGrDukPNtkaMoMo3FBdBSQMOnYBCReyf05s126fU9ytfX98+mY54Kxnp7S9K3kj6U9KYdG0h6UdLbkh7poFXMfUnSOyVvL0h6VtIXHbS6nOP+s/Zm9mvyXW1uuC9ohZ72E9uDmXWLJOB1GxsH+DxPftsB8B6wlGDN02TAkxG6+4D3TWsbeC5CS8CDFce+AW500LhhOW2020TRjK3b21HEmgti9m0RonxbdMZeVzV+/4tF3cBpP7E9mKHNL5q8h5g0eYsCMQz0epq8gQrwMXAgcs0FGXGFRcB9wCemF9PkbYqM/Bas7fxLwNeJPdTdpo4itQti8lPMqTpXuozVRVXPpbHI3KkNTB1NfkL81j2mvhDp91HgV9MKuRIqrykj3WPq4rHyL+axj8/qGPmTqi6F9YDlHOvJU6oYcTsh/TYSzWmTE6JT19CtLTJt32D6CmHe0eQn1O8z5AXgT4sx4Vcu0/EQecMydB8z0hUWkTd2t4CrwNEePqMBcAR4mrBbwyXLPWJa8zrXmmLEhNBmfpkuY2102xxrih+pb+ieAb6vGhuA97UcJ5KR8gZ77K+99xxeYBzH6Q3/Z0fHcXrDC4zjOL3hBcZxnN74F+zlvXFWXF9PAAAAAElFTkSuQmCC");
background-repeat: no-repeat;
background-size: 280px;
color: transparent;
display: block;
font-size: 0;
height: 20px;
line-height: 0;
width: 20px;
}
.viewer-zoom-in::before {
background-position: 0 0;
content: "Zoom In";
}
.viewer-zoom-out::before {
background-position: -20px 0;
content: "Zoom Out";
}
.viewer-one-to-one::before {
background-position: -40px 0;
content: "One to One";
}
.viewer-reset::before {
background-position: -60px 0;
content: "Reset";
}
.viewer-prev::before {
background-position: -80px 0;
content: "Previous";
}
.viewer-play::before {
background-position: -100px 0;
content: "Play";
}
.viewer-next::before {
background-position: -120px 0;
content: "Next";
}
.viewer-rotate-left::before {
background-position: -140px 0;
content: "Rotate Left";
}
.viewer-rotate-right::before {
background-position: -160px 0;
content: "Rotate Right";
}
.viewer-flip-horizontal::before {
background-position: -180px 0;
content: "Flip Horizontal";
}
.viewer-flip-vertical::before {
background-position: -200px 0;
content: "Flip Vertical";
}
.viewer-fullscreen::before {
background-position: -220px 0;
content: "Enter Full Screen";
}
.viewer-fullscreen-exit::before {
background-position: -240px 0;
content: "Exit Full Screen";
}
.viewer-close::before {
background-position: -260px 0;
content: "Close";
}
.viewer-container {
bottom: 0;
direction: ltr;
font-size: 0;
left: 0;
line-height: 0;
overflow: hidden;
position: absolute;
right: 0;
-webkit-tap-highlight-color: transparent;
top: 0;
-ms-touch-action: none;
touch-action: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.viewer-container::-moz-selection, .viewer-container *::-moz-selection {
background-color: transparent;
}
.viewer-container::selection,
.viewer-container *::selection {
background-color: transparent;
}
.viewer-container:focus {
outline: 0;
}
.viewer-container img {
display: block;
height: auto;
max-height: none !important;
max-width: none !important;
min-height: 0 !important;
min-width: 0 !important;
width: 100%;
}
.viewer-canvas {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0
}
.viewer-canvas > img {
height: auto;
margin: 15px auto;
max-width: 90% !important;
width: auto;
}
.viewer-footer {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
text-align: center;
}
.viewer-navbar {
background-color: rgba(0, 0, 0, 50%);
overflow: hidden;
}
.viewer-list {
box-sizing: content-box;
height: 50px;
margin: 0;
overflow: hidden;
padding: 1px 0
}
.viewer-list > li {
color: transparent;
cursor: pointer;
float: left;
font-size: 0;
height: 50px;
line-height: 0;
opacity: 0.5;
overflow: hidden;
transition: opacity 0.15s;
width: 30px
}
.viewer-list > li:focus,
.viewer-list > li:hover {
opacity: 0.75;
}
.viewer-list > li:focus {
outline: 0;
}
.viewer-list > li + li {
margin-left: 1px;
}
.viewer-list > .viewer-loading {
position: relative
}
.viewer-list > .viewer-loading::after {
border-width: 2px;
height: 20px;
margin-left: -10px;
margin-top: -10px;
width: 20px;
}
.viewer-list > .viewer-active,
.viewer-list > .viewer-active:focus,
.viewer-list > .viewer-active:hover {
opacity: 1;
}
.viewer-player {
background-color: #000;
bottom: 0;
cursor: none;
display: none;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1
}
.viewer-player > img {
left: 0;
position: absolute;
top: 0;
}
.viewer-toolbar > ul {
display: inline-block;
margin: 0 auto 5px;
overflow: hidden;
padding: 6px 3px
}
.viewer-toolbar > ul > li {
background-color: rgba(0, 0, 0, 50%);
border-radius: 50%;
cursor: pointer;
float: left;
height: 24px;
overflow: hidden;
transition: background-color 0.15s;
width: 24px
}
.viewer-toolbar > ul > li:focus,
.viewer-toolbar > ul > li:hover {
background-color: rgba(0, 0, 0, 80%);
}
.viewer-toolbar > ul > li:focus {
box-shadow: 0 0 3px #fff;
outline: 0;
position: relative;
z-index: 1;
}
.viewer-toolbar > ul > li::before {
margin: 2px;
}
.viewer-toolbar > ul > li + li {
margin-left: 1px;
}
.viewer-toolbar > ul > .viewer-small {
height: 18px;
margin-bottom: 3px;
margin-top: 3px;
width: 18px
}
.viewer-toolbar > ul > .viewer-small::before {
margin: -1px;
}
.viewer-toolbar > ul > .viewer-large {
height: 30px;
margin-bottom: -3px;
margin-top: -3px;
width: 30px
}
.viewer-toolbar > ul > .viewer-large::before {
margin: 5px;
}
.viewer-tooltip {
background-color: rgba(0, 0, 0, 80%);
border-radius: 10px;
color: #fff;
display: none;
font-size: 12px;
height: 20px;
left: 50%;
line-height: 20px;
margin-left: -25px;
margin-top: -10px;
position: absolute;
text-align: center;
top: 50%;
width: 50px;
}
.viewer-title {
color: #ccc;
display: inline-block;
font-size: 12px;
line-height: 1.2;
margin: 0 5% 5px;
max-width: 90%;
opacity: 0.8;
overflow: hidden;
text-overflow: ellipsis;
transition: opacity 0.15s;
white-space: nowrap
}
.viewer-title:hover {
opacity: 1;
}
.viewer-button {
-webkit-app-region: no-drag;
background-color: rgba(0, 0, 0, 50%);
border-radius: 50%;
cursor: pointer;
height: 80px;
overflow: hidden;
position: absolute;
right: -40px;
top: -40px;
transition: background-color 0.15s;
width: 80px
}
.viewer-button:focus,
.viewer-button:hover {
background-color: rgba(0, 0, 0, 80%);
}
.viewer-button:focus {
box-shadow: 0 0 3px #fff;
outline: 0;
}
.viewer-button::before {
bottom: 15px;
left: 15px;
position: absolute;
}
.viewer-fixed {
position: fixed;
}
.viewer-open {
overflow: hidden;
}
.viewer-show {
display: block;
}
.viewer-hide {
display: none;
}
.viewer-backdrop {
background-color: rgba(0, 0, 0, 50%);
}
.viewer-invisible {
visibility: hidden;
}
.viewer-move {
cursor: move;
cursor: -webkit-grab;
cursor: grab;
}
.viewer-fade {
opacity: 0;
}
.viewer-in {
opacity: 1;
}
.viewer-transition {
transition: all 0.3s;
}
@-webkit-keyframes viewer-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes viewer-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.viewer-loading::after {
-webkit-animation: viewer-spinner 1s linear infinite;
animation: viewer-spinner 1s linear infinite;
border: 4px solid rgba(255, 255, 255, 10%);
border-left-color: rgba(255, 255, 255, 50%);
border-radius: 50%;
content: "";
display: inline-block;
height: 40px;
left: 50%;
margin-left: -20px;
margin-top: -20px;
position: absolute;
top: 50%;
width: 40px;
z-index: 1;
}
@media (max-width: 767px) {
.viewer-hide-xs-down {
display: none;
}
}
@media (max-width: 991px) {
.viewer-hide-sm-down {
display: none;
}
}
@media (max-width: 1199px) {
.viewer-hide-md-down {
display: none;
}
}
// -------------- my-style ------------
.viewer-backdrop {
background-color: rgba(0, 0, 0, 0.75) !important;
}
#ccc_main_icon_container {
position: fixed;
bottom: 50px;
right: 20px;
opacity: 0.3;
z-index: 88888;
display: none;
}
#open_popUps_icon {
position: relative;
width: 30px;
height: 30px;
cursor: pointer;
}
#open_popUps_icon>svg {
width: 100%;
height: 100%;
}
#open_popUps_icon>.pop_title_num {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
padding: 2px 4px;
background-color: red;
color: #ffffff;
font-size: 10px;
border-radius: 30px;
}
#showhide_main_btn {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
height: 30px;
width: 20px;
font-size: 26px;
line-height: 30px;
top: 0;
right: 0;
transform: translate(100%, 0%);
cursor: pointer;
transition: all 0.3s;
font-weight: bold;
background-image: linear-gradient(to right, #ffffff, #333333);
-webkit-background-clip: text;
color: transparent;
opacity: 0;
}
#ccc_main_icon_container:hover {
opacity: 1;
}
#ccc_main_icon_container:hover #showhide_main_btn {
opacity: 1 !important;
}
#showhide_main_btn:hover {
text-shadow:
-0 -0 0 #333,
0 -0 0 #333,
-0 0 0 #333,
0 0 0 #333;
}
/* 滚动条整体样式 */
#ccc_image_container::-webkit-scrollbar {
width: 6px;
/* 宽度 */
height: 6px;
/* 高度（对于垂直滚动条） */
}
/* 滚动条滑块 */
#ccc_image_container::-webkit-scrollbar-thumb {
background: #aaa;
border-radius: 6px;
}
/* 滚动条滑块:hover状态样式 */
#ccc_image_container::-webkit-scrollbar-thumb:hover {
background: #888;
}
/* 滚动条轨道 */
#ccc_image_container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 6px;
}
/* 滚动条轨道:hover状态样式 */
#ccc_image_container::-webkit-scrollbar-track:hover {
background: #ddd;
}
/* 滚动条轨道:active状态样式 */
#ccc_image_container::-webkit-scrollbar-track-piece:active {
background: #eee;
}
/* 滚动条:角落样式（即两个滚动条交汇处） */
#ccc_image_container::-webkit-scrollbar-corner {
background: #535353;
}
.none_select {
user-select: none;
/* 禁止选中 */
-webkit-user-select: none;
/* 对 Safari 和旧版 Chrome 的支持 */
-moz-user-select: none;
/* 对 Firefox 的支持 */
-ms-user-select: none;
/* 对 Internet Explorer 的支持 */
}
#ccc_popUps_out {
position: fixed;
background-color: rgba(0, 0, 0, 0.6);
width: 100vw;
height: 100vh;
top: 0;
left: 0;
z-index: 88888;
display: none;
}
#ccc_popUps_container {
position: absolute;
width: 75vw;
height: 75vh;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0px 1px 4px 0 rgba(0, 0, 0, 0.2);
padding: 15px;
}
#ccc_popUps_top {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 10px;
margin-bottom: 10px;
z-index: 10;
}
.pop_title_num {
color: red;
}
.ccc_popUps_top_right {
display: flex;
align-items: center;
justify-content: flex-end;
}
#ccc_all_pack_down_btn, #ccc_all_page_screenShot {
position: relative;
cursor: pointer;
background-color: #666666;
color: #fff;
padding: 6px 10px;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
margin-right: 30px;
transition: all 0.3s;
}
#ccc_all_page_screenShot{
margin-right: 20px;
background-color: #666666;
}
#ccc_all_page_screenShot:hover {
background-color: #333333;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3);
}
#ccc_all_pack_down_btn>.pop_title_num {
/* position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%); */
padding: 2px 4px;
background-color: red;
color: #ffffff;
font-size: 10px;
line-height: 10px;
border-radius: 30px;
margin-right: 2px;
}
#ccc_close_popUps {
cursor: pointer;
filter: grayscale(100%);
font-size: 12px;
margin-left: 30px;
}
#ccc_close_popUps:hover {
filter: grayscale(0%);
}
#ccc_image_container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
padding: 10px;
overflow: auto;
align-content: start;
}
.ccc_image_item {
position: relative;
height: 120px;
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
padding: 1px;
box-sizing: border-box;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
}
.ccc_image_item:hover {
box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.3);
}
.ccc_image_item img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
cursor: zoom-in;
}
.ccc_imgItem_info,
.ccc_imgItem_ctrl,
.ccc_imgItem_delete {
position: absolute;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
box-sizing: border-box;
font-size: 10px;
display: flex;
align-items: center;
opacity: 0;
transition: all 0.3s;
}
.ccc_imgItem_info {
left: 0;
top: 0;
padding: 3px 5px;
border-bottom-right-radius: 5px;
flex-wrap: wrap;
max-width: 80%;
line-height: 14px;
}
.ccc_imgItem_ctrl {
right: 0;
bottom: 0;
color: #fff;
padding: 3px 6px;
border-top-left-radius: 5px;
}
.ccc_imgItem_delete {
right: 0;
top: 0;
padding: 8px;
background-color: transparent;
cursor: pointer;
transition: all 0.3s;
}
.ccc_imgItem_delete>span {
width: 14px;
height: 3px;
border-radius: 6px;
background-color: rgba(255, 0, 0, 1);
}
.ccc_imgItem_ctrl>div {
width: 17px;
height: 17px;
cursor: pointer;
transition: all 0.3s;
}
.ccc_imgItem_ctrl svg {
width: 100%;
height: 100%;
}
.ccc_image_item:hover .ccc_imgItem_info,
.ccc_image_item:hover .ccc_imgItem_ctrl,
.ccc_image_item:hover .ccc_imgItem_delete {
opacity: 1;
}
.viewer-container {
z-index: 99999 !important;
}
#ccc_title_ctrl {
display: flex;
align-items: center;
}
#ccc_title_ctrl>.ccc_title_text {
font-size: 14px;
}
#ccc_filter_out {
position: relative;
top: 1px;
display: flex;
width: 18px;
height: 18px;
margin-left: 20px;
}
#ccc_filter_out svg {
width: 100%;
height: 100%;
cursor: pointer;
transition: all 0.3s;
}
.ccc_view_filter {
/* display: flex; */
align-items: center;
font-size: 12px;
/* background-color: #fafafa; */
/* padding: 10px 14px; */
border-radius: 4px;
margin-left: 14px;
display: none;
}
#ccc_view_filter_itembox {
display: flex;
flex-wrap: wrap;
align-items: center;
max-width: 400px;
}
#ccc_view_filter_itembox>span {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px 8px;
font-size: 11px;
border-radius: 4px;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
background-color: #f5f5f5;
margin-left: 8px;
}
#ccc_view_filter_itembox>span:first-of-type {
margin-left: 0;
}
#ccc_filter_container {
position: absolute;
top: 50%;
left: 40px;
transform: translate(0, -50%);
padding: 10px 15px;
background: #fff;
border: 1px solid #555;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.6);
border-radius: 6px;
z-index: 9;
display: none;
width: 160px;
font-size: 14px;
/* opacity: 0; */
}
#ccc_filter_container::before,
#ccc_filter_container::after {
position: absolute;
content: '';
top: 50%;
}
#ccc_filter_container::before {
left: -23px;
margin-top: -13px;
border: 13px solid transparent;
border-right: 12px solid #fff;
z-index: 2;
}
#ccc_filter_container::after {
left: -26px;
margin-top: -13px;
border: 13px solid transparent;
border-right: 13px solid #555;
z-index: 1;
}
#ccc_filter_container>div {
width: 100%;
display: flex;
align-items: center;
margin: 6px auto;
align-items: center;
justify-content: center;
}
#ccc_filter_container>div>span {
width: 10%;
text-align: center;
display: block;
}
#ccc_filter_container>div input {
width: 35%;
height: 18px;
font-size: 13px;
text-align: center;
}
#ccc_filter_container>div input::placeholder {
text-align: center;
line-height: 18px;
}
#refilter_btn {
width: 40px;
height: 20px;
font-size: 10px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
color: #ffffff;
background-color: #666666;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s;
}
#refilter_btn:hover {
background-color: #333333;
box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.2);
}
#ccc_w_max::placeholder,
#ccc_h_max::placeholder {
position: relative;
top: 5px;
font-size: 26px;
}
#load_mask {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 18px;
letter-spacing: 1px;
padding: 10px 20px;
border-radius: 4px;
color: #fff;
background-color: rgba(0, 0, 0, 0.6);
z-index: 100;
}
.loader {
width: 30px;
height: 30px;
border: 3px solid #f3f3f3;
/* 边框的颜色 */
border-top: 3px solid #3498db;
/* 上边框颜色，旋转时的主要颜色 */
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.ccc_more {
cursor: pointer;
display: inline-block;
margin-left: 4px;
}
.ccc_imgItem_info:hover .ccc_more {
color: rgb(24, 144, 255)
}
.ccc_imgItem_info:hover {
cursor: pointer;
}
.ccc_more>.loader {
width: 12px;
height: 12px;
border: 2px solid #f3f3f3;
border-top: 2px solid #3498db;
}
#ccc_load_tip_style {
position: fixed;
width: 210px;
padding: 12px 24px;
top: 20px;
right: 20px;
color: #333;
background-color: #fff;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px 5px;
border-radius: 5px;
transition: all 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;
font-family: 'Damion', cursive;
font-weight: 600;
text-align: center;
z-index: 999999;
}
#ccc_gotoUpdate {
position: relative;
margin-right: 20px;
line-height: 24px;
}
#ccc_gotoUpdate>a {
text-decoration: none;
cursor: pointer;
color: #909090;
font-size: 12px;
transition: all 0.3s ease;
}
#ccc_gotoUpdate:hover>a {
color: #007fff;
}
#ccc_gotoUpdate::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width: 0;
background-color: #007fff;
transition: all 0.3s ease;
}
#ccc_gotoUpdate:hover::before {
width: 100%;
}
.ccc_schedule_container {
margin-top: 5px;
display: flex;
align-items: center;
}
.ccc_schedule_text {
text-align: center;
font-size: 14px;
white-space: nowrap;
padding-left: 10px;
}
.ccc_schedule_bg {
position: relative;
flex-grow: 1;
height: 4px;
border-radius: 2px;
background-color: #ddd;
margin: 2px auto;
overflow: hidden;
}
.ccc_schedule_curr {
height: 100%;
background-color: #67C23A;
width: 20%;
transition: all 0.3s ease;
}
#curr_ing {
color: #67C23A;
}
#ccc_fetch_pageImgs {
display: flex;
width: 20px;
height: 20px;
margin: auto 20px;
}
#ccc_fetch_pageImgs>svg {
width: 100%;
height: 100%;
}
#ccc_fetch_pageImgs_text{
position: relative;
font-size: 14px;
margin-right: 20px;
}
#ccc_fetch_btn{
cursor: pointer;
padding: 3px 0;
transition: all 0.1s ease;
}
#ccc_fetch_pageImgs_text>.ccc_fetch_tips{
position: absolute;
/* color: #F56C6C; */
color: #999999;
font-size: 11px;
top: 100%;
right: 0;
width: 0%;
text-align: right;
letter-spacing: 1px;
opacity: 0;
white-space: nowrap; /* 确保文本不会换行 */
overflow: hidden; /* 隐藏超出div的文本 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
transition: all 0.4s ease;
}
#ccc_fetch_btn:hover{
color: #007fff;
}
#ccc_fetch_btn:hover + .ccc_fetch_tips{
width: 400%;
opacity: 1;
}
#ccc_fetch_btn:active{
transform: translate3d(0, 1px, 0);
}
.click_style:active {
transform: scale(0.9);
}
#ccc_notify{
position: absolute;
top: 30px;
left: 50%;
transform: translate(-50%, 0);
background-color: rgb(226, 244, 219);
color: #67C23A;
padding: 8px 20px;
border-radius: 4px;
font-size: 14px;
letter-spacing: 1px;
z-index: 8;
opacity: 0;
transition: all 0.3s ease;
}
#ccc_notify.active{
top: 70px;
opacity: 1;
}
.ccc_all_pack_down_container{
display: flex;
background-color: #666666;
border-radius: 4px;
transition: all 0.3s;
cursor: pointer;
}
.ccc_all_pack_down_container:hover {
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3);
}
.ccc_all_pack_down_container> #ccc_all_pack_down_btn{
margin-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
background-color: initial;
}
.ccc_all_pack_down_container>#ccc_all_pack_down_btn:hover{
background-color: #333333;
}
#ccc_all_page_rename{
position: relative;
width: 20px;
display: flex;
align-items: center;
justify-content: center;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-left: 1px solid #555;
color: #eee;
}
#ccc_all_page_rename>.ccc_all_page_rename_icon{
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
box-sizing: border-box;
font-size: 12px;
transition: all 0.3s;
}
.ccc_all_pack_down_container>#ccc_all_page_rename:hover .ccc_all_page_rename_icon, .ccc_focus_rename .ccc_all_page_rename_icon{
font-size: 55px !important;
z-index: 999 !important;
}
.ccc_all_pack_down_container>#ccc_all_page_rename:hover, .ccc_focus_rename #ccc_all_page_rename{
background-color: #eee;
color: red;
}
.ccc_all_page_rename_out{
/* display: none; */
visibility:hidden;
position: absolute;
top: 100%;
padding: 10px 50px 50px 50px;
cursor: initial;
}
.ccc_all_page_rename_container{
opacity: 0;
width: 0;
/* width: 340px; */
padding: 10px;
border-radius: 10px;
color: #333;
/* background-color: #f5f5f5; */
cursor: initial;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3);
background-color: rgba(255, 255, 255, 0.6); /* 设置半透明背景 */
backdrop-filter: blur(10px); /* 应用背景模糊效果 */
-webkit-backdrop-filter: blur(10px); /* 兼容老版本Safari */
transition: all 0.3s;
}
.ccc_all_pack_down_container>#ccc_all_page_rename:hover .ccc_all_page_rename_out, .ccc_focus_rename .ccc_all_page_rename_out{
display: block;
visibility: visible;
}
.ccc_all_pack_down_container>#ccc_all_page_rename:hover .ccc_all_page_rename_container, .ccc_focus_rename .ccc_all_page_rename_container{
width: 340px;
opacity: 1;
}
.ccc_all_page_rename_container_tips_font{
font-size: 13px;
font-weight: 550;
letter-spacing: 0.5px;
margin-bottom: 5px;
white-space: nowrap;
}
#ccc_all_page_rename_val{
max-width: 100%;
min-width: 100%;
min-height: 100px;
box-sizing: border-box;
border: none;
outline: none; /* 可选：移除聚焦时的轮廓 */
padding: 4px 6px;
border-radius: 6px;
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1);
background-color: rgba(255, 255, 255, 0.7); /* 设置半透明背景 */
}
`
);
}