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 : '保存出错了！';

或者您有更好方式，顺便给我个提示。原文作者 https://www.tuterm.com/js-upload-video-capture-thumbnails/