☰

ImageViewer

浏览器图片查看效果增强 for Chrome/Edge/Firefox

  1. // ==UserScript==
  2. // @name         ImageViewer
  3. // @version      1.1.2
  4. // @description  浏览器图片查看效果增强 for Chrome/Edge/Firefox
  5. // @author       Jack.Chan (971546@qq.com)
  6. // @namespace    http://fulicat.com
  7. // @url          https://greasyfork.org/zh-CN/scripts/429054-imageviewer
  8. // @match        *://*/*
  9. // @match        file:///*
  10. // @grant        none
  11. // @run-at       document-end
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.     var bgImage = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiAjMzAzMDMwOwogICAgICB9CgogICAgICAuY2xzLTIgewogICAgICAgIGZpbGw6ICMyMDIwMjA7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxyZWN0IGlkPSJsdCIgY2xhc3M9ImNscy0xIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiLz4KICA8cmVjdCBpZD0icmIiIGNsYXNzPSJjbHMtMSIgeD0iMzIiIHk9IjMyIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiLz4KICA8cmVjdCBpZD0ibGIiIGNsYXNzPSJjbHMtMiIgeT0iMzIiIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIvPgogIDxyZWN0IGlkPSJydCIgY2xhc3M9ImNscy0yIiB4PSIzMiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIi8+Cjwvc3ZnPgo=`;
  17.     var ua = navigator.userAgent.toLowerCase();
  18.     var doc = document.body || document.documentElement;
  19.     var isQQBrowser = ua.indexOf('qqbrowser/') > -1;
  20.     var isQQBrowserPS = function() {
  21.         return document && document.body && document.body.classList.contains('qb-picture-ps')
  22.     }
  23.     function loaded() {
  24.         var docTagName = (function(tag){
  25.             var tagName = tag && tag.tagName.toLowerCase();
  26.             if (tagName) {
  27.                 if (tagName == 'svg') {
  28.                     return tagName;
  29.                 }
  30.                 if (tagName == 'body' && tag.children && tag.children.length) {
  31.                     tagName = tag.children[0].tagName.toLowerCase();
  32.                     if (tagName == 'img') {
  33.                         return tagName;
  34.                     } else {
  35.                         tagName = document.querySelector('img');
  36.                         return tagName && tagName.tagName && tagName.tagName.toLowerCase();
  37.                     }
  38.                 }
  39.             }
  40.         })(doc);
  41.  
  42.         var isViewerMode = docTagName == 'svg' || docTagName == 'img';
  43.         if (isViewerMode) {
  44.             if (document.head) {
  45.                 var styleText = [];
  46.                 if (isQQBrowserPS()) {
  47.                     styleText.push(`body{box-sizing: border-box;background-attachment: fixed !important;background-repeat: repeat !important;}`);
  48.                     styleText.push(`body{background: url(${bgImage}) !important;}`);
  49.                 } else {
  50.                     styleText.push(`img{position: static !important;background: none !important;background-color: transparent !important;}`);
  51.                 }
  52.                 var style = document.createElement('style');
  53.                 style.setAttribute('type', 'text/css');
  54.                 style.innerHTML = styleText.join('');
  55.                 document.head.appendChild(style);
  56.             }
  57.             if (isQQBrowserPS()) {
  58.                 doc.style.position = 'static';
  59.                 doc.style.top = 'auto';
  60.                 doc.style.left = 'auto';
  61.                 doc.style.transform = 'none';
  62.             } else {
  63.                 doc.style.backgroundImage = `url(${bgImage})`;
  64.                 doc.style.backgroundAttachment = 'fixed';
  65.                 doc.style.boxSizing = 'border-box';
  66.                 if (docTagName == 'svg') {
  67.                     doc.style.position = 'absolute';
  68.                     doc.style.top = '50%';
  69.                     doc.style.left = '50%';
  70.                     doc.style.transform = 'translate(-50%, -50%)';
  71.                     doc.style.margin = '10px';
  72.                     doc.style.width = 'auto';
  73.                     doc.style.height = 'auto';
  74.                     doc.style.maxWidth = '100%';
  75.                     doc.style.maxHeight = '100%';
  76.                 }
  77.             }
  78.         }
  79.     }
  80.     if (document.contentType.startsWith('image/')) {
  81.         if (isQQBrowser && doc.tagName !== 'svg') {
  82.             setTimeout(function() {
  83.                 loaded();
  84.             }, 666);
  85.         } else {
  86.             loaded();
  87.         }
  88.     }
  89. })();