AR尝试（2）---给当前屏幕截图

最新推荐文章于 2025-07-20 22:05:42 发布

奥破1104x

最新推荐文章于 2025-07-20 22:05:42 发布

阅读量263

点赞数

CC 4.0 BY-SA版权

分类专栏： javaScript ar html 文章标签： html javaScript ar

本文链接：https://blog.youkuaiyun.com/qq_39830579/article/details/97259949

在AR开发过程中，尝试使用canvas的drawImage方法裁剪视频屏幕截图遇到困难，发现参数含义因Image和Video类型而异。最终采取两步走策略，先用一个canvas截取完整视频，再用另一个canvas裁剪image，通过Promise处理图片加载延迟问题，成功实现截图功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在AR尝试（1）中实现了以摄像头为底，但是采用的方法是通过marginLeft来"裁"去左边，通过设置html左右不能滑动来"裁"去右边，但是video的实际宽度还是比window.innerWidth大的。
现在要实现对当前屏幕进行截图，第一想法就是通过canvas的drawImage方法来对屏幕进行裁剪，但是尝试了很多次，试过3、5、9个参数的，呈现效果均是让人匪夷所思。最后在一篇博文中看到，drawImage对于裁剪Image类型和Video类型，参数代表的含义是不一样的。QwQ
找到了病症之后又开始无尽的试试试…真没想到这个截图能卡住我1天半的时间，啊我好菜55555
最后实在受不了了，换了种方法，既然裁剪Video匪夷所思，既然裁剪Image可控。
那。。。
干脆就直接裁剪image吧。
先用一个canvas来把整个video给截下来，然后用另一个canvas来裁刚刚canvas转过来的image。
于是就

  initCanvas() {

         // this.canvasElement = document.createElement('canvas');
         this.canvasElement = document.getElementById('canvas');
         this.canvasElement.setAttribute('width', window.innerWidth.toString() + 'px');
         this.canvasElement.setAttribute('height', window.innerHeight.toString() + 'px');
         this.canvasContext = this.canvasElement.getContext('2d');

         this.canvasElement2 = document.getElementById('canvas2');
         this.canvasElement2.setAttribute('width', window.innerWidth + 'px'