☰

image info

显示单图页面的图片信息

  1. // ==UserScript==
  2. // @name         image info
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  显示单图页面的图片信息
  6. // @author      ozyl
  7. // @match        *://*/*
  8. // @license MIT
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // 检查页面是否只有一张图片
  16.     const images = document.getElementsByTagName('img');
  17.     if (images.length !== 1 || document.body.children.length > 1) {
  18.         return;
  19.     }
  20.  
  21.     const img = images[0];
  22.  
  23.     // 创建信息显示容器
  24.     const infoContainer = document.createElement('div');
  25.     infoContainer.style.cssText = `
  26.         position: fixed;
  27.         bottom: 0;
  28.         left: 0;
  29.         right: 0;
  30.         background: rgba(250, 250, 250, 0.95);
  31.         padding: 12px;
  32.         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  33.         font-size: 14px;
  34.         color: #333;
  35.         box-shadow: 0 -1px 8px rgba(0,0,0,0.08);
  36.         display: flex;
  37.         justify-content: center;
  38.         gap: 20px;
  39.         z-index: 9999;
  40.         backdrop-filter: blur(5px);
  41.         border-top: 1px solid rgba(0,0,0,0.05);
  42.     `;
  43.  
  44.     // 等待图片加载完成
  45.     img.onload = function() {
  46.         updateImageInfo();
  47.     };
  48.  
  49.     // 如果图片已经加载完成
  50.     if (img.complete) {
  51.         updateImageInfo();
  52.     }
  53.  
  54.     // 更新图片信息
  55.     function updateImageInfo() {
  56.         const originalSize = `原始尺寸: ${img.naturalWidth} × ${img.naturalHeight}px`;
  57.         const displaySize = `显示尺寸: ${img.width} × ${img.height}px`;
  58.  
  59.         // 获取图片文件大小
  60.         fetch(img.src)
  61.             .then(response => {
  62.                 const size = response.headers.get('content-length');
  63.                 const fileSize = size ? `文件大小: ${formatFileSize(size)}` : '文件大小: 未知';
  64.  
  65.                 // 清空容器
  66.                 infoContainer.innerHTML = '';
  67.  
  68.                 // 创建信息项
  69.                 [originalSize, displaySize, fileSize].forEach(text => {
  70.                     const div = document.createElement('div');
  71.                     div.style.cssText = `
  72.                         background: #ffffff;
  73.                         padding: 8px 15px;
  74.                         border-radius: 4px;
  75.                         box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  76.                         border: 1px solid rgba(0,0,0,0.08);
  77.                         transition: all 0.2s ease;
  78.                     `;
  79.                     div.textContent = text;
  80.                     div.onmouseover = function() {
  81.                         this.style.background = '#f8f8f8';
  82.                     };
  83.                     div.onmouseout = function() {
  84.                         this.style.background = '#ffffff';
  85.                     };
  86.                     infoContainer.appendChild(div);
  87.                 });
  88.             })
  89.             .catch(() => {
  90.                 // 如果获取文件大小失败，仍然显示其他信息
  91.                 infoContainer.innerHTML = '';
  92.                 [originalSize, displaySize, '文件大小: 未知'].forEach(text => {
  93.                     const div = document.createElement('div');
  94.                     div.style.cssText = `
  95.                         background: #ffffff;
  96.                         padding: 8px 15px;
  97.                         border-radius: 4px;
  98.                         box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  99.                         border: 1px solid rgba(0,0,0,0.08);
  100.                     `;
  101.                     div.textContent = text;
  102.                     infoContainer.appendChild(div);
  103.                 });
  104.             });
  105.     }
  106.  
  107.     // 格式化文件大小
  108.     function formatFileSize(bytes) {
  109.         if (bytes < 1024) {
  110.             return bytes + 'B';
  111.         } else if (bytes < 1024 * 1024) {
  112.             return (bytes / 1024).toFixed(2) + 'KB';
  113.         } else {
  114.             return (bytes / (1024 * 1024)).toFixed(2) + 'MB';
  115.         }
  116.     }
  117.  
  118.     // 添加到页面
  119.     document.body.appendChild(infoContainer);
  120.  
  121.     // 监听窗口大小变化，更新显示尺寸
  122.     window.addEventListener('resize', function() {
  123.         if (infoContainer.children.length > 0) {
  124.             updateImageInfo();
  125.         }
  126.     });
  127. })();