HTML:
<input type="file" class="hide" id="upload" onchange="changepic(this);return false;" accept="video/*" name="picpath" multiple="multiple">
JS:
function changepic(filesObj){
getVideoGainImg(filesObj.files[0]);
}
function getVideoGainImg(files){
var video = document.getElementById("v1");
video.src = window.URL.createObjectURL(files[0]);
video.muted=true;
var imgHeight = 0, imgWidth = 0, videoWidth = 0, videoHeight = 0;
canvas = document.createElement("canvas");
canvasCtx = canvas.getContext("2d");
imgfile = null;
$(video).show();
video.addEventListener("canplay", function () {
var $v = $(this);
canvas.width = imgWidth = video.offsetWidth;
canvas.height = imgHeight = video.offsetHeight;
videoWidth = video.videoWidth;
videoHeight = video.videoHeight;
setTimeout(function() {
video.pause();
//坐原图像的x,y轴坐标,大小,目标图像的x,y轴标,大小。
canvasCtx.drawImage(video, 0, 0, videoWidth, videoHeight, 0, 0, imgWidth, imgHeight );
//把图标base64编码后变成一段url字符串
var dataUrl = canvas.toDataURL("image/png");
$v.hide();
//console.log(base64ConvertFile(dataUrl,'vsz'));
imgfile = base64ConvertFile(dataUrl,'vsz');
// 然后通过上一节的ajax进行上传
}, 1000);// 1000毫秒,就是截取第一秒,2000毫秒就是截取第2秒,视频1秒通常24帧,也可以换算成截取第几帧。
//防止拖动进度条的时候重复触发
video.removeEventListener("canplay", arguments.callee);
});
}
function base64ConvertFile(urlData, filename){ // 64转file
if (typeof urlData != 'string') {
this.$toast("urlData不是字符串")
return;
}
var arr = urlData.split(',')
var type = arr[0].match(/:(.*?);/)[1]
var fileExt = type.split('/')[1]
var bstr = atob(arr[1])
var n = bstr.length
var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], 'filename.' + fileExt, {
type: type
});
}