之前有個需求，上傳視訊時需要儲存一份縮圖。以前的做法都是同時上傳視訊和縮圖，後臺參考了網路文案。在現代瀏覽器可以使用HTML5的API，實現JS擷取縮略效果。

HTML部分：

程式碼示例

1. <style>
2. .row{width: 100%; clear: both;}
3. .w50{width: 50%; float: left;}
4. .w50 video{max-width: 100%;}
5. </style>
6. <input id="file" name="file" type="file" value="" placeholder="點選上傳"
   />
7. <div class="row">
8. <div id="video" class="w50"></div>
9. <div id="imgSmallView" class="w50"></div>
10. </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. videoURL = windowURL.createObjectURL(files[0]);
10. $('#video').html('<video src="' + videoURL +
    '" controls="controls"></video>');
11. setTimeout(function() {
12. createIMG();
13. }, 500);
14. }
15. }).trigger('change');
16. var createIMG = function() {
17. var scale = 0.25,
18. video = $('#video').find('video')[0],
19. canvas = document.createElement("canvas"),
20. canvasFill = canvas.getContext('2d');
21. canvas.width = video.videoWidth * scale;
22. canvas.height = video.videoHeight * scale;
23. canvasFill.drawImage(video, 0, 0, canvas.width, canvas.height);
24. var src = canvas.toDataURL("image/jpeg");
25. $('#imgSmallView').html('<img id="imgSmallView" src="' + src + '" alt="預覽圖" />');
26. }
27. })()

圖片可以通過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/