This tool came about because I have created a site which users can edit and add tables to through a visual editor. Unfortunately copying and pasting from Excel into this visual editor results in “tag soup”! I needed a solution.

I looked around and found WordOff which cleans up word documents but doesn’t work on tables. I decided to take the code, convert it to PHP and modify it so that it doesn’t get ris of some of the essential stuff for tables. With the help of David Hopkin’s  Strip Attributes Class

Please go to ExcelOff, copy and paste a table from Excel or similar. Click clean up and lines of beautifully formed HTMl code will result!

Hopefully I will be able to incorporate this into a WordPress plugin for all WordPress users to conveniently use. Watch this space.

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.