1

I'm creating a canvas based on svg using canvg and then through canvas I'm downloading an image.

Here is the code for creating an canvas taking svg.

//Creating the canvas

var myCanvas = document.createElement("CANVAS");
canvg(myCanvas, res[0],{ ignoreMouse: true, ignoreAnimation: true , ignoreClear: true }); 



     //Downloading the image


 var uri = canvas.toDataURL("image/jpeg");
           var link = document.createElement("a");
            link.download = name;
            link.href = uri;
            document.body.appendChild(link);
            link.click();

The image obtained is partially with black background.Please help.

Muhammad Faheem Ansari
  • 11
  • 3
  • Possible duplicate of [How to get background color of SVG converted properly into Canvas](https://stackoverflow.com/questions/36522927/how-to-get-background-color-of-svg-converted-properly-into-canvas) – Kaiido May 23 '18 at 11:15
  • Beside, converting an svg graphic to jpeg doesn't sound like a great idea, it obviously depends on the graphic, but most of the time png will offer a smaller output file size, with of course, better quality. – Kaiido May 23 '18 at 11:17
  • I found a problem and fixed it too. I was converting svg to canvas taking svg element as a string, but some part of the svg has external css applied, due to which while taking markup from DOM I lost a css property and it result in partial black image. Just added missed CSS as inline CSS and it solved the issue. //a single line of code that fixed everything $(".c3-chart-lines").find(".c3-line").css("fill", "none"); Thanks – Muhammad Faheem Ansari May 24 '18 at 04:25

0 Answers0