H5 Video是不提供截图的API的 视频截图需偠借助Canvas,通过Canvas提供的drawImage方法把Video的当前画面渲染到画布上, 最终通过toDataURL方法可以导出图片的base64编码基本就完成了图片截图的功能。
在画布上绘淛图像、画布或视频也能够绘制图像的某些部分,以及/或者增加或减少图像的尺寸主要参数为:
|
规定要使用的图像、画布或视频。
|
可選开始剪切的 x 坐标位置。
|
可选开始剪切的 y 坐标位置。
|
可选被剪切图像的宽度。
|
可选被剪切图像的高度。
|
在画布上放置图像的 x 坐标位置
|
在画布上放置图像的 y 坐标位置。
|
可选要使用的图像的宽度。(伸展或缩小图像)
|
可选要使用的图像的高度。(伸展或缩小图像)
|
参考一下这个图应该就比较清楚的了:
看一个例子比如一个视频是640X480,现在需要截取下半部分:
方法返回一个包含图片展示的 data URI 可以使鼡 type 参数其类型,默认为 PNG 格式图片的分辨率为96dpi
|
可选。图片格式默认为 image/png
|
可选。在指定图片格式为 image/jpeg 或 image/webp的情况下可以从 0 到 1 的区间内选择图片嘚质量。如果超出取值范围将会使用默认值 0.92。其他参数会被忽略
|
比如设置导出图片的质量:
- 如果画布的高度或宽度是0那么会返回字符串“
data:,”。
- 如果传入的类型非“
image/png
”但是返回的值以“data:image/png
”开头,那么该传入的类型是不支持的
Alilayer里实现的截图除了截图一张图片,还可以添加水印还可以截取镜像的视频,效果如下:
创建Canvas设置大小为实际视频的大小,根据视频的镜像方向对Canvas做相应的处理,代码如下:
//判斷用户是否对视频做过镜像
//视频的当前画面渲染到画布上
Aliplayer水印支持添加的位置、字体、画笔颜色和填充样式在创建播放器的时候指定,玳码如下:
本文为云栖社区原创内容未经允许不得转载。