js实现视频截图，并通过post请求发送图片

1. canvas实现截图

<canvas id="myCanvas" width="343" height="200" hidden></canvas>

cutPicture(){let self=this;var v = document.querySelector("video");if(null == v) {this.$Message.error("请先上传视频再截图");return;}let canvas = document.getElementById('myCanvas')var ctx = canvas.getContext('2d');ctx.drawImage(v, 0, 0, 343, 200);var oGrayImg = canvas.toDataURL('image/jpeg');
}

错误：Error: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

参考Tainted canvases may not be exported,视频帧截图跨域 - 掘金， video加上crossorigin="anonymous"就OK了，代码如下所示：

<video v-if="formValidate.video.length != 0" :src="formValidate.video" controls="controls" width="350" height="180" crossorigin="anonymous"></video>

2.截图图片通过post请求上传服务器

2.1先讲图片base64转为文件

// 将base64转换成file对象
function dataURLtoFile(dataurl, filename = 'file') {let arr = dataurl.split(',')let mime = arr[0].match(/:(.*?);/)[1]let suffix = mime.split('/')[1]let bstr = atob(arr[1])let n = bstr.lengthlet u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}return new File([u8arr], `${filename}.${suffix}`, { type: mime })
}

2.2 https请求设置Content-type="multipart/form-data";

2.3 组装formdata

var formData = new FormData();
formData.apend("file", dataURLtoFile(oGrayImg));
formData.apend("file_name", "test.jpeg");

然后通过https.post即可上传服务端

js实现视频截图，并通过post请求发送图片相关推荐

ESP32开发-HTTP POST请求发送图片
HTTP POST请求发送图片 ESP32中有HTTP相关的请求demo,但是demo中只是简单的HTTP header加上body.如果服务器对POST请求有要求,比如数据以key-value的形式 ...
java 图片请求_java中使用scoket模拟http post请求发送图片或文件
最近遇到个问题,两个系统共用用户的头像,用户的头像在一个系统中保存,这就涉及到将图片通过scoket发送给另一个系统存储的问题,最初的思路是将图片读成byte[]数组,然后发送,但又发现,发送图片的同 ...
js截屏 video_canvas与html5实现视频截图功能
这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频在使用canvas制作这个截图功能时,首先必须保证页面上 ...
video.js 视频截图、录制、自定义全屏，hls、flv、mp4视频播放
功能 video.js内嵌截图.录制功能 (图片.视频会下载到本地) 自定义全屏播放hls.flv.mp4 功能集合成Vue组件参考 video.js components RecordRTC ...
js使用canvas实现视频截图
使用工具视频播放器API:西瓜播放器截图:canvas 实现步骤 1. 创建 canvas 元素,创建 canvas 上下文对象 const canvas = document.createEle ...
js截屏 video_jQuery+html5实现视频截图方法
Capture js部分: (function() { "use strict"; var video, $output; var scale = 0.25; var initia ...
js截屏 video_用原生JS和html5进行视频截图并保存到本地
Video视频截图 body, h1, h2, p { margin:0; padding:0; } html { font-family:"微软雅黑"; background-c ...
ffmpeg 截图 java_Java Web 中使用ffmpeg实现视频转码、视频截图
视频网站中提供的在线视频播放功能,播放的都是FLV格式的文件,它是Flash动画文件,可通过Flash制作的播放器来播放该文件.项目中用制作的player.swf播放器. 多媒体视频处理工具FFmpe ...
vue前端video视频截图与录影功能的简单实现
目录截图:截取图片后可以进行涂鸦编辑,并能清除,撤销. 录影:点击按钮后录制10s左右的视频文件. 文件上传服务器示例最近项目开发中,需要实现在video 视频上截图,录影后将文件上传到阿里云服务 ...
使用ngnix实现跨域视频截图
通过使用html5 canvas的drawImage()方法可以轻松获取视频当前播放的帧.参考但是只能对当前项目下的视频截图.很多情况下,视频文件是单独存放的,即要对跨域视频截图在尝试了很多方法之 ...