阿里雲Aliplayer高級功能介紹(一)：視頻截圖

摘要： H5 Video是不提供截圖的API的， 視頻截圖須要藉助Canvas，經過Canvas提供的drawImage方法，把Video的當前畫面渲染到畫布上， 最終經過toDataURL方法能夠導出圖片的base64編碼，基本就完成了圖片截圖的功能。

基本介紹

H5 Video是不提供截圖的API的， 視頻截圖須要藉助Canvas，經過Canvas提供的drawImage方法，把Video的當前畫面渲染到畫布上， 最終經過toDataURL方法能夠導出圖片的base64編碼，基本就完成了圖片截圖的功能。

功能實現

Canvas接口介紹

drawImage接口

在畫布上繪製圖像、畫布或視頻，也可以繪製圖像的某些部分，以及/或者增長或減小圖像的尺寸，主要參數爲：

參數	描述
img	規定要使用的圖像、畫布或視頻。
sx	可選。開始剪切的 x 座標位置。
sy	可選。開始剪切的 y 座標位置。
swidth	可選。被剪切圖像的寬度。
sheight	可選。被剪切圖像的高度。
dx	在畫布上放置圖像的 x 座標位置。
dy	在畫布上放置圖像的 y 座標位置。
dwidth	可選。要使用的圖像的寬度。（伸展或縮小圖像）
dheight	可選。要使用的圖像的高度。（伸展或縮小圖像）

參考一下這個圖應該就比較清楚的了：

看一個例子，好比一個視頻是640X480，如今須要截取下半部分：

function(){
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  var video=document.getElementByTagName("video");
  ctx.drawImage(video,0,240,640,240,0,0,640,240);
};

toDataURL接口

方法返回一個包含圖片展現的 data URI 。可使用 type 參數其類型，默認爲 PNG 格式。圖片的分辨率爲96dpi

參數	描述
type	可選。圖片格式，默認爲 image/png
encoderOptions	可選。在指定圖片格式爲 image/jpeg 或 image/webp的狀況下，能夠從 0 到 1 的區間內選擇圖片的質量。若是超出取值範圍，將會使用默認值 0.92。其餘參數會被忽略

好比設置導出圖片的質量：

var fullQuality = canvas.toDataURL("image/jpeg", 1.0);
var mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
var lowQuality = canvas.toDataURL("image/jpeg", 0.1);

導出圖片時需注意的：

• 若是畫布的高度或寬度是0，那麼會返回字符串「data:,」。
• 若是傳入的類型非「image/png」，可是返回的值以「data:image/png」開頭，那麼該傳入的類型是不支持的。
• Chrome支持「image/webp」類型。
• 圖片地址或者視頻地址須要支持跨越訪問，而且在 img或video Dom元素上添加屬性crossOrigin:"anonymous"

<video crossOrigin:"anonymous"></video>
<img crossOrigin:"anonymous"></img>

Aliplayer的截圖功能

Alilayer裏實現的截圖除了截圖一張圖片，還能夠添加水印，還能夠截取鏡像的視頻，效果以下：

截圖功能介紹

建立Canvas，設置大小爲實際視頻的大小，根據視頻的鏡像方向，對Canvas作相應的處理，代碼以下：

var canvas = document.createElement('canvas'), 
    video = that._player.tag,
canvas.width =video.videoWidth,//視頻原有尺寸 
canvas.height = video.videoHeight;//視頻原有尺寸 
var ctx = canvas.getContext('2d');
ctx.save();  
//判斷用戶是否對視頻作過鏡像
var image = that._player.getImage();
if(image == "vertical")//垂直鏡像
{
   ctx.translate(0,canvas.height);
   ctx.scale(1, -1);
}
else if(image == "horizon")//水平鏡像
{
    ctx.translate(canvas.width, 0);
    ctx.scale(-1, 1);
}
//視頻的當前畫面渲染到畫布上
ctx.drawImage(video, 0, 0, w, h);
ctx.restore();

水印功能介紹

Aliplayer水印支持添加的位置、字體、畫筆顏色和填充樣式，在建立播放器的時候指定，代碼以下：

let drawText =>(ctx, options)
{
    var watermark = options.snapshotWatermark;
    if(watermark && watermark.text)
    {
        //設置字體樣式
        ctx.font = watermark.font;
        //設置字體填充顏色
        if(watermark.fillColor)
        {
            ctx.fillStyle = watermark.fillColor;
            ctx.fillText(watermark.text, watermark.left, watermark.top);
        }
        //設置畫筆顏色
        if(watermark.strokeColor)
        {
            ctx.strokeStyle = watermark.strokeColor;
            ctx.strokeText(watermark.text, watermark.left, watermark.top);
        }
        //畫布上畫出水印
        ctx.stroke();
    }
}

 

做者： nahom
原文連接 本文爲雲棲社區原創內容，未經容許不得轉載。