On April 6th, 2009 milburn wrote…

Javascript Anaglyph Maker

mars 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) {
Anaglyph.imgLeft = document.createElement('img');
Anaglyph.imgLeft.src = left;
Anaglyph.imgRight = document.createElement('img');
Anaglyph.imgRight.src = right;
//Wait for images to load
wait: function() {
if (Anaglyph.imgLeft.complete && Anaglyph.imgRight.complete) {
} else {
setTimeout('Anaglyph.wait()', 100);
//Actually make the anaglyph with some canvas magic
make: function() {
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);
} catch (e) {
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';

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.

One Response to “Javascript Anaglyph Maker”

  1. On November 23rd, 2009 Joe said…

    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…


Leave a Comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Proudly powered by WordPress with plane theme by me! | © 2007 - 2017 Thomas Milburn | Valid CSS and HTML