☰

Image Viewer

inject this script into any page, and RIGHT-CLICK on the image you want to view full-size

当前为 2017-06-11 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name       Image Viewer
  3. // @namespace  https://gist.github.com/bradenbest/04bd0fc2d57ec650449f
  4. // @version    1.5.2
  5. // @description  inject this script into any page, and RIGHT-CLICK on the image you want to view full-size
  6. // @copyright  2014 - present, Braden Best
  7. // ==/UserScript==
  8.  
  9. // poke
  10.  
  11. (function initialize(init){
  12.   var init = init || 0;
  13.   var firefox = /Firefox/i.test(navigator.userAgent);
  14.   function push(url){
  15.     var img = document.createElement('img'),
  16.         img_helper = document.createElement('div'),
  17.         img_helper_link = document.createElement('a');
  18.     // Image
  19.     img.src = url;
  20.     img.style.position = 'absolute';
  21.     img.style.left = '0px';
  22.     img.style.top  = (80 + document.body.scrollTop) + 'px';
  23.     img.style.zIndex = '2147483647'; // this is to push it above everything else, so the NG navbar doesn't float over it.
  24.     img.className = 'img_viewer';
  25.     img.draggable = 'false';
  26.     img.dragging = 0;
  27.     img.mousepos = [0,0];
  28.     img.tabIndex = 0;
  29.     // Image helper
  30.     img_helper.innerHTML = "Click here to close image";
  31.     img_helper.style.position = 'fixed';
  32.     img_helper.style.left = '0px';
  33.     img_helper.style.top  = '0px';
  34.     img_helper.style.margin = '0';
  35.     img_helper.style.padding = '5px 0';
  36.     img_helper.style.width = '100%';
  37.     img_helper.style.height='50px';
  38.     img_helper.style.background = '#fff';
  39.     img_helper.style.borderBottom = '1px solid #ccc';
  40.     img_helper.style.color = '#000';
  41.     img_helper.style.fontSize = '12px';
  42.     img_helper.style.textAlign = 'center';
  43.     img_helper.style.zIndex = '2147483647'; // The absolute maximum
  44.     img_helper.className = 'img_viewer';
  45.     // Image helper link
  46.     img_helper_link.innerHTML = 'Direct URL';
  47.     img_helper_link.href = url;
  48.     img_helper_link.target = '_blank';
  49.     img_helper_link.style.margin = '0';
  50.     img_helper_link.style.padding = '0';
  51.     img_helper_link.style.background = '#fff';
  52.     img_helper_link.style.borderBottom = '1px solid #ccc';
  53.     img_helper_link.style.display = 'block';
  54.     img_helper_link.style.width = '100%';
  55.     img_helper_link.style.height = '20px';
  56.     img_helper_link.style.position = 'fixed';
  57.     img_helper_link.style.left = '0';
  58.     img_helper_link.style.top = '50px';
  59.     img_helper_link.style.fontSize = '12px';
  60.     img_helper_link.style.textAlign = 'center';
  61.     img_helper_link.style.zIndex = '2147483647';
  62.     img_helper_link.className = 'img_viewer';
  63.     // append to body
  64.     document.body.appendChild(img_helper);
  65.     document.body.appendChild(img_helper_link);
  66.     document.body.appendChild(img);
  67.     // helper on-click
  68.     img_helper.onclick = function(){
  69.       document.body.removeChild(img);
  70.       document.body.removeChild(img_helper);
  71.       document.body.removeChild(img_helper_link);
  72.     }
  73.     if(firefox){ // I hate browser sniffing, but my hand is forced
  74.       img.onmousedown = function(evt){
  75.         this.dragging = !this.dragging;
  76.         this.mousepos[0] = (evt.clientX || evt.pageX);
  77.         this.mousepos[1] = (evt.clientY || evt.pageY);
  78.       }
  79.       img.onmouseup = null;
  80.     } else {
  81.       img.onmousedown = function(evt){
  82.         this.dragging = 1;
  83.         this.mousepos[0] = (evt.clientX || evt.pageX);
  84.         this.mousepos[1] = (evt.clientY || evt.pageY);
  85.       }
  86.       img.onmouseup = function(evt){
  87.         this.dragging = 0;
  88.       }
  89.     }
  90.     img.onmousemove = function(evt){ // Hoo boy, that was pretty difficult to figure out
  91.       if(this.dragging){
  92.         lastX = this.mousepos[0];
  93.         curX = (evt.clientX || evt.pageX);
  94.         lastY = this.mousepos[1];
  95.         curY = (evt.clientY || evt.pageY);
  96.         if(!(lastX == curX && lastY == curY)){
  97.           console.log("mouse has moved");
  98.           if(curX > lastX){
  99.             this.style.left = (parseInt(this.style.left) + (curX - lastX)) + 'px';
  100.           }
  101.           if(curX < lastX){
  102.             this.style.left = (parseInt(this.style.left) - (lastX - curX)) + 'px';
  103.           }
  104.           if(curY > lastY){
  105.             this.style.top = (parseInt(this.style.top) + (curY - lastY)) + 'px';
  106.           }
  107.           if(curY < lastY){
  108.             this.style.top = (parseInt(this.style.top) - (lastY - curY)) + 'px';
  109.           }
  110.         }
  111.         this.mousepos[0] = curX;
  112.         this.mousepos[1] = curY;
  113.       }
  114.       return false;
  115.     }
  116.     img.onkeydown = function(evt){
  117.       var temp_width;
  118.       if(evt.keyCode == 38) { // Up
  119.         temp_width = parseInt(this.width);
  120.         temp_height = parseInt(this.height) - 10;
  121.         this.width = temp_width;
  122.         this.height = temp_height;
  123.       } 
  124.       if(evt.keyCode == 40) { // Down
  125.         temp_width = parseInt(this.width);
  126.         temp_height = parseInt(this.height) + 10;
  127.         this.width = temp_width;
  128.         this.height = temp_height;
  129.       }
  130.       if(evt.keyCode == 37) { // Left
  131.         temp_width = parseInt(this.width) - 10;
  132.         temp_height = parseInt(this.height);
  133.         this.width = temp_width;
  134.         this.height = temp_height;
  135.       }
  136.       if(evt.keyCode == 39) { // Right
  137.         temp_width = parseInt(this.width) + 10;
  138.         temp_height = parseInt(this.height);
  139.         this.width = temp_width;
  140.         this.height = temp_height;
  141.       }
  142.       return false;
  143.     }
  144.   }
  145.  
  146.   function clear(){
  147.     var imgs = document.querySelectorAll('.img_viewer');
  148.     if(imgs[0]) {
  149.       for(var i = 0; i < imgs.length; i++){
  150.         document.body.removeChild(imgs[i]);
  151.       }
  152.     } else {
  153.       console.log("No images generated by this script were found");
  154.     }
  155.   }
  156.  
  157.   var imgs = document.querySelectorAll('img[src]'), i;
  158.   if(imgs[0]){
  159.     for(i = 0; i < imgs.length; i++){
  160.       if(imgs[i].src){
  161.         imgs[i].oncontextmenu = function(){
  162.           push(this.src);
  163.           return false;
  164.         }
  165.       }
  166.     }
  167.   } else {
  168.     console.log("Something has gone wrong!");
  169.   }
  170.   if(!firefox){
  171.     document.body.onmouseup = function(evt){
  172.       var imgs = document.querySelectorAll('.img_viewer');
  173.       if(imgs[0]){
  174.         for(var i = 0; i < imgs.length; i++){
  175.            imgs[i].dragging = 0;
  176.         }
  177.       }
  178.     }
  179.   }
  180.   document.body.onkeydown = function(evt){
  181.     if(evt.keyCode == 27){ // Escape key
  182.       clear();
  183.     }
  184.     if(evt.keyCode == 17){ // Ctrl
  185.       //clear();
  186.       initialize(1);
  187.     }
  188.   }
  189.   if(!init){
  190.     console.log("Image Viewer successfully started up!");
  191.     console.log("Try right-clicking an image");
  192.   }else{
  193.     console.log("Queue updated");
  194.   }
  195. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址