When Javascript Callbacks Cannot Be Used

Question

I know that you should not block Javascript, and I have never been able to reorganize it from having to do this. But I came across something that I don’t know how to handle callbacks. I am trying to use Downloadify with html2canvas (this is only for IE, loading the URI does not work in IE). You must specify a data function so that the Flash object knows what to load. Unfortunately, html2canvas is asynchronous. I need to be able to wait until a populated event is populated before I can get the data URI.

$('#snapshot').downloadify({ filename: function(){ return 'timeline.png'; }, data: function(){ var d = null; html2canvas($('#timeline'),{ onrendered:function(canvas){ d = canvas.toDataURL(); } }); //need to be able to block until d isn't null return d; }, swf: '../static/bin/downloadify.swf', downloadImage: '../static/img/camera_icon_32.png?rev=1', width: 32, height: 32, transparent: true, append: false }); 

I am open to suggestions on other ways to do this, but I'm stuck.

EDIT . A few comments made it seem like more information was needed on Downloadify ( https://github.com/dcneiner/Downloadify ). Downloadify is a Flash object that you can use to launch the Save As browser window. The downloadify () function simply sets the initialization of the Flash object and attaches the <object/> to the element. Since this is a Flash object, you cannot fire events from Javascript without causing a security violation.

I use it only for IE to load the image of the Canvas element. In all other browsers, I can use the data URI, but IE is a special flower.

Answer 1

For the poor soul, who spends the whole night trying to get the HTML5 feature to work with IE9, this is what I ended up using. I can partly get rid of it, because we are not too worried that IE users get a less user-friendly interface, and this is an internal application. But, YMMV.

Basically, Downloadify won't do anything when the return line is empty. Thus, due to the asynchronous nature of html2canvas rendering, nothing will happen the first time a user clicks. The second time (provided that the render is done if nothing continues until it is), the value will not be empty and the save will continue. I use the onCancel and onCoplete callbacks to clear the value again, to ensure that the next time the user tries to save, the image is not too out of date.

This does not take into account the event that the user in any way changes the DOM between clicks, but I do not know what can be done for this. I'm not at all proud of it, but IE is what it is. It works, which is enough at the moment.

  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 });