☰

Image viewer

Use grid wallpaper to highlight transparent image. Support to view the large image by holding the right mouse and drag.

Install this script?
Author's suggested script

You may also like Worldcosplay download.

Install this script 
  1. // ==UserScript==
  2. // @name            Image viewer
  3. // @name:vi         Image viewer
  4. // @namespace       http://devs.forumvi.com/
  5. // @description     Use grid wallpaper to highlight transparent image. Support to view the large image by holding the right mouse and drag.
  6. // @description:vi  Sử dụng nền lưới để làm nổi bật ảnh trong suốt. Hỗ trợ xem ảnh lớn bằng cách giữ và kéo chuột phải.
  7. // @version         2.3.0
  8. // @icon            http://i.imgur.com/ItcjCPc.png
  9. // @author          Zzbaivong
  10. // @oujs:author     baivong
  11. // @license         MIT; https://baivong.mit-license.org/license.txt
  12. // @match           http://*/*
  13. // @match           https://*/*
  14. // @require         https://greasemonkey.github.io/gm4-polyfill/gm4-polyfill.js?v=a834d46
  15. // @noframes
  16. // @supportURL      https://github.com/lelinhtinh/Userscript/issues
  17. // @run-at          document-idle
  18. // @grant           GM_addStyle
  19. // @grant           GM_xmlhttpRequest
  20. // @grant           GM.xmlHttpRequest
  21. // @inject-into     content
  22. // ==/UserScript==
  23.  
  24. (function () {
  25.   'use strict';
  26.  
  27.   /**
  28.    * Background theme
  29.    * @type {'system'|'dark'|'light'}
  30.    */
  31.   let theme = 'system';
  32.  
  33.   // Do not change the code below this line, unless you know how.
  34.   if (document.contentType.indexOf('image/') !== 0) return;
  35.  
  36.   if (theme === 'system') {
  37.     theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  38.   }
  39.   let colorGrid = theme === 'light' ? ['#eee', 'white'] : ['gray', '#444'];
  40.  
  41.   function scrollByDragging(container, disableH, disableV) {
  42.     function mouseUp(e) {
  43.       if (e.which !== 3) return;
  44.  
  45.       window.removeEventListener('mousemove', mouseMove, true);
  46.       container.style.cursor = 'default';
  47.     }
  48.  
  49.     function mouseDown(e) {
  50.       if (e.which !== 3) return;
  51.  
  52.       pos = {
  53.         x: e.clientX,
  54.         y: e.clientY,
  55.       };
  56.  
  57.       window.addEventListener('mousemove', mouseMove, true);
  58.       container.style.cursor = 'move';
  59.     }
  60.  
  61.     function mouseMove(e) {
  62.       if (!disableH) container.scrollLeft -= -pos.x + (pos.x = e.clientX);
  63.       if (!disableV) container.scrollTop -= -pos.y + (pos.y = e.clientY);
  64.     }
  65.  
  66.     let pos = {
  67.       x: 0,
  68.       y: 0,
  69.     };
  70.  
  71.     container.oncontextmenu = function (e) {
  72.       e.preventDefault();
  73.     };
  74.  
  75.     container.addEventListener('mousedown', mouseDown, false);
  76.     window.addEventListener('mouseup', mouseUp, false);
  77.   }
  78.  
  79.   function updateImageInfo() {
  80.     let img = document.querySelector('img');
  81.     if (!img) return;
  82.  
  83.     let info = document.querySelector('.image-info');
  84.     if (!info) {
  85.       info = document.createElement('div');
  86.       info.className = 'image-info';
  87.       document.body.appendChild(info);
  88.     }
  89.  
  90.     info.innerHTML = `
  91.     <div class="image-info-title">
  92.       <div class="image-info-ext">${imageInfo.ext.toUpperCase()}</div>
  93.       <div class="image-info-size">${imageInfo.size}</div>
  94.     </div>
  95.     <div class="image-info-dimensions">${imageInfo.dimensions}</div>
  96.     `;
  97.   }
  98.  
  99.   function formatBytes(bytes, decimals = 2) {
  100.     if (bytes === 0) return '0 Bytes';
  101.  
  102.     const k = 1024;
  103.     const dm = decimals < 0 ? 0 : decimals;
  104.     const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
  105.  
  106.     const i = Math.floor(Math.log(bytes) / Math.log(k));
  107.  
  108.     return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} <strong>${sizes[i]}</strong>`;
  109.   }
  110.  
  111.   GM_addStyle(
  112.     `html,body{width:100%;height:100%;margin:0;padding:0}
  113.     body,svg:root{background-attachment:fixed!important;background-position:0 0, 10px 10px !important;background-size:20px 20px!important;background-image:linear-gradient(45deg, ${colorGrid[0]} 25%,transparent 25%, transparent 75%,${colorGrid[0]} 75%,${colorGrid[0]} 100%),linear-gradient(45deg, ${colorGrid[0]} 25%,${colorGrid[1]} 25%,${colorGrid[1]} 75%,${colorGrid[0]} 75%,${colorGrid[0]} 100%)!important;display:flex;align-content:center;justify-content:center}
  114.     body > img{background-color:transparent!important;background-image:none!important;display:block;position:initial}
  115.     body > img:hover{background:rgba(0,0,0,0.4)!important;outline:3px solid #333}
  116.     body > img[style*="cursor: zoom-out;"],body > img.overflowing{position:relative!important}
  117.     .image-info{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";color:#fff;background:#000000b8;text-align:center;text-shadow:1px 1px 2px #444,1px 1px 2px #444;border-radius:.2rem;padding:.4rem .7rem;width:fit-content;position:fixed;bottom:10%;left:50%;transform:translateX(-50%);opacity:1;transition:opacity 200ms;user-select:none}
  118.     .image-info-title{display:flex;justify-content:space-evenly;flex-wrap:nowrap;gap:.5rem}
  119.     .image-info:hover{opacity:0}
  120.     .image-info-ext{font-weight:700}`,
  121.   );
  122.  
  123.   if (document.contentType === 'image/svg+xml') return;
  124.  
  125.   scrollByDragging(document.documentElement);
  126.  
  127.   const imageInfo = {
  128.     ext: '',
  129.     size: '',
  130.     dimensions: '',
  131.   };
  132.  
  133.   let imageExt = document.contentType.split('/')[1];
  134.   if (imageExt === 'svg+xml') imageExt = 'svg';
  135.   if (imageExt === 'x-icon' || imageExt === 'vnd.microsoft.icon') imageExt = 'ico';
  136.   imageInfo.ext = imageExt;
  137.  
  138.   let imageDimensions = document.title.match(/\(([A-Z]{3,4} Image,\s*)?\s*([0-9]+\s*(x|×)\s*[0-9]+)\s*(\pixels\s*)?/);
  139.   if (imageDimensions) imageDimensions = imageDimensions[2];
  140.   imageInfo.dimensions = imageDimensions;
  141.  
  142.   updateImageInfo();
  143.  
  144.   GM.xmlHttpRequest({
  145.     method: 'GET',
  146.     url: location.href,
  147.     responseType: 'arraybuffer',
  148.     onload: function (response) {
  149.       imageInfo.dimensions = `${document.images[0].naturalWidth}×${document.images[0].naturalHeight}`;
  150.  
  151.       const imageSize = response.response.byteLength;
  152.       imageInfo.size = formatBytes(imageSize);
  153.  
  154.       updateImageInfo();
  155.     },
  156.   });
  157. })();