canvas截取视频中的图片,canvas 视频播放

前言

　　这次用canvas.drawImage()实现截图功能。对于api支持的dom元素和基本参数，点击下面的查询连接画布渲染context2d.drawimage()

处理过程

　　我这次的需求是截取多人视频中某个视频瞬间的截图，并显示直接用于该视频的原生视频标签。

　　1.首先，获取视频元素并创建画布。

　　const video=document . getelementbyid( video )；const canvas=document . createelement( canvas )；CTX=canvas.getContext (2D) 2。截图的像素大小和优化

　　DevicePixelRatio可以返回当前显示设备的物理像素分辨率与CSS像素分辨率的比值，可以更好的还原真实的视频场景。详情请向官方查询。

　　const ratio=window . devicepixelrratio 1；canvasCtx.scale(比率，比率)；3.加工画布画布

　　//画布大小与图片大小一致，截图中没有多余的canvas . width=video . offsetwidth * ratio；canvas . height=video . offsetheight * ratio；4.生成canvas，转换成你需要的格式。我这里直接转换成base64。

　　canvasCtx.drawImage(video，0，0，canvas.width，canvas . height)const img base 64=canvas . toda taurl( image/png )；关于用canvas对某一时刻的视频录像进行截图的这篇文章到此为止。更多相关画布视频截图，请搜索往期文章或继续浏览下方相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。