南强小屋 Design By 杰米
最近有个需求，需要把网页部分内容做正文，并把原网页转成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的支持不同，这样的话，至少我们的控件总有方式能够正确显示，即使我们最后只能使用图片。
复制代码代码如下:
<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的支持不同，这样的话，至少我们的控件总有方式能够正确显示，即使我们最后只能使用图片。
标签：
html5,svg,canvas
南强小屋 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
南强小屋 Design By 杰米
暂无html5中svg canvas和图片之间相互转化思路代码的评论...
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。