0

I am trying to take an image of a part of my webpage, which occasionally would include highcharts. It works well except for some highcharts type.

As an example, this is my #PrintPanelScreen on webpage.

So partial charts are displaying, check the two links below, first image shows how it looks on webpage and second image shows how it looks when rendered. Notice colors are missing on the chart.

this.PrintPanel = function () {

html2canvas(document.querySelector("#PrintPanelScreen")).then(canvas =>    

 {     var img = canvas.toDataURL("image/png"); // image type is "image/png"
                  download(img, "modified.jpg", "image/jpeg");

    });
};

Image on webpage looks like this

Image after its rendered in canvas or after I open it in jpg looks like this, see colors missings

Sarah
  • 1,199
  • 2
  • 21
  • 42
  • Update on this. I tried using the export feature of highcharts and the colors are missing on that too. It seems like this is happening when the shape property of charts is set to a certain image like this.shape = 'url(/Content/Images/LO-' + szSize + '.png)'; – Sarah May 08 '18 at 00:50
  • Update I found this online, that the URL to a graphic can be given on this form: "url(graphic.png)". Note that for the image to be applied to exported charts, its URL needs to be accessible by the export server. That's why the colors are not appearing because I need to make the urls to the images accessible to the export server. But how do you do that? – Sarah May 08 '18 at 01:19

0 Answers0