我正在尝试从手机相机获取图像到画布,以便稍后保存。
我的问题是当我使用iPhone 13 Pro时,画布上的图像比它应该的更亮。这个问题只发生在iPhone 13 Pro上,其他ios和android手机没有这个问题。
这是我如何传递视频流到画布
let video = document.createElement('video');
let canvas = document.getElementById('canvas');
let ctx = container.getContext('2d');
navigator.mediaDevices.getUserMedia({
audio: false,
video: {
width: 1920,
height: 1020,
facingMode: 'environment'
}}).then(stream => {
window.stream = stream;
video.srcObject = stream;
const track = stream.getVideoTracks()[0];
video.setAttribute('playsinline', 'true');
video.play();
requestAnimationFrame(() => {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
});
})
<video>
元素中的图像保持正常亮度(iPhone 13 pro)
图片来自iphone 13 pro
图片来自android手机
这是getUserMedia中width: 1920, height: 1020,
参数的问题。我把它删除了,现在它可以正常工作了。