Javascript Anaglyph Maker
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.
You can leave a comment, or trackback from your own site.
do you sell your anaglyph php script uploader?
i would like to integrate to my dating website the possibility to my user to upload 2 photo from 2 webcam to make 3d photo to put on their profile…
thx
Leave a Comment
Search
Archives
Categories
Blogroll
About Me
I’m Thomas Milburn the owner and designer of this website. I really enjoy designing and developing websites. View my portfolio to see some of my web design and development work.
Find out more about me by visiting my personal website.
Photos
Proudly powered by WordPress with plane theme by me! | © 2007 - 2021 Thomas Milburn | Valid CSS and HTML