最新消息:前端博客、web前端博客、Angularjs、javascript、jQuery、HTML5、CSS3

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

JavaScript AZ 7693浏览 0评论

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

HTML部分:

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

JS实现部分:

  1. (function() {
  2. "use strict";
  3. $('#file').on('change', function() {
  4. var files = this.files,
  5. video = $('#video').find('video'),
  6. videoURL = null,
  7. windowURL = window.URL || window.webkitURL;;
  8. if (files && files[0]) {
  9.  
  10. videoURL = windowURL.createObjectURL(files[0]);
  11.  
  12. $('#video').html('<video src="' + videoURL + '" controls="controls"></video>');
  13.  
  14. setTimeout(function() {
  15. createIMG();
  16. }, 500);
  17.  
  18. }
  19. }).trigger('change');
  20.  
  21. var createIMG = function() {
  22. var scale = 0.25,
  23. video = $('#video').find('video')[0],
  24. canvas = document.createElement("canvas"),
  25. canvasFill = canvas.getContext('2d');
  26. canvas.width = video.videoWidth * scale;
  27. canvas.height = video.videoHeight * scale;
  28. canvasFill.drawImage(video, 0, 0, canvas.width, canvas.height);
  29.  
  30. var src = canvas.toDataURL("image/jpeg");
  31. $('#imgSmallView').html('<img id="imgSmallView" src="' + src + '" alt="预览图" />');
  32. }
  33.  
  34. })()

图片可以通过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实现视频上传截取缩略图

如果您觉得本文的内容对您的学习有所帮助,您可以支付宝(左)或微信(右):
alipay weichat

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