作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个容器,上面有一个视频元素和一个 mask 图像,如下所示:
<div id="container">
<img id="mask" src="/images/mask.png" width="1078" height="1508" />
<video autoplay="" id="video"></video>
</div>
如你们所见,蒙版图像的宽度为 1078 像素,高度为 1508 像素。视频元素的宽度也是 1078 像素,但高度仅为 807 像素(不必更长)。
Canvas 元素具有相同的宽度和高度。当我尝试拍摄视频快照并将该快照和蒙版图像的副本绘制到 Canvas 时,这两个元素都被拉伸(stretch)到 Canvas 边界之外。
var context = canvas.getContext('2d');
// Draw video
context.drawImage(video, 0, 0);
// Get mask image and draw mask
maskObj.src = document.getElementById("mask").src;
context.drawImage(maskObj, 0, 0);
我知道我可以通过 drawImage()
函数传递更多参数,但我不知道其他参数的确切用途。 This文章说您可以将宽度和高度作为整数传递。但是,如果我执行以下操作:
context.drawImage(video, 0, 0, 1078, 807);
context.drawImage(maskObj, 0, 0, 1078, 1508);
它仍然在 Canvas 边界之外绘制元素。无法真正找出我做错了什么,所以感谢所有帮助。
例子;
最佳答案
它应该发生的唯一方法是使用 css 设置 Canvas 的大小。尝试使用 html 属性更改 Canvas 的大小,或者添加以下内容:
canvas.width = 1078;
canvas.height = 1508;
var context = canvas.getContext('2d');
Canvas 的分辨率仅取决于这些属性。 css 宽度和高度只是拉伸(stretch)它。
关于javascript - 来自视频和图像/蒙版的 Canvas drawImage() 尺寸,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22683429/
我是一名优秀的程序员,十分优秀!