wex5 教程 之 图文讲解 视频快照与本地存储

Posted 2020-09-01 邯郸戏曲开发

 刚刚做完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目录下。