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

Question

我正在使用一个 API 来捕获分辨率为 300 的 jpeg 图像。

工作流程是：

使用视频元素从集成摄像头流式传输。
"Snap" 视频的照片并将其绘制到 canvas 元素上。
使用 .toDataURL() 将图像从 canvas 转移到图像标签。
将该图像发送到 API 进行验证...

我运行遇到的问题是我相信在 canvas 上绘制的图像取决于 webpage/monitor 的分辨率】开着。虽然我可以更改图像的尺寸，但使用 CSS 可以将两倍大的图像缩小到 看起来 更高分辨率； API 一直咆哮着说我给他们发的图片质量太差了。

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

感谢您的帮助:)

Answer 1

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

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

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

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 无关紧要。

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

Video -> Canvas -> Image ... at a specific resolution?

javascript

video

canvas

resolution