js实现视频上传截取缩略图

之前有个需求，上传视频时需要保存一份缩略图。以前的做法都是同时上传视频和缩略图，后台参考了网络文案。在现代浏览器可以使用HTML5的API，实现JS截取缩略效果。

HTML部分：

代码示例

<style>
.row{width: 100%; clear: both;}
.w50{width: 50%; float: left;}
.w50 video{max-width: 100%;}
</style>
<input id="file" name="file" type="file" value="" placeholder="点击上传" />
<div class="row">
<div id="video" class="w50"></div>
<div id="imgSmallView" class="w50"></div>
</div>

JS实现部分：

代码示例

(function() {
"use strict";
$('#file').on('change', function() {
var files = this.files,
video = $('#video').find('video'),
videoURL = null,
windowURL = window.URL || window.webkitURL;;
if (files && files[0]) {
 
videoURL = windowURL.createObjectURL(files[0]);
 
$('#video').html('<video src="' + videoURL + '" controls="controls"></video>');
 
setTimeout(function() {
createIMG();
}, 500);
 
}
}).trigger('change');
 
var createIMG = function() {
var scale = 0.25,
video = $('#video').find('video')[0],
canvas = document.createElement("canvas"),
canvasFill = canvas.getContext('2d');
canvas.width = video.videoWidth * scale;
canvas.height = video.videoHeight * scale;
canvasFill.drawImage(video, 0, 0, canvas.width, canvas.height);
 
var src = canvas.toDataURL("image/jpeg");
$('#imgSmallView').html('[外链图片转存失败(img-tim2u7my-1562164094458)(https://mp.csdn.net/mdeditor/'%20+%20src%20+%20')]');
}
 
})()

图片可以通过PHP接收保存：

define('UPLOAD_DIR', 'images/');
$img = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.jpg';
$success = file_put_contents($file, $data);
print $success ? $file : '保存出错了！';