视频->画布->图片...以特定分辨率？

Question

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

工作流程为：

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

我遇到的问题是，我认为在画布上绘制的图像取决于它所在的网页/监视器的分辨率。虽然我可以改变图像的尺寸，使用CSS来缩小东西是两倍于寻找更高的水库; API一直在回叫我向他们发送的图像质量太低。

我最终需要利用集成摄像头来捕获和传输分辨率为300（或更高）的jpeg，但是我不知道仅靠前端代码是否可以实现。

谢谢您的帮助 ：）

Answer 1

尽管未显示，但您可能正在使用video元素的width和height属性来定义canvas元素的大小。

您需要使用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);

如果您将“ 300”参考DPI，请更新，然后查看此答案。请务必注意，像素是图像，视频和屏幕（相对于英寸，厘米等）的唯一有效且可用的单位。DPI以纯粹任意的形式用于建立物理介质（如纸张和基于像素的源）之间的关系，但不会更改实际的像素分辨率。F.ex. HD 1920x1080的视频在10 DPI和1000 DPI时将是1920x1080。DPI无关紧要。