For the poor soul that spends an entire night trying to get an HTML5 feature to work on IE9, here's what I ended up using. I can sorta-kinda get away with it because we aren't too terribly concerned about IE users getting a less user friendly experience and this is an internal application. But, YMMV.
Basically, Downloadify will do nothing when the return string is blank. So, due to the asynchronous nature of html2canvas's rendering, the first time a user clicks, nothing will happen. The second time (assuming the render is done, if not nothing will continue to happen until it is), the value is not blank and the save proceeds. I use the onCancel and onCoplete callbacks to blank out the value again to ensure that the next time the user tries to save, the image is not too stale.
This doesn't account for the event that the user changes the DOM in some way in between clicks, but I don't know what can be done for that. I'm not at all proud of this, but IE is what it is. It works, which is enough for now.
var renderedPng = '';
var rendering = false;
$('#snapshot').downloadify({
filename: function(){
return 'timeline.png';
},
data: function(){
if(!rendering && renderedPng == ''){
rendering = true;
html2canvas($('#timeline'),{
onrendered:function(canvas){
renderedPng = canvas.toDataURL().replace('data:image/png;base64,','');
rendering = false;
}
});
}
return renderedPng;
},
onComplete:function(){
renderedPng = '';
},
onCancel: function(){
renderedPng = '';
},
dataType: 'base64',
swf: '../static/bin/downloadify.swf',
downloadImage: '../static/img/camera_icon_32.png?rev=1',
width: 32,
height: 32,
transparent: true,
append: false
});