In this article I am going to explain SVG to PNG conversion using HTML5 Canvas.
As shown in the above picture there are 2 steps.
- Get SVG on HTML5 canvas
- Convert Canvas to PNG image
Get SVG on HTML5 canvas
// get Canvas Element var myCanvas = document.getElementById('canvasid'); // get 2D context var myCanvasContext = myCanvas.getContext('2d'); // Load up our image. var source = new Image(); source.src = '/img/twitter.svg'; // Render our SVG image to the canvas once it loads. source.onload = function(){ myCanvasContext.drawImage(source,0,0,200,200); }
Convert Canvas to PNG image
$("#resultImage").attr("src",myCanvas.toDataURL("image/png"));
Great....Keep it up..
ReplyDeletedon't want to be critic, but I have a problem trying to use img.src = canvas.toDataURL(...) in Internet Explorer 11. A security issue rises. Your example here has the same problem. Have you found a workaround?. Thank you.
ReplyDeleteuse ( source.crossOrigin = "Anonymous"; )
Deletethis will avoid security error
Its not render the external images refereed by SVG.
ReplyDeleteuse ( source.crossOrigin = "Anonymous"; )
Deletethis will avoid security error
Is there a way where I can specify the ID of an SVG within the page as the source URL instead of an external SVG file?
ReplyDeleteUse this
Deletevar source = document.getElementById('give id here');
I am getting canvas as empty.
ReplyDeleteHere is my html.
Sorry, your browser does not support inline SVG.
js code
var myCanvas = document.getElementById('canvasid');
// get 2D context
var myCanvasContext = myCanvas.getContext('2d');
// Load up our image.
var source = document.getElementById("test");
source.crossOrigin = "Anonymous";
// Render our SVG image to the canvas once it loads.
source.onload = function(){
myCanvasContext.drawImage(source,0,0,200,200);
}
Please help me how can i fix this. I have an issue with IE.
Your blogs are amazing. Keep sharing. I love them Are you also searching for help with my assignment? we are the best solution for you. We are best known for delivering the best urgent assignment help.
ReplyDelete