好久没上来博客园都落灰了，最近太忙，今天搞的一个视频小程序，由于小程序性能问题，一次加载很多视频会卡，所以需要先展示图片，于是我在后端加了上传封面图的按钮。本来一切很自然，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'}); } }
经过三个小时的摸索，终于成功了，虽然代码也是东拼西凑这一点儿那儿一点儿看过来的，不过好歹是完成了客户“偷懒”的需求，开熏！