// ==UserScript==
// @name 类名截图工具
// @namespace xyz_xyz-%e7%b1%bb%e5%90%8d%e6%88%aa%e5%9b%be%e5%b7%a5%e5%85%b7
// @version 1.0.0
// @description 需要一点前端知识，通过class类名截图指定元素，支持PNG/JPG格式
// @author xyz_xyz
// @match *://*/*
// @grant GM_addStyle
// @require https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js
// @icon data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAiCAYAAAAZHFoXAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAMuSURBVFhH7ZZfSFNRHIC/ohcv1NuCiz0UCcJ2K6jNN/Nuj0WLig0n5Cb2j+qhLYOytwwTNKMohUrUlCYTyvZoOq+vbvXkHQoKvtig+6Avzsd60YN3ju7WH5ewDw7snv3Ozr7z+51zz57V1dUf7GL25nbsNsoCpaYsUGrKAqWmLFBqdr3AnmKuEoZhcO36DR63teFw2AHQNI3+/gF8fh+jsVF6e3uQJAnDMKgPNJDJZHJ/Ji+yLDMSfY/NZsv96pdYZiCbzRIMhrA7FOpUN/Pz8/j8fuwOhfsPWkWcx+2mqSnEOe95DMMA4FBlJdPaFGl9lmltClmW6Xn1krQ+a2rT2hSHKiu3zFo4lgKSJDE4OCAmqq6uZjQWI63P0vGk3RSrqiqTE5/zruLT7mdkMhlu3rqN3aGIFgyGyGazueEFsy+3I5f7D1qJx+OmPp/fb3oGcLpqxGev18vdSFg8v+3rY25ujkgkzJXmZtgox/pAA01NISRJErHFYpmBjiftpPVZIpGwaLIsi9IYjcXweNykkjOiJLZmJpFIsLCwyNjHD7CxIJqmUae6CQTqUVV1y2zFYykAoOtpenp66e5+RvdGKdSpbuwOhYnJCZaXv7G2toaup7lw8ZLYAwAej8ckFI/HuXnrtikbf4KlgK6nudzYyDFFIZWc2bbiDYEAAN+/GwwND3P27BnTHmhpuSfqHRBZAkT/6zdvRHyxWAqMfRojGGwkmUrhdNXg8/tJJKZwumo4ecrJ0tISB/bvZ2h4mGQyyXmv1zS+q6tTHADR6Ah2h4KmaVxpbhYy165eNY0pBkuBh62tnDh+HJfTuS0DX7+kcLlc1J6uZXx8nBfPn+c9gQBsNhuTE59JJWfo7x/g5Cknup7ODSsaSwErDMMgGh3hmKJw5MhhNE0jGAyxvr4uYt729YlyedT2mMHBAb5+SYmX4Z9QsEC+Etp8uYXDdwB4H42ysLhI7elaKioqxNit5VJVdVTI/I0sFHSV2LwubF4T8rF5rq+srDD07h0HD9p25CpRkMDvYBgGLS336OrqtPxTxcTm8s8EdoqC98D/Slmg1JQFSk1ZoNSUBUrNT+ped56nZURoAAAAAElFTkSuQmCC
// ==/UserScript==
(function() {
'use strict';
if (window.self !== window.top) return;
const panel = document.createElement('div');
panel.id = 'screenshot-panel';
panel.classList.add('minimized'); // 默认缩小状态
panel.innerHTML = `
欢迎大佬们关注微信公众号，一起交流学习！！！
`;
document.body.appendChild(panel);
GM_addStyle(`
#screenshot-panel {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 100px; /* 默认缩小宽度 */
background: #fff;
border: 1px solid #ccc;
border-radius: 8px 0 0 8px;
box-shadow: -2px 0 10px rgba(0,0,0,0.1);
z-index: 9999;
overflow: hidden;
transition: width 0.3s ease;
}
.panel-header {
padding: 10px;
background: #f0f0f0;
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
}
#toggle-size, #close-btn {
color: black;
background: none;
border: none;
font-size: 18px;
cursor: pointer;
padding: 0 8px;
}
.panel-body {
padding: 10px;
position: relative;
min-height: 150px;
}
.input-group {
margin-bottom: 10px;
display: flex;
gap: 5px;
}
#class-input {
flex: 1;
padding: 6px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 12px;
}
button {
padding: 6px 10px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
transition: opacity 0.2s;
}
button:hover {
background: #0056b3;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.options {
margin: 10px 0;
font-size: 12px;
}
.preview {
margin: 10px 0;
padding: 10px;
border: 1px dashed #ccc;
min-height: 80px;
text-align: center;
color: #666;
font-size: 12px;
}
.preview img {
max-width: 100%;
max-height: 150px;
}
.loading {
position: absolute;
inset: 0;
background: rgba(255,255,255,0.9);
backdrop-filter: blur(2px);
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
display: none;
font-weight: bold;
color: #666;
}
.ad-space {
padding: 8px;
background: #f9f9f9;
border-top: 1px solid #ccc;
text-align: center;
font-size: 12px;
}
.ad-space img {
max-width: 100%;
background: #eee;
}
.highlight-overlay {
position: absolute;
border: 2px solid #4285f4;
background: rgba(66, 133, 244, 0.2);
pointer-events: none;
z-index: 9998;
}
/* 缩小状态样式 */
#screenshot-panel.minimized .panel-body,
#screenshot-panel.minimized .ad-space {
display: none;
}
`);
let currentElement = null;
let overlay = null;
const toggleBtn = document.getElementById('toggle-size');
document.getElementById('close-btn').addEventListener('click', () => {
panel.style.display = 'none';
});
toggleBtn.addEventListener('click', () => {
const isMinimized = panel.classList.contains('minimized');
if (isMinimized) {
panel.classList.remove('minimized');
panel.style.width = '350px';
toggleBtn.textContent = '-';
} else {
panel.classList.add('minimized');
panel.style.width = '100px';
toggleBtn.textContent = '+';
}
});
document.getElementById('select-btn').addEventListener('click', () => {
const className = document.getElementById('class-input').value.trim();
if (!className) {
alert('请输入class名称');
return;
}
const elements = document.getElementsByClassName(className);
if (elements.length === 0) {
alert('未找到匹配元素');
return;
} else if (elements.length === 1) {
selectElement(elements[0]);
} else {
selectElement(elements[0]);
alert(`找到${elements.length}个元素，已选择第一个`);
}
});
function selectElement(element) {
currentElement = element;
if (overlay) overlay.remove();
const rect = element.getBoundingClientRect();
overlay = document.createElement('div');
overlay.className = 'highlight-overlay';
overlay.style.left = `${rect.left + window.scrollX}px`;
overlay.style.top = `${rect.top + window.scrollY}px`;
overlay.style.width = `${rect.width}px`;
overlay.style.height = `${rect.height}px`;
document.body.appendChild(overlay);
document.getElementById('preview-area').textContent = `已选择: ${element.tagName}.${element.className}`;
}
document.getElementById('capture-btn').addEventListener('click', () => {
if (!currentElement) {
alert('请先选择元素');
return;
}
const format = document.querySelector('input[name="format"]:checked').value;
const quality = format === 'jpg' ? 0.9 : 1.0;
const loading = panel.querySelector('.loading');
const selectBtn = document.getElementById('select-btn');
const captureBtn = document.getElementById('capture-btn');
loading.style.display = 'flex';
selectBtn.disabled = true;
captureBtn.disabled = true;
html2canvas(currentElement, {
useCORS: true,
scale: window.devicePixelRatio,
backgroundColor: null
}).then(canvas => {
const dataUrl = canvas.toDataURL(`image/${format}`, quality);
const link = document.createElement('a');
link.href = dataUrl;
link.download = `screenshot.${format}`;
link.click();
const previewArea = document.getElementById('preview-area');
previewArea.innerHTML = `
`;
}).catch(err => {
alert('截图失败: ' + err.message);
}).finally(() => {
loading.style.display = 'none';
selectBtn.disabled = false;
captureBtn.disabled = false;
if (overlay) overlay.remove();
currentElement = null;
});
});
})();