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

 

 

 掃描二維碼，看高清教學視頻。