☰

哔哩哔哩专栏动态显示原图

同屏显示哔哩哔哩专栏和动态中的原图

// ==UserScript==
// @name        哔哩哔哩专栏动态显示原图
// @namespace   hzhbest
// @include     http://www.bilibili.com/read/*
// @include     https://www.bilibili.com/read/*
// @include     http://t.bilibili.com/*
// @include     https://t.bilibili.com/*
// @include     http://space.bilibili.com/*/dynamic*
// @include     https://space.bilibili.com/*/dynamic*
// @include     http://www.bilibili.com/opus/*
// @include     https://www.bilibili.com/opus/*
// @description    同屏显示哔哩哔哩专栏和动态中的原图
// @version     1.2
// @grant       GM_xmlhttpRequest
// @grant       unsafeWindow
// @grant       GM_getValue
// @grant       GM_setValue
// @run-at      document-end
// @license     GNU GPLv3
// ==/UserScript==

(function () {
	// --这里是设置区-- //
	var topheight = 60; // 哔哩哔哩顶栏高度
	var topspare = 125; // 滚动预留顶部高度
	var autorefresh = true; // 是否定时自动检测页面变化
	var loadLargeGif = GM_getValue('BLimgAll') || false; // 是否载入大型动图

	// --以下是代码区，请不要随意改动-- //

	// 匹配哔哩哔哩专栏和动态页面
	var regexRead = /bilibili\.com\/read\/[cv]\d+/; // 专栏页面
	var regexOpus = /bilibili\.com\/opus\/\d+/; // 新版专栏页面
	var regexDynamic = /t\.bilibili\.com\/\d+/; // 单条动态页面
	var regexSpace = /space\.bilibili\.com\/\d+\/dynamic/; // 用户动态页面
	var cur = -1; // "当前图片"序
	pinit();

	function pinit() {
		// 检查是否已开大图，否则进入初始化进程；如果已开大图但网址已非匹配网址则去除按钮；一秒检测一次
		var bpimg = document.querySelector("img.big_pic");
		var isMatch = regexRead.test(document.location.href) || 
		              regexOpus.test(document.location.href) ||
		              regexDynamic.test(document.location.href) ||
		              regexSpace.test(document.location.href);
		console.log("matched?: ", isMatch);
		
		if (isMatch) {
			if (!bpimg) init();
		} else {
			var buttonbox = document.querySelector(".big_pic_b");
			if (!!buttonbox) buttonbox.parentNode.removeChild(buttonbox);
		}
		
		if (autorefresh) {
			setTimeout(pinit, 1000);
		}
	}

	function init() {
		// 根据不同页面类型执行不同的初始化
		if (regexRead.test(document.location.href)) {
			initRead();
		} else if (regexOpus.test(document.location.href)) {
			initOpus();
		} else if (regexDynamic.test(document.location.href) || regexSpace.test(document.location.href)) {
			initDynamic();
		}
	}

	function initRead() {
		// 初始化专栏页面
		var articleContainer = document.querySelector(".article-container");
		if (!articleContainer) {
			console.log("专栏容器未找到，等待加载");
			setTimeout(init, 1000);
			return;
		}

		var imgElements = articleContainer.querySelectorAll("img.normal-img");
		if (imgElements.length === 0) {
			console.log("未找到专栏图片，退出");
			return;
		}

		console.log("开始处理专栏图片");
		goRead(imgElements);
	}

	function initOpus() {
		// 初始化新版专栏页面(opus)
		console.log("开始初始化新版专栏页面");
		
		// 等待内容加载完成
		if (!document.querySelector(".opus-module-content")) {
			console.log("新版专栏容器未找到，等待加载");
			setTimeout(init, 1000);
			return;
		}
		
		// 只查找所有img标签
		var allImages = document.querySelectorAll(".opus-module-content img");
		
		if (allImages.length === 0) {
			console.log("未找到专栏图片，退出");
			return;
		}
		
		console.log("找到新版专栏图片，开始处理");
		goOpus(null, null, allImages);
	}

	function initDynamic() {
		// 初始化动态页面
		console.log("开始初始化动态页面");
		
		// 适配新版动态页面结构
		var dynamicContainer = document.querySelector(".bili-dyn-list__item") || 
		                      document.querySelector(".bili-dyn-item") ||
		                      document.querySelector(".card");
		
		if (!dynamicContainer) {
			console.log("动态容器未找到，等待加载");
			setTimeout(init, 1000);
			return;
		}

		// 只查找img标签
		var allImages = document.querySelectorAll(".bili-album__preview__picture__img img");
		
		if (allImages.length === 0) {
			console.log("未找到动态图片，尝试查找其他选择器");
			
			// 尝试查找其他可能的图片容器
			allImages = document.querySelectorAll("img[src*='hdslb.com/bfs/new_dyn/']");
			
			if (allImages.length === 0) {
				console.log("未找到任何动态图片，退出");
				return;
			}
		}
		
		console.log("找到动态图片，开始处理");
		goDynamic(null, null, allImages);
	}

	function goRead(imgElements) {
		// 处理专栏图片
		setupCSS();
		setupButtons();

		// 建立大图框架，用于插入大图
		var bpboxes = [],
			imgsrc,
			imgn,
			imgl = imgElements.length;
		var _limited = false;
		var root = document.querySelector(".article-container");
		var nslink = document.querySelector(".big_pic_ns");
		var nslinks = [];

		for (var i = 0; i < imgl; i++) {
			// 提取专栏大图
			// https://i0.hdslb.com/bfs/article/watermark/[email protected]
			// 转换为
			// https://i0.hdslb.com/bfs/article/xxxx 或 https://i0.hdslb.com/bfs/article/xxxx.jpg
			bpboxes[i] = creaElemIn("div", root);
			nslinks[i] = creaElemIn("div", nslink);
			nslinks[i].innerHTML = (i + 1);
			nslinks[i].name = i;
			creaElemIn("br", root);
            
			var imgSrc = imgElements[i].src;
			// 处理专栏图片URL，获取原图
			imgsrc = convertToOriginalImage(imgSrc);
			
			imgn = creaElemIn("img", bpboxes[i]);
			imgn.src = imgsrc;
			imgn.className = "big_pic";
			imgn.title = "[ " + (i + 1) + " / " + imgl + " ]";
			nslinks[i].style.backgroundImage = 'url("' + imgSrc + '")';
			
			nslinks[i].addEventListener(
				"click",
				function (e) {
					scrollto(getTop(bpboxes[e.target.name]) - topspare + 25);
				},
				false
			);
		}

		// 设置滚动事件和其他交互
		setupScrollEvent(bpboxes, nslinks, imgl);
	}

	function goOpus(allPictures, allSourceSets, allImages) {
		// 处理新版专栏图片
		setupCSS();
		setupButtons();

		// 建立大图框架，用于插入大图
		var bpboxes = [],
			imgsrc,
			imgn,
			imgl = 0;
		var _limited = false;
		var root = document.querySelector(".opus-module-content");
		var nslink = document.querySelector(".big_pic_ns");
		var nslinks = [];

		// 收集所有图片URL (只从img标签获取)
		var imageUrls = [];
		var processedOriginals = []; // 存储已处理过的原图URL，用于去重
		
		if (allImages.length > 0) {
			console.log("从img.src中获取图片URL");
			for (var i = 0; i < allImages.length; i++) {
				var src = allImages[i].getAttribute("src");
				if (src && src.includes("hdslb.com/bfs/")) {
					if (src.startsWith("//")) {
						src = "https:" + src;
					}
					
					// 提前计算原图URL用于去重
					var originalSrc = convertToOriginalImage(src);
					// 检查是否已经处理过相同的原图
					if (!processedOriginals.includes(originalSrc)) {
						imageUrls.push(src);
						processedOriginals.push(originalSrc);
					} else {
						console.log("跳过重复图片: " + src);
					}
				}
			}
		}
		
		console.log("找到图片URL数量: " + imageUrls.length);
		imgl = imageUrls.length;
		
		if (imgl === 0) {
			console.log("未能提取到有效的图片URL，退出");
			return;
		}

		for (var i = 0; i < imgl; i++) {
			bpboxes[i] = creaElemIn("div", root);
			nslinks[i] = creaElemIn("div", nslink);
			nslinks[i].innerHTML = (i + 1);
			nslinks[i].name = i;
			creaElemIn("br", root);
            
			var imgSrc = imageUrls[i];
			// 处理专栏图片URL，获取原图
			imgsrc = convertToOriginalImage(imgSrc);
			
			imgn = creaElemIn("img", bpboxes[i]);
			imgn.src = imgsrc;
			imgn.className = "big_pic";
			imgn.title = "[ " + (i + 1) + " / " + imgl + " ]";
			nslinks[i].style.backgroundImage = 'url("' + imgSrc + '")';
			
			nslinks[i].addEventListener(
				"click",
				function (e) {
					scrollto(getTop(bpboxes[e.target.name]) - topspare + 25);
				},
				false
			);
		}

		// 设置滚动事件和其他交互
		setupScrollEvent(bpboxes, nslinks, imgl);
	}

	function goDynamic(allPictures, allSourceSets, allImages) {
		// 处理动态图片
		setupCSS();
		setupButtons();

		// 建立大图框架，用于插入大图
		var bpboxes = [],
			imgsrc,
			imgn,
			imgl = 0;
		var _limited = false;
		var root = document.querySelector(".bili-dyn-list__item") || 
		          document.querySelector(".bili-dyn-item") ||
		          document.querySelector(".card");
		var nslink = document.querySelector(".big_pic_ns");
		var nslinks = [];

		// 收集所有图片URL (只从img标签获取)
		var imageUrls = [];
		var processedOriginals = []; // 存储已处理过的原图URL，用于去重
		
		if (allImages.length > 0) {
			console.log("从img.src中获取图片URL");
			for (var i = 0; i < allImages.length; i++) {
				var src = allImages[i].getAttribute("src");
				if (src && src.includes("hdslb.com/bfs/")) {
					if (src.startsWith("//")) {
						src = "https:" + src;
					}
					
					// 提前计算原图URL用于去重
					var originalSrc = convertToOriginalImage(src);
					// 检查是否已经处理过相同的原图
					if (!processedOriginals.includes(originalSrc)) {
						imageUrls.push(src);
						processedOriginals.push(originalSrc);
					} else {
						console.log("跳过重复图片: " + src);
					}
				}
			}
		}
		
		console.log("找到图片URL数量: " + imageUrls.length);
		imgl = imageUrls.length;
		
		if (imgl === 0) {
			console.log("未能提取到有效的图片URL，退出");
			return;
		}

		for (var i = 0; i < imgl; i++) {
			// 提取动态大图
			bpboxes[i] = creaElemIn("div", root);
			nslinks[i] = creaElemIn("div", nslink);
			nslinks[i].innerHTML = (i + 1);
			nslinks[i].name = i;
			creaElemIn("br", root);
            
			var imgSrc = imageUrls[i];
			// 处理动态图片URL，获取原图
			imgsrc = convertToOriginalImage(imgSrc);
			
			imgn = creaElemIn("img", bpboxes[i]);
			imgn.src = imgsrc;
			imgn.className = "big_pic";
			imgn.title = "[ " + (i + 1) + " / " + imgl + " ]";
			nslinks[i].style.backgroundImage = 'url("' + imgSrc + '")';
			
			nslinks[i].addEventListener(
				"click",
				function (e) {
					scrollto(getTop(bpboxes[e.target.name]) - topspare + 25);
				},
				false
			);
		}

		// 设置滚动事件和其他交互
		setupScrollEvent(bpboxes, nslinks, imgl);
	}

	function convertToOriginalImage(imgSrc) {
		// 转换图片链接为原图链接
		var originalSrc = imgSrc;
		
		// 处理专栏图片 - 老版格式
		// 移除watermark和后续参数
		if (imgSrc.includes("hdslb.com/bfs/article")) {
			originalSrc = imgSrc.replace(/\/watermark\/.*$/, "");
			// 移除@后的参数
			originalSrc = originalSrc.replace(/@.*$/, "");
			// 移除.webp后缀
			originalSrc = originalSrc.replace(/\.webp$/, "");
		}
		
		// 处理动态图片 - 老版格式
		// 替换@后的尺寸和格式参数
		if (imgSrc.includes("hdslb.com/bfs/album")) {
			// 移除@后的参数
			originalSrc = originalSrc.replace(/@.*$/, "");
			// 若没有扩展名，尝试添加.jpg
			if (!originalSrc.match(/\.(jpg|jpeg|png|gif)$/i)) {
				originalSrc += ".jpg";
			}
		}
		
		// 处理动态图片和新版专栏 - 新版格式
		// 替换@后的尺寸和格式参数
		if (imgSrc.includes("hdslb.com/bfs/new_dyn")) {
			// 移除@后的参数
			originalSrc = originalSrc.replace(/@.*$/, "");
			// 若没有扩展名，尝试添加.jpg
			if (!originalSrc.match(/\.(jpg|jpeg|png|gif)$/i)) {
				originalSrc += ".jpg";
			}
		}
		
		// 确保URL有协议头
		if (originalSrc.startsWith("//")) {
			originalSrc = "https:" + originalSrc;
		}
		
		console.log("原图URL: " + originalSrc);
		return originalSrc;
	}

	function setupCSS() {
		// 插入CSS
		var headID = document.getElementsByTagName("head")[0];
		var cssNode = creaElemIn("style", headID);
		cssNode.type = "text/css";
		cssNode.innerHTML = [
			".big_pic{max-width: 890px;}",
			".big_pic_n{max-width: 500px;}",
			".big_pic:hover, .big_pic_n:hover{box-shadow: 0 0 30px 2px #f1ecdf;}",
			".big_pic_poster{outline: 2px dashed #fcde44; outline-offset: -2px; cursor: pointer;}",
			".big_pic_v{max-width: 90%; max-height: 80vh; cursor: pointer;}"
		].join(""); //大图样式
		cssNode.innerHTML += [
			".big_pic_b{position: fixed; left: 10px; top: 200px; z-index: 99999;}",
			".big_pic_btn{height: 20px; min-width: 50px; width: fit-content; padding: 3px; margin-bottom: 20px; border: 1px solid white; color: white; background: rgba(133,133,133,0.6); cursor: pointer; user-select: none;}",
			".big_pic_btn:hover{background: rgba(133,133,200,0.6);}",
			".big_pic_ns{margin-bottom: 20px; width: 62px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 3px;}",
			".big_pic_ns > div{font-size: 10px; line-height: 28px; text-align: right; height: 15px; width: 15px; background-clip: border-box; background-position: center; background-size: cover; padding: 3px; border: 1px solid #7a7a7a; color: white; text-shadow: 0 0 2px black,0 0 2px black,0 0 2px black; cursor: pointer; user-select: none; opacity: 0.7;}",
			".big_pic_ns > div:hover{font-size: 0px; outline: 1px solid #f8f87b; opacity: 1;}",
			".big_pic_ns > div.curr{outline: 3px solid #f87bce; opacity: 0.9;}"
		].join(""); //按钮样式
	}

	function setupButtons() {
		// 创建控制按钮
		var buttonbox = creaElemIn("div", document.body);
		buttonbox.className = "big_pic_b";
		var tplink = creaElemIn("div", buttonbox); // 直达页顶链接
		var nclink = creaElemIn("div", buttonbox); // 图片限宽链接
		var n1link = creaElemIn("div", buttonbox); // 首个图片链接
		var n2link = creaElemIn("div", buttonbox); // 上个图片链接
		var nslink = creaElemIn("div", buttonbox); // 图片导航按钮
		var n3link = creaElemIn("div", buttonbox); // 下个图片链接
		nslink.className = "big_pic_ns";

		tplink.className = "big_pic_btn";
		tplink.innerHTML = "回到页顶";
		tplink.addEventListener(
			"click",
			function () {
				var headerbox = document.querySelector("header");
				scrollto(getTop(headerbox) - topheight * 2);
			},
			false
		);

		nclink.className = "big_pic_btn";
		nclink.innerHTML = "图片限宽";
		nclink.addEventListener(
			"click",
			function () {
				var bpboxes = document.querySelectorAll("div > img.big_pic, div > img.big_pic_n");
				var i;
				if (bpboxes.length > 0) {
					if (bpboxes[0].className === "big_pic") {
						for (i = 0; i < bpboxes.length; i++) {
							bpboxes[i].className = "big_pic_n";
						}
					} else {
						for (i = 0; i < bpboxes.length; i++) {
							bpboxes[i].className = "big_pic";
						}
					}
				}
			},
			false
		);

		n1link.className = "big_pic_btn";
		n1link.innerHTML = "△首个图片";
		n1link.addEventListener(
			"click",
			function () {
				var bpboxes = document.querySelectorAll("div > img.big_pic, div > img.big_pic_n");
				if (bpboxes.length > 0) {
					scrollto(getTop(bpboxes[0].parentNode) - topspare + 25);
				}
			},
			false
		);

		n2link.className = "big_pic_btn";
		n2link.innerHTML = "▲上个图片";
		n2link.addEventListener(
			"click",
			function () {
				var bpboxes = document.querySelectorAll("div > img.big_pic, div > img.big_pic_n");
				var t = document.documentElement.scrollTop;
				for (var j = bpboxes.length - 1; j >= 0; j--) {
					if (t > getTop(bpboxes[j].parentNode) + bpboxes[j].parentNode.offsetHeight - topspare) {
						scrollto(getTop(bpboxes[j].parentNode) - topspare + 25);
						return;
					}
				}
			},
			false
		);

		n3link.className = "big_pic_btn";
		n3link.innerHTML = "▼下个图片";
		n3link.addEventListener(
			"click",
			function () {
				var bpboxes = document.querySelectorAll("div > img.big_pic, div > img.big_pic_n");
				var t = document.documentElement.scrollTop;
				for (var j = 0; j < bpboxes.length; j++) {
					if (t < getTop(bpboxes[j].parentNode) - topspare) {
						scrollto(getTop(bpboxes[j].parentNode) - topspare + 25);
						return;
					}
				}
			},
			false
		);
	}

	function setupScrollEvent(bpboxes, nslinks, imgl) {
		// 设置滚动事件以突出显示当前图片
		document.onscroll = function () {
			var t = document.documentElement.scrollTop; // 当前滚动位置（视框顶y）
			var w = window.innerHeight;	// 当前视框高度
			var percentage = 1 / 4;		// 视框内"注视框"距视框顶底距离（1-2*percentage 为注视框高度占比）
			var linetop = t + w * percentage - topspare;	// 注视框顶位置
			var linebtm = t + w * (1 - percentage);	// 注视框底位置
			var j, vh, vhmax = 0;	// 检查图片序、图片在注视框内高度、注视框内最大高度
			
			if (bpboxes.length > 0) {
				if (getTop(bpboxes[0]) >= linebtm || getTop(bpboxes[imgl - 1]) + bpboxes[imgl - 1].offsetHeight <= linetop) {
					cur = -1;	// 若首图在注视框底之下或末图在注视框顶之上，则无当前图
				} else {
					for (j = imgl - 1; j >= 0; j--) {	// 从底部检查各图片
						let ti = getTop(bpboxes[j]), hi = bpboxes[j].offsetHeight;	// 检查图片位置、检查图片高度
						if (ti < linebtm && (ti + hi) > linetop) {	// 若图片顶端在注视框底之上、底端在注视框顶之下
							vh = Math.min(linebtm, ti + hi) - Math.max(linetop, ti);	// 计算注视框内高度
							if (vh >= vhmax) {	// 当检查图片拥有更大的注视框内高度，则其为"当前图片"（等高则更前）
								vhmax = vh;
								cur = j;
							}
						}
					}
				}
				
				if (cur !== -1) {
					for (j = imgl - 1; j >= 0; j--) {
						if (j !== cur) {
							nslinks[j].classList.remove("curr");
						} else {
							nslinks[j].classList.add("curr");
						}
					}
				} else {
					for (j = imgl - 1; j >= 0; j--) {
						if (j !== cur) {
							nslinks[j].classList.remove("curr");
						}
					}
				}
			}
		};
	}

	function scrollto(pos) {
		// 滚动到指定位置
		document.documentElement.scrollTop = pos;
	}

	// 创建元素
	function creaElemIn(tagname, destin) {
		var theElem = destin.appendChild(document.createElement(tagname));
		return theElem;
	}

	// 通过xpath获取元素
	function getElem(xpath) {
		return document
			.evaluate(
				xpath,
				document,
				null,
				XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
				null
			)
			.snapshotItem(0);
	}

	// 获取元素的绝对顶部位置
	function getTop(e) {
		var offset = e.offsetTop;
		if (e.offsetParent != null) offset += getTop(e.offsetParent);
		return offset;
	}

})();