0

I am working with chart.js. when downloading chart.js image as png or jpg then it looks nice in MS-Pain but when the same image file is opened in windows 10 default image viewer then it does not look very prominent. so i thought if i can download the same chart.js file as bmp file instead of png then it may looks nice in windows 10 default image viewer.

please share me some idea that how to download chart.js image as bmp file or how to download canvas content as bmp file. please discuss this issue as a result i can get rid of this problem. for a long time i stuck to it.

This way i am downloading chart image by js at client side.

$("#downlo_jpg1").click(function () {

var url_base64 = document.getElementById("myMixedChart").toDataURL("image/png");
downlo_jpg1.href = url_base64;
var url = downlo_jpg1.href.replace(/^data:image\/[^;]/, 'data:application/octet-stream');

});

i am giving a screen shot from there anyone can see how the image looks not prominent in windows default image viewer. here is the screen shot. see all the text at left side and at bottom not very clear or prominent. enter image description here

Please guide me and push me to right direction to solve this issue. Thanks when i open the chart by default editor it looks like enter image description here

Indi_Rain
  • 179
  • 5
  • 17

1 Answers1

0

You can solve your problem without BMP. The black background happens because the image background is transparent and the default photo viewer on Windows renders transparency as black.

Set your chart background color explicitly, like this:

Chart.plugins.register({
  beforeDraw: function(chartInstance) {
    var ctx = chartInstance.chart.ctx;
    ctx.fillStyle = '#fff';  // or whatever background color you want
    ctx.fillRect(0, 0, chartInstance.chart.width, chartInstance.chart.height);
  }
});

If you actually want to generate a BMP (which isn't necessary in this case), you'll have to convert the generated PNG to BMP. For this you can use a library like JIMP.

ty.
  • 10,924
  • 9
  • 52
  • 71
  • please tell me what one js library i can use which help me to generate chart images as PNG,SVG & PDF file which will be downloading at client side. – Indi_Rain Jul 07 '20 at 12:57
  • 1
    You can use a web API like https://quickchart.io to render your chart config, or use a renderer on your own machine like puppeteer or chartjs-node-canvas – ty. Jul 07 '20 at 16:16