vue前端开发截图功能,vue使用canvas流程图

　　本文主要详细介绍Vue canvas的视频截图功能。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　开发过程中有一个实际问题。上传的视频需要提供视频封面(需要视频封面)。你可以自己制作和上传封面，但这需要你离开网站，用其他方式制作封面，所以体验并不友好。于是，第一个想到了方案：上传视频时，如果人上传封面失败，视频的第一帧会被自动截取为封面，但这会导致一种情况：视频的第一帧是黑色的，导致封面是黑色的。因此考虑视频上传后，在播放中由人员自行截取画面作为视频封面。

　　简单效果如图：

　　前端代码如下：

　　模板

　　差异

　　Video= 3359 { {视频地址}}.mp4

　　crossOrigin=Anonymous 控件style= width:300 px；/视频

　　img :src=imgSrc

　　差异

　　el-button @click=cutPicture

　　屏幕上显示程序运行的图片

　　/el-button

　　/div

　　画布id= my canvas width= 343 height= 200 /canvas

　　/div

　　/模板

　　脚本

　　导出默认值{

　　名称：视频，

　　data () {

　　返回{

　　imgSrc: ，

　　视频数据：{}，

　　}

　　},

　　方法：{

　　//捕捉当前帧的图片

　　过场动画(){

　　让self=这个

　　var v=document . query select( video )

　　let canvas=document . getelementbyid( my canvas )

　　//canvas . set attribute( cross origin ， Anonymous )

　　var ctx=canvas.getContext(2d )

　　ctx.drawImage(v，0，0，343，200)

　　var oGrayImg=canvas . toda taurl( image/JPEG )

　　//this.imgSrc=oGrayImg

　　//axios请求，将截图发送到后端API。

　　这个。$axios.post(测试/上传，{file: oGrayImg})

　　},

　　}

　　}

　　/脚本

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

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