html5中svg canvas和图片之间相互转化思路代码
导读：收集整理的这篇文章主要介绍了html5中svg canvas和图片之间相互转化思路代码，觉得挺不错的，现在分享给大家，也给大家做个参考。 最近有个需求，需要把网页部分内容做正文，并把原网页转成pDF作为附件，发送邮件给boss。由...
收集整理的这篇文章主要介绍了html5中svg canvas和图片之间相互转化思路代码，觉得挺不错的，现在分享给大家，也给大家做个参考。 最近有个需求，需要把网页部分内容做正文，并把原网页转成pDF作为附件，发送邮件给boss。由于我们这是报表类型的网站，在htML5中控件开发无非就是canvas或者是svg，这里我们有几个控件是用svg，而svg在FoXMail邮件正文中无法正常显示，于是考虑将svg转成canvas显示，但是后来发现canvas也无法正常显示，最后不得已，只能将canvas标签再一次转成图片格式，终于解决了这个问题。下面就简单介绍一下实现过程。如下是一个svg标签 复制代码代码如下:
div id="svgContainer">
svg id="svg"> /svg>
/div>
首先需要获取svg标签以及内容：
VAR svgHtml = svgContainer.innerhtml();
将svg转成canvas需要用到GOOGLE的一个插件canvg，可以上官网下载，也可以直接远程引用进来
接下来就是调用该插件的canvg(canvasId,svgHtml)方法来转成canvas，这个方法第一个参数就是canvas标签的id，第二个自然就是svg标签内容了，就这样，svg转成了canvas
然后就是将canvas转成图片了，这个更加简单了
var imgSrc = document.getElementById(canvasId).toDataUrl("image/png"); //这其实是将canvas转成了图片，并返回图片的所有内容数据，如下即可显示图片：
复制代码代码如下:
img src=imgSrc />
这就是从svg-> canvas-> image的实现方法了，这个还是很有用的，因为不同的浏览器对svg和canvas的支持不同，这样的话，至少我们的控件总有方式能够正确显示，即使我们最后只能使用图片。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： html5中svg canvas和图片之间相互转化思路代码
本文地址： https://pptw.com/jishu/585293.html