文档章节

阿里云Aliplayer高级功能介绍(一):视频截图

阿里云云栖号
 阿里云云栖号
发布于 2019/01/09 15:47
字数 1046
阅读 941
收藏 0

摘要: 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 可选。要使用的图像的高度。(伸展或缩小图像)

参考一下这个图应该就比较清楚的了:

91b355fc77bab0f1a8d1bdfcdb355b3896063dd6

看一个例子,比如一个视频是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里实现的截图除了截图一张图片,还可以添加水印,还可以截取镜像的视频,效果如下:

6a491371b3e1bf20e5bf38badebe8916e0b58b19

截图功能介绍

创建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
原文链接
本文为云栖社区原创内容,未经允许不得转载。

© 著作权归作者所有

阿里云云栖号
粉丝 462
博文 1558
码字总数 3823668
作品 0
朝阳
私信 提问
加载中

评论(0)

阿里云 Aliplayer高级功能介绍

Aliplayer除了一些基本功能,还有一些高级的功能,可能需要云端配合才可以使用,或者播放器本身需要做更多的配置,希望写一些文件介绍如何使用和介绍一下简单的实现原来,让用户了解这些功能...

nahom
2019/01/09
0
0
阿里云 Aliplayer高级功能介绍(二):缩略图

基本介绍 Aliplayer提供了缩略图的功能,让用户在拖动进度条之前知道视频的内容,用户能够得到很好的播放体验,缩略图是显示在Controlbar的上面,并且包含当前的时间,阿里云的媒体处理服务提...

zhaowei121
2019/01/09
8
0
阿里云 Aliplayer高级功能介绍(三):多字幕

基本介绍 国际化场景下面,播放器支持多字幕,可以有效解决视频的传播障碍难题,该功能适用于视频内容在全球范围内推广,阿里云的媒体处理服务提供接口可以生成多字幕,现在先看一下具体的效...

zhaowei121
2019/01/09
5
0
阿里云 Aliplayer高级功能介绍(七):多分辨率

基本介绍 网络环境比较复杂、网速不稳定,Aliplayer提供了多分辨率播放的模式,用户可以手工切换分辨率和播放器选择最优分辨率,基本UI如下: Source模式 source的方式指定多个清晰度的地址,...

zhaowei121
2019/01/28
55
0
阿里云 Aliplayer高级功能介绍(八):安全播放

基本介绍 如何保障视频内容的安全,不被盗链、非法下载和传播,阿里云视频点播已经有一套完善的机制保障视频的安全播放: 更多详细内容查看点播内容安全播放,H5的Aliplayer对于上面的安全机制...

隽阜
2019/01/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

基于Spring Boot2.0.2版本--SpringBoot整合Quartz调度框架

一、引言 定时任务调度是Java开发中不可或缺的重要部分,但是Java自带的Time等任务调度类在实际项目中不好用。所以Quartz和Spring Task就成了我们项目开发技术选型最多的,在这里我们着重探讨...

修改bug工程师
9分钟前
9
0
hbase查询速度优化

优化思路 1.构建良好的索引 2.查询时只查需要的字段 3.java使用habse原生方式链接hbase spring集成的hbase链接和查询方式 @Configurationpublic class HbaseConfig { @Bean publi...

qiaoaniu
10分钟前
7
0
Python3 +scrapy爬虫识别验证码(二)点触验证码识别

感谢作者分享-http://bjbsair.com/2020-04-07/tech-info/30742.html 点触验证码主要有点击文字或者点击图片,例如 如何通过点击图片当中的文字或者图片进行识别呢?那么这里介绍一下超级鹰平...

曹长卿
11分钟前
10
0
Jackson deserialize using generic

某度找出来的实在惨不忍睹,还是记一下吧. 用jackson 把 Json string 转换成 java object 大家都会,比较简单. 怎么转带泛型的类呢,头一遭儿. 参考链接: https://stackoverflow.com/questions...

园领T
12分钟前
7
0
学习Tomcat - 类加载器

Servlet规范定义的类加载顺序 在Servlet规范中有对web应用程序类的加载方式作出建议,重要的有两点: 容器要加载某个类时,类加载器首先应该加载本地web应用程序中“WEB-INF/classes”路径中...

閒散人員
13分钟前
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部