阿里云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,现在需要截取下半部分: