js實現視訊上傳擷取縮圖
阿新 • • 發佈:2019-01-07
之前有個需求,上傳視訊時需要儲存一份縮圖。以前的做法都是同時上傳視訊和縮圖,後臺參考了網路文案。在現代瀏覽器可以使用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 =
- videoURL = null,
- windowURL = window.URL || window.webkitURL;;
- if (files && files[0]) {
- videoURL = windowURL.createObjectURL(files[0]);
- $('#video').html('<video src="' + videoURL +
- 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/