获取视频缩略图并以文件形式上传
creatImg:function() {
const video = document.getElementById('video'); //需要有一个video控件播放视频,id设为video或其他
const canvas = document.createElement('canvas'); //自己创建一个画布
const download = document.getElementById('download') //需要一个a标签,id设为download或其他
const fname = 'test.png' //暂定名字,也可以从base64中截取属性
const ctx = canvas.getContext('2d');
const imgHeight = video.videoHeight;
const imgWidth = video.videoWidth;
ctx.drawImage(video, 0, 0, imgWidth*0.2, imgHeight*0.2);//截取一帧,作为缩略图,最好长宽都乘以一个小于0.5的值,不然不全
this.imgSrc = canvas.toDataURL('image/png'); //画布转base64
// console.log('imgSrc ' + imgHeight + ' ' + imgWidth)
// console.log(this.imgSrc);
var blob = this.dataURLtoBlob(this.imgSrc, "image/png")//base64转blob
//下载base64数据为文件,缩略图看不到的时候可以以此测试
if (navigator.msSaveBlob) {
navigator.msSaveBlob(blob, fname);
}
else {
download.download = fname;
download.href = URL.createObjectURL(blob);
download.click();
}
var file = new File([blob], "video_image.png", { type: "image/png", lastModified: Date.now() }) //blob转file
return file//文件,相当于input file选中的文件
},
dataURLtoBlob
exports.install = function(Vue, option){
Vue.prototype.dataURLtoBlob = function (dataURI,type) {
var binary = atob(dataURI.split(',')[1]);
var array = [];
for(var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], {type:type});
}
}