将包含SVG元素的HTML转换为图像文件
Convert HTML which contains SVG elements to image file
我正在尝试将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转换为图像有点麻烦。通常的策略是首先将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 中看到这一点
我的建议是通过以下操作从svg代码中创建所需的不同文件类型:
您可以使用Inkscape的导出功能来创建一个.png文件,方法是首先将svg代码导入Inkscap。然后,使用Paint这样的程序,打开新创建的.png文件并将副本保存为.jpg。现在,您有两个图像文件可以保存了。
我不确定是否有其他方法可以通过网页将svg图形保存为多种文件类型。这是一个好主意,所以也许有一些现有的开源。
相关文章:
- 当图像转换为本地存储的DataURL时,EXIF被删除
- 如何使用jquery将base64图像路径转换为真实路径
- 如何在内联依赖项并将图像转换为dataURI的情况下完全提取网页
- 将包含SVG元素的HTML转换为图像文件
- 无法在Cordova 4.0 ios中将jpg/jpeg图像转换为Base64
- Cordova图像选取器转换为base64
- JS-如何将图像对象转换为灰度并显示
- 如何在fabricjs中嵌入图像base64将画布转换为SVG
- 应用将图表转换为图像的jqplot代码时Chrome挂起
- ng文件上传获胜't将jpg图像转换为png
- 用于将html转换为bbcode的Javascript,用于带有链接的图像
- 从 Base64 转换图像时出错 - HTMLImageElement 已损坏
- 如何在 Safari 上的 3D 转换图像上修复剪裁的文本
- 需要帮助更换扩展.jpg到.png或转换图像
- 什么是最简单的方法,我可以转换图像/元素到另一个图像/元素,同时拖动它
- 我可以转换图像从base64到二进制客户端
- 在Javascript中转换图像到内存流数据
- 正则表达式转换图像源
- 在firefox上转换图像为base64 javascript
- 从url转换图像为base64