百度贴吧图片点击放大

直接在当前页面点击查看原图(包括签名档)。支持图片的多开、拖拽、垂直或水平滚动和缩放旋转

// ==UserScript==
// @name           百度贴吧图片点击放大
// @namespace      https://greasyfork.org/users/51104
// @version        1.7.3
// @description    直接在当前页面点击查看原图(包括签名档)。支持图片的多开、拖拽、垂直或水平滚动和缩放旋转
// @match          *://tieba.baidu.com/p/*
// @match          *://tieba.baidu.com/f?*
// @exclude        *://tieba.baidu.com/f?*kw=*
// @grant          GM_addStyle
// @grant          GM_setValue
// @grant          GM_getValue
// @grant          GM_registerMenuCommand
// @author         lliwhx
// @license        MIT
// @copyright      Copyright © 2016-2022 lliwhx
// ==/UserScript==

(function (win, doc) {
    'use strict';

    /* 贴子404不执行。(可修改) */
    if(doc.title==='贴吧404')return;

    var iTarget,
        preferences,
        gallery,
        iMouse,
        debounce,
        docElement = doc.documentElement,
        docWidth = docElement.clientWidth - 5,
        docHeight = docElement.clientHeight - 5;

    // 打开图片函数
    function open(e) {
        var i,
            tSrc,
            t = e.target;

        /* className分别指向BDE_Image新图,j_user_sign签名档,d_content_img老图。只有鼠标左键点击以上图片且不是图册贴里的图片时才会放大图片。(可修改) */
        if (!e.button && ['BDE_Image', 'j_user_sign', 'd_content_img'].includes(t.className) && t.parentNode.nodeName !== 'A') {
            iTarget = t;
            i = doc.createElement('img');
            i.className = 'btzi-img';

            // 如果原图加载失败,直接显示贴子里的压缩图片;图片损坏不加载
            i.onerror = function () {
                if (this.src !== t.src) {
                    this.src = t.src;
                } else {
                    t = null;
                    tSrc = null;
                    this.onerror = null;
                    this.onload = null;
                }
            };

            // 获取要加载图片的w宽和h高,计算图片的s大小以及x横y纵坐标
            i.onload = function () {
                var w = this.width,
                    h = this.height,
                    s = (!+preferences.size) && (docWidth - w < 0 || docHeight - h < 0) ? Math.min((docWidth - 5) / w,(docHeight - 5) / h) : 1, // 等比例缩小到最长边显示在窗口内或1原图显示
                    x = docWidth - w * s - 5 > 0 ? (docWidth - w * s) / 2 : 5, // 判断图片w宽是否小于docWidth窗口宽,是则居中,不是则左上角。5表示预留5px位置不贴合
                    y = docHeight - h * s - 5 > 0 ? (docHeight - h * s) / 2 : 5;
                this.iData = {
                    width: w,
                    height: h,
                    x: x,
                    y: y,
                    scale: s,
                    rotate: 0
                };
                transform(this, x, y, s, 0);
                t = null;
                x = null;
                y = null;
                s = null;
                tSrc = null;
                this.onerror = null;
                this.onload = null;
                gallery.appendChild(this); // 将加载好的图片插入到图片框架里显示
            };

            /*
            以下两句代码关系着放大后的图片是否是原图,匹配失败打开的则是贴子里被压缩的图片。
            比如某图片直接右键打开是下面这个地址:
            http://abc.baidu.com/forum/xxx/sign=xxx/123.jpg?tbpicau=xxx
            用原贴吧图片功能查到原图是下面这个地址:
            https://abc.baidu.com/forum/pic/item/123.jpg
            我们需要获取到点击图片的abc和123的内容,然后补全成原图的地址。
            需学习“正则表达式”。(可修改)
            */
            tSrc = /https?:\/\/(\w+)\.baidu\.com\/.+\/(\w+\.[a-zA-Z]{3,4}([^_]*_?))/.exec(t.src);
            if(tSrc && tSrc[3]){
                loadComment(i,tSrc[2],t);
            }else{
                i.src = tSrc ? `//${tSrc[1]}.baidu.com/forum/pic/item/${tSrc[2]}` : t.src;
            }
        }
    }

    var tiebaTid = /\d+/.exec(location.pathname)[0];

    function loadComment(i,tSrc,t){
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                i.src = JSON.parse(this.responseText)?.data?.img?.original?.waterurl || t.src;
            }
        };
        tSrc = /(\w+)/.exec(tSrc)[0];
        xhttp.open("GET", "https://tieba.baidu.com/photo/p?alt=jview&pic_id="+tSrc+"&tid="+tiebaTid, true);
        xhttp.send();
    }
    
    // 鼠标按下图片函数
    function down(e) {
        var t,
            data;
        if (!e.button) {
            t = e.target;
            data = t.iData;
            iTarget = t;
            iMouse = { // 获取鼠标按下时的xy坐标和相对图片的xy坐标
                clientX: e.clientX,
                clientY: e.clientY,
                offsetX: data.x - e.clientX,
                offsetY: data.y - e.clientY
            };
            t = null;
            data = null;
            e.preventDefault();
            e.stopPropagation();
            doc.addEventListener('mousemove', move); // 鼠标按下时给页面注册鼠标移动和鼠标放开事件
            doc.addEventListener('mouseup', up);
        }
    }

    // 鼠标移动图片函数
    function move(e) {
        var t = iTarget,
            data = t.iData,
            x = e.clientX + iMouse.offsetX,
            y = e.clientY + iMouse.offsetY;
        e.stopPropagation();
        transform(t, x, y, data.scale, data.rotate);
        t = null;
        x = null;
        y = null;
        data = null;
    }

    // 固定图片位置函数
    function up(e) {
        var t,
            data,
            translate;
        if (iMouse.clientX === e.clientX && iMouse.clientY === e.clientY) { // 判断鼠标按下和松开的位置一致才能关闭图片
            iTarget = null;
        } else {
            t = iTarget;
            data = t.iData;
            translate = /translate\((-?\d+)px,\s?(-?\d+)px\)/.exec(t.getAttribute('style')); // 获取图片变化后的位置导入图片属性内
            data.x = translate[1] | 0; // 取整
            data.y = translate[2] | 0;
            t = null;
            data = null;
            translate = null;
        }
        iMouse = null;
        doc.removeEventListener('mousemove', move); // 鼠标松开后注销页面鼠标移动和鼠标放开事件
        doc.removeEventListener('mouseup', up);
    }

    /* 图片关闭函数。(可修改) */
    function close(e) {
        var t = e.target;
        switch (preferences.closeWindow) {
            case 'btzi_gallery': // 关闭图片范围为图片时,点击图片关闭该图片
                if (!iTarget) {
                    t.iData = null;
                    t.remove();
                }
                break;
            case 'document': // 当关闭图片方式为页面时,点击要放大的图片以外的区域都会关闭所有图片
                if (!iTarget || (t !== iTarget && t !== docElement)) {
                    if(doc.body.classList.contains('btzi-enabled') || t.id === 'btzi_settings_save')break; // 打开用户设置界面,不会关闭图片
                    gallery.style.display = 'none';
                    while (gallery.hasChildNodes()) { // 关闭所有图片
                        gallery.firstChild.iData = null;
                        gallery.firstChild.remove();
                    }
                    gallery.style.display = '';
                }
                break;
        }
        t=null;
        iTarget = null;
    }

    // 鼠标滚轮函数
    function wheel(e) {
        var t = e.target,
            data = t.iData,
            x = data.x,
            y = data.y,
            s = data.scale,
            r = data.rotate,
            p = preferences,
            eKey = !e.altKey && !e.ctrlKey && !e.shiftKey,
            wKey = p.wheelKey,
            zKey = p.zoomKey,
            rKey = p.rotateKey,
            wDirection = p.wheelDirection,
            zDirection = p.zoomDirection,
            rDirection = p.rotateDirection,
            deltaXY = (e.deltaY || e.deltaX) > 0 ? 100 : -100, // 滚轮向下滚动时e.deltaY/e.deltaX返回正值,向上滚动时e.deltaY/e.deltaX返回负值。因使用组合键时浏览器变化的参数不一样,故判断e.deltaY/e.deltaX哪个发生了变化。图片移动设置为一次100px
            delta,
            tmp,
            z;
        e.preventDefault();
        e.stopPropagation();
        if (wKey === 'type' && eKey || wKey !== 'type' && e[wKey]) { // 图片滚轮移动判断
            tmp = docHeight - data.height * s; // 只要图片高大于窗口高,就上下移动。
            if (tmp < 0) {
                delta = r > 90 ? data.height * s : 0; // 图片翻转超过90度后,原本图片的左上角跑到了下方,要增加图片高度计算
                z = y - deltaXY * wDirection; // 图片y纵坐标移动后的新纵坐标。相对窗口左上角,往上移(图片到底)减小,往下移(图片到顶)增加
                if (z > 5 + delta) { // 到顶
                    z = 5 + delta;
                } else if (z < tmp + delta) { // 到底
                    z = tmp + delta;
                }
                data.y = z;
                transform(t, x, z, s, r);
                return;
            }
            tmp = docWidth - data.width * s; // 单单只有图片宽大于窗口宽,才左右移动
            if (tmp < 0) {
                delta = r % 270 ? data.width * s : 0;
                z = x - deltaXY * wDirection;
                if (z > 5 + delta) {
                    z = 5 + delta;
                } else if (z < tmp + delta) {
                    z = tmp + delta;
                }
                data.x = z;
                transform(t, z, y, s, r);
                return;
            }
        }
        if (zKey === 'type' && eKey || zKey !== 'type' && e[zKey]) { // 图片缩放判断
            delta = deltaXY * zDirection > 0 ? 0.1 : -0.1;
            z = s + delta;
            if ((z < 0.2 && s >= 0.1) || (s < 0.1 && z < 0)) { // 缩放过小不再进行缩放
                return;
            }
            tmp = z / s;
            data.x = e.clientX - (e.clientX - x) * tmp; // 计算以鼠标位置进行缩放。e.clientX - x为鼠标距离图片边的距离,* tmp为缩放后的距离,e.clientX - 计算得相对鼠标移动缩放后的图片边距
            data.y = e.clientY - (e.clientY - y) * tmp;
            data.scale = z;
            transform(t, data.x, data.y, z, r);
            return;
        }
        if (rKey === 'type' && eKey || rKey !== 'type' && e[rKey]) { // 图片旋转判断
            tmp = data.width; // 对图片内data.width宽data.height高属性进行调换,使旋转后的图片数据正常计算
            data.width = data.height;
            data.height = tmp;
            delta = deltaXY * rDirection > 0 ? 90 : 270; // 270比-90好计算
            z = (r + delta) % 360; // 取余。保证为0,90,180,270度
            tmp = 0.01745329 * delta;
            data.x = e.clientX - (e.clientX - x) * Math.cos(tmp) + (e.clientY - y) * Math.sin(tmp); // 以鼠标位置(e.clientX,e.clientY)为中心,图片坐标(x,y)旋转tmp弧度,计算新坐标
            data.y = e.clientY - (e.clientX - x) * Math.sin(tmp) - (e.clientY - y) * Math.cos(tmp);
            data.rotate = z;
            transform(t, data.x, data.y, s, z);
            return;
        }
    }

    // 图片动画函数。translate移动,scale缩放,rotate旋转度
    function transform(t, x, y, s, r) {
        t.style.transform = `translate(${x | 0}px, ${y | 0}px) scale(${s}) rotate(${r}deg)`;
    }

    // 关闭图片的范围是w图片框架还是doc页面
    function frame(w) {
        return doc.getElementById(w) || doc;
    }

    // 浏览器窗口缩放后重新计算窗口大小,保证图片打开后的位置基于变化后的窗口大小
    function resize() {
        clearTimeout(debounce);
        debounce = setTimeout(function () {
            docWidth = docElement.clientWidth - 5;
            docHeight = docElement.clientHeight - 5;
        }, 500);
    }

    /* 定位到贴子内容,用来注册事件。(可修改) */
    var postlist = doc.getElementById('j_p_postlist');

    /* 阻止贴吧默认打开图片方式函数。(可修改) */
    var prevent = function (e) {
        var t = e.target;
        if (!e.button && t.className === 'BDE_Image' && t.parentNode.nodeName !== 'A') { // t.parentNode.nodeName !== 'A'图册贴里的图片打开方式不取消,仍为默认方式
            e.stopPropagation();
        }
    },

        /* 贴子翻页删除图片函数。(可修改) */
        callback = function () {
            gallery.style.display = 'none';
            while (gallery.hasChildNodes()) {
                gallery.firstChild.iData = null;
                gallery.firstChild.remove();
            }
            gallery.style.display = '';
        },

        /* 监听贴子是否翻页。(可修改) */
        observer = new MutationObserver(callback);
    observer.observe(postlist, {
        childList: true
    });

    /* 添加样式。鼠标放到图片上的cursor鼠标样式,放大后图片的btzi-gallery框架位置,以及btzi-img图片定位和hover鼠标经过图片时置顶并显示阴影,active鼠标按下图片后隐藏阴影。(可修改) */
    GM_addStyle('.BDE_Image,.d_content_img,.j_user_sign{cursor:zoom-in;}.btzi-gallery{position:fixed;top:0;left:0;z-index:19990801;}.btzi-img{position:absolute;transform-origin:0 0;box-shadow:0 0 7px rgba(0,0,0,.4);}.btzi-img:hover{z-index:20220801;box-shadow:0 0 7px rgb(0,0,0);}.btzi-img:active{box-shadow:0 0 7px rgba(0,0,0,.4);cursor:move;}');

    /*
    获取btzi-UserSettings用户设置,初次使用设定一个默认值。
    open鼠标左键打开图片方式;
    close鼠标左键关闭图片方式,closeWindow可关闭图片的范围;
    size图片打开后大小;
    wheelKey滚动图片组合键,wheelDirection滚动图片滚轮方向;
    zoomKey缩放图片组合键,zoomDirection缩放图片滚轮方向;
    rotateKey旋转图片组合键,rotateDirection旋转图片滚轮方向。
    */
    preferences = JSON.parse(GM_getValue('btzi-UserSettings', '{"open": "click","close": "click","closeWindow":"btzi_gallery","size":"100","wheelKey":"type","wheelDirection": "1","zoomKey": "ctrlKey","zoomDirection": "-1","rotateKey": "altKey","rotateDirection": "1"}'));

    // 创建存放图片的div框架
    gallery = doc.createElement('div');
    gallery.className = 'btzi-gallery';
    gallery.id = 'btzi_gallery';
    gallery.addEventListener('mousedown', down); // 给框架注册鼠标按下事件,可以移动关闭图片
    gallery.addEventListener('wheel', wheel); // 给框架注册鼠标滚轮事件,可以滚动图片
    doc.body.appendChild(gallery);

    postlist.addEventListener('click', prevent, true); //  给贴子内容注册阻止原图片打开事件
    postlist.addEventListener(preferences.open, open, true); // 给贴子内容注册打开图片事件
    frame(preferences.closeWindow).addEventListener(preferences.close, close); // 给关闭图片的范围注册图片关闭图片事件
    win.addEventListener('resize', resize); // 给浏览器注册窗口缩放事件

    // 用户设置界面函数
    var settings = function () {

        // 用户设置界面样式
        GM_addStyle('.btzi-enabled .btzi-modal,.btzi-enabled .btzi-container{display:flex;}.btzi-modal,.btzi-container{position:fixed;top:0;left:0;display:none;width:100%;height:100%;}.btzi-modal{z-index:20211231;background-color:rgba(0,0,0,.7);}.btzi-container{z-index:20220101;justify-content:center;align-items:center;text-align:left;}.btzi-content{width:335px;border-radius:6px;background-color:#fff;}.btzi-header,.btzi-body,.btzi-footer{padding:11px;}.btzi-header{border-bottom:1px solid #e6ecf0;}.btzi-title{padding:0;margin:0;font:400 20px sans-serif;color:#000;text-align:center;}.btzi-group{padding:0;margin:0;margin-bottom:15px;border:0;}.btzi-legend,.btzi-controls,.btzi-select,.btzi-button{font:14px sans-serif;color:#000;}.btzi-legend{padding:5px 0;margin:0;float:left;width:81px;text-align:right;}.btzi-controls{margin-left:93px;clear:none;}.btzi-select{box-sizing:border-box;padding:4px;margin:0;width:180px;height:30px;border:1px solid #e6ecf0;border-radius:3px;appearance:auto;}.btzi-select:focus{outline:#f0f auto;}.btzi-footer{text-align:center;border-top:1px solid #e6ecf0;}.btzi-button{padding:9px 18px;border:0;border-radius:75px;font-weight:700;color:#fff;background:#4ab3f4;cursor:pointer;transition:box-shadow .17s ease-in-out;}.btzi-button:hover,.btzi-button:active{background:#1da1f2;}.btzi-button:focus{box-shadow:0 0 0 2px #fff,0 0 0 4px #a4d9f9;}.btzi-button:active{box-shadow:0 0 0 2px #fff,0 0 0 4px #4ab3f4;}');

        var html,
            form,
            p,
            prop,
            KeyIndex,
            change;

        // 用户设置界面html
        html = '<div class=btzi-modal></div><div class=btzi-container><div class=btzi-content><div class=btzi-header><h3 class=btzi-title>用户设置</h3></div><div class=btzi-body><form id=btzi_settings_form><fieldset class=btzi-group><legend class=btzi-legend>打开图片</legend><div class=btzi-controls><select class=btzi-select name=btzi[open]><option value=click>鼠标左键,单击图片</option><option value=dblclick>鼠标左键,双击图片</option></select></div></fieldset><fieldset class=btzi-group><legend class=btzi-legend>关闭图片</legend><div class=btzi-controls><select class=btzi-select name=btzi[close]><option value=click>鼠标左键,单击</option><option value=dblclick>鼠标左键,双击</option></select><select class=btzi-select name=btzi[closeWindow]><option value=btzi_gallery>图片,关闭单个图片</option><option value=document>页面,关闭所有图片</option></select></div></fieldset><fieldset class=btzi-group><legend class=btzi-legend>图片大小</legend><div class=btzi-controls><select class=btzi-select name=btzi[size]><option value=100>默认: 原始</option><option value=0>默认: 等比例适应屏幕</option></select></div></fieldset><fieldset class=btzi-group><legend class=btzi-legend>滚动图片</legend><div class=btzi-controls><select class=btzi-select name=btzi[wheelKey]><option value=type>组合键: 无</option><option value=ctrlKey>组合键: Ctrl</option><option value=altKey>组合键: Alt</option><option value=shiftKey>组合键: Shift</option></select><select class=btzi-select name=btzi[wheelDirection]><option value=1>滚轮向下,图片上/左移</option><option value=-1>滚轮向上,图片上/左移</option></select></div></fieldset><fieldset class=btzi-group><legend class=btzi-legend>缩放图片</legend><div class=btzi-controls><select class=btzi-select name=btzi[zoomKey]><option value=type>组合键: 无</option><option value=ctrlKey>组合键: Ctrl</option><option value=altKey>组合键: Alt</option><option value=shiftKey>组合键: Shift</option></select><select class=btzi-select name=btzi[zoomDirection]><option value=1>滚轮向下,图片放大</option><option value=-1>滚轮向上,图片放大</option></select></div></fieldset><fieldset class=btzi-group><legend class=btzi-legend>旋转图片</legend><div class=btzi-controls><select class=btzi-select name=btzi[rotateKey]><option value=type>组合键: 无</option><option value=ctrlKey>组合键: Ctrl</option><option value=altKey>组合键: Alt</option><option value=shiftKey>组合键: Shift</option></select><select class=btzi-select name=btzi[rotateDirection]><option value=1>滚轮向下,顺时针旋转</option><option value=-1>滚轮向上,顺时针旋转</option></select></div></fieldset></form></div><div class=btzi-footer><button class=btzi-button id=btzi_settings_save type=button>保存设置</button></div></div></div>';
        doc.body.insertAdjacentHTML('beforeend', html);
        form = doc.getElementById('btzi_settings_form');
        p = preferences;
        for (prop in p) { // 将数据库里的设置导入到用户设置界面显示
            form[`btzi[${prop}]`].value = p[prop];
        }

        KeyIndex = {'btzi[wheelKey]':form['btzi[wheelKey]'].selectedIndex,'btzi[zoomKey]':form['btzi[zoomKey]'].selectedIndex,'btzi[rotateKey]':form['btzi[rotateKey]'].selectedIndex};

        // 避免组合键冲突,当选择已有组合键时会互相替换
        change = function () {
            var prop,tmp;
            for (prop in KeyIndex) {
                if (this.selectedIndex === KeyIndex[prop]) {
                    tmp = KeyIndex[this.name];
                    KeyIndex[prop] = tmp;
                    form[prop].selectedIndex = tmp;
                    break;
                }
            }
            KeyIndex[this.name] = this.selectedIndex;
            prop = null;
            tmp = null;
        };
        form['btzi[wheelKey]'].addEventListener('change', change);
        form['btzi[zoomKey]'].addEventListener('change', change);
        form['btzi[rotateKey]'].addEventListener('change', change);

        // 给保存按钮注册事件
        doc.getElementById('btzi_settings_save').addEventListener('click', function () {
            var prop,
                prefer = p,
                opened = prefer.open,
                closed = prefer.close,
                closedWindow = prefer.closeWindow;
            for (prop in prefer) { // 整合获得的新设置
                prefer[prop] = form[`btzi[${prop}]`].value;
            }
            if (opened !== prefer.open) { // 判断鼠标打开图片的方式是否更换
                postlist.removeEventListener(opened, open, true);
                postlist.addEventListener(prefer.open, open, true);
            }
            if (closed !== prefer.close || closedWindow !== prefer.closeWindow) { // 判断鼠标关闭图片的范围是否更换
                frame(closedWindow).removeEventListener(closed, close);
                frame(prefer.closeWindow).addEventListener(prefer.close, close);
            }
            GM_setValue('btzi-UserSettings', JSON.stringify(prefer)); // 将用户的新设置导入到数据库里保存
            doc.body.classList.remove('btzi-enabled');
            prefer=null;
        });
        settings = null;
        doc.body.classList.add('btzi-enabled');
    };
    if (!GM_getValue('btzi-UserSettings')) { // 第一次使用,弹出设置界面
        settings();
    }

    // 在浏览器扩展的菜单列表里添加设置选项
    GM_registerMenuCommand('btzi-用户设置', function () {
        if (settings) {
            settings();
        } else {
            doc.body.classList.add('btzi-enabled');
        }
    });

})(window, document);

console.log('也许我走了,什么都不会剩下。');