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

 

 

 扫描二维码，看高清教学视频。