vuereact视频截图

使用原生js+canvas实现时实视频截图，图片选择，图片预览等功能，js部分可兼容vue和react。

实现思路：

canvas 有自己的drawImage 方法可以传入五个参数第一个就是video，所以要先获取video的元素。
使用canvas drawImage方法创建好了后在通过createEelement创建一个image，使用canvas.toDataURL生成url。
生成出的url是base64格式不能实现在线预览，所以要将base64转为blob，在将blob转换成file对象，有了file对象就可以使用URL.createObjectURL生成可预览的url。

页面元素

<div class="home"><el-row><el-col :span="24"><!--  视频    --><video class="videoName" controls src="../assets/monster.mp4"></video></el-col></el-row><el-row><el-col :span="24"><!--   截图   --><el-button type="primary" round @click="screenshot">点击截图</el-button><!--   选择   --><el-buttontype="success"round@click="clickModel":close-on-click-modal="false":close-on-press-escape="false"v-if="selectedList.length !== 0">选择完成</el-button></el-col></el-row><el-row :gutter="10" style="margin-top: 10px"><!--  截图    --><el-col :span="4" v-for="item in imagesUrl" :key="item" id="row-item"><div:class="`demo-image__placeholder item-xxx${item.id}`"@click="selected(item, `.item-xxx${item.id}`)":key="item.id"><div class="block"><p class="demonstration">{{ item.time }}</p><p class="demonstration">{{ item.videoTime }}</p><el-image :src="item.url" fit="cover" /></div></div></el-col></el-row><el-dialogv-model="dialogVisible"title="图片操作"width="70%":fullscreen="true":draggable="true":before-close="handleClose"><el-row><el-col :span="24"><p>{{`共选择${selectedList.length}张图片 剩余${selectedList.length}张图片未处理`}}</p></el-col></el-row><el-row><el-col :span="24"><div class="canvas-view"><canvasid="myCanvas"ref="myCanvas"></canvas></div></el-col></el-row><el-row style="margin-top: 24px" v-if="selectedList"><el-col :span="24"><el-carousel:autoplay="false"type="card"arrow="never"height="350px"><el-carousel-itemv-for="item in selectedList":key="item"@click="carouselChange(item)"><el-image :src="item.url" fit="cover" /></el-carousel-item></el-carousel></el-col></el-row><template #footer><span class="dialog-footer"><el-button @click="dialogVisible = false">关闭</el-button><el-button type="primary" @click="dialogVisible = false">保存</el-button></span></template></el-dialog></div>

初始化数据

