文件 上传 框上传 之外，还可以调用 摄像头来拍摄照片或者视频并上传 。capture属性 可以判断前置or后置摄像头。在视频播放的过程中，用canvas定时截取 一张图片 ，然后用gif.js 生成 一张gif图 ，从而完成前端的视频压缩。
我这里使用的是Vue写的，以下是我的流程及代码 ：
一、下载gif.js相关文件 ，可以到这里下载 ，然后将这几个文件 放在根目录的static/js里面。
文件及存放路径
二、下载依赖包：
rush:bash;">
npm i timers
三、在页面 中声明：
rush:js;">
import { setInterval,clearInterval } from "timers";
import GIF from "../../static/js/gif.js"
四、HTML代码 块：
rush:xhtml;">
视频大小：{{videoSize}}
视频时长：{{videoLength}}
五、在页面 加载完成时初始化GIF：
rush:js;">
mounted(){
//初始gif
this.gif = new GIF({
workers: 1,quality: 1000,width: window.innerWidth,height: window.innerHeight,workerScript: '../../static/js/gif.worker.js',});
},
六、当input录制完视频返回页面 中，获取 到这个视频文件 ，每次拿到视频文件 需要先移除之前的监听：
rush:js;">
//input
文件 走向
changeVideo(e){
var file = e.target.files[0];
const video = document.getElementById('myvideo');
//视频开始播放
video.removeEventListener('play',this.videoPlay,false);
//视频播放完
video.removeEventListener('ended',this.videoEnded,false);
this.androidFile(file);
},
七、上一步提到的this.androidFile方法 ，是通过这个视频文件 ，在页面 播放一遍，在这 个播放过程处理视频，完成整个转换过程，获取 到最终的文件 ：
rush:js;">
//安卓拍摄视频
androidFile(file){
//视频字节大小
this.videoSize = file.size;
const that = this;
this.gifSetTime = true;
//file转base64获取 到所有的图片 并渲染完后执行 文件 ",blob);上传 视频文件
八、步骤七所说的this.videoPlay方法 。视频在页面 播放过程中，每200毫秒通过canvas截取 一张图片 ，把这些图片 一张张给gif.js堆叠：
rush:js;">
//视频开始播放
videoPlay(){
const that = this;
const video = document.getElementById('myvideo');
const canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
console.log("视频时长",video.duration);
this.videoLength = video.duration;
//画布上画视频，需要动态地
获取 它，一帧一帧地画出来
var times = setInterval(function(){
context.drawImage(video,that.winWidth,that.winHeight);
that.gif.addFrame(context,{
cop y: true
});
if(that.gifSetTime == false){
clearInterval(times);
}
},200);
},
九、步骤七所说的this.videoEnded方法 。视频播放完，通过gif.js将图片 堆叠的动态图渲染出来：
rush:js;">
//视频播放完
videoEnded(){
this.gifSetTime = false;
console.log("视频播放完毕！")
this.gif.render();
},
十、步骤七所说的that.convertBase64UrlToFile方法 。将gif.js生成 的Blob文件转换 成File格式：
rush:js;">
//blob to file
convertBase64UrlToFile(blob) {
var d = new Date().getTime();
var type = 'image/gif'
return new File([blob],"fileGif-" + d + '.gif',{type:type});
},
最后通过步骤七所说的that.uploadVideo方法 ，上传 图片 给服务器：
rush:js;">
//
上传 视频
uploadVideo(file){
console.log("
上传 的视频
文件 ",file)
},
在这 提供我的全部代码 ，Android的视频文件 比较大所以做压缩，而IOS本身存在视频压缩，所以我这里做了区分
rush:js;">
视频大小：{{videoSize}}
视频时长：{{videoLength}}
试过很多种方法 ，而这种在移动端浏览器（特别是微信浏览器！）的兼容性是最好的。但是这个生成 的视频文件 将会失去音频，如果需要音频的可以看我另一篇简书有说明几种方法 。有更好的方法 欢迎大家留言，互相学习~
以上就是本文的全部内容 ，希望对大家的学习有所帮助，也希望大家多多支持 编程之家。
