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

Question

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

工作流程是：

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

我遇到的问题是我相信画布上绘制的图像取决于它所在的网页/显示器的分辨率。 虽然我可以更改图像的尺寸，但使用 CSS 将两倍大的东西按比例缩小到 look 更高的分辨率； 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);

更新如果您通过“300”指代DPI，请查看this answer。请务必注意，像素 是图像、视频和屏幕的唯一有效和可用单位（相对于英寸、厘米等）。 DPI 以纯粹的任意形式用于建立物理介质（如纸张）和基于像素的源之间的关系，但不会改变实际的像素分辨率。前任高清 1920x1080 的视频在 10 DPI 和 1000 DPI 下都是 1920x1080。DPI 无关紧要。