标签：canvas 封面 截取 setAttribute height width let video 前端

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', 750);
                    video.setAttribute('height', 750);
                    video.setAttribute('preload', 'auto');
                    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);
                    });
                })
            },
//转为file 进行上传
dataURLtoFile(dataurl, filename = 'file') {
                let arr = dataurl.split(',')
                let mime = arr[0].match(/:(.*?);/)[1]
                let suffix = mime.split('/')[1]
                let bstr = atob(arr[1])
                let n = bstr.length
                let u8arr = new Uint8Array(n)
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n)
                }
                return new File([u8arr], `${filename}.${suffix}`, {
                    type: mime
                })
            },

标签：canvas,封面,截取,setAttribute,height,width,let,video,前端
来源： https://www.cnblogs.com/syzyn/p/16540486.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。