05 2023 档案
摘要：前言图片在本地开发可以显示，但是打包部署后图片无法加载 修改webpack.config.js配置 将生成环境的publicPath的路径改为"./" 判断是开发环境还是生成环境 在package.json中通过 cross-env NODE_ENV=production 设置环境变量 通过 pro
阅读全文
摘要：前沿： 有时候我们需要监听dom的变化，比如获取父元素的高度，动态的设置子元素的高度，所以需要监听 dom 的高度变化，才能准确获取dom的高度，那么有哪些监听dom高度变化的方法呢？今天简单列举一下。 1、MutationObserver 构造函数 Mutation Observer API 用来
阅读全文
摘要：vue事件的基本使用： 1、使用v-on:xxx或@xxx绑定事件，其中xxx是事件名 2、事件的回调需要配置咋methods对象中，最终会挂载在vue实例对象上 3、methods中配置的函数，不要用箭头函数，否则this就不会只想vue实例了 4、methods中配置的函数，都是被Vue所管理的
阅读全文
摘要：利用css样式 mix-blend-mode 混合模式，有一个属性 screen ，就是黑色和其它元素进行混合的时候表现为透明。 于是我们要实现一个视频背景色透明的效果就很简单，只要把我们的视频背景色设置为黑色，同时设置如下CSS即可： video { mix-blend-mode: screen;
阅读全文
摘要：当时使用webRTC进行视频通话时，通常会设置视频流的帧率，行业内一般默认帧数为15或者30，一般每秒只需要渲染15或30次 当要需要对本地视频或者远端视频流进行特殊处理时，通常会使用requestAnimationFrame方法进行再次渲染 requestAnimationFrame，这个方法是用
阅读全文
摘要：1、使用canvas对video元素进行截图 function getVideoFrame(video){ const canvas = document.createElement("canvas"); canvas.width = video.videoWidth; canvas.height
阅读全文
摘要：首先，你需要一个这样的视频 或者一个这样的视频 尽量使得视频尺寸宽高比为1:2或者2:1，这样渲染出来的视频就是1:1大小了。然后用webgl将视频渲染在画布上，渲染的同时将视频上下，或者左右进行叠加计算。 webgl渲染可以用three.js，上下叠加的代码如下： import * as THRE
阅读全文
摘要：这个问题很好解决，就是在获取webgl对象的时候，多传入一个{preserveDrawingBuffer: true}，然后在使用canvas.toDataURL()获取就能够获取到了。案例： var canvas = document.getElementById("canva
阅读全文
