前言
如果不在意视频白边和截图后的白边时就可以看其他普通文章 利用ctx.drawImage(video)直接截取即可;
本文章只针对一下情况
下边蓝边框是视频框 有明显的白边 上面红边框是canvas 截图后会有一部分白边
原因解决
视频白边原因
主要是因为摄影头和屏幕尺寸原因 我这是联想笔记如果用我们公司一体机则会是竖着的两条白边
解决:
我们可以在video样式中加上object-fit: cover;属性来使元素平铺。
canvas截取白边问题
这个要在MDN官网上看CanvasRenderingContext2D.drawImage()的具体使用方法
官网标明:
drawImage() 方法在绘制时使用源元素的固有尺寸(以 CSS 像素为单位)。 例如,如果加载图像并在其构造函数中指定可选的大小参数,则必须使用所创建实例的 naturalWidth 和 naturalHeight 属性来正确计算裁剪和缩放区域等内容,而不是 element.width 和 element.height。如果元素是< video >元素,则 videoWidth 和 videoHeight 也是如此,依此类推。
而videoWidth和videoHeight因为没有开放setter接口 所以没法强制修改 我们也可以自己给他写个setter或是修改drawImage() 的截取参数
写setter就算了我太菜了就说下改参数吧
const video = document.getElementById("video");
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let xs //x轴开始位置
let ys //y轴开始位置
let videoxy //取video最小的
if (video.videoWidth > video.videoHeight) {
xs = (video.videoWidth - video.videoHeight) / 2
videoxy = video.videoHeight
ys = 0
} else {
ys = (video.videoHeight - video.videoWidth) / 2
xs = 0
videoxy = video.videoWidth
}
ctx.drawImage(video, xs, ys, videoxy, videoxy, 0, 0, canvas.clientWidth, canvas.clientWidth);
let imgurl = canvas?.toDataURL("image/png", 0.7);
我这样整体绘制的图是绘制video的正方形 这里直接粘代码
注意!!我没有粘启动video代码
效果图
整体是不会有什么拉伸缩减的变形