I'm trying to convert an html code to image file (png, jpg, whatever). However, all approach that I tried doesn't work because my HTML code has SVG elements like that:
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 150.000000 150.000000" preserveAspectRatio="xMidYMid meet" class="img30p icon-main-color">
<g transform="translate(0.000000,150.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M572 1430 c-233 -62 -408 -227 -490 -459 -24 -69 -27 -89 -27 -221 0 -132 3 -152 27 -221 39 -110 92 -194 172 -275 81 -80 165 -133 275 -172 69 -24 89 -27 221 -27 132 0 152 3 221 27 110 39 194 92 275 172 80 81 133 165 172 275 24 69 27 89 27 221 0 132 -3 152 -27 221 -39 110 -92 194 -172 275 -81 81 -166 134 -275 171 -105 36 -291 42 -399 13z m376 -83 c100 -35 171 -80 245 -154 76 -76 126 -158 158 -255 20 -60 24 -94 24 -188 0 -94 -4 -128 -24 -188 -32 -97 -82 -179 -158 -255 -73 -74 -144 -119 -245 -155 -63 -23 -89 -26 -193 -27 -100 0 -132 4 -193 24 -368 121 -544 530 -377 876 79 164 240 294 421 340 92 23 250 15 342 -18z"></path>
<path d="M873 788 l-183 -183 -100 100 c-83 83 -103 98 -117 89 -48 -30 -44 -38 90 -171 l127 -128 212 212 212 212 -24 26 c-13 14 -26 25 -29 25 -3 0 -88 -82 -188 -182z"></path>
</g>
</svg>
I tried to use Html2Canvas and doesn't worked:
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>
<script>
$(function(){
$('#save_image_locally').click(function(){
html2canvas($('#imagesave'), {
onrendered: function (canvas) {
var a = document.createElement('a');
a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
a.download = 'test.jpg';
a.click();
}
});
});
});
</script>
</head>
<body>
<div id="imagesave" style="width: 200px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 150.000000 150.000000" preserveAspectRatio="xMidYMid meet" class="img30p icon-main-color">
<g transform="translate(0.000000,150.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M572 1430 c-233 -62 -408 -227 -490 -459 -24 -69 -27 -89 -27 -221 0 -132 3 -152 27 -221 39 -110 92 -194 172 -275 81 -80 165 -133 275 -172 69 -24 89 -27 221 -27 132 0 152 3 221 27 110 39 194 92 275 172 80 81 133 165 172 275 24 69 27 89 27 221 0 132 -3 152 -27 221 -39 110 -92 194 -172 275 -81 81 -166 134 -275 171 -105 36 -291 42 -399 13z m376 -83 c100 -35 171 -80 245 -154 76 -76 126 -158 158 -255 20 -60 24 -94 24 -188 0 -94 -4 -128 -24 -188 -32 -97 -82 -179 -158 -255 -73 -74 -144 -119 -245 -155 -63 -23 -89 -26 -193 -27 -100 0 -132 4 -193 24 -368 121 -544 530 -377 876 79 164 240 294 421 340 92 23 250 15 342 -18z"></path>
<path d="M873 788 l-183 -183 -100 100 c-83 83 -103 98 -117 89 -48 -30 -44 -38 90 -171 l127 -128 212 212 212 212 -24 26 c-13 14 -26 25 -29 25 -3 0 -88 -82 -188 -182z"></path>
</g>
</svg>
</div>
<input type="button" id="save_image_locally" value="click"/>
</body>
</html>
Does anyone have any idea to make it work? Or some approach which uses PHP? Thanks.
Convert SVG to image is kind of troublesome. The usual strategy is first convert the SVG to a canvas element, and then to the image file.
To do that, you will need the canvg library.
Let's begin. First of all, you need to serialiaze your SVG
var svgImage = $('#imagesave').children('svg')[0];
var serializer = new XMLSerializer();
var str = serializer.serializeToString(svgImage);
Then, create a canvas and insert it into the DOM
var $canvas = $('<canvas/>');
$canvas.attr('width', '150px;')
$canvas.attr('height', '150px;')
$canvas.appendTo('body');
Now, "paint" the canvas with your SVG using canvg
canvg($canvas.get(0), str);
And then, you save the image
html2canvas($canvas, {
onrendered: function (canvas) {
var a = document.createElement('a');
a.href = canvas.toDataURL();
a.download = 'test.png';
a.click();
$canvas.remove(); //removes canvas from body
}
});
You can see this altogether in this jsFiddle