javascript - Convert HTML which contains SVG elements to image file - Stack Overflow

I'm trying to convert an html code to image file (png, jpg, whatever). However, all approach that

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="" 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=".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="" 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.

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/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./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/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.

Share Improve this question asked May 16, 2016 at 15:46 Breno MacenaBreno Macena 4498 silver badges20 bronze badges 1
  • Possible duplicate of Convert SVG to image (JPEG, PNG, etc.) in the browser – Terry Commented May 16, 2016 at 20:23
Add a ment  | 

2 Answers 2

Reset to default 5

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

My suggestion is to create the different file types you need out of your svg code by doing this:

You can use Inkscape's export feature to create a .png file by first importing your svg code into Inkscape. Then, using a program like Paint, open your newly created .png file and save a copy as .jpg. Now you have two image files ready to to be saved.

I'm not sure of any other way to save a svg graphic through a webpage as multiple file types. This is a good idea though, so maybe there is some existing opensource out there.

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1744768626a4592619.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信