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

- 日理万妓 2021-06-26 16:06 996阅读 0赞

之前有个需求，上传视频时需要保存一份缩略图。以前的做法都是同时上传视频和缩略图，后台参考了网络文案。在现代浏览器可以使用`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-tim2u7my-1562164094458)(https://mp.csdn.net/mdeditor/'%20+%20src%20+%20')]');
    }
     
    })()

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

发表评论取消回复

表情：

评论列表（有 0 条评论，996人围观）

还没有评论，来说两句吧...

相关阅读

相关 java生成视频缩略图

> 现有一需求，生成视频缩略图，最终实现方式如下一、引入maven依赖 <dependency> <groupId>org.bytedeco

╰半夏微凉°/ 2024年04月07日 14:54/ 0 赞/ 144 阅读

相关截取视频缩略图

UIImage \image =\[self getImage:\[\[NSBundle mainBundle\] pathForResource:@"video" ofTyp

ゞ浴缸里的玫瑰/ 2023年10月18日 08:38/ 0 赞/ 132 阅读

相关 php图片生成缩略图_PHP图片上传，并生成缩略图保存

HTML表单上传： PHP接收处理upload.php // 文件及缩放尺寸 $imgfile = 'a.jpg';//这可以读取刚上传的文件 $percent =

绝地灬酷狼/ 2022年11月12日 04:27/ 0 赞/ 468 阅读

相关获取视频文件缩略图

Bitmap thumb = ThumbnailUtils.createVideoThumbnail(path, MediaStore.Images.T

叁歲伎倆/ 2022年09月26日 13:57/ 0 赞/ 240 阅读

相关 JS实现input上传图片时显示缩略图

注意：以下代码只适用于chrome、Firefox和IE10以上 <!DOCTYPE html> <html> <head> <meta ch

电玩女神/ 2022年06月06日 05:56/ 0 赞/ 308 阅读

相关 javacv实现上传视频后自动保存封面缩略图（视频第一帧）

首先，使用场景：现在视频网站展示列表都是用img标签展示的，动图用的是gif，但是我们上传视频时并没有视屏封面，就这需要上传到服务器时自动成功封面并保存 JavaCV 是

￡神魔★判官ぃ/ 2022年05月15日 03:59/ 0 赞/ 1042 阅读

相关 flask上传图片以及生成缩略图

flask在开发微信公众号或者小程序时会涉及到手机端上传图片以及生成缩略图的需求（注意，一般涉及到图文都是把图片和文字分开储存到两张表中，用外键作为连接）第一步，

灰太狼/ 2022年05月11日 04:20/ 0 赞/ 462 阅读

相关 tp5 文件上传图片上传缩略图

图片上传 html页面： <!DOCTYPE html> <html> <head> <meta charset="utf-8">

怼烎@/ 2022年02月17日 09:16/ 0 赞/ 470 阅读

相关 NET实现分片上传视频,截取

UpLoadBigFile.aspx <%@ Page Language="C" AutoEventWireup="true" CodeBehind="UpLoa

太过爱你忘了你带给我的痛/ 2021年06月26日 16:06/ 0 赞/ 513 阅读

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

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

- 日理万妓/ 2021年06月26日 16:06/ 0 赞/ 997 阅读