Vue 视频截取第一帧图片 |
您所在的位置：网站首页 › 视频取帧图片 › Vue 视频截取第一帧图片 |
|
Vue-视频截取第一帧图片-组件
Video to Image开发前准备开始使用引入载入组件使用
组件文件写在最后
Video to Image
关于vue下视频截取第一帧网上方法众多, 我这边总结了一下并且归纳成组件, 希望对为此困扰的你提供一些帮助, 仅需要做一点点的修改页,本文内的代码可以复制后直接使用 ! 开发前准备 确定为vue环境且不是Vue 1;本组件附带了转成图片后的上传功能, 确定您安装了axios, 若不需要, 可以返回图片的file或blob 开始使用我是把组件代码存放在@/components/videoToImg 当然您可以自行修改 在需要此功能的使用的vue文件内写入以下 引入 import videotoimg from '@/components/videoToImg' 载入组件 components: { videotoimg }, 使用 // 对应数据 > data: fileObj = { src: blob:http://192.168.3.15:9528/c1df8e08-039b-4da8-a653-4b93f3747d36, // 选取的视频文件 videoW: number, // 视频宽度 单位为px videoH: number, // 视频高度 单位为px }; // 这里是视频上传成功后返回给你的参数 > methods: onSuccess: url => { url = { imgUrl: "/upload/image/20201124/1331153160697417728.jpg" }} 组件文件这里我将文件命名为@/components/videoToImg/index.vue 截图 {{ videoW }} import { getRequestHeader } from "@/utils/auth"; // 这里是获取我自己的请求头 可以忽略 或者删除 import axios from "axios"; export default { props: { fileObj: { type: Object, default: {}, require: true, }, }, name: "videotoimg", watch: { fileObj: { handler(newVal, oldVal) { console.log(newVal, oldVal); this.onClean(); this.videoW = newVal.videoW; this.videoH = newVal.videoH; this.cutPicture(); }, }, }, data() { return { imgSrc: "", videoW: "", videoH: "", headers: getRequestHeader(), uploadUrl: process.env.BASE_API + "v1/general/resource/upload_video", // 截取后上传的地址 }; }, methods: { onClean() { this.imgSrc = ""; this.videoW = ""; this.videoH = ""; }, cutPicture() { let area = document.querySelector("#videoArea"); area.innerHTML = ` |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |