请问一下论坛没有点击图片放大的功能么

讨论分享
1

现在论坛中的高分辨率的图片不放大都看不清。

2

有，但是服务器资源不允许，所以没有开上传图片功能，就没有放大功能。

可以右键新窗口打开，或者不知道有没有大神写一个油猴脚本…来放大

3

edge有个图片放大，快捷键是双击Ctrl吗，不知道是不是冲突了只能右键点

4

我这里的 edge 是点两下 ctrl

5

使用ai撸了一个代码，双击图片放大，鼠标滚动缩放，双击关闭

// ==UserScript==
// @name         Image Double Click Zoom
// @description  双击图片时进行弹框放大显示，并允许用户进行缩放。
// @author       Your Name
// @match        https://meta.appinn.net/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 创建一个全局的div用于显示放大后的图片
    const zoomContainer = document.createElement('div');
    zoomContainer.style.position = 'fixed';
    zoomContainer.style.top = '0';
    zoomContainer.style.left = '0';
    zoomContainer.style.width = '100%';
    zoomContainer.style.height = '100%';
    zoomContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
    zoomContainer.style.display = 'none';
    zoomContainer.style.justifyContent = 'center';
    zoomContainer.style.alignItems = 'center';
    zoomContainer.style.zIndex = '9999';

    const zoomImage = document.createElement('img');
    zoomImage.style.maxWidth = '90%';
    zoomImage.style.maxHeight = '90%';
    zoomImage.style.transformOrigin = 'top left';
    zoomImage.style.transition = 'transform 0.3s ease-out';
    zoomImage.style.transform = 'scale(1)'; // 初始化 transform 属性
    zoomImage.style.transformOrigin = 'center';

    let scale = 1;
    let lastX = 0, lastY = 0;

    function handleDoubleClick(event) {
        if (event.target.tagName.toLowerCase() === 'img') {
            event.stopPropagation();
            event.preventDefault();
            zoomImage.src = event.target.src;
            zoomContainer.style.display = 'flex';
            scale = 1;
            zoomImage.style.transform = `scale(${scale}) translate(0px, 0px)`;
        }
    }

    function handleWheel(event) {
        event.preventDefault();
        const delta = Math.sign(event.deltaY);
        const newScale = scale - delta * 0.1;
        if (newScale > 0 && newScale <= 5) {
            scale = newScale;
            // const rect = zoomImage.getBoundingClientRect();
            // const offsetX = event.clientX - rect.left;
            // const offsetY = event.clientY - rect.top;
            // lastX += (offsetX / scale) * delta * 0.1;
            // lastY += (offsetY / scale) * delta * 0.1;
            zoomImage.style.transform = `scale(${scale})`;
        }
    }

    function handleMouseDown(event) {
        // lastX = event.clientX - parseFloat(zoomImage.style.transform.match(/translate\(([-+]?\d+(\.\d+)?)px,/)[1]);
        // lastY = event.clientY - parseFloat(zoomImage.style.transform.match(/, ([-+]?\d+(\.\d+)?)px\)/)[1]);
        // window.addEventListener('mousemove', handleMouseMove);
        // window.addEventListener('mouseup', handleMouseUp);
    }

    function handleMouseMove(event) {
        const dx = event.clientX - lastX;
        const dy = event.clientY - lastY;
        zoomImage.style.transform = `scale(${scale}) translate(${dx}px, ${dy}px)`;
    }

    function handleMouseUp() {
        window.removeEventListener('mousemove', handleMouseMove);
        window.removeEventListener('mouseup', handleMouseUp);
    }

    function handleCloseClick() {
        zoomContainer.style.display = 'none';
    }

    zoomContainer.appendChild(zoomImage);
    document.body.appendChild(zoomContainer);

    zoomContainer.addEventListener('dblclick', handleCloseClick);
    zoomContainer.addEventListener('wheel', handleWheel);
    zoomImage.addEventListener('mousedown', handleMouseDown);

    document.addEventListener('dblclick', handleDoubleClick);
    function findAndProcessImageLinks() {
        const imageExtensions = /\.(jpg|jpeg|png|gif|bmp)$/i;
        const wrap = document.querySelector("#main-outlet")
        if (wrap) {
            const links = wrap.querySelectorAll('a[href]');
            // console.log(links)
            links.forEach(link => {
              if (imageExtensions.test(link.href)) {
                if (!link._block_) {
                  link.addEventListener('click', (event)=> {
                    event.stopPropagation();
                    event.preventDefault();
                  });
                  link._block_ = true;
                }
              }
            });
        }
    }
  function setupMutationObserver() {
        const observer = new MutationObserver(mutationsList => {
            for (const mutation of mutationsList) {
                if (mutation.type === 'childList' || mutation.type === 'attributes' || mutation.type === 'subtree') {
                    findAndProcessImageLinks();
                }
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true,
            attributes: true,
            attributeFilter: ['href']
        });
  }
  findAndProcessImageLinks();
  setupMutationObserver();
})();
6

现在不是默认点击会在新标签页打开全尺寸图片吗？

7

有的不会，打开新页签是因为套了一个a标签。

8

怎么双击？没成功啊

9

双击图片，套了a标签的不行

11

反正我用 @hoothin 大佬的Picviewer CE+

12

Picviewer CE+ 脚本功能强大，有图标、快捷键
https://greasyfork.org/zh-CN/scripts/24204

Imagus 这个扩展也不错，鼠标指向自动显示大图

1 个赞