南宁模板建站多少钱,wordpress框架文件上传,网站建立需要什么条件,外网常用网站现在#xff0c;我们已经有了视频的http地址#xff0c;我们怎么截取帧图片呢#xff1f;我以Vue为基础架构#xff0c;来写写代码。
1、先写布局#xff0c;先得有video#xff0c;然后得有canvas video idvideoPlay stylewidth: 100%; height:1…现在我们已经有了视频的http地址我们怎么截取帧图片呢我以Vue为基础架构来写写代码。
1、先写布局先得有video然后得有canvas video idvideoPlay stylewidth: 100%; height:100%; refvideoPlay crossOriginAnonymouscontrols preloadauto data-setup{}source :typevideo/mp4 || video/avi || video/mov styleobject-fit: cover;/videocanvas refcanvas styledisplay: none;/canvasButton typeprimary clickextractFrame :loadingshootLoading截取当前视频帧并上传/Button界面上很简单就一个视频容器一个画布canvas还不让它显示还有一个就是截取帧图片了。 接下来是js关键方法部分 async extractFrame() {this.shootLoading trueconst video this.$refs.videoPlay;const canvas this.$refs.canvas;const context canvas.getContext(2d);// 获取当前视频的时间const currentTime video.currentTime;// 将canvas的大小设置为与视频一样canvas.width video.videoWidth;canvas.height video.videoHeight;// 将视频的当前帧绘制到canvascontext.drawImage(video, 0, 0, canvas.width, canvas.height);// 从canvas获取图像数据其中第二个参数0.5的含义是压缩质量为0.5这个数值可以设置从0-1这里要注意压缩时设置的图片格式一定要设置为jpeg不要设置为pngpng本身是一种无损格式这种处理方法对于png格式来说压缩效果不明显而jpeg是有损压缩但是基本不会改变图片的清晰度。const imageData canvas.toDataURL(image/jpeg,0.5);// 将图像数据转换为File对象const blobBin atob(imageData.split(,)[1]);const array [];for (let i 0; i blobBin.length; i) {array.push(blobBin.charCodeAt(i));}const file new Blob([new Uint8Array(array)], {type: image/jpeg});const msg this.$Message.loading({content: 正在上传请等待...,duration: 0});try {const _img await uploadToOSS(file);} catch (e) {console.error(上传失败, e);this.$Message.error(图片上传失败)} finally {msg()}},以上的代码就是uploadToOSS方法是上传方法不用理会就可以至于涉及到的按钮还有Message提示都是用的iView的组件你只考虑功能部分就行。 还有其中执行压缩的代码是这行 const imageData canvas.toDataURL(‘image/jpeg’,0.5); 第一个参数必须设置为jpeg格式压缩这样才能有效减小图片大小不要设置为pngpng是一种无损格式jpeg产出的图片格式是jpg。第二个参数0.5是指压缩质量这个参数可以从0-1选填0、1可选的闭区间附上我的截取的帧图图 到此结束做个备忘如果刚好帮到你了不胜荣幸。感谢关注。
