Wednesday, 15 June 2011

html5 - When Javascript callbacks can't be used -



html5 - When Javascript callbacks can't be used -

i know you're not supposed blocking in javascript , i've never been unable refactor away having that. i've come across don't know how handle callbacks. i'm trying utilize downloadify html2canvas (this ie only, downloading info uris doesn't work in ie). have specify info function flash object knows download. unfortunately, html2canvas asynchronous. need able wait until onrendered event filled in before can info uri.

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

i'm open suggestions on other ways this, i'm stuck.

edit - couple of comments have made seem more info on downloadify needed (https://github.com/dcneiner/downloadify). downloadify flash object can used trigger browser's save window. downloadify() function putting initializing flash object , sticking <object/> tag in element. since it's flash object, can't trigger events javascript without causing security violation.

i'm using ie download image of canvas element. in other browsers, can utilize info uri, ie special flower.

for poor soul spends entire night trying html5 feature work on ie9, here's ended using. can sorta-kinda away because aren't terribly concerned ie users getting less user friendly experience , internal application. but, ymmv.

basically, downloadify nil when homecoming string blank. so, due asynchronous nature of html2canvas's rendering, first time user clicks, nil happen. sec time (assuming render done, if not nil go on happen until is), value not blank , save proceeds. utilize oncancel , oncoplete callbacks blank out value 1 time again ensure next time user tries save, image not stale.

this doesn't business relationship event user changes dom in way in between clicks, don't know can done that. i'm not @ proud of this, ie is. works, plenty now.

var renderedpng = ''; var rendering = false; $('#snapshot').downloadify({ filename: function(){ homecoming 'timeline.png'; }, data: function(){ if(!rendering && renderedpng == ''){ rendering = true; html2canvas($('#timeline'),{ onrendered:function(canvas){ renderedpng = canvas.todataurl().replace('data:image/png;base64,',''); rendering = false; } }); } homecoming 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 });

javascript html5 asynchronous html2canvas downloadify

No comments:

Post a Comment