注册登录

4***@qq.com

4***@qq.com

发布：2020-04-02 15:10
更新：2023-02-03 10:49
阅读：3534

uni-app: CanvasContext.drawImage 支持传入video视频地址吗？

分类：uni-app

我想在视频播放页，对视频进行截图，传入视频地址总是不成功，只能传入图片地址吗？
如果不行，请问有什么办法可以对播放的视频进行截图呢？

            <view class="cu-form-group">  
                <video class="video" id="VideoView" :src="tmpVideoPath"  autoplay="true" :show-center-play-btn="true"></video>  
            </view>  
            <view>  
                <button class="margin-lr-xs cu-btn bg-red lg" @click="cut()">截 图</button>  
                <canvas canvas-id="imgCanvas"></canvas>  
            </view>

const imgcontext = uni.createCanvasContext('imgCanvas')
imgcontext.drawImage(this.tmpVideoPath, 0, 0);
imgcontext.draw();

2020-04-02 15:10 负责人:无分享

8 个回复

zks

zks - zzk

解决了吗

同问，为什么画不了视频，官方不回答下吗；

同问，官方给的答案是，drawImage设计的初衷就是截取图片，不能截取视频，真是服了

DCloud_UNI_GSQ

是绘制图片不是截取图片

2020-06-08 20:56
canvas_小白

回复 DCloud_UNI_GSQ: 请问一下cancas获取不了dom这么画video的当前点击图

2020-12-04 17:12

不支持
如果仅考虑支持App和H5可以使用 https://uniapp.dcloud.io/frame?id=renderjs 在 view 层调浏览器的 API 进行绘制。

星河12

可以考虑支持一下APP端获取视频第一帧的功能吗

2021-09-27 11:59

y***@163.com

请问最后是怎么处理这个视频截图的

5178008pp

jjjj

501615956 - 哈哈

解决了嘛？

其实用document.createElement('canvas');创建一个canvas然后 canvas.getContext('2d').drawImage(video, 0, 0) 应该也可以。

要回复问题请先登录或注册