Greasy Fork is available in English.
微信公证号文章中，图片预览
Versión del día
// ==UserScript==
// @name img_preview
// @namespace http://tampermonkey.net/
// @version 0.0.11
// @description 微信公证号文章中，图片预览
// @author Enjoy
// @icon https://foruda.gitee.com/avatar/1671100286067517749/4867929_enjoy_li_1671100285.png!avatar60
// @match *://mp.weixin.qq.com/s/*
// @grant GM_addElement
// @grant GM_addStyle
// @grant GM_setClipboard
// @license GPL License
// ==/UserScript==
// 函数文档 https://www.tampermonkey.net/documentation.php#api:GM_addElement
(function () {
GM_addElement('script',{
textContent: 'yy();function yy(){\nwindow.addEventListener(\'load\',()=>{\nconsole.log(\'执行 img-preview\')\n onImgPreview({\n selector: \'img.wxw-img\'\n })\n function onImgPreview(options = {}) {\n let defaultOptions = {}\n let { onContentSelector,selector = \'img\' } = Object({},defaultOptions,options)\n let scale = 1\n let offset = {\n left: 0,\n top: 0\n }\n let origin = \'center\'\n let initialData = {\n offset: {},\n origin: \'center\',\n scale: 1\n }\n let startPoint = {\n x: 0,\n y: 0\n }\n // 记录初始触摸点位\n let isTouching = false\n // 标记是否正在移动\n let isMove = false\n // 正在移动中，与点击做区别\n let touches = new Map()\n // 触摸点数组\n let lastDistance = 0\n let lastScale = 1\n // 记录下最后的缩放值\n let scaleOrigin = {\n x: 0,\n y: 0,\n }\n\n const { innerWidth: winWidth,innerHeight: winHeight } = window\n // let cloneEl = null\n let cloneEl = document.createElement(\'img\')\n let originalEl = null\n\n let onContent = onContentSelector ? document.querySelector(onContentSelector) : window\n onContent.addEventListener(\'click\',function (e) {\n console.log(\'e.target\',e.target)\n let imgDoms = [...document.querySelectorAll(selector)]\n e.preventDefault()\n if (imgDoms.find(item => item === e.target)) {\n originalEl = e.target\n // cloneEl = originalEl.cloneNode(true)\n cloneEl.src = originalEl.src\n // originalEl.style.opacity = 0\n openPreview()\n }\n })\n\n function createStyle() {\n\n const style = document.createElement(\'style\')\n style.innerHTML = `/* 图片预览 */\n.modal {\ntouch-action: none;\nposition: fixed;\nz-index: 99;\ntop: 0;\nleft: 0;\nwidth: 100vw;\nheight: 100vh;\nbackground-color: rgba(0, 0, 0, 0.75);\nuser-select: none;\n}\n\n.modal>img {\nposition: absolute;\npadding: 0;\nmargin: 0;\n/* transition: all var(--delay_time); */\ntransform: translateZ(0);\n}`\n return style\n }\n function openPreview() {\n scale = 1\n const { offsetWidth,offsetHeight } = originalEl\n const { top,left } = originalEl.getBoundingClientRect()\n // 创建蒙层\n const mask = document.createElement(\'div\')\n mask.classList.add(\'modal\')\n mask.appendChild(createStyle())\n // 添加在body下\n document.body.appendChild(mask)\n // 注册事件\n mask.addEventListener("click",clickFunc)\n mask.addEventListener(\'mousewheel\',zoom,{\n passive: false\n })\n // 遮罩点击事件\n function clickFunc() {\n setTimeout(() => {\n if (isMove) {\n isMove = false\n } else {\n changeStyle(cloneEl,[\'transition: all .3s\',`left: ${left}px`,`top: ${top}px`,`transform: translate(0,0)`,`width: ${offsetWidth}px`])\n setTimeout(() => {\n document.body.removeChild(this)\n originalEl.style.opacity = 1\n mask.removeEventListener(\'click\',clickFunc)\n }\n ,300)\n }\n }\n ,280)\n }\n // 添加图片\n changeStyle(cloneEl,[`left: ${left}px`,`top: ${top}px`])\n mask.appendChild(cloneEl)\n // 移动图片到屏幕中心位置\n const originalCenterPoint = {\n x: offsetWidth / 2 + left,\n y: offsetHeight / 2 + top\n }\n const winCenterPoint = {\n x: winWidth / 2,\n y: winHeight / 2\n }\n const offsetDistance = {\n left: winCenterPoint.x - originalCenterPoint.x + left,\n top: winCenterPoint.y - originalCenterPoint.y + top\n }\n const diffs = {\n left: ((adaptScale() - 1) * offsetWidth) / 2,\n top: ((adaptScale() - 1) * offsetHeight) / 2\n }\n changeStyle(cloneEl,[\'transition: all 0.3s\',`width: ${offsetWidth * adaptScale() + \'px\'}`,`transform: translate(${offsetDistance.left - left - diffs.left}px, ${offsetDistance.top - top - diffs.top}px)`])\n // 消除偏差\n setTimeout(() => {\n changeStyle(cloneEl,[\'transition: all 0s\',`left: 0`,`top: 0`,`transform: translate(${offsetDistance.left - diffs.left}px, ${offsetDistance.top - diffs.top}px)`])\n offset = {\n left: offsetDistance.left - diffs.left,\n top: offsetDistance.top - diffs.top\n }\n // 记录值\n record()\n }\n ,300)\n }\n\n // 滚轮缩放\n const zoom = (event) => {\n if (!event.deltaY) {\n return\n }\n event.preventDefault()\n origin = `${event.offsetX}px ${event.offsetY}px`\n // 缩放执行\n if (event.deltaY < 0) {\n scale += 0.1\n // 放大\n } else if (event.deltaY > 0) {\n scale >= 0.2 && (scale -= 0.1)\n // 缩小\n }\n if (scale < initialData.scale) {\n reduction()\n }\n offset = getOffsetCorrection(event.offsetX,event.offsetY)\n changeStyle(cloneEl,[\'transition: all .15s\',`transform-origin: ${origin}`,`transform: translate(${offset.left + \'px\'}, ${offset.top + \'px\'}) scale(${scale})`])\n }\n\n // 获取中心改变的偏差\n function getOffsetCorrection(x = 0,y = 0) {\n const touchArr = Array.from(touches)\n if (touchArr.length === 2) {\n const start = touchArr[0][1]\n const end = touchArr[1][1]\n x = (start.offsetX + end.offsetX) / 2\n y = (start.offsetY + end.offsetY) / 2\n }\n origin = `${x}px ${y}px`\n const offsetLeft = (scale - 1) * (x - scaleOrigin.x) + offset.left\n const offsetTop = (scale - 1) * (y - scaleOrigin.y) + offset.top\n scaleOrigin = {\n x,\n y\n }\n return {\n left: offsetLeft,\n top: offsetTop\n }\n }\n\n // 操作事件\n window.addEventListener(\'pointerdown\',function (e) {\n e.preventDefault()\n touches.set(e.pointerId,e)\n // TODO: 点击存入触摸点\n isTouching = true\n startPoint = {\n x: e.clientX,\n y: e.clientY\n }\n if (touches.size === 2) {\n // TODO: 判断双指触摸，并立即记录初始数据\n lastDistance = getDistance()\n lastScale = scale\n }\n })\n window.addEventListener(\'pointerup\',function (e) {\n touches.delete(e.pointerId)\n // TODO: 抬起移除触摸点\n if (touches.size <= 0) {\n isTouching = false\n } else {\n const touchArr = Array.from(touches)\n // 更新点位\n startPoint = {\n x: touchArr[0][1].clientX,\n y: touchArr[0][1].clientY\n }\n }\n setTimeout(() => {\n isMove = false\n }\n ,300);\n })\n window.addEventListener(\'pointermove\',(e) => {\n e.preventDefault()\n if (isTouching) {\n isMove = true\n if (touches.size < 2) {\n // 单指滑动\n offset = {\n left: offset.left + (e.clientX - startPoint.x),\n top: offset.top + (e.clientY - startPoint.y),\n }\n changeStyle(cloneEl,[\'transition: all 0s\',`transform: translate(${offset.left + \'px\'}, ${offset.top + \'px\'}) scale(${scale})`,`transform-origin: ${origin}`])\n // 更新点位\n startPoint = {\n x: e.clientX,\n y: e.clientY\n }\n } else {\n // 双指缩放\n touches.set(e.pointerId,e)\n const ratio = getDistance() / lastDistance\n scale = ratio * lastScale\n offset = getOffsetCorrection()\n if (scale < initialData.scale) {\n reduction()\n }\n changeStyle(cloneEl,[\'transition: all 0s\',`transform: translate(${offset.left + \'px\'}, ${offset.top + \'px\'}) scale(${scale})`,`transform-origin: ${origin}`])\n }\n }\n }\n )\n window.addEventListener(\'pointercancel\',function (e) {\n touches.clear()\n // 可能存在特定事件导致中断，真机操作时 pointerup 在某些边界情况下不会生效，所以需要清空\n })\n\n // 修改样式，减少回流重绘\n function changeStyle(el,arr) {\n const original = el.style.cssText.split(\';\')\n original.pop()\n el.style.cssText = original.concat(arr).join(\';\') + \';\'\n }\n\n // 计算自适应屏幕的缩放值\n function adaptScale() {\n const { offsetWidth: w,offsetHeight: h } = originalEl\n let scale = 0\n scale = winWidth / w\n if (h * scale > winHeight - 80) {\n scale = (winHeight - 80) / h\n }\n return scale\n }\n\n // 获取距离\n function getDistance() {\n const touchArr = Array.from(touches)\n if (touchArr.length < 2) {\n return 0\n }\n const start = touchArr[0][1]\n const end = touchArr[1][1]\n return Math.hypot(end.x - start.x,end.y - start.y)\n }\n\n // 记录初始化数据\n function record() {\n initialData = Object.assign({},{\n offset,\n origin,\n scale\n })\n }\n\n // 还原记录，用于边界处理\n let timer = null\n function reduction() {\n timer && clearTimeout(timer)\n timer = setTimeout(() => {\n // offset = initialData.offset\n // origin = initialData.origin\n // scale = initialData.scale\n changeStyle(cloneEl,[`transform: translate(${offset.left + \'px\'}, ${offset.top + \'px\'}) scale(${scale})`,`transform-origin: ${origin}`])\n }\n ,300)\n }\n }\n})\n}'
})
})();