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

- 日理万妓 2021-06-26 16:06 939阅读 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 条评论，939人围观）

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

相关阅读

相关 java生成视频缩略图

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

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

相关截取视频缩略图

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

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

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

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

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

相关获取视频文件缩略图

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

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

相关截图视频缩略图

MediaStore.Video.Thumbnails android. media.ThumbnailUtils MediaMetadataRetriever

小鱼儿/ 2022年08月05日 07:53/ 0 赞/ 291 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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