HTML5网页中SVG和Canvas以及IMG图片的转换方法_H5之家

下面我们一起来看一个HTML5网页中SVG和Canvas以及IMG图片的转换方法，希望文章对各位有帮助．

网页中显示的图片或者是图形，一般就只有几种，对于静态的内容，大多会选择jpg、png、gif的图片，这些图片称之为位图，放大以后会出现锯齿，也是不易更改的图形，如果想要实现放大和更准确的显示图形，svg和canvas会是更好的选择，不过使用canvas可能会遇到兼容问题。

一般的图表都是采用矢量可绘制的格式图片，当然也有使用Flash技术的，对于浏览器兼容来说，很难满足既有足够的精确度，而图形足够小方便传输，不过有一种解决方法，就是将这些图形进行转换，今天就给大家说说HTML5网页中SVG和Canvas以及IMG图片的转换方法。

SVG转换为Canvas

假设我们有以下的一段svg代码

首先需要获取svg标签以及内容：

将svg转成canvas需要用到google的一个插件canvg，可以上官网下载，也可以直接远程引用进来
接下来就是调用该插件的canvg(canvasId,svgHtml)方法来转成canvas，这个方法第一个参数就是canvas标签的id，第二个自然就是svg标签内容了，就这样，svg转成了canvas。

<canvas id="canvasId"></canvas>
<script>
canvasId = document.getElementById('canvasId');
canvg(canvasId,svgHtml)
</script>

Canvas转换为图片

然后就是将canvas转成图片了，这个更加简单了

var imgSrc = document.getElementById(canvasId).toDataUrl("image/png");

这其实是将canvas转成了图片，并返回图片的所有内容数据，如下即可显示图片：

<img src='' />
<script>
document.getElementById('myImg').src = imgSrc;
</script>

这就是HTML5网页中SVG和Canvas以及IMG图片的转换方法，这个还是很有用的，因为不同的浏览器对svg和canvas的支持不同，这样的话，至少我们的控件总有方式能够正确显示，即使我们最后只能使用图片。

iframe提交表单其实比ajax要方便一些了，当然ajax也有ajax的好处了，只是小编觉得ajax编码处理有时有些麻烦，虽然经过转码是可以解决中文问题，但如果直接使用iframe不存这些问题了，下面来看看．

最近在做一个项目，用到上传图片功能，发现ajax不能enctype=”multipart/form-data” 属性的表单，没办法，只能使用form表单直接提交的方法了，但是form表单直接提交会跳转页面，这样很不友好，也不是项目需求，于是上网搜索了一番，发现可以使用隐藏的iframe来实现。

具体的原理是form表单提交到iframe里面处理，而这个iframe是隐藏的，所以提交表单的时候当前页面没有发生任何变化。

最重要的就是form的target属性指向iframe的name值，这样就实现了提交到隐藏的iframe中，那么返回值应该怎么获取呢？

var frame1 = document.getElementById("frameFile1").contentDocument; //获取到iframe里面的
html元素

var frameJson1 = JSON.parse($(frame1).find('pre').html());

//根据获取到的元素进行相应的操作
这样的话基本上可以模拟ajax的操作，实现无刷新提交表单。

例子1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无刷新提交表单</title>
<script type="text/javascript">
<!--
function callback(str){
alert(str);
}

// --></script>
</head>
<body>
<form name="form1" method="POST" action="../post.php" target="post_frame" enctype="multipart/form-data">
<iframe id="post_frame" style="display:none;" mce_style="display:none;"></iframe>
<input type="file" name="img" />
<input name="power[]" type="text"/>
<input type="submit" value="完成以上修改" name="submit" />
</form>
</body>
</html>

这里的代码就想怎么写怎么写了，不过这个里执行完了刚才那个HMTL页面应该要有所表现，这时就要用到上个页面中的 function callback()了

echo ("<script type=＼"text/javascript＼">parent.callback('操作成功 ! ')</ script>");

例子2

用隐藏的 IFrame 提交表单部分替代Ajax。

原理如下：
1.写一个Javascript类，动态添加一个IFrame。具体是在 document.body 对象中appendChild 如下结构：
<DIV id="i_frame_div">
<IFrame id="i_frame" name="i_frame" width="1px" height="1px" style="display:none" src="inner.html"></IFrame>
</DIV>
这是通过Style的"display:none",来实现IFrame的不可见的；
不可以设成style="width:0px,height:0px,display:none"，这样会导致一些浏览器不添加IFrame
首先用DOM的方式生成<DIV>，然后使用：
var i_div = document.getElementById("i_frame_div");
i_div.innerHTML="<IFrame id=＼"i_frame＼" name=＼"i_frame＼" width=＼"1px＼" height=＼"1px＼" style=＼"display:none＼" src=＼"inner.html＼"></IFrame>";
的方式将IFrame嵌入页面内；
注意，不要使用 DOM 的方式，这样会导致通过 IE 的 DOM 树不能正常获得IFrame内前网页的内容；
即不要采取如下形式：
var i_frame=document.createElement("IFrame");
i_frame.id="i_frame";
...
var i_div = document.getElementById("i_frame_div");
i_div.appendChild(i_frame);
这样的代码在<Form target="i_frame">提交时，IFrame的内嵌页面inner.html在FireFox中会自动刷新。而IE 6.0 则会新弹出一个窗口；
src属性必须指定一个空的html文件；

2.将这个类实例化为一个全局变量，这个类的构造函数就写成以上代码；