首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >视频->画布->图像。在特定的决议下?

视频->画布->图像。在特定的决议下?
EN

Stack Overflow用户
提问于 2016-04-22 15:13:28
回答 1查看 4.4K关注 0票数 3

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

工作流程是:

  1. 使用视频元素从集成相机流。
  2. “抓拍”视频的照片,并将其绘制到画布元素上。
  3. 使用.toDataURL()将图像从画布转移到图像标记。
  4. 将图像发送到API以进行验证.

我遇到的问题是,我认为画布上的图像取决于网页/监视器的分辨率。虽然我可以改变图像的尺寸,但是使用CSS来缩小一些大到更高分辨率的东西;API不断回击,我正在发送一个质量太低的图像。

我最终需要使用集成摄像头来捕获和传输分辨率为300 (或更高)的jpeg,但我无法确定单靠前端代码是否可能做到这一点。

谢谢你的帮助:)

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-04-22 16:35:51

虽然没有显示,但是您可能正在使用视频元素的widthheight属性来定义画布元素的大小。

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

如果它仍然太小(由视频本身造成),则始终使用视频的纵横比来扩展元素:

代码语言:javascript
运行
复制
var aspect = video.videoHeight / video.videoWidth;
var wantedWidth = 1280;   // or use height
var height = Math.round(wantedWidth * aspect);

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

代码语言:javascript
运行
复制
canvas.width = wantedWidth;
canvas.height = height;

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

更新如果你用"300“来指this answer,然后看一看this answer。重要的是要知道像素是图像、视频和屏幕(相对于英寸、厘米等)的唯一有效和可用的单位。DPI被用于纯粹的任意形式来建立像纸张这样的物理媒体和基于像素的源之间的关系,但是并不改变实际的像素分辨率。F.ex。HD 1920x1080中的视频将是1920x1080在10 DPI以及在1000 DPI。新闻部不重要。

票数 12
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/36797514

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档