MediaWiki:Gadget-ColorTune.js
Jump to navigation
Jump to search
Note: After saving, you have to bypass your browser's cache to see the changes. Internet Explorer: press Ctrl-F5, Mozilla: hold down Shift while clicking Reload (or press Ctrl-Shift-R), Opera/Konqueror: press F5, Safari: hold down Shift + Alt while clicking Reload, Chrome: hold down Shift while clicking Reload.
Documentation for this user script can be added at MediaWiki:Gadget-ColorTune. |
$(function(){
'use strict';
var ns = mw.config.get('wgNamespaceNumber');
function processGamma(img) {
var ctx, newimg, p, w, h, out, slider=[], div
, tab = [new Uint8ClampedArray(256), new Uint8ClampedArray(256), new Uint8ClampedArray(256)];
function update() {
var d, dl, i, j, g, val=[];
// setup image data buffers
ctx.drawImage(img,0,0,w,h);
p = ctx.getImageData(0,0,w,h);
d = p.data;
// pre-tabulare correction data
for (j=0; j<3; ++j ) {
g = parseFloat(slider[j].val());
val.push(g);
for (i=0; i<256; ++i) {
tab[j][i] = Math.floor(255 * Math.pow( i/255.0, g ));
}
}
out.text(val.join(','));
// process data (check http://jsperf.com/changing-3-4-components-in-canvas-pixeldata/3)
dl = d.length;
for (i = 0; i < dl; i += 4) {
d[i] = tab[0][d[i]];
d[i+1] = tab[1][d[i+1]];
d[i+2] = tab[2][d[i+2]];
}
// replot data
ctx.putImageData(p,0,0);
}
function setup() {
// initialize canvas draw image
var c, j, controls = $('<div>');
w = img.width;
h = img.height;
c = $('<canvas></canvas>').attr( { width: w, height: h } )[0];
ctx = c.getContext('2d');
ctx.drawImage(img,0,0,w,h);
// overlay container
div = $('<div></div>').css( { display: 'inline-block', position: 'relative' } ).append($(c)).append(controls.hide());
// r,g,b, gamma sliders
for (j=0; j<3; ++j) {
slider[j] = $('<input/>')
.attr( { type: 'range', min: 0.2, max: 2, step: 0.05, value: 1.0 } )
.css( { position: 'absolute', top: (j*30)+'px', left: 0, width: w-5 } )
.on('change', update)
.appendTo(controls);
}
// text output aread for the current settings
out = $('<div>').css( { position: 'absolute', top: '100px', left: 0, color: 'white', textShadow: '1px 1px 2px black', fontWeight: 'bold', fontSize:'200%' } ).appendTo(controls);
// replace image with canvas element
$(img).replaceWith(div);
// onenter div show sliders on leave hide
div.on('mouseenter', function() { controls.show(); } );
div.on('mouseleave', function() { controls.hide(); } );
}
// replace the image with a re-loaded image (otherwise we get a cross-origin-error!)
newimg = new Image();
newimg.onload = function() {
img = newimg;
setup();
};
newimg.crossOrigin="anonymous";
newimg.src=img.src;
$(img).replaceWith(newimg);
}
// only add on File namespace pages
if (ns === 6) {
var $a = $('.fullImageLink a')
.click(function(e) {
e.preventDefault();
});
processGamma( $a.children('img')[0] );
}
});