video视频，实现截图功能，获得base64图转file并上传

Posted 2023-05-07

参考技术A var video = document.getElementById("videoElement"); //获取前台要截图的video对象

video.setAttribute('crossOrigin', 'anonymous') // 跨域处理

var canvas = window.canvas = document.createElement("canvas");

canvas.width = 500;

canvas.height = 300;

canvas.getContext('2d').drawImage(video, 0, 0,500,500);  // 将当前视频图片渲染在画布上，图片大小和视频分辨率一致

var images = canvas.toDataURL("image/png"); //canvas的api中的toDataURL()保存图像[toDataUrl](https://developer.cdn.mozilla.net/zh-CN/docs/Web/API/htmlCanvasElement/toDataURL)

var arr = images.split(','),

mime = arr[0].match(/:(.*?);/)[1],

bstr = atob(arr[1]),

n = bstr.length,

u8arr = new Uint8Array(n);

while (n--)

u8arr[n] = bstr.charCodeAt(n);



var file =  new File([u8arr], 'cutout.jpg', type: mime );

let config = headers: 'Content-Type': 'multipart/form-data'

let formData = new FormData();

formData.append('multipart', file, file.name);

axios.post('http://127.0.0.1:8080/api/v1/workorder/operation/upload', formData, config)

.then(res => )

html与js实现视频截图

实现效果 先看看效果，而且点击图片即可查看demo： 实现思路 1、分别获得远程mp4、本地摄像头、本地mp4上传文件预览，即准备好vedio节点。 如下代码： <video id="video" width="320" height="auto" controls preload="auto">