Javascript 将从相机拍摄的图像转换为画布的侧面为灰色

我使用香草javascript从相机中捕捉图像，并将其放到画布中。它可以在Chrome Android上正常工作，但在iOS Safari上却不行。如屏幕截图所示，图像上有一个灰色区域。我需要做些什么才能不被渲染

摄像机的JavaScript

navigator.mediaDevices.getUserMedia({
    'audio': false,
    'video': {
        facingMode: 'environment'
    }
}).then(stream => {
    this.VIDEO.srcObject = stream;
    this.VIDEO.addEventListener('loadeddata', async () => {
        this.VIDEO.width = this.VIDEO.videoWidth;
        this.VIDEO.height = this.VIDEO.videoHeight;
        this.CANVAS.width = this.VIDEO.videoWidth;
        this.CANVAS.height = this.VIDEO.videoHeight;
        resolve();
    }, false);
}).catch(error => {
    console.error(error);
    self.MESSAGE.textContent = error;
});

用于在画布和预览窗口上绘制的JavaScript

self.CONTEXT.drawImage(self.VIDEO, 0, 0, self.VIDEO.width, self.VIDEO.height);

let imgDataURL = self.CANVAS.toDataURL('image/png');
self.PLANT.src = imgDataURL;
self.POLAROID.style.backgroundImage = `url(${imgDataURL})`;

---

我想这与图像比率以及如何将图像作为CSS背景图像处理有关。当原始图像为纵向格式且您的

polarioid

元素具有二次形状时，图像将根据其高度进行拟合，并且元素的背景将发光。可能会设置不同的CSS

背景大小

属性（cover或contain）。没有要测试的ios safari，但您能否确认此小提琴也会渲染灰色部分@托马科，宝丽来元素已经在cover属性中。@Kaido，抱歉，因为我可以测试代码笔。我也没有iOS设备，依靠同事的手机。边界就是CSS。灰色区域不是。它是世界的一部分conversion@oninross整个图像是在

宝丽来

元素中渲染的还是被切断的？当您更改宝丽来

的
背景色
或
背景位置
属性时会发生什么情况？当您的相机的图像比率与宝丽来的元素比率不匹配时，当您想要显示整个图像时，总会有一个边框。顺便问一下，Chrome上会发生什么？图像是否拉伸或放大？