基本介紹
H5 Video是不提供截圖的API的， 視頻截圖需要借助Canvas，通過Canvas提供的drawImage方法，把Video的當(dāng)前畫面渲染到畫布上， 最終通過toDataURL方法可以導(dǎo)出圖片的base64編碼，基本就完成了圖片截圖的功能。

功能實(shí)現(xiàn)
Canvas接口介紹
drawImage接口
在畫布上繪制圖像、畫布或視頻，也能夠繪制圖像的某些部分，以及/或者增加或減少圖像的尺寸，主要參數(shù)為：
參數(shù) 描述
img 規(guī)定要使用的圖像、畫布或視頻。
sx 可選。開始剪切的 x 坐標(biāo)位置。
sy 可選。開始剪切的 y 坐標(biāo)位置。
swidth 可選。被剪切圖像的寬度。
sheight 可選。被剪切圖像的高度。
dx 在畫布上放置圖像的 x 坐標(biāo)位置。
dy 在畫布上放置圖像的 y 坐標(biāo)位置。
dwidth 可選。要使用的圖像的寬度。（伸展或縮小圖像）
dheight 可選。要使用的圖像的高度。（伸展或縮小圖像）
參考一下這個(gè)圖應(yīng)該就比較清楚的了：

看一個(gè)例子，比如一個(gè)視頻是640X480，現(xiàn)在需要截取下半部分：

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接口
方法返回一個(gè)包含圖片展示的 data URI 。可以使用 type 參數(shù)其類型，默認(rèn)為 PNG 格式。圖片的分辨率為96dpi

參數(shù) 描述
type 可選。圖片格式，默認(rèn)為 image/png
encoderOptions 可選。在指定圖片格式為 image/jpeg 或 image/webp的情況下，可以從 0 到 1 的區(qū)間內(nèi)選擇圖片的質(zhì)量。如果超出取值范圍，將會(huì)使用默認(rèn)值 0.92。其他參數(shù)會(huì)被忽略
比如設(shè)置導(dǎo)出圖片的質(zhì)量：

var fullQuality = canvas.toDataURL("image/jpeg", 1.0);
var mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
var lowQuality = canvas.toDataURL("image/jpeg", 0.1);
導(dǎo)出圖片時(shí)需注意的：

如果畫布的高度或?qū)挾仁?，那么會(huì)返回字符串“data:,”。
如果傳入的類型非“image/png”，但是返回的值以“data:image/png”開頭，那么該傳入的類型是不支持的。
Chrome支持“image/webp”類型。
圖片地址或者視頻地址需要支持跨越訪問，并且在 img或video Dom元素上添加屬性crossOrigin:"anonymous"
<video crossOrigin:"anonymous"></video>
<img crossOrigin:"anonymous"></img>

截圖功能介紹
創(chuàng)建Canvas，設(shè)置大小為實(shí)際視頻的大小，根據(jù)視頻的鏡像方向，對(duì)Canvas做相應(yīng)的處理，代碼如下：

var canvas = document.createElement('canvas'),

video = that._player.tag,

canvas.width =video.videoWidth,//視頻原有尺寸
canvas.height = video.videoHeight;//視頻原有尺寸
var ctx = canvas.getContext('2d');
ctx.save();
//判斷用戶是否對(duì)視頻做過鏡像
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);

}
//視頻的當(dāng)前畫面渲染到畫布上
ctx.drawImage(video, 0, 0, w, h);
ctx.restore();
水印功能介紹
Aliplayer水印支持添加的位置、字體、畫筆顏色和填充樣式，在創(chuàng)建播放器的時(shí)候指定，代碼如下：

let drawText =>(ctx, options)
{

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

}

總結(jié)

以上是生活随笔為你收集整理的阿里云Aliplayer高级功能介绍(一)：视频截图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。