如何使用canvas绘制视频

7***@qq.com (作者)

我在H5端用drawImage传视频进去根本不行还报错，小程序端也是一样，可以提供一下demo吗谢谢

2019-10-21 15:24

Vision丶

想要获取视频得缩略图，也就是第一帧图片

2020-06-11 11:05

朋也

回复 Vision丶: 缩略图一般都是后台给的吧，不是前台处理的

2020-06-11 11:36

Vision丶

回复 朋也: 视频是相册选择或者拍摄得视频，选择后想直接显示缩略图，类似朋友圈选择视频

2020-06-11 11:45

朋也

回复 Vision丶:

getVideoBase64(url) {  

        return new Promise(function (resolve, reject) {  

            let dataURL = '';  

            let video = document.createElement("video");  

            video.setAttribute('crossOrigin', 'anonymous');//处理跨域  

            video.setAttribute('src', url);  

            video.setAttribute('width', 400);  

            video.setAttribute('height', 240);  

            video.addEventListener('loadeddata', function () {  

                let canvas = document.createElement("canvas"),  

                    width = video.width, //canvas的尺寸和图片一样  

                    height = video.height;  

                canvas.width = width;  

                canvas.height = height;  

                canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas  

                dataURL = canvas.toDataURL('image/jpeg'); //转换为base64  

                resolve(dataURL);  

            });  

        })  

    }

2020-06-11 13:23

Vision丶

回复 朋也: 这是h5的方法吧，在app和小程序用不了貌似

2020-06-11 15:27

朋也

回复 Vision丶: 你试了吗？就说用不了。

2020-06-11 16:24

Vision丶

回复 朋也: 试了的，老哥，你用着可以吗？难道是我用错了？

另外你写的这个，还需要设置video的autoplay属性吧

2020-06-11 16:32