视频 - ＆gt;画布 - ＆gt;图像...以特定分辨率？

Question

我正在使用一个API，我需要以300分辨率捕获jpeg图像。

工作流程为：

1. 使用视频元素从集成摄像头流式传输。
2. “捕捉”视频的照片并将其绘制到画布元素上。
3. 使用.toDataURL（）将图像从画布上移到图像标记。
4. 将该图片发送给API进行验证......

我遇到的问题是我相信在画布上绘制的图像取决于它所在的网页/监视器的分辨率。 虽然我可以改变图像的尺寸，但是使用CSS来缩小两倍于看更高分辨率的东西; API继续吠叫，我发送的图像质量太低了。

我最终需要利用集成摄像头来捕获和传输分辨率为300（或更高）的jpeg，但我无法弄清楚这是否可以单独使用前端代码。

感谢您的帮助：）

Answer 1

虽然未显示，但您可能正在使用视频元素的width和height属性来定义画布元素的大小。

您需要使用的是videoWidth和videoHeight属性，而前者反映的是元素大小，而不是原始视频大小。

如果它仍然太小（由视频本身引起），你总是使用视频的宽高比来放大元素：

var aspect = video.videoHeight / video.videoWidth;
var wantedWidth = 1280;   // or use height
var height = Math.round(wantedWidth * aspect);

现在您可以将视频绘制到画布：

canvas.width = wantedWidth;
canvas.height = height;

ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

更新如果你是＆＃34; 300＆＃34;请参阅 DPI ，然后查看 this answer 。重要的是要注意像素是图像，视频和屏幕唯一有效且可用的单位（相对于英寸，厘米等）。 DPI以纯粹任意的形式用于建立纸张等物理介质与基于像素的源之间的关系，但不会改变实际的像素分辨率。 F.ex. HD 1920x1080的视频在10 DPI和1000 DPI时都是1920x1080.DPI并不重要。