0514-86177077

9:00-17:00（工作日）

主页 > 知识库 > html5中svg canvas和图片之间相互转化思路代码

html5中svg canvas和图片之间相互转化思路代码
热门标签：地图标注柱状图 四川移动电销外呼客户管理系统 智能芯电话机器人 百度地图标注为什么总是封号 临海地图标注app 咸阳稳定外呼系统软件 400开头的电话好申请不 小朱地图标注 怎么做百度地图标注
最近有个需求，需要把网页部分内容做正文，并把原网页转成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的支持不同，这样的话，至少我们的控件总有方式能够正确显示，即使我们最后只能使用图片。

标签：南平 陕西 平凉 平顶山 黄石 山南 黄石 公主岭

巨人网络通讯声明：本文标题《html5中svg canvas和图片之间相互转化思路代码》，本文关键词  html5,中,svg,canvas,和,图片,；如发现本文内容存在版权问题，烦请提供相关信息告之我们，我们将及时沟通与处理。本站内容系统采集于网络，涉及言论、版权与本站无关。
  • 相关文章
  • 下面列出与本文章《html5中svg canvas和图片之间相互转化思路代码》相关的同类信息！
  • 本页收集关于html5中svg canvas和图片之间相互转化思路代码的相关信息资讯供网民参考！
    • 推荐文章

    上一篇：HTML5 canvas画图并保存成图片的jcanvas插件

    下一篇：html5画布旋转效果示例

    Copyright © 1999-2012 诚信 合法 规范的巨人网络通讯始建于2005年

    苏ICP备15040257号-8

    产品关键词： html5中svg canvas和图片之间相互转化思路代码 html5,中,svg,canvas,和,图片,