Initial commit
This commit is contained in:
parent
93913d1d48
commit
26df417195
1 changed files with 422 additions and 0 deletions
422
imgxis.user.js
Normal file
422
imgxis.user.js
Normal file
|
|
@ -0,0 +1,422 @@
|
|||
// ==UserScript==
|
||||
// @name IMGXIS
|
||||
// @namespace http://yellowafterlife.itch.io/imgxis
|
||||
// @version 1.07
|
||||
// @description A userscript for better image viewing experience in browsers.
|
||||
// @include *://*.png*
|
||||
// @include *://*.jpg*
|
||||
// @include *://*.jpeg*
|
||||
// @include *://*.gif*
|
||||
// @include *://*.bmp*
|
||||
// @include *://*.webp*
|
||||
// @connect *
|
||||
// @include *://textures.minecraft.net/texture/*
|
||||
// @grant GM_getValue
|
||||
// @grant GM_setValue
|
||||
// @copyright 2015+, YellowAfterlife
|
||||
// ==/UserScript==
|
||||
|
||||
// Revisions:
|
||||
// 1.06 (Sep 28, 2015): No longer blocking the default behaviour for alt+dragging the image.
|
||||
// 1.05 (Sep 26, 2015): Added a color picker (Ctrl+C to copy a color under the cursor);
|
||||
// 1.04 (Sep 25, 2015): Image are now "smoothed" when zoomed out; Fixed Firefox beta compatibilty.
|
||||
// 1.03 (Sep 24, 2015): Added a button to view the image in tiled form.
|
||||
// 1.02 (Jul 19, 2015): F5 now refreshes image without reloading the page. Shift+F5 for timer.
|
||||
// 1.01 (Apr 01, 2015): Added color presets (instead of a single color for all slots).
|
||||
// 1.00 (Mar 31, 2015): Initial release.
|
||||
|
||||
// parameter group:
|
||||
var menuButtonWidth = 32; // in pixels
|
||||
var menuColors = 10; // how many color buttons to show in the menu
|
||||
var colorPickerEnabled = true; // whether to allow to Ctrl+C colors from the image
|
||||
var colorPickerMode = 0; // 0: hex, 1: rgb, 2: rgba
|
||||
|
||||
// ensure that the page contains nothing but a single <img>:
|
||||
if (document.body.children.length != 1) return;
|
||||
var q = document.body.children[0];
|
||||
if (q.tagName != "IMG") return;
|
||||
|
||||
// stylesheet:
|
||||
var css = document.createElement("style");
|
||||
css.type = "text/css";
|
||||
css.innerHTML = [
|
||||
":root {",
|
||||
" background: none !important;",
|
||||
"}",
|
||||
"body {",
|
||||
" overflow: hidden;",
|
||||
"}",
|
||||
// panner area
|
||||
".imgxis-panner {",
|
||||
" position: absolute;",
|
||||
" left: 0; width: 100%;",
|
||||
" top: 0; height: 100%;",
|
||||
"}",
|
||||
// cursors
|
||||
".imgxis-panner, .imgxis-panner img {",
|
||||
" cursor: move;",
|
||||
"}",
|
||||
".imgxis-panner.colorpick, .imgxis-panner.colorpick img {",
|
||||
" cursor: default;",
|
||||
" cursor: copy;",
|
||||
"}",
|
||||
// disable interpolation:
|
||||
".imgxis-panner.zoomed, .imgxis-panner.zoomed img {",
|
||||
" -ms-interpolation-mode: nearest-neighbor;",
|
||||
" image-rendering: optimizeSpeed;",
|
||||
" image-rendering: -moz-crisp-edges;",
|
||||
" image-rendering: -webkit-optimize-contrast;",
|
||||
" image-rendering: -o-crisp-edges;",
|
||||
" image-rendering: pixelated;",
|
||||
"}",
|
||||
// actual image:
|
||||
".imgxis-panner img {",
|
||||
// disable Firefox' centering:
|
||||
" position: relative;",
|
||||
" margin: 0;",
|
||||
" background-color: transparent !important;",
|
||||
"}",
|
||||
// menu pane on top:
|
||||
".imgxis-menu {",
|
||||
" position: absolute;",
|
||||
" left: 0; width: 100%;",
|
||||
" top: 0; height: 24px;",
|
||||
" background: rgba(0, 0, 0, 0.7);",
|
||||
" padding: 4px;",
|
||||
" color: white;",
|
||||
" font: 16px sans-serif;",
|
||||
" line-height: 24px;",
|
||||
" min-width: 1024px;",
|
||||
"}",
|
||||
// style the buttons in the menu:
|
||||
".imgxis-menu input {",
|
||||
" width: " + menuButtonWidth + "px;",
|
||||
" height: 24px;",
|
||||
" padding: 0px;",
|
||||
" margin-right: 2px;",
|
||||
" float: left;",
|
||||
"}",
|
||||
].join("\n");
|
||||
document.body.appendChild(css);
|
||||
|
||||
// the thing is that browser has it's own zoom in controls, and they are
|
||||
// linked to that particular <img> natively. So we need to make a copy of it, strip
|
||||
// it of any unneeded styles, and put it in place of the original:
|
||||
var o = q.cloneNode();
|
||||
o.removeAttribute("width");
|
||||
o.removeAttribute("height");
|
||||
var panner = document.createElement("div");
|
||||
var pannerZoomed = false;
|
||||
panner.className = "imgxis-panner";
|
||||
panner.appendChild(o);
|
||||
q.parentNode.appendChild(panner);
|
||||
q.parentNode.removeChild(q);
|
||||
var s = o.style;
|
||||
s.transformOrigin = "top left";
|
||||
q = null;
|
||||
var tile = false;
|
||||
//
|
||||
var w = 0,
|
||||
h = 0,
|
||||
x = 0,
|
||||
y = 0,
|
||||
z = 0,
|
||||
m = 1;
|
||||
|
||||
// pan and zoom:
|
||||
function update() {
|
||||
var pz = m > 1;
|
||||
if (pz != pannerZoomed) {
|
||||
pannerZoomed = pz;
|
||||
var cl = panner.classList;
|
||||
if (pz) cl.add("zoomed");
|
||||
else cl.remove("zoomed");
|
||||
}
|
||||
if (tile) {
|
||||
var p = panner.style;
|
||||
p.backgroundPosition = -x + "px " + -y + "px";
|
||||
p.backgroundSize = o.width * m + "px";
|
||||
}
|
||||
s.transform = "matrix(" + m + ",0,0," + m + "," + -x + "," + -y + ")";
|
||||
}
|
||||
function zoomto(zx, zy, d) {
|
||||
var p = m;
|
||||
m = Math.pow(2, (z += d));
|
||||
var f = m / p;
|
||||
x = (zx + x) * f - zx;
|
||||
y = (zy + y) * f - zy;
|
||||
menu_zoom.innerHTML = (0 | (m * 100)) + "%";
|
||||
update();
|
||||
}
|
||||
|
||||
// color picker:
|
||||
var colorPickerCanvas = document.createElement("canvas");
|
||||
var colorPickerContext = colorPickerCanvas.getContext("2d");
|
||||
var colorPickerColor = document.createElement("input");
|
||||
colorPickerColor.type = "color";
|
||||
colorPickerColor.style.width = "24px";
|
||||
var colorPickerField = document.createElement("input");
|
||||
colorPickerField.type = "text";
|
||||
colorPickerField.style.width = "64px";
|
||||
colorPickerColor.title = colorPickerField.title =
|
||||
"Ctrl+C to copy a color under the cursor in here.";
|
||||
var colorPickerActive = false;
|
||||
function colorPickerUpdate() {
|
||||
var w = o.width;
|
||||
var h = o.height;
|
||||
if (w <= 0 || h <= 0) return;
|
||||
if (colorPickerCanvas.width != w) {
|
||||
colorPickerCanvas.width = w;
|
||||
} else if (colorPickerCanvas.height != h) {
|
||||
colorPickerCanvas.height = h;
|
||||
} else colorPickerContext.clearRect(0, 0, w, h);
|
||||
colorPickerContext.drawImage(o, 0, 0);
|
||||
var rx = (mx + x) / m;
|
||||
rx %= w;
|
||||
if (rx < 0) rx += w;
|
||||
var ry = (my + y) / m;
|
||||
ry %= h;
|
||||
if (ry < 0) ry += h;
|
||||
try {
|
||||
var d = colorPickerContext.getImageData(~~rx, ~~ry, 1, 1).data;
|
||||
var hex = "0123456789ABCDEF";
|
||||
var chx = "#";
|
||||
for (k = 0; k < 3; k++)
|
||||
chx += hex.charAt(d[k] >> 4) + hex.charAt(d[k] & 15);
|
||||
//
|
||||
var out = "",
|
||||
i,
|
||||
k;
|
||||
switch (colorPickerMode) {
|
||||
case 1:
|
||||
out = d[0] + "," + d[1] + "," + d[2];
|
||||
break;
|
||||
case 2:
|
||||
out = d[0] + "," + d[1] + "," + d[2] + "," + (d[3] / 255).toFixed(3);
|
||||
break;
|
||||
default:
|
||||
out = chx;
|
||||
}
|
||||
colorPickerColor.value = chx;
|
||||
colorPickerField.value = out;
|
||||
colorPickerField.select();
|
||||
} catch (_) {
|
||||
colorPickerField.value = "(error)";
|
||||
}
|
||||
}
|
||||
function colorPickerDeactivate() {
|
||||
colorPickerActive = false;
|
||||
panner.classList.remove("colorpick");
|
||||
}
|
||||
|
||||
// menu:
|
||||
var menu_zoom = null,
|
||||
menu;
|
||||
(function () {
|
||||
menu = document.createElement("div");
|
||||
menu.className = "imgxis-menu";
|
||||
function menubt(s, f) {
|
||||
var bt = document.createElement("input");
|
||||
bt.type = "button";
|
||||
bt.value = s;
|
||||
bt.addEventListener("click", f);
|
||||
menu.appendChild(bt);
|
||||
}
|
||||
var defcolors = [
|
||||
"#1A1D23",
|
||||
"#60C19D",
|
||||
"#AB7680",
|
||||
"#FFFFFF",
|
||||
"#F4F2EC",
|
||||
"#CAC2BD",
|
||||
"#88898E",
|
||||
"#4F556A",
|
||||
"#1D1F2C",
|
||||
"#000000",
|
||||
];
|
||||
function menucl(i) {
|
||||
var bt = document.createElement("input");
|
||||
bt.type = "color";
|
||||
bt.value = GM_getValue("imgxis-color" + i, defcolors[i]);
|
||||
function bt_apply() {
|
||||
document.body.style.backgroundColor = bt.value;
|
||||
}
|
||||
bt.addEventListener("click", function (e) {
|
||||
if (!e.shiftKey) {
|
||||
e.preventDefault();
|
||||
bt_apply();
|
||||
}
|
||||
});
|
||||
bt.addEventListener("change", function (e) {
|
||||
GM_setValue("imgxis-color" + i, bt.value);
|
||||
bt_apply();
|
||||
});
|
||||
bt.title =
|
||||
"Color " + (i + 1) + ".\nClick to apply.\nShift+click to change.";
|
||||
menu.appendChild(bt);
|
||||
if (i == 0) bt_apply();
|
||||
}
|
||||
for (var i = 0; i < menuColors; i++) menucl(i);
|
||||
menubt("-", function (_) {
|
||||
zoomto(window.innerWidth / 2, window.innerHeight / 2, -0.5);
|
||||
});
|
||||
menubt("1:1", function (_) {
|
||||
var iw = window.innerWidth,
|
||||
ih = window.innerHeight;
|
||||
zoomto(iw / 2, ih / 2, -z);
|
||||
x = (w - iw) / 2;
|
||||
y = (h - ih) / 2;
|
||||
update();
|
||||
});
|
||||
menubt("+", function (_) {
|
||||
zoomto(window.innerWidth / 2, window.innerHeight / 2, 0.5);
|
||||
});
|
||||
menubt("tile", function (_) {
|
||||
tile = !tile;
|
||||
panner.style.backgroundImage = tile ? "url(" + o.src + ")" : "";
|
||||
update();
|
||||
});
|
||||
//
|
||||
if (colorPickerEnabled) {
|
||||
menu.appendChild(colorPickerColor);
|
||||
menu.appendChild(colorPickerField);
|
||||
}
|
||||
//
|
||||
menu_zoom = document.createElement("span");
|
||||
menu_zoom.innerHTML = "100%";
|
||||
menu.appendChild(menu_zoom);
|
||||
document.body.appendChild(menu);
|
||||
})();
|
||||
|
||||
// mouse controls:
|
||||
function onmousewheel(e) {
|
||||
var d = e.wheelDelta || -e.detail;
|
||||
d = (d < 0 ? -1 : d > 0 ? 1 : 0) * 0.5;
|
||||
zoomto(e.pageX, e.pageY, d);
|
||||
}
|
||||
var mx = 0,
|
||||
my = 0,
|
||||
mp = false;
|
||||
function onmousemove(e) {
|
||||
var ox = mx;
|
||||
mx = e.pageX;
|
||||
var dx = mx - ox;
|
||||
var oy = my;
|
||||
my = e.pageY;
|
||||
var dy = my - oy;
|
||||
if (mp) {
|
||||
x -= mx - ox;
|
||||
y -= my - oy;
|
||||
update();
|
||||
} else if (colorPickerActive) {
|
||||
colorPickerUpdate();
|
||||
}
|
||||
}
|
||||
function onmousedown(e) {
|
||||
onmousemove(e);
|
||||
if (e.which != 3 && !e.altKey) {
|
||||
// not the right click
|
||||
e.preventDefault(); // disable image "grab"
|
||||
mp = true;
|
||||
}
|
||||
}
|
||||
function onmouseup(e) {
|
||||
onmousemove(e);
|
||||
mp = false;
|
||||
}
|
||||
|
||||
//
|
||||
var refresh_timer = null;
|
||||
function refresh() {
|
||||
var o_src = o.src;
|
||||
// strip the previous timestamp parameter:
|
||||
var pos = o_src.indexOf("imgxis-time");
|
||||
if (pos >= 0) {
|
||||
switch (o_src.charAt(pos - 1)) {
|
||||
case "&":
|
||||
case "?":
|
||||
pos--;
|
||||
break;
|
||||
}
|
||||
o_src = o_src.substring(0, pos);
|
||||
}
|
||||
// add a timestamp parameter:
|
||||
o_src += o_src.indexOf("?") >= 0 ? "&" : "?";
|
||||
o_src += "imgxis-time=" + Date.now();
|
||||
//
|
||||
o.src = o_src;
|
||||
if (tile) panner.style.backgroundImage = "url(" + o.src + ")";
|
||||
}
|
||||
|
||||
//
|
||||
function onkeydown(e) {
|
||||
switch (e.keyCode) {
|
||||
case 17:
|
||||
if (colorPickerEnabled) {
|
||||
colorPickerActive = true;
|
||||
colorPickerUpdate();
|
||||
panner.classList.add("colorpick");
|
||||
}
|
||||
break;
|
||||
case 116:
|
||||
e.preventDefault();
|
||||
if (e.shiftKey) {
|
||||
if (refresh_timer == null) {
|
||||
var t = parseFloat(prompt("Refresh interval (seconds)", "15"));
|
||||
if (!isNaN(t))
|
||||
refresh_timer = setInterval(refresh, Math.max(100, t * 1000));
|
||||
} else clearInterval(refresh_timer);
|
||||
} else refresh();
|
||||
break;
|
||||
}
|
||||
}
|
||||
function onkeyup(e) {
|
||||
switch (e.keyCode) {
|
||||
case 17:
|
||||
if (colorPickerActive) colorPickerDeactivate();
|
||||
break;
|
||||
}
|
||||
}
|
||||
function onblur(e) {
|
||||
if (colorPickerActive) colorPickerDeactivate();
|
||||
}
|
||||
window.addEventListener("mousemove", onmousemove);
|
||||
panner.addEventListener("mousedown", onmousedown);
|
||||
window.addEventListener("mouseup", onmouseup);
|
||||
window.addEventListener("mousewheel", onmousewheel);
|
||||
window.addEventListener("DOMMouseScroll", onmousewheel);
|
||||
window.addEventListener("keydown", onkeydown);
|
||||
window.addEventListener("keyup", onkeyup);
|
||||
window.addEventListener("blur", onblur);
|
||||
// consider that the image dimensions may not be available instantly:
|
||||
var onwait_t = 1000;
|
||||
var onwait = function onwait() {
|
||||
w = o.width;
|
||||
h = o.height;
|
||||
if (w > 0 && h > 0) {
|
||||
var iw = window.innerWidth,
|
||||
lw = w;
|
||||
var ih = window.innerHeight,
|
||||
lh = h;
|
||||
if (lw < iw && lh < ih)
|
||||
for (var k = 0; k < 3; k++) {
|
||||
if (lw * 2 < iw && lh * 2 < ih) {
|
||||
z++;
|
||||
lw *= 2;
|
||||
lh *= 2;
|
||||
}
|
||||
}
|
||||
else
|
||||
while (lw > iw || lh > ih) {
|
||||
z--;
|
||||
lw /= 2;
|
||||
lh /= 2;
|
||||
}
|
||||
m = Math.pow(2, z);
|
||||
menu_zoom.innerHTML = (0 | (m * 100)) + "%";
|
||||
x = -(iw - lw) / 2;
|
||||
y = -(ih - lh) / 2;
|
||||
update();
|
||||
} else if (--onwait_t > 0) setTimeout(onwait, 10);
|
||||
};
|
||||
onwait();
|
||||
Loading…
Reference in a new issue