Milburn

My own anaglyph maker uses PHP to make anaglyphs from two images uploaded by a user. But I’ve found someone who has gone one step further. They’ve managed to make them using JavaScript alone. Unfortunately Internet Explorer fails miserably on this task. This is because his method uses the canvas object which so far is only supported by Firefox, Safari and Opera.

It simply loads the two images into two canvas elements and extracts the red channel from one of them and inserts that red channel into the other canvas. Hey presto you get a simple anaglyph. This method has another flaw. Modifying an images data channels can only be done from an image on the same domain to obey the same domain security policy. A small proxy sorts that out but means the solution isn’t all JavaScript.

Here’s the source code for his anaglyph generator:

<script type="text/javascript">
<!--
Anaglyph = {
imgLeft : null,
imgRigt : null,
//Load images
load : function(left, right) {
//console.log('Load');
Anaglyph.imgLeft = document.createElement('img');
Anaglyph.imgLeft.src = left;
Anaglyph.imgRight = document.createElement('img');
Anaglyph.imgRight.src = right;
Anaglyph.wait();
},
//Wait for images to load
wait: function() {
if (Anaglyph.imgLeft.complete && Anaglyph.imgRight.complete) {
Anaglyph.make();
} else {
setTimeout('Anaglyph.wait()', 100);
}
},
//Actually make the anaglyph with some canvas magic
make: function() {
//console.log('Make');
var w = 640;
var h = 480;
var canvas = document.getElementsByTagName('canvas')[0];
try {
//Left image in temporary canvas
var canvasLeft = document.createElement('canvas');
canvasLeft.width = w;
canvasLeft.height = h;
var ctxLeft = canvasLeft.getContext('2d');
ctxLeft.drawImage(Anaglyph.imgLeft, 0, 0, w, h);
var dataLeft = ctxLeft.getImageData(0,0, w, h);
//Right image in result canvas
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext('2d');
ctx.drawImage(Anaglyph.imgRight, 0, 0, w, h);
var data = ctx.getImageData(0,0, w, h);
for (var i=0,l=dataLeft.data.length/4; i<l; i++) {
data.data[i * 4 + 0] = dataLeft.data[i * 4 + 0];
}
ctx.putImageData(data, 0, 0);
//console.log('Done!');
} catch (e) {
//console.log('FAIL!')
}
document.getElementById('result').className = '';
}
}
function getQueryParameter(name) {
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null ) {
return "";
} else {
return results[1];
}
}
window.onload = function() {
if ('' != getQueryParameter('left') && '' != getQueryParameter('right')) {
var left = getQueryParameter('left');
var right = getQueryParameter('right');
document.getElementById('result').className = 'loading';
Anaglyph.load(
'image.php?url='+left,
'image.php?url='+right
);
}
}
-->
</script>

The canvas element can do so many things and my guess is we’ll be seeing it even more in the next few years.