javascript - Black image bug when exporting highcharts in Firefox -

i using highcharts display several graphs on webpage display fine.

i have export function tries combine charts pdf. getting svg of chart , converting jpeg image included in pdf created jspdf.

here code using generate images:

if ($('.chart').length > 0) {     var chartsvg = $('.chart').highcharts().getsvg(),         chartimg = new image();      chartimg.src = "data:image/svg+xml;base64," + window.btoa(unescape(encodeuricomponent(chartsvg)));      var chartcanvas = document.createelement("canvas");      chartcanvas.width = 600;     chartcanvas.height = 400;     chartcanvas.getcontext("2d").drawimage(chartimg, 0, 0, 600, 400);      var chartimgdata = chartcanvas.todataurl("image/jpeg"); } 

this works in chrome in firefox returns black image.

does know might going wrong or has seen similar issue?

thanks help.

update

i've updated code no image appended pdf document, either in chrome or firefox.

if ($('.sales').length > 0) {         var chartsvg = $('.sales').highcharts().getsvg(),             chartimg = new image();          chartimg.onload = function () {             var chartcanvas = document.createelement("canvas");              chartcanvas.width = 600;             chartcanvas.height = 400;             chartcanvas.getcontext("2d").drawimage(chartimg, 0, 0, 600, 400);              var chartimgdata = chartcanvas.todataurl("image/jpeg");         }          chartimg.src = "data:image/svg+xml;base64," + window.btoa(unescape(encodeuricomponent(chartsvg)));     } 

not sure if have code in correct place.

if log 'chartimgdata' console, both browsers generate datauri, firefox's version differs chromes.

update

fixed issue black images. i'm struggling how return multiple images - how nest multiple callbacks or there way? example: jsfiddle.net/wmuk489c/2

solved

thanks @robertlangson. fiddle updated final working code should need it: http://jsfiddle.net/wmuk489c/3/

further issues:

my charts dynamic , may not present. need image each graph exists. if graph not exist, 'getsvg' function fails, see example: http://jsfiddle.net/wmuk489c/4/

how should img.onload work if chart doesn't exist? first chart in callback may not present either, how work? there better way images?

setting chartimg.src causes asynchronous load need this...

chartimg.onload = function() {     var chartcanvas = document.createelement("canvas");      chartcanvas.width = 600;     chartcanvas.height = 400;     chartcanvas.getcontext("2d").drawimage(chartimg, 0, 0, 600, 400);      var chartimgdata = chartcanvas.todataurl("image/jpeg");      doc.addimage(chartimgdata, 'jpeg', 0, 0, 200, 100);      // can bit after you've added image needs     // in callback     doc.save('test.pdf');  }  chartimg.src = ... 

you've race condition otherwise , imagine happen away with chrome browser on pc.

here's fiddle fixed.