Greasy Fork is available in English.
为 Twitter/X 图片添加缩放、拖拽和旋转功能。非常适合在桌面端阅读看不清的大段文字图片或长截图。
当前为
// ==UserScript==
// @name PILIPLAN - Twitter/X Image Viewer
// @name:zh-CN PILIPLAN - Twitter/X 微博式看图工具
// @namespace https://github.com/PILIPLAN
// @version 1.01
// @description Adds zoom, drag, and rotation capabilities to Twitter/X images. Perfect for reading large text images or vertical screenshots that are hard to see on the desktop.
// @description:zh-CN 为 Twitter/X 图片添加缩放、拖拽和旋转功能。非常适合在桌面端阅读看不清的大段文字图片或长截图。
// @author PILIPLAN
// @match https://twitter.com/*
// @match https://x.com/*
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// Core State
let state = {
scale: 1,
rotate: 0,
x: 0,
y: 0,
isDragging: false,
startX: 0,
startY: 0
};
// Performance Optimization: Position Cache
let lastToolbarX = 0;
let lastToolbarY = 0;
let activeElement = null;
let toolbar = null;
// --- Core 1: Find Image in Layers ---
function findCenterElement() {
const layersContainer = document.querySelector('#layers');
if (!layersContainer) return null;
const candidates = layersContainer.querySelectorAll('img, div[style*="background-image"]');
let bestCandidate = null;
let minDistance = Infinity;
const anchor = getAnchorPoint();
const centerX = anchor ? anchor.x : window.innerWidth / 2;
const centerY = window.innerHeight / 2;
candidates.forEach(el => {
const rect = el.getBoundingClientRect();
if (rect.width < 50 || rect.height < 50) return;
if (window.getComputedStyle(el).opacity === '0') return;
const dist = Math.sqrt(
Math.pow((rect.left + rect.width / 2) - centerX, 2) +
Math.pow((rect.top + rect.height / 2) - centerY, 2)
);
if (dist < minDistance) {
minDistance = dist;
bestCandidate = el;
}
});
return (minDistance < 600) ? bestCandidate : null;
}
// --- Core 2: Get Anchor Point ---
function getAnchorPoint() {
const likeBtn = document.querySelector('#layers [data-testid="like"], #layers [data-testid="unlike"]');
if (likeBtn) {
const group = likeBtn.closest('[role="group"]');
if (group) {
const rect = group.getBoundingClientRect();
return { x: rect.left + rect.width / 2, y: rect.top };
}
}
return null;
}
// --- Core 3: Update Toolbar Position (Smart Idle) ---
function updateToolbarPosition() {
if (!toolbar) return;
const anchor = getAnchorPoint();
let targetX, targetY;
if (anchor) {
targetX = anchor.x;
// Align slightly above the anchor
targetY = window.innerHeight - anchor.y + 10;
} else {
// Fallback: Center bottom
targetX = window.innerWidth / 2; // Not used directly for style.left because of transform, but logic consistency
targetY = 40;
}
// 🟢 PERFORMANCE OPTIMIZATION: Dirty Check
// If the position hasn't changed significantly (< 0.5px), do NOT touch the DOM.
// Writing to DOM forces browser repaint, which eats CPU.
if (Math.abs(targetX - lastToolbarX) < 0.5 && Math.abs(targetY - lastToolbarY) < 0.5) {
return; // Skip update
}
// Only update if moved
if (anchor) {
toolbar.style.left = targetX + 'px';
toolbar.style.bottom = targetY + 'px';
// Reset fallback style if recovering from fallback
if(toolbar.style.transform !== 'translateX(-50%)') toolbar.style.transform = 'translateX(-50%)';
} else {
toolbar.style.left = '50%';
toolbar.style.bottom = '40px';
}
// Cache new position
lastToolbarX = targetX;
lastToolbarY = targetY;
}
// --- Fix Clipping ---
function unclipParents(element) {
if (!element) return;
let parent = element.parentElement;
for (let i = 0; i < 8; i++) {
if (parent && parent.style) {
const style = window.getComputedStyle(parent);
if (style.overflow !== 'visible') parent.style.setProperty('overflow', 'visible', 'important');
if (style.maskType || style.webkitMask) {
parent.style.mask = 'none';
parent.style.webkitMask = 'none';
}
}
parent = parent ? parent.parentElement : null;
}
}
// --- Transform Logic ---
function updateTransform() {
if (!activeElement) activeElement = findCenterElement();
if (!activeElement) return;
unclipParents(activeElement);
activeElement.style.transform = `
translate(${state.x}px, ${state.y}px)
rotate(${state.rotate}deg)
scale(${state.scale})
`;
activeElement.style.transition = state.isDragging ? 'none' : 'transform 0.1s linear';
activeElement.style.cursor = state.isDragging ? 'grabbing' : 'grab';
activeElement.style.zIndex = '9999';
if (activeElement.tagName === 'DIV') activeElement.style.backgroundSize = 'contain';
}
// --- Actions ---
function zoom(delta) {
state.scale += delta;
if (state.scale < 0.1) state.scale = 0.1;
initDragEvents();
updateTransform();
}
function rotate(deg) {
state.rotate += deg;
updateTransform();
}
function reset() {
state = { scale: 1, rotate: 0, x: 0, y: 0, isDragging: false, startX: 0, startY: 0 };
if (activeElement) {
activeElement.style.transform = '';
activeElement.style.cursor = 'grab';
activeElement.style.zIndex = '';
}
}
// --- Global Wheel Interception ---
window.addEventListener('wheel', (e) => {
if (!location.href.includes('/photo/')) return;
const target = findCenterElement();
if (!target) return;
activeElement = target;
e.preventDefault();
e.stopImmediatePropagation();
const delta = e.deltaY > 0 ? -0.1 : 0.1;
zoom(delta);
}, { passive: false });
// --- Drag Logic ---
function initDragEvents() {
if (!activeElement) activeElement = findCenterElement();
if (!activeElement || activeElement.dataset.dragBound) return;
activeElement.dataset.dragBound = 'true';
activeElement.style.cursor = 'grab';
activeElement.addEventListener('mousedown', (e) => {
if (e.button !== 0) return;
e.preventDefault();
e.stopPropagation();
state.isDragging = true;
state.startX = e.clientX - state.x;
state.startY = e.clientY - state.y;
activeElement.style.cursor = 'grabbing';
});
}
window.addEventListener('mousemove', (e) => {
if (!state.isDragging) return;
e.preventDefault();
state.x = e.clientX - state.startX;
state.y = e.clientY - state.startY;
updateTransform();
});
window.addEventListener('mouseup', () => {
state.isDragging = false;
if (activeElement) activeElement.style.cursor = 'grab';
});
// --- UI Toolbar ---
function createToolbar() {
if (document.getElementById('x-fusion-toolbar')) return;
toolbar = document.createElement('div');
toolbar.id = 'x-fusion-toolbar';
// High Transparency & Blur
toolbar.style.cssText = `
position: fixed;
transform: translateX(-50%);
z-index: 2147483647;
background: rgba(0, 0, 0, 0.4);
padding: 8px 25px;
border-radius: 50px;
display: flex;
gap: 25px;
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.15);
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
opacity: 0; pointer-events: none; transition: opacity 0.2s;
`;
toolbar.addEventListener('mousedown', e => e.stopPropagation());
const btns = [
{ t: '⟲', f: () => rotate(-90), title: 'Rotate Left' },
{ t: '－', f: () => zoom(-0.25), title: 'Zoom Out' },
// Keeping "RESET" as text, refined style
{ t: 'RESET', f: reset, s: 'font-size:12px; font-weight:700; letter-spacing:1px; opacity:0.9;', title: 'Reset All' },
{ t: '＋', f: () => zoom(0.25), title: 'Zoom In' },
{ t: '⟳', f: () => rotate(90), title: 'Rotate Right' }
];
btns.forEach(b => {
const s = document.createElement('span');
s.innerHTML = b.t;
s.style.cssText = `
color: rgba(255, 255, 255, 0.9);
cursor: pointer; font-size: 22px; width: 30px;
display: flex; justify-content: center; align-items: center;
user-select: none; transition: transform 0.1s;
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
${b.s||''}
`;
s.onmouseover = () => { s.style.color = '#fff'; s.style.transform = 'scale(1.1)'; };
s.onmouseout = () => { s.style.color = 'rgba(255, 255, 255, 0.9)'; s.style.transform = 'scale(1)'; };
s.onclick = (e) => { e.stopPropagation(); b.f(); };
toolbar.appendChild(s);
});
document.body.appendChild(toolbar);
}
// --- 🟢 Main Loop (Optimized) ---
function loop() {
const isPhotoView = location.href.includes('/photo/');
// 1. Create toolbar if missing
if (!toolbar) createToolbar();
if (isPhotoView) {
toolbar.style.opacity = '1';
toolbar.style.pointerEvents = 'auto';
// 2. High frequency update with DIRTY CHECK
// This ensures we only touch DOM when coordinates actually change
updateToolbarPosition();
// 3. Logic checks
if (!activeElement) {
activeElement = findCenterElement();
if (activeElement) initDragEvents();
}
} else {
toolbar.style.opacity = '0';
toolbar.style.pointerEvents = 'none';
if (state.scale !== 1 || state.rotate !== 0) reset();
activeElement = null;
}
requestAnimationFrame(loop);
}
// Start the engine
requestAnimationFrame(loop);
window.addEventListener('keydown', (e) => {
if (e.key === 'Escape') reset();
});
})();