export function getVideoCover(file, response) {
// 定义生成图片的宽高,其他宽高需求可以自己改
// const imgWidth = 240;
// const imgHeight = 160;
const fileUrl = URL.createObjectURL(file);
const videoElement = document.createElement('VIDEO');
videoElement.preload = true;
videoElement.autoplay = true;
videoElement.muted = true;
const callBack = () => {
const { videoWidth, videoHeight } = videoElement; // 获取video的宽高
// let x = 0, y = 0, width = 0, height = 0;
// // 计算缩小后图片的宽高以及canvas绘制的位置信息
// if (videoWidth / videoHeight >= 1.5) {
// width = imgWidth ;
// height = videoHeight * (imgWidth / videoWidth);
// x = 0;
// y = (imgHeight- height) / 2;
// } else {
// height = imgHeight;
// width = videoWidth * (imgHeight / videoHeight);
// y = 0;
// x = (imgWidth - width) / 2;
// }
const canvas = document.createElement('canvas');
canvas.width = videoWidth ;
canvas.height = videoHeight;
const ctx = canvas.getContext('2d');
// ctx.fillStyle = "#000";
// ctx.fillRect(0, 0, imgWidth , imgHeight);
ctx.drawImage(videoElement, 0, 0, videoWidth, videoHeight);
const dataBase64 = canvas.toDataURL('image/png'); // 完成base64图片的创建
if (dataBase64) {
const imgFile = dataURLtoFile(dataBase64, `${new Date().getTime()}.png`);
if (response) {
response(imgFile, dataBase64);
}
}
};
// videoElement.addEventListener('loadeddata', callBack);
// videoElement.onseeked = callBack;
videoElement.onloadeddata = setTimeout(() => {
callBack();
}, 1000);;
videoElement.src = fileUrl;
}
export function dataURLtoFile(dataBase64, filename) {
const arr = dataBase64.split(",");
const mime = arr[0].match(/:(.*?);/)[1];
const bstr = atob(arr[1]);
const n = bstr.length;
const u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
}
前端JS获取视频文件第一帧图片
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 在项目中,有时候需要抓取视频文件的某一帧图像做为预览图片,那到底应该怎么获取这个图片呢? Android为我们提供...
- 下面的都是类方法 pragma mark ---- 获取图片第一帧 (UIImage*) JJthumbnailI...