javascript - 视频 -> Canvas -> 图像 ... 在特定分辨率下？

Question

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

工作流程是:

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

我遇到的问题是，我相信在 Canvas 上绘制的图像取决于其所在的网页/显示器的分辨率。虽然我可以更改图像的尺寸，但可以使用 CSS 将尺寸缩小两倍以看起来更高分辨率； API 不断回击说我向他们发送的图像质量太低。

我最终需要利用集成摄像头来捕获和传输分辨率为 300(或更高)的 jpeg，但我无法确定单独使用前端代码是否可行。

感谢您的帮助:)

Answer 1

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

您需要使用的是 videoWidth和 videoHeight属性，因为前者反射(reflect)的是元素大小，而不是原始视频大小。

如果仍然太小(由视频本身引起)，您总是使用视频的宽高比放大元素:

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

现在您可以将视频绘制到 Canvas 上了:

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

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

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