使用aliplayer,需要在进行某个操作时对直播进行截图并添加水印,得到的是base64图片
var canvas = document.createElement('canvas');
video = player.tag;
canvas.width = video.videoWidth;//视频原有尺寸
canvas.height = video.videoHeight;//视频原有尺寸
var ctx = canvas.getContext('2d');
ctx.save();
//判断用户是否对视频做过镜像
var image = 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, canvas.width, canvas.height);
for (var i = 0; i < 6; i++) {
phone += " " + phone;
}
ctx.restore();
for (let i = 0; i < 100; i++) {
ctx.rotate((-45 * Math.PI) / 180); // 水印初始偏转角度
ctx.font = "bold 16px microsoft yahei";
ctx.fillStyle = "rgba(255,255,255,0.5)";
ctx.fillText(phone, -600, i * 30);//这个地方将30值调大一些,水印信息的上下间距就会更高一些
ctx.rotate((45 * Math.PI) / 180); // 把水印偏转角度调整为原来的,不然他会一直转
}
var url = canvas.toDataURL("image/jpeg");
效果图如下: