SVG to Canvas在线转换工具

时间 2020-07-21

标签 svg canvas 在线转换工具繁體版

原文原文链接

HTML5中有两种图形解决方案：SVG和Canvas，二者都有各自特色，这里很少说，Qunee图形组件中咱们经常使用SVG做为节点图标，这在大部分场景下都表现良好，可是IE下有些小问题，IE下能够将SVG图片绘制到Canvas上，可是没法读取SVG的像素信息，这意味着一些特殊功能（追踪图片边缘，图片染色等）没法被实现，这时候咱们考虑选择将SVG解析，转换成Canvas的绘制代码，这样就能够使用Canvas来绘制SVG图片了 javascript

项目地址：https://github.com/samsha/svg2canvas

canvg.js

是的确实有人在作这样的事，canvg.js 就是一个将SVG转换成Canvas的工具库，甚至有些SVG的动画效果也能获得实现，可是canvg.js存在不少问题： html

不可避免的SVG兼容问题

SVG是一种很复杂的矢量图形语言，彻底转换到Canvas至关于写一个独立的SVG查看器，即便是Adobe的SVG Viewer也会存在兼容问题，更况且一个小小的js工具库 java

canvg.js没法生成Canvas绘制代码

canvg.js确实能将SVG绘制到Canvas上，可是没法生成绘制代码，就意味着须要引入这个类库，且动态解析SVG，这里存在额外的性能开销，加上canvg.js自己并不完善，代码封装性仍是功能上都存在缺陷，在生产环境中引入会带来问题 node

professorcloud

网上搜索svg to canvas，能够找到这个：http://www.professorcloud.com/svg-to-canvas/ 能够将SVG转换成Canvas，并输出javascript代码，符合制做矢量图标的须要，Qunee早期的内置icon都是这样制做的，可是这个工具并不完善，不支持渐变，不支持纹理，大部分的SVG图标没法转换，因而咱们考虑本身写一个在线工具，以方便客户使用，咱们查看了http://www.professorcloud.com/svg-to-canvas/ 的代码，它是在某个老版本的canvg.js基础上修改实现的，是写死的代码，不方便后期升级和维护，咱们想到一种更好的方式来实现 git

SVG2Canvas

咱们想到一种更好的方式实现SVG到Canvas代码的转换，在线地址：http://demo.qunee.com/svg2canvas/ github

实现思路

经过重写HTMLCanvasElement相关的方法来实现，基本的思路就是将CanvasRenderingContext2D.prototype中的相关绘制和设置代码重写，增长上生产js代码的功能，好比对CanvasRenderingContext2D#fill()方法的处理，咱们可能要重写这个方法正则表达式

CanvasRenderingContext2D.prototype.fill2 = function(){
   this.fill();
   appendCode('ctx.fill();\n');//生成js代码
}

固然实际上要比这复杂，须要考虑如何重写方法？如何将参数对象转换成字符串？此外对于复杂的SVG，可能会须要建立临时的Canvas对象，还涉及到一些正则表达式，还要注意做用域的问题，花费了些功夫，实现了一套不错的工具，基本上canvg.js能支持的svg，都能很好的转换，支持Gradient, 支持Pattern等 canvas

在线服务

好的东西若是只是本身使用，未免太浪费了，因而咱们又花了很多时间将其作出了一个好的界面，并公布出来浏览器

在线地址：http://demo.qunee.com/svg2canvas/ app

支持Chrome, Safari浏览器，左中右布局分布，将svg文件拖拽到左侧虚线框中，便可生成Qunee for HTML5中相应的图片注册代码，并及时预览到图片在Qunee for HTML5中的展现效果，以下：

使用生成的代码

将右侧文本框中的代码保存到js文件（好比SVGIcons.js），并在HTML中引入这个js，以后你就能够直接使用svg文件名做为节点图标了

node.image = 'DataCenter.svg';

示例代码

<!DOCTYPE html>
<html>
<head>
<title>Hello Qunee for HTML5</title>
<meta charset="utf-8">
</head>
<body style="margin: 0px">
<div style="position: absolute; width: 100%; top: 0px; bottom: 0px;" id="canvas"></div>
<script src="http://demo.qunee.com/lib/qunee-min.js"></script>
<script src="SVGIcons.js"></script>
<script>
var graph = new Q.Graph('canvas');

var node = graph.createNode("SVG");
node.image = 'DataCenter.svg';

</script>
</body>
</html>

运行效果