0

I am trying to generate image of my charts from my local server(I've installed highcharts on it).

Following is the code

var chart = Highcharts.charts[i];
                var render_width = chart.chartWidth;
                var render_height = chart.chartHeight;

                // Get the cart's SVG code
                var svg = chart.getSVG({
                    exporting: {
                        sourceWidth: chart.chartWidth,
                        sourceHeight: chart.chartHeight
                    }
                });

                // Create a canvas
                var canvas = document.createElement('canvas');
                canvas.height = render_height;
                canvas.width = render_width;
                document.body.appendChild(canvas);

                // Create an image and draw the SVG onto the canvas
                var image = new Image;
                image.onload = function() {
                    canvas.getContext('2d').drawImage(this, 0, 0, render_width, render_height);
                    console.log(image.src);
                    afterPlotExport(); 
                };
                image.src = 'data:image/svg+xml;base64,' + window.btoa(svg);
}

When i'm trying to log inside onload() function i'm expecting a base64 string.But the string which is generated appears as broken image when i copy paste it to an online base64 to image converter.

Any help would be appreciated as to why the image is appearing broken?

priyanka bhale
  • 19
  • 1
  • 6
  • I think you are confusing image files and SVG, which is an XML-derived format for describing vector images. Look at the decoded `window.btoa(svg)` (or just `svg`) and you'll find human-readable text. – Hubert Grzeskowiak Jun 06 '18 at 09:23
  • Please refer the following fiddle http://jsfiddle.net/1p81fbzs/683/ when i try to log image.src inside onload() function i get a string of base64 which is converted to an image by online converter – priyanka bhale Jun 06 '18 at 09:29
  • 2
    Possible duplicate of [Drawing an SVG file on a HTML5 canvas](https://stackoverflow.com/questions/3768565/drawing-an-svg-file-on-a-html5-canvas) – Hubert Grzeskowiak Jun 06 '18 at 09:32
  • could you go through the code and suggest where am i going wrong? – priyanka bhale Jun 06 '18 at 09:42
  • I see the image properly , when i copy from the log , i saw it by pasting here https://codebeautify.org/base64-to-image-converter – Shyam Joshi Jun 06 '18 at 10:05
  • i used the same converter as well but i'm unable to see the image. did you got the string from some imageURL or an svg? – priyanka bhale Jun 06 '18 at 10:17
  • Here's an output in my console (Chrome): https://imgur.com/a/GqHoyt3 Everything works fine if I click "copy" button and paste the output to the converter proposed by @ShyamJoshi. – Kamil Kulig Jun 07 '18 at 10:34
  • I got the image from console log , i copied the entire string – Shyam Joshi Jun 07 '18 at 12:17

0 Answers0