如何用未保存的摄像头图像设置Fabric.js画布背景？

开发者阿泽

2026-7-7

摄像头捕获照片结合Fabric.js编辑的问题

我正在使用Media Capture and Streams API初始化摄像头，允许用户从摄像头流中捕获照片；同时尝试用Fabric.js让用户编辑/标记这些照片。

HTML结构

我的HTML包含如下canvas和video元素：

<canvas id="img-canvas"> </canvas>
<video id="img-stream" autoplay></video>

摄像头初始化代码

我通过以下代码启动摄像头：

navigator.mediaDevices
    .getUserMedia(constraints)
    .then((stream) => {
        const videoTracks = stream.getVideoTracks();
        video.srcObject = stream;
    })
    .catch((error) => {
       // 错误处理
    });

照片捕获代码

通过以下代码从实时流中捕获照片：

const context = canvas.getContext("2d");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
return canvas.toDataURL("image/png"); // 返回可用于设置<img> src的base64字符串

Fabric.js画布初始化

并通过以下代码初始化Fabric.js画布：

canvas = new fabric.Canvas("img-canvas");

遇到的问题

当使用Fabric.js向画布添加图形或其他对象时，捕获的图像会消失。例如添加圆形的代码：

canvas.add(new fabric.Circle({
    id: "circle1",
    left: canvas.width / 2,
    top: canvas.height / 2,
    fill: 'rgba(0,0,0,0)',
    stroke: 'red',
    width: 50,
    height: 50,
    originX: 'center',
    originY: 'center',
    strokeWidth: 3,
    radius: 20
}));

尝试用Fabric.js设置画布背景，但似乎需要有效的URL：

canvas.setBackgroundImage(imageData, canvas.renderAll.bind(canvas));

尝试用<img>元素添加图像到Fabric.js画布：将<img>标签的src设置为canvas.toDataURL("image/png")的结果（这对<img>元素有效），但仍无法添加成功，代码如下：

var cvsimg = document.getElementById("captured-img");
var image = new fabric.Image(cvsimg, {
    opacity: 1,
    left: 0,
    top: 0,
});
canvas.add(image);