js获取视频第一帧生成图片
好久没上来博客园都落灰了,最近太忙,今天搞的一个视频小程序,由于小程序性能问题,一次加载很多视频会卡,所以需要先展示图片,于是我在后端加了上传封面图的按钮。本来一切很自然,but...客户不愿意上传图片。他说“你知道要增加多少工作量吗”?wtf??好吧,我给你生成图片,不要你自己上传。
but客户的视频是直接上传的腾讯云的cos的对象储存的,他要是存到云点播我还有有法儿拿封面截图媒体信息啥的,但是现在我除了拿点儿文件信息也拿不到别的了。
脑海里闪出两个idea:
第一:迂回式。 前端视频文件传到后台,我先存在本地,然后用php的视频插件去生成图片保存在本地,完事儿两个一起上传到腾讯云cos,等他俩返回链接我再删掉本地的文件...emmmm...有点鸡肋,我也嫌麻烦,果断采用第二种方法曲线救国
第二:曲线救国式。既然不想用后端完成,那就走前端js,大概的流程应该是用户选择文件后生成blob预览,同时传到后台放到cos上,然后把video放到canvas上面做个快照,然后就能拿到图片预览
上面是废话,下面是重点
----------------------------------------------------------------------------------------------------------废话分割线--------------------------------------------------------------------------------------------------------
代码如下:
1、将用户选择的文件转为blob生成预览,uploadFile2是fromData上传文件的方法
$('#file').on('change', function() { var files = this.files, video = $('#video').find('video'), videoURL = null, windowURL = window.URL || window.webkitURL; if(files && files[0]) { uploadFile2(files[0],1); videoURL = windowURL.createObjectURL(files[0]); $('#imgSmallView span').html('请等待图片生成'); $('#video video').attr('src', videoURL); $('#video video').trigger('click'); setTimeout(function() { createIMG(files[0].name.split('.')[0]+'.png'); }, 3500); } }).trigger('change');
2、生成图片
function createIMG(name) { var scale = 0.35, video = $('#video').find('video')[0], canvas = document.createElement("canvas"); canvas.width = video.videoWidth * scale; canvas.height = video.videoHeight * scale; var flag = true; for(var flag = true; flag; ) { if(canvas.width > 400) { canvas.width *= 0.9; canvas.height *= 0.9; } else { flag = false; } } canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); saveImage(canvas, name); }
3、保存图片预览
第一步把刚才画出来的转成base64
第二步把base64转为file送到后台上传
前端同时生成预览
function saveImage(_canvas, _name) { var imagebase64 = _canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream'); var imgURL = image.getFileFromBase64(imagebase64, 'imgName'); console.log(imgURL); uploadFile2(imgURL,2) $('#imgSmallView span').html('图片生成完成,可以进行下一步操作'); }
本来不打算转base64,但是叭直接传给cos他返回的图片是空的,无奈只能手动转成file
var image= { /* 将图片(路径)转换为Base64 */ getBase64FromImageURL(url, callback) { var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), img = new Image; img.crossOrigin = 'Anonymous'; img.onload = function () { canvas.height = img.height; canvas.width = img.width; ctx.drawImage(img, 0, 0); var base64URL = canvas.toDataURL('image/png'); callback(base64URL); canvas = null; }; img.src = url; }, /* 将base64转换为file类型 */ getFileFromBase64(base64URL, filename) { var arr = base64URL.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } // alert(mime) return new File([u8arr], filename, {type: 'image/png'}); } }
经过三个小时的摸索,终于成功了,虽然代码也是东拼西凑这一点儿那儿一点儿看过来的,不过好歹是完成了客户“偷懒”的需求,开熏!