Download Highchart image in Phonegap application

We are developing a mobile application using Phonegap + Ionic. We are using Highcarts in our application. We want to give a feature to share the highchart in facebook, Whatsapp or Twitter. Sharing is not a issue with phonegap as there is a plugin available for that.

Issue is that when we want to share any image using the phonegap plugin we need to give a path of the Image and Highchart uses SVG to display the chart.

I have tried converting SVG into Canvas and then exporting that canvas using org.devgeeks.Canvas2ImagePlugin of phonegap but nothing works.

Can somebody please help or share some code if they have achieved something like this.

Thanks in advance.

After spending hours we have the solution. Hope this will help others also.

(1) Install Cordova plugin "org.devgeeks.Canvas2ImagePlugin".

(2) Get the SVG html of the highchart.

var svg = document.getElementById('chart1').children[0].innerHTML;

(3)Create a Canvas html element and append that canvas element inside the div in your page.

 var canvas = document.createElement('canvas');
 canvas.width = $window.innerWidth;
 canvas.height = 500;

 document.getElementById('divID').innerHTML = '';
 document.getElementById('divID').appendChild(canvas);

(4) Canvg will add the Image to the canvas.

canvg(canvas, svg, { log: true, ignoreMouse: true, ignoreAnimation: true });

(5) With the help of Cordova plugin you can download the image like this

window.canvas2ImagePlugin.saveImageDataToLibrary(
    function(path) {
        console.log(path);
    },
    function(err) {
        console.log(err);
    },
    document.getElementById('canvas').getElementsByTagName("canvas")[0]
);