canvas绘制svg矢量图片,canvas svg webgl

　　最近有个需求，需要把网页的部分内容做成正文，把原来的网页变成pdf作为附件，给老板发邮件。由于这是一个报表类型的网站，html5中的控件开发只不过是canvas或svg。这里我们对几个控件使用svg，但是svg在FoxMail邮件正文中无法正常显示，所以我们考虑将svg转换成canvas，但是后来发现canvas无法正常显示。最后，我们不得不再次将画布标签转换成图片格式，终于解决了这个问题。下面简单介绍一下实现过程。下面是一个svg标签复制代码。代码如下：

　　div id=svgContainer

　　svg id=svg/svg

　　/div

　　首先，您需要获得svg标签和内容：

　　var svgHtml=SVG container . innerhtml()；

　　把svg转换成canvas需要google的插件canvg，可以从官网下载，也可以直接远程引用。

　　下一步是调用插件的Canvg (svg HTML)方法将它转换成canvas。这个方法的第一个参数是画布标签的id，第二个自然是svg标签的内容。这样SVG就转换成了画布。

　　然后就是把画布变成图片了，比较容易。

　　var img src=document . getelementbyid(canvasId)。toda aurl( image/png )；//这实际上是把canvas变成了一个图片，返回图片的所有内容数据。图片可以显示如下：复制代码如下：

　　img src=imgSrc /

　　这是从svg-canvas-image的实现方法。这还是很有用的，因为不同的浏览器对svg和canvas的支持是不同的。这样，至少总有办法让我们的控件正确显示，即使最后只能用图片。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。