MediaWiki:Gadget-ColorTune.js

$(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] );
	}
});