Javascript 如何使用画布解析视频中的图像数据，而不将画布附加到页面？

我有

网络摄像头

类，用于从网络摄像头捕获数据。这个类将数据流传输到视频标签，并将其绘制在画布上。我还有

QRScanner

类，用于从画布的

imageData

解析QR码

class Webcam {
    constructor(videoTag, canvasTag) {
        // using for real-time video capture
        this.videoTag = videoTag;
        // qr scanner parses imageData from this element
        this.canvasTag = canvasTag;
        // waiting for qr code here
        this.captureArea = {
            x: 100,
            y: 60,
            width: 120,
            height: 120
        }

        // getting access to webcam
        navigator.mediaDevices
            .getUserMedia({
                video: true
            })
            .then(stream => this.videoTag.srcObject = stream)
            .catch(console.log);
    }

    capture() {
        setInterval(() => {
            let ctx = this.canvasTag.getContext('2d');
            ctx.drawImage(this.videoTag, 0, 0, 320, 240);
            // drawing capture area
            ctx.strokeStyle = 'red';
            // this arguments also should be passed into qr scanner
            ctx.strokeRect(
                this.captureArea.x,
                this.captureArea.y,
                this.captureArea.width,
                this.captureArea.height
            );
        }, 100);
    }
}

class QRScanner {
    constructor(canvas, router, captureArea) {
        this.canvas = canvas;
        this.router = router;
        this.captureArea = captureArea;
        this.qrCode = null;
    }

    scan() {
        setInterval(() => {
            let imageData = this.canvas
                .getContext('2d')
                .getImageData(
                    this.captureArea.x,
                    this.captureArea.y,
                    this.captureArea.width,
                    this.captureArea.height
                ).data;

            // parsing qr code from canvas
            this.qrCode = jsQR(imageData, this.captureArea.width, this.captureArea.height);

            if (this.qrCode) {
                router.redirect(Router.pages.result, this.qrCode);
                let resultPage = document.querySelector('#result .qr-code-data');
                resultPage.innerHTML = this.qrCode.data;
            }
        }, 100);
    }
}

<div id="scan">
    <video id="video" width="320" height="240" autoplay title="Real-time video stream from webcam"></video>
    <canvas id="preview" width="320" height="240" title="Capture area for QR code"></canvas>
</div>

class网络摄像头{
构造器（videoTag，canvasTag）{
//用于实时视频捕获
this.videoTag=videoTag；
//qr扫描仪解析来自此元素的图像数据
this.canvasTag=canvasTag；
//在这里等待二维码
this.captureArea={
x:100，
y:60，
宽度：120，
身高：120
}
//访问网络摄像头
navigator.mediaDevices
.getUserMedia({
视频：真的
})
.then（stream=>this.videoTag.srcObject=stream）
.catch（console.log）；
}
捕获（）{
设置间隔（（）=>{
设ctx=this.canvasTag.getContext（'2d'）；
ctx.drawImage（this.videoTag，0,0,320,240）；
//绘图捕捉区
ctx.strokeStyle=‘红色’；
//此参数也应传递到qr扫描仪中
ctx.strokeRect(
这个.captureArea.x，
这是captureArea.y，
此.captureArea.width，
此.captureArea.height
);
}, 100);
}
}
类QRS扫描仪{
构造器（画布、路由器、captureArea）{
this.canvas=画布；
this.router=路由器；
this.captureArea=captureArea；
this.qrCode=null；
}
扫描（）{
设置间隔（（）=>{
让imageData=this.canvas
.getContext（'2d'）
.getImageData(
这个.captureArea.x，
这是captureArea.y，
此.captureArea.width，
此.captureArea.height
).数据；
//从画布解析二维码
this.qrCode=jsQR（imageData，this.captureArea.width，this.captureArea.height）；
if（此.qrCode）{
重定向（router.pages.result，this.qrCode）；
让resultPage=document.querySelector（“#result.qr码数据”）；
resultPage.innerHTML=this.qrCode.data；
}
}, 100);
}
}

这可以按预期工作，但当我从页面中删除

canvas

元素并尝试使用临时画布（使用

document.createElement（'canvas'）

而不附加到页面）时，此解决方案不起作用。是否可以使用临时

画布

获取

视频

图像数据

，而无需将此画布附加到页面

---

另外，我使用的画布元素在未明确设置时具有默认的宽度高度。由于您从未为您创建的画布设置这些值，它将默认为300 x 150，至少对于Chrome，其他浏览器的实现可能会有所不同

var canvas=document.createElement（“canvas”）；
console.log（canvas.width，canvas.height）

为什么要做

ctx.drawImage（canvas，0,0320240）就在绘制
视频标签之后
？画布元素也有一个默认的宽度和高度，当它们没有设置时，你从来没有为你创建的画布设置这些元素，所以它将默认为300 x 150（至少这是我的chrome的默认值）。所以你的形象会被剪掉。试着将这些设置为您需要的，然后尝试again@PatrickEvans这是打字错误！谢谢，我从代码中删除了它。@PatrickEvans我在临时画布上设置了宽度和高度，所有工作都很好！谢谢！如果您添加您的评论作为答案-我将接受它。300×150是每个规格。所有浏览器都将使用这些值作为默认值。不要使用硬编码值，而且当处理网络摄像头流时，每个用户都会有不同的设备输出不同质量的视频。改用videoElement的videoWidth和videoHeight。