wex5 教程 之 图文讲解 视频快照与本地存储
刚刚做完wex5与html5 视频的集成，测试之余，突然想到了截图与本地保存，原来以为是很复杂的文件格式与流操作，其实，搞明白canvas,几行代码就能搞定。
一 演示效果：
播放过程中截图，并小窗提示，强制下载到本地，用图片工具可以打开。
二 总体思路：
用h5播放器播放，用button按钮触发截图动作，用canvas得到图形数据，并强行用浏览器下载到本地。
三 代码逻辑与实现：
1.在wex5中创建h5播放器，具体方法参见我的另一篇博文：
http://blog.csdn.net/qq_27727681/article/details/53307638
今天的效果如下图，用boostraprow进行了屏幕适应布局;
2. 创建canvas对像。wex5没有提供此组件，通过标签方法添加；
注意事项：1将 canvas装在div中，便于可视化，控制样式，位置。
2 如果强制设置div与canvas大小，canvas必须小于div,否则会出错，播放控件会失效。
3.id选项为必须。
3.创建一个截图按钮。
4. 用canvan获取当前视频，并转换成img对像，强行浏览器下载
说明：
var player = document.getElementById("player"); 用id获取播放器对像
var canvas = document.getElementById("canvas"); 用id获取canvas对像
if (canvas === null)
return false;
var ctx = canvas.getContext("2d"); getContext 得到canvas演染环境。
/* ctx.fillRect(0,0,100,100); 矩形填充
ctx.strokeRect(120, 0, 100, 100);*/ 矩形描边
/*ctx.strokeStyle="blue";*/ 描边样式
canvas.width="200"; canvas大小
canvas.height="150";
var img=new Image(); 创建一个image对像
ctx.drawImage(player,0,0,canvas.width,canvas.width); canvas环境对像，从当前视频对像 得到对像，并drawImage方法得到图形
img=canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
canvas对像转换方法toDataURL,把获取图像的canvas对像，转换成png格式，可以改成其它，比如"image/jpg"
方法replace("image/png", "image/octet-stream")，意为转成流。
/* var win=window.open('111','image from canvas',"fullscreen=1,directories=yes,scrollbars=yes");打开window窗口，这里没有用到。
win.document.write("<img src='"+img+"'/>");*/ 把img标签对像写进窗口，在新的浏览器窗口里可以预览图片。
window.location.href=img; 将浏览器url地址指向刚才的图片流，图片自动下载到user/download目录下。
相关视频制作完成，上传优酷。教学app制作中。我是邯郸戏曲开发，tel：15175073123,qq:1017945251
扫描二维码，看高清教学视频。
