- 博客(44)
- 收藏
- 关注
原创 vite+vue3中使用FFmpeg@0.12.15实现视频编辑功能,不依赖SharedArrayBuffer!!!
本文介绍了在Vite+Vue3项目中使用FFmpeg进行视频处理的方法。首先通过npm安装FFmpeg相关依赖包,然后将核心文件放入public目录。文章详细说明了初始化FFmpeg的步骤,包括加载核心文件和处理加载错误的方法。重点展示了视频处理功能,包括静音设置、调整宽高和裁剪时长等操作,并提供了完整的处理函数代码。文中还包含了进度条实现和错误处理机制,最后强调了对生成文件的清理工作。所有操作均不依赖SharedArrayBuffer,推荐使用FFmpeg@0.12.15版本。
2025-09-16 14:27:03
644
原创 uniapp开发APP中使用mqtt报错
UniApp中使用MQTT时出现WebSocket构造函数错误"TypeError: null is not a constructor (evaluating 'new WS(target, protocols, options)')"解决方案
2025-09-12 17:48:06
282
原创 使用canvas+帧同步实现多张图片生成视频,并附加切换效果
这段代码实现了一个将图片数组转换为视频的功能。首先加载所有图片并存入数组,然后创建隐藏的canvas元素用于绘制。使用MediaRecorder API捕获canvas流并录制为MP4视频,通过frameDuration控制每帧显示时间。核心逻辑在updateFrame函数中,它计算帧显示时间并适时切换下一帧,最后将视频数据合并为Blob对象并通过回调返回。该方案支持跨域图片处理,并实现了精准的帧同步控制。
2025-08-27 11:06:27
198
原创 安卓应用市场认领应用-签名详细步骤
jarsigner -verbose -keystore ${证书名} -signedjar ${签名后的包名.apk} ${tap_unsign.apk} ${证书别名}3、下载证书,并放到和应用空包tap_unsign.apk同一个文件夹下,可以将证书名改为简短的xxx.keystore 方便后续输入指令。1、首先下载一个认领时提供的空包,例如应用宝:tap_unsign.apk。5、输入证书密码后自动生成签名后的apk文件,上传即可。证书名:xxx.keystore。证书别名:打开证书详情查看。
2025-03-25 17:22:22
395
原创 v3+antd+echarts的bug记录
进行绑定,如果使用 reactive 绑定的话会出现 修改完日期,但是页面数据不会更新的bug。使用该组件时绑定数据必须使用。
2024-04-09 12:42:53
453
1
原创 Promise相关理解记录
Promise是一个构造函数,调用时需要使用new关键字Promise是解决回调地狱的一种异步解决方式Promise有三个状态:pending(进行中)、fulfilled(成功)、rejected(失败)Promise的状态只会从 pending→fulfilled 或者 pending→rejected ,并且不会再改变。
2024-02-24 22:32:12
512
原创 安全相关问题记录
一、预防XSS攻击校验 输入时进行格式校验 过滤 过滤<script>,<iframe>等特殊标签 过滤onclick,onerror,onfocus等js事件属性 编码转义 对需要渲染的内容做编码转义 限制 限制输入长度 cookie设置成 http only
2024-02-24 17:31:52
648
原创 在项目中使用CancelToken选择性取消Axios请求
Axios 提供了 CancelToken 类来创建取消标记。取消标记实际上是一个包含标记和方法的对象。
2024-02-24 16:01:09
1109
原创 简易版-图片懒加载-原生js
原理:将需要懒加载的图片src设置为loading图片,然后将data-src设置为图片原路径。待页面滚动到合适距离之后,就加载相应的图片。
2024-02-20 14:17:07
541
原创 Vue3中的自定义Hooks
组件复用性更强:通过Hooks可以使得组件的一些逻辑可以更好地进行封装和复用更好的逻辑分离。Hooks有助于组件内的业务逻辑更加清晰明了,从而减少代码耦合度。更高的代码可读性。使用Hooks使得函数组件的可读性更高,在保证性能和灵活性的情况下,增加了代码的可读性。
2024-01-24 18:01:25
661
原创 Vue3组件通信相关内容整理
props/emit/mitt/v-model/$attrs/$refs-$paret/provide-inject/slot-具名插槽-插槽传值(作用域插槽)/pinia
2024-01-24 17:52:18
1403
原创 在vue.draggable.next拖拽差中使用组件时遇到的问题
vue.draggable.next 中文文档 - itxst.com问题描述:在draggable标签中定义的组件,通过ref不能正确拿到相应数组在vue3中定义组件的ref,如果有多个相同名称的组件,会将ref.value的值变为数组。在vue.draggable.next提供的draggable标签中定义组件,如果有多个相同名称的组件,ref.value的值为循环后的最后一个数据。2、子组件代码3、页面打印结果 代码如下:打印结果:
2024-01-22 11:46:40
1128
1
原创 v3+ts——3、路由模块(包含权限验证)
router文件夹actionRouter.ts 需要权限验证的路由filterRouter.ts 过滤不需要在侧边栏中显示导航的路由index.ts 路由入口staticRouter.ts 不需要权限验证的路由 任何人都可以访问utils文件夹router.ts 编写路由守卫。
2023-10-17 16:09:37
454
原创 v3+ts——2、基础布局
使用后台管理系统通用布局,在ElementPlus中找到组件-Container 布局容器具体代码如下这一步过后,页面上就已经有了一个基础的布局,注意调整一下css样式,具体效果如下。
2023-10-17 14:41:22
208
原创 记录一下el-calendar在不同时区下会出现的Bug
由于项目的需要,用到了日历组件,在北京时区下一切都很正常,直到切换时区后(下图案例为,这个组件就出现了一些问题该问题的原因:new Date() 会获取根据你电脑设置的时区来获取相应的时间由于项目需要的解决方式为:将此组件设置为以北京时区为准。但是我在网上搜索了一堆相关的解决方式,都不能够解决我的问题,所以我自己进行了一些细微的更改(如果你有更好的方式,欢迎指导)虽然这种方式很笨,但是有效。
2023-06-13 16:56:08
994
原创 表格数据前端做缓存
在获取数据的方法中接受一个参数,用来标识需不需要清空数据(如果是操作完成需要刷新数据就传这个参数,如果是简单的切换tabs标签页就不需要传)//1. 第一步 读取数据// 读取缓存中的数据// 如果不需要刷新数据,就会从缓存中读取数据if (data!return// 如果需要重新获取数据,先将缓存中的数据清空}...}如果此时是第一次获取数据,或者需要重新获取数据,就调用相应接口获取数据,并将其存储到本地...// 第二步 获取数据并存储// 如果没有缓存的数据if(!
2022-11-01 17:31:48
1318
原创 popstate、pushState、replaceState操作浏览器历史记录
pushState和replaceState都属于history的操作方法。
2022-10-26 16:35:31
1019
原创 输入框禁止复制粘贴
禁止文本被选中,可以使用css样式。如果要禁止粘贴,就要用到事件。在原生事件中 在触发事件中调用。paste 是在进行。vue中可以直接绑定。
2022-08-25 11:43:57
3835
原创 在VUE3中引用Element-ui
在Vue3中引用Element-ui的方式与Vue2中引用的方式有一些区别 通过npm安装 element-plus 注意不是 element-ui第二步:在main.js中引入注意!!! 在 .use(ElementPlus) 必须写在 .mount('#app') 之前否则控制台会报错,引用也不会成功...
2022-07-07 11:52:32
1681
原创 element-ui的el-dialog组件内容在阴影下面
只需在 el-dialog 标签上添加上以下代码即可:append-to-body="true"
2022-03-15 19:48:17
2813
3
原创 vue-cli中兄弟组件的传值
组件之间的传值分为:子传父、父传子、兄弟组件传值、vuex在一般的小型项目中没有必要使用到vuex兄弟组件之间的传值需要用到一个中间件(vue的实例对象),在vue-cli中注册中间件的方式如下:在 main.js 文件中import Vue from 'vue'let VueCom = Vue.extend();Vue.prototype.vc = new VueCom;这样就注册好了一个用于兄弟组件之间传值的中间件传值时:// 需要进行传值操作的事件transmit
2022-02-28 11:36:48
477
原创 原生JS实现上传图片预览效果
使用原生js完成预览上传的图片,并添加一定的判断。可选择将图片转换成base位然后再上传。预览input上传的图片文件
2022-02-23 17:18:32
923
原创 原生页面响应式布局(rem)
注意:rem是依赖根元素的font-size本文以版心为1200px为例首先为了方便计算,推荐依据原尺寸将根元素的font-size设置为100px行内块元素带有的间隙会被放大,需要手动清除间隙:第一步:给该行内(块)元素的父元素设置:font-size:0; 第二步:然后给子元素单独设置 font-size 即可响应式改变 font-size 的js代码如下://按照宽度1920图算, 1rem = 100px;(function(win, doc) { let
2022-02-17 13:08:12
1566
空空如也
Vue3中的shallowReactive监听问题
2022-08-23
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