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 id="imgSmallView" src="' + src + '" alt="预览图" />');
            }
 
        })()

图片可以通过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 : '保存出错了！';

或者您有更好方式，顺便给我个提示。

转载请注明：TUTERM.COM » js实现视频上传截取缩略图

与本文相关的文章

您必须登录才能发表评论！

与本文相关的文章

您必须 登录 才能发表评论！

您必须登录才能发表评论！