截取本地视频第一帧和渲染本地图片或视频

 

//获取本地图片/视频链接

async function preview(e: any) {

    const buffer = await e.target.files[0].arrayBuffer();

    return URL.createObjectURL(new Blob([buffer]));

}

/**

 * 截取本地视频第一帧

 * 需要传入本地视频播放的video

 * @intercpt

*/

//calssname==是渲染视频的video的id

function intercpt(calssname: HTMLElement) {

    const canvas: any = document.createElement('canvas')

    const ratio = calssname.offsetHeight / 9 / 16

    canvas.width = Math.ceil(calssname.offsetHeight / 9) * 16

    canvas.height = calssname.offsetHeight

    canvas.getContext('2d').drawImage(calssname, 0, 0, canvas.width, canvas.height)

    return canvas.toDataURL('image/png', 1.0)

}

在uniapp中,可以使用uni-app官方提供的uni.media.chooseVideo API选择本地视频文件,并通过video标签播放视频。同时,我们可以通过video标签提供的canvas截取视频第一作为图片。 具体实现步骤如下: 1. 使用uni.media.chooseVideo API选择本地视频文件,并通过video标签播放视频。 ```js uni.media.chooseVideo({ sourceType: ['album'], success: function(res) { var videoPath = res.tempFilePath; // 将视频路径绑定到video标签 uni.createVideoContext('myVideo').src = videoPath; } }) ``` 2. 在video标签的loadedmetadata事件中获取视频时长、宽高等信息,并将视频第一渲染到canvas上。 ```html <template> <view> <video id="myVideo" :bindloadedmetadata="onLoadedMetadata"></video> <canvas id="myCanvas"></canvas> </view> </template> <script> export default { methods: { onLoadedMetadata(e) { // 获取视频时长、宽高 const duration = e.duration; const width = e.videoWidth; const height = e.videoHeight; // 将canvas的宽高设置为视频的宽高 const canvas = uni.createCanvasContext('myCanvas'); canvas.canvas.width = width; canvas.canvas.height = height; // 绘制视频第一到canvas上 canvas.drawImage('myVideo', 0, 0, width, height); canvas.draw(); // 将canvas转换为图片 const that = this; setTimeout(function() { uni.canvasToTempFilePath({ canvasId: 'myCanvas', success: function(res) { const imagePath = res.tempFilePath; // 将图片路径保存到data中 that.imagePath = imagePath; } }) }, 1000) } } } </script> ``` 在上述代码中,我们通过video标签的loadedmetadata事件获取视频的宽高等信息,并将canvas的宽高设置为视频的宽高。接着,我们通过canvas的drawImage方法绘制视频第一到canvas上,并将canvas转换为图片,最后将图片路径保存到data中。 需要注意的是,由于canvas绘图是异步的,我们需要在setTimeout中等待一定时间,确保canvas已经绘制完成。同时,为了避免视频播放过程中截取到不正确的图片,我们可以在视频播放前暂停视频,并在canvas绘制完成后再播放视频
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值