js摄像捕获人脸截图(video截转canvas)_javascript如何直接调用video的抓图接口-CSDN博客

本文链接：https://blog.csdn.net/qq_50962973/article/details/134438520

前言

如果不在意视频白边和截图后的白边时就可以看其他普通文章利用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);