Add a button on the left top conner of a image,for convenience of displaying long images on X
// ==UserScript==
// @name X Long Image Enlarge Tool
// @name:zh-CN 推特长图放大
// @namespace https://github.com/yanzhili/xImageEnlarge
// @version 2024-07-19
// @description Add a button on the left top conner of a image,for convenience of displaying long images on X
// @description:zh-CN 在图片右上角显示一个放大按钮，方便显示推特中的长图
// @author James.Yan
// @match https://x.com/*
// @match https://twitter.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=x.com
// @grant none
// @license MIT
// ==/UserScript==
;(function () {
'use strict'
window.dev = false
const MatchPic = 'pbs.twimg.com/media'
const MarkTag = 'zx-btn-added'
const ImgClass = 'zx-img-class'
const ImgBtnClass = 'zx-btn-class'
const aHrefMap = new Map()
const imgMap = new Map()
function main() {
initCss()
initFullscreenDiv()
observeHtml((imgElement) => {
imgElement.classList.add(ImgClass)
const largeImg = imgToLarge(imgElement.src)
distribute(imgElement, largeImg)
addButton(imgElement.parentElement, largeImg)
})
}
function distribute(element, src) {
if (!element) return
if (element.parentElement && element.parentElement.tagName == 'A') {
const aHref = element.parentElement.getAttribute('href')
if (aHref.indexOf('/photo/') > -1) {
const aHrefArr = aHref.split('/photo/')
if (aHrefArr.length < 1) return
log(aHrefArr[0], 'keyHref')
const keyHref = aHrefArr[0]
const index = Number(aHrefArr[1])
if (index <= 0) return
if (!imgMap.has(src)) {
imgMap.set(src, keyHref)
}
if (!aHrefMap.has(keyHref)) {
let imgArr = []
imgArr[index - 1] = src
aHrefMap.set(keyHref, imgArr)
} else {
const imgArr = aHrefMap.get(keyHref)
if (imgArr.indexOf(src) < 0) {
imgArr[index - 1] = src
aHrefMap.set(keyHref, imgArr)
}
}
}
} else {
distribute(element.parentElement, src)
}
}
function isLongImage(imgSrc) {
if (
imgSrc.indexOf('name=4096x4096') > -1 ||
imgSrc.indexOf('name=large') > -1
) {
return true
}
return false
}
function addButton(parentElement, imgSrc) {
if (parentElement.id.indexOf('zx-') > -1) {
return
}
if (parentElement.getAttribute(MarkTag)) {
log(imgSrc, 'Btn-Added')
return
}
let button = document.createElement('div')
button.id = genRandomID('btn')
button.className = ImgBtnClass
button.style =
'width:50px;height:22px;line-height:22px;text-align: center;font-size:12px;font-famliy:ui-monospace;cursor: pointer;color: white;'
button.style.backgroundColor = '#000'
button.style.opacity = '0.7'
button.innerText = 'ZOOM'
button.onclick = (e) => {
e.preventDefault()
e.stopPropagation()
displayFullScreenImg(imgSrc)
}
parentElement.setAttribute(MarkTag, 'added')
parentElement.appendChild(button)
}
function isMediaImg(img) {
return img.indexOf(MatchPic) > -1
}
function observeHtml(imgAddedCallback) {
const targetNode = document.body
const config = {
attributes: true,
childList: true,
subtree: true,
attributeFilter: ['src'],
}
const callback = function (mutationsList, observer) {
for (let mutation of mutationsList) {
if (
mutation.attributeName == 'src' &&
isMediaImg(mutation.target.src)
) {
imgAddedCallback(mutation.target)
}
}
}
const observer = new MutationObserver(callback)
observer.observe(targetNode, config)
// observer.disconnect()
}
function imgToLarge(imgSrc) {
if (!imgSrc) return
let nameValue = ''
if (imgSrc.indexOf('name=') > -1) {
let arr1 = imgSrc.split('?')
if ((arr1.length = 2)) {
let str1 = arr1[1]
let arr2 = str1.split('&')
if (arr2) {
arr2.map((i) => {
let arr3 = i.split('=')
if (arr3.length == 2 && arr3[0] == 'name' && arr3[1] != 'large') {
let tempNameValue = arr3[1]
if (tempNameValue.indexOf('x') > -1) {
let arr4 = tempNameValue.split('x')
//大图不替换
if (Number(arr4[0]) < 1024) {
nameValue = arr3[1]
}
} else {
nameValue = arr3[1]
}
}
})
}
}
}
if (nameValue) {
imgSrc = imgSrc.replace(`name=${nameValue}`, 'name=large')
}
log(imgSrc, 'Large-Imgage-Src')
return imgSrc
}
window.onload = function () {
main()
}
const ImgFullWidthCss = 'width:100%;height:auto;margin:auto;cursor:zoom-in'
const ImgFullHeightCss = 'width:auto;height:100%;margin:auto;cursor:zoom-in'
const ImgAutoCss = 'width:auto;height:auto;margin:auto;cursor:zoom-in'
const FSDivId = 'zx-fullsceen-div-id'
const FSImgId = 'zx-fullsceen-img-id'
const ImgDisplayType = 'zx-display-type'
const NextArrowId = 'zx-next-arrow-id'
const PreviousArrowId = 'zx-previous-arrow-id'
function initFullscreenDiv() {
let fsDiv = document.createElement('div')
fsDiv.id = FSDivId
fsDiv.style =
'text-align: center;width:100%;height:100%; position: fixed;top: 0px;bottom: 0px;overflow-y:auto;display:none'
fsDiv.style.backgroundColor = 'black'
fsDiv.onclick = () => {
dismissImg()
}
let imgElmt = document.createElement('img')
imgElmt.id = FSImgId
imgElmt.onclick = (e) => {
e.preventDefault()
e.stopPropagation()
if (imgElmt.getAttribute(ImgDisplayType) == 'image-auto') {
imgElmt.setAttribute(ImgDisplayType, 'image-fw')
imgElmt.style = ImgFullWidthCss
} else if (imgElmt.getAttribute(ImgDisplayType) == 'image-fw') {
imgElmt.setAttribute(ImgDisplayType, 'image-fh')
imgElmt.style = ImgFullHeightCss
} else if (imgElmt.getAttribute(ImgDisplayType) == 'image-fh') {
imgElmt.setAttribute(ImgDisplayType, 'image-auto')
imgElmt.style = ImgAutoCss
}
}
fsDiv.appendChild(imgElmt)
fsDiv.appendChild(genCloseButton())
fsDiv.appendChild(genArrowButton(true))
fsDiv.appendChild(genArrowButton(false))
document.body.appendChild(fsDiv)
}
function genCloseButton() {
let closeImgDiv = document.createElement('div')
closeImgDiv.style =
'top: 0;right: 0px;margin-top: 10px;margin-right: 10px;width: 40px;height: 40px;position: fixed;'
closeImgDiv.style.backgroundColor = '#000'
closeImgDiv.style.opacity = '0.8'
closeImgDiv.style.backgroundImage =
'url(data:image/svg+xml;base64,PHN2ZyB0PSIxNzE5NTU1MTg1MTM4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE0MDAzIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiPjxwYXRoIGQ9Ik01MTAuODA5NiA0MjAuMzAwOGwzMzUuMjk2LTMzNS4yOTYgOTAuNTA4OCA5MC41MDg4LTMzNS4yOTYgMzM1LjI5NiAzMzUuMjk2IDMzNS4yOTYtOTAuNTA4OCA5MC41MDg4LTMzNS4yOTYtMzM1LjI5Ni0zMzUuMjk2IDMzNS4yOTYtOTAuNTA4OC05MC41MDg4IDMzNS4yOTYtMzM1LjI5Ni0zMzUuMjk2LTMzNS4yOTYgOTAuNTA4OC05MC41MDg4eiIgZmlsbD0iI2ZmZmZmZiIgcC1pZD0iMTQwMDQiPjwvcGF0aD48L3N2Zz4=)'
closeImgDiv.style.backgroundRepeat = 'no-repeat'
closeImgDiv.style.backgroundSize = 'cover'
closeImgDiv.style.cursor = 'pointer'
closeImgDiv.onclick = () => {
dismissImg()
}
return closeImgDiv
}
function genArrowButton(showNext) {
let arrowDiv = document.createElement('div')
if (showNext) {
arrowDiv.id = NextArrowId
} else {
arrowDiv.id = PreviousArrowId
}
if (showNext) {
arrowDiv.style = 'right: 0px; margin-right: 10px;'
} else {
arrowDiv.style = 'left: 0px; margin-left: 10px;'
}
arrowDiv.style.display = 'none'
arrowDiv.style.top = '50%'
arrowDiv.style.width = '45px'
arrowDiv.style.height = '45px'
arrowDiv.style.position = 'fixed'
arrowDiv.style.borderRadius = '50%'
arrowDiv.style.backgroundColor = '#80808091'
arrowDiv.style.backgroundImage =
'url(data:image/svg+xml;base64,PHN2ZyB0PSIxNzIwNDMwNjM5Mzg3IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjgxMzgiIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHBhdGggZD0iTTU0NCA2OTAuNzczMzMzbDExNi4wNTMzMzMtMTE2LjA1MzMzM2EzMiAzMiAwIDEgMSA0NS4yMjY2NjcgNDUuMjI2NjY3bC0xNzAuNjY2NjY3IDE3MC42NjY2NjZhMzIgMzIgMCAwIDEtNDUuMjI2NjY2IDBsLTE3MC42NjY2NjctMTcwLjY2NjY2NmEzMiAzMiAwIDEgMSA0NS4yMjY2NjctNDUuMjI2NjY3bDExNi4wNTMzMzMgMTE2LjA1MzMzM1YyNzcuMzMzMzMzYTMyIDMyIDAgMCAxIDY0IDB2NDEzLjQ0eiIgZmlsbD0iI2ZmZmZmZiIgcC1pZD0iODEzOSI+PC9wYXRoPjwvc3ZnPg==)'
arrowDiv.style.backgroundRepeat = 'no-repeat'
arrowDiv.style.backgroundSize = 'cover'
arrowDiv.style.cursor = 'pointer'
if (showNext) {
arrowDiv.style.transform = 'rotate(-90deg)'
} else {
arrowDiv.style.transform = 'rotate(90deg)'
}
arrowDiv.onclick = (e) => {
e.preventDefault()
e.stopPropagation()
if (showNext) {
showNextImg(true)
} else {
showNextImg(false)
}
}
return arrowDiv
}
function showNextImg(showNext) {
let imgElmt = document.getElementById(FSImgId)
const imgSrc = imgElmt.getAttribute('src')
const keyHref = imgMap.get(imgSrc)
log(keyHref, imgSrc)
if (!keyHref) return
const imgArr = aHrefMap.get(keyHref)
log(imgArr, keyHref)
if (!imgArr) return
const imgIndex = imgArr.indexOf(imgSrc)
const len = imgArr.length
let fsDiv = document.getElementById(FSDivId)
const windowRatio = fsDiv.clientWidth / fsDiv.clientHeight
let imgUrl
if (showNext) {
if (imgIndex + 1 + 1 <= len) {
imgUrl = imgArr[imgIndex + 1]
}
} else {
if (imgIndex > 0) {
imgUrl = imgArr[imgIndex - 1]
}
}
if (!imgUrl) return
checkHasNextAndHasPrevious(imgUrl)
displayImg(imgUrl, windowRatio)
}
function initCss() {
var css = `
.${ImgBtnClass}
{display:none}
.${ImgClass}:hover + .${ImgBtnClass}, .${ImgBtnClass}:hover
{ display: inline-block }
`
var style = document.createElement('style')
if (style.styleSheet) {
style.styleSheet.cssText = css
} else {
style.appendChild(document.createTextNode(css))
}
document.getElementsByTagName('head')[0].appendChild(style)
}
function displayFullScreenImg(imgSrc) {
let fsDiv = document.getElementById(FSDivId)
fsDiv.style.overflowY = 'overflow-y:auto'
fsDiv.style.display = 'flex'
fsDiv.style.justifyContent = 'center'
fsDiv.style.alignItems = 'center'
const windowRatio = fsDiv.clientWidth / fsDiv.clientHeight
displayImg(imgSrc, windowRatio)
checkHasNextAndHasPrevious(imgSrc)
}
function checkHasNextAndHasPrevious(imgSrc) {
clearEmptyImg(imgSrc)
const nextBtn = document.getElementById(NextArrowId)
const previousBtn = document.getElementById(PreviousArrowId)
nextBtn.style.display = 'none'
previousBtn.style.display = 'none'
if (hasNext(imgSrc)) {
nextBtn.style.display = 'block'
}
if (hasPrevious(imgSrc)) {
if (previousBtn) {
previousBtn.style.display = 'block'
}
}
}
function clearEmptyImg(imgSrc) {
const keyHref = imgMap.get(imgSrc)
if (!keyHref) return
const imgArr = aHrefMap.get(keyHref)
if (imgArr) {
const newImgArr = imgArr.filter((i) => {
return !!i
})
aHrefMap.set(keyHref, newImgArr)
}
}
function hasNext(imgSrc) {
const keyHref = imgMap.get(imgSrc)
if (!keyHref) return false
const imgArr = aHrefMap.get(keyHref)
if (!imgArr) return false
const imgIndex = imgArr.indexOf(imgSrc)
const len = imgArr.length
if (len == 1) {
return false
}
return imgIndex + 1 < len
}
function hasPrevious(imgSrc) {
const keyHref = imgMap.get(imgSrc)
if (!keyHref) return false
const imgArr = aHrefMap.get(keyHref)
if (!imgArr) return false
const imgIndex = imgArr.indexOf(imgSrc)
const len = imgArr.length
if (len == 1) {
return false
}
return imgIndex + 1 > 1 && imgIndex + 1 <= len
}
function displayImg(imgSrc, windowRatio) {
let imgElmt = document.getElementById(FSImgId)
if (!imgElmt) return
imgElmt.setAttribute('src', '')
const img = new Image()
img.onload = function () {
const imgRatio = this.width / this.height
if (imgRatio > windowRatio) {
imgElmt.style = ImgFullWidthCss
imgElmt.setAttribute(ImgDisplayType, 'image-fw')
} else {
imgElmt.style = ImgFullHeightCss
imgElmt.setAttribute(ImgDisplayType, 'image-fh')
}
imgElmt.setAttribute('src', imgSrc)
}
img.src = imgSrc
}
function dismissImg() {
let fsDiv = document.getElementById(FSDivId)
fsDiv.style.display = 'none'
let imgElmt = document.getElementById(FSImgId)
if (!imgElmt) return
imgElmt.removeAttribute('src')
}
function genRandomID(tag) {
return `zx-${tag}-${Math.random().toString(36).slice(-8)}`
}
/**
* 将标准时间格式化
* @param {Date} time 标准时间
* @param {String} format 格式
* @return {String}
*/
function moment(time) {
// 获取年⽉⽇时分秒
let y = time.getFullYear()
let m = (time.getMonth() + 1).toString().padStart(2, `0`)
let d = time.getDate().toString().padStart(2, `0`)
let h = time.getHours().toString().padStart(2, `0`)
let min = time.getMinutes().toString().padStart(2, `0`)
let s = time.getSeconds().toString().padStart(2, `0`)
return `${y}-${m}-${d} ${h}:${min}:${s}`
}
function log(msg, tag) {
if (!window.dev) {
return false
}
if (tag) {
console.log(`${moment(new Date())} ${tag}`, msg)
} else {
console.log(`${moment(new Date())}`, msg)
}
}
})()