logo标签列表

将包含SVG元素的HTML转换为图像文件

javascriptjqueryhtmlsvghtml2canvas
6

我正在尝试将HTML代码转换为图像文件（png，jpg或其他）。然而，所有我尝试过的方法都不起作用，因为我的HTML代码中有像这样的SVG元素：

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

我尝试使用Html2Canvas但是没有成功：
<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>

有没有人知道如何使其工作？或者有一些使用PHP的方法吗？谢谢。

可能是在浏览器中将SVG转换为图像（JPEG，PNG等）的重复问题。 - Terry
2个回答
5

将SVG转换为图像有点麻烦。通常的策略是先将SVG转换为画布元素，然后再转换为图像文件。

为此，您需要使用canvg库。

让我们开始。首先，您需要序列化您的SVG。

var svgImage = $('#imagesave').children('svg')[0];
var serializer = new XMLSerializer();
var str = serializer.serializeToString(svgImage);

然后，创建一个画布并将其插入到DOM中。
var $canvas = $('<canvas/>');
$canvas.attr('width', '150px;')
$canvas.attr('height', '150px;')
$canvas.appendTo('body');

现在，使用canvg将SVG绘制到画布上。
canvg($canvas.get(0), str);

然后，您保存图像

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
  }
});

你可以在这个jsFiddle中一起查看。
jsFiddle已修复，一些库的URL已经修复。 - matheusr
0
我的建议是通过以下方式从您的svg代码创建所需的不同文件类型：
您可以使用Inkscape的导出功能，首先将您的svg代码导入Inkscape。然后，使用像Paint这样的程序打开新创建的.png文件，并将其另存为.jpg的副本。现在，您已经准备好两个图像文件了。
我不确定有没有其他方法通过网页保存svg图形为多个文件类型。虽然这是一个好主意，但也许已经存在一些开源的解决方案。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接