data() {return {//截图数据imagesUrl: [],//选中数据selectedList: [],//弹出窗dialogVisible: false,};},

页面事件

// 截图
screenshot() {const video = document.querySelector("video");let canvas = document.createElement("canvas");canvas.width = video.videoWidth;canvas.height = video.videoHeight;canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);const img = document.createElement("img");img.src = canvas.toDataURL("image/png");//转blobconst blob = this.baseToBlob(img.src);//file 对象 方便提交数据const files = new File([blob],`${new Date().Format("yyyy-MM-dd HH:mm:ss")}  ${(video.currentTime / 100).toFixed(2)}/${(video.duration / 60 - 0.03).toFixed(2)}`,{type: "image/png",lastModified: Date.now(),});//需要在页面渲染的截图数据数组this.imagesUrl.push({id: this.imagesUrl.length + 1,time: `截图时间：${new Date().Format("yyyy-MM-dd HH:mm:ss")}  `,videoTime: `截图视频时间：${(video.currentTime / 100).toFixed(2)}/${(video.duration / 60 -0.03).toFixed(2)}`,url: URL.createObjectURL(files),file: files,});},//选中selected(params, docs) {console.log(docs);const doc = document.querySelector(docs);const isIndex = this.selectedList.findIndex((item) => item.id === params.id);if (isIndex === -1) {doc.style.borderStyle = "solid";doc.style.borderColor = "#42b983";this.selectedList.push(params);} else {doc.style.borderStyle = "none";this.selectedList.splice(isIndex, 1);}},clickModel(url) {if (!this.dialogVisible) {this.dialogVisible = true;this.changeURL(url);} else {this.changeURL(url);}},//排除未选择的数据保留在页面上handleClose() {this.dialogVisible = false;const arr = this.imagesUrl.concat(this.selectedList);this.selectedList = [];this.imagesUrl = arr.filter((item) => {return arr.indexOf(item) === arr.lastIndexOf(item);});},changeURL(url) {this.$nextTick(() => {const canvasEvent = this.$refs.myCanvas;const imageObj = new Image();if (typeof url !== "object") {imageObj.src = url;} else {imageObj.src = this.selectedList[0].url;}canvasEvent.getContext("2d").drawImage(imageObj, 0, 0, canvasEvent.width, canvasEvent.height);});},carouselChange(val) {this.clickModel(val.url);},//转blobbaseToBlob(data) {let arr = data.split(","),fileType = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),l = bstr.length,u8Arr = new Uint8Array(l);while (l--) {u8Arr[l] = bstr.charCodeAt(l);}return new Blob([u8Arr], {type: fileType,});},

css

.videoName {height: 500px;
}#myCanvas {width: 800px;height: 400px;
}
.demo-image__placeholder {padding: 5px;cursor: pointer;
}

vuereact视频截图相关推荐

C#Winform+WindowsAPI做个剪贴板无缝自动保存器（视频截图利器）
C#Winform+WindowsAPI做个剪贴板无缝自动保存器(视频截图利器) (本文最新代码已上传到GitHub,地址在(https://github.com/bitzhuwei/Clipboar ...
js截屏 video_canvas与html5实现视频截图功能
这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频在使用canvas制作这个截图功能时,首先必须保证页面上 ...
ios 获取视频截图
#pragma mark -- 获取视频截图 - (UIImage *)getThumbnailImage:(NSString *)videoURL{ AVURLAsset *asset = ...
js截屏 video_用原生JS和html5进行视频截图并保存到本地
Video视频截图 body, h1, h2, p { margin:0; padding:0; } html { font-family:"微软雅黑"; background-c ...
阿里云Aliplayer高级功能介绍(一)：视频截图
基本介绍 H5 Video是不提供截图的API的, 视频截图需要借助Canvas,通过Canvas提供的drawImage方法,把Video的当前画面渲染到画布上, 最终通过toDataURL方法可以 ...
ASP.NET 视频截图功能的C#代码
前公司在制作播客系统(Web程序)中,用到从视频截图功能.下边是截图CatchImg方法,可从大多数的视频文件中截图成功,大家可测试;如果截图不成功,大多是因为视频本身的问题,如编码标准或加了密.但从 ...
[html] H5播放的video视频，如何实现对视频截图？
[html] H5播放的video视频,如何实现对视频截图? <video controls src="./assets/demo.mp4" width="400& ...
ffmpeg 截图 java_Java Web 中使用ffmpeg实现视频转码、视频截图
视频网站中提供的在线视频播放功能,播放的都是FLV格式的文件,它是Flash动画文件,可通过Flash制作的播放器来播放该文件.项目中用制作的player.swf播放器. 多媒体视频处理工具FFmpe ...
ffmpeg获取视频截图
需求使用ffmpeg可以非常方便的生成视频截图,ffmpeg 通过指定 -vcodec 参数为 mjpeg,或者指定 -f 参数为 mjpeg时,可以输出 jpg截图,指定 -vcodec参数为pn ...
用matlab实现视频截图字幕部分的拼接
这里提供一个在线截图拼接工具:截图拼接工具 - 在线拼接电影字幕截图我们常在微博及各大论坛.贴吧看到各种视频截图字幕部分的拼接,这广泛应用于一个角色在剧中说的一段特别精彩的话,这对应于 Gif ⇒ ...

vuereact视频截图

vuereact视频截图相关推荐

最新文章

热门文章