0

I'm using html2canvas to convert a div containing graph ( graphs are being generated by plotly.js ) to image, so it can be downloaded. But the graph is getting blurred in the image.

This my code :

html2canvas([document.getElementById('graph_div')], {
    onrendered: function (canvas) {
        var data = canvas.toDataURL('image/png');
        location.href = data;
    }
});

I've seen this and this and these images are rendering just fine so I don't think this might be a retina display issue as explained here

This is the actual div ( grey color is because of an overlaying div ) : image

And this is the image html2canvas is generating :image

Can you guys please tell me what am I doing wrong ?

Community
  • 1
  • 1
mrid
  • 5,782
  • 5
  • 28
  • 71
  • 1
    It looks like the numbers are rendered twice, but why only the numbers I don't know. – theoretisch Oct 29 '16 at 15:04
  • `I don't think this might be a retina display issue` are you on a retina display? – Jaromanda X Oct 29 '16 at 15:05
  • No, not on retina display – mrid Oct 29 '16 at 15:07
  • then that can't be the issue :p – Jaromanda X Oct 29 '16 at 15:07
  • `a div containing graph` - how is this graph created? – Jaromanda X Oct 29 '16 at 15:08
  • i'm using plotly ( https://plot.ly/javascript/ ) – mrid Oct 29 '16 at 15:10
  • theoretisch is right. The numbers are being rendered in two different fonts (or font sizes). My guess is that it's originally rendered like that, but one of the copies of the text isn't visible for some reason. But I don't know enough about image formats to say anything more. – David Knipe Oct 29 '16 at 19:42
  • Why don't you use plotly's download as image function? – Maximilian Peters Nov 06 '16 at 10:42
  • I don't want the user to use other options available in plotify ( like zoom into a particular section, save image to cloud, and other options...specially the made with plotify message :P ), so I decided to remove the entire options panel, overlay graph with a transparent div and give just an option to download the graph – mrid Nov 06 '16 at 10:58

0 Answers0