☰

View the entire image on Twitter

Displays the entire vertical image that would otherwise be cropped in the preview

当前为 2024-01-28 提交的版本，查看 最新版本。

// ==UserScript==
// @name             View the entire image on Twitter
// @name:ja          Twitter 縦長画像を全体表示させるやつ
// @namespace        http://tampermonkey.net/
// @version          1.01
// @description      Displays the entire vertical image that would otherwise be cropped in the preview
// @description:ja   Twitterでプレビューではトリミングされてしまう縦長の画像を拡大して表示させます。
// @author           Nogaccho
// @match            https://twitter.com/*
// @grant            none
// @license          MIT
// ==/UserScript==

(function() {
    'use strict';

    const previewImage = (imgSrc) => {
        const previewDiv = document.createElement('div');
        previewDiv.style.position = 'fixed';
        previewDiv.style.top = '10px';
        previewDiv.style.bottom = '10px';
        previewDiv.style.left = `calc(50%)`;
        previewDiv.style.right = '10px';
        previewDiv.style.zIndex = '9999';
        previewDiv.style.pointerEvents = 'none';
        previewDiv.style.backgroundImage = `url(${imgSrc})`;
        previewDiv.style.backgroundSize = 'contain';
        previewDiv.style.backgroundRepeat = 'no-repeat';
        previewDiv.style.backgroundPosition = 'center';
        document.body.appendChild(previewDiv);

        return previewDiv;
    };

    const isTallImage = (img) => {
        return img.naturalHeight / img.naturalWidth > 4 / 3;
    };

    let currentPreview = null;

    document.addEventListener('mouseover', (e) => {
        if (e.target.tagName === 'IMG' && isTallImage(e.target) && !currentPreview) {
            currentPreview = previewImage(e.target.src);
        }
    });

    document.addEventListener('mouseout', (e) => {
        if (e.target.tagName === 'IMG' && currentPreview) {
            currentPreview.remove();
            currentPreview = null;
        }
    });
})();