码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-02-22 11:36:46      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:cat   保存   流操作   适应   代码   replace   apr   jsb   size   

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

 

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

标签:cat   保存   流操作   适应   代码   replace   apr   jsb   size   

原文地址:http://www.cnblogs.com/fangziffff123/p/6427900.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!