有没有那么一种可能，在前端页面处理音视频？例如用户选择一个视频，然后支持他设置视频的任意一帧作为封面，就不用把整一个视频上传到后端处理了。经过笔者的一番摸索，基本实现了这个功能，一个完整的demo：ffmpegwasm截取视频帧功能：支持mp4/mov/mkv/avi等文件。基本的思想是这样的：使用一个fileinput让用户选择一个视频文件，然后读取为ArrayBuffer，传给ffmpeg.wasm处理，处理完之后，输出rgb数据画到canvas上或者是转成base64当做img标签的src属性就形成图片了。（Canvas可以直接把videodom当作drawImage的对象进而得到视频帧
目录前言一、正则是什么？二、造轮子三、轮子使用实例总结前言例如：随着前端的发展，很多功能都需要在前端填写时就先校验是否填写正确，则博主写了一些校验轮子供大家使用。一、正则是什么？正则表达式(regularexpression)是一个描述字符规则的对象。可以用来检查一个字符串是否含有某个子字符串，将匹配的子字符串做替换或者从某个字符串中取出符合某个条件的子串等。为什么要用正则：前端往往有大量的表单数据校验工作，采用正则表达式会使得数据校验的工作量大大减轻。常用效果：邮箱、手机号、身份证号等 二、造轮子1.电话号码/手机号/身份证/邮箱校验/***@description判断是否是手机号*@par
情景：使用van-uolaoder组件上传多个图片后调用保存按钮，这时由于存在多张图片，调用接口时前端传的参数就是数组形式。（前端传的数组要先转为字符串）处理方法是：1.先确定后端使用什么注解，如果是@requestBody注解，则请求体内容类型一般要为application/json（字符串格式）或multipart/form-data。如果用@requestParam注解，则为 Content-Type为application/x-www-form-urlencoded编码的内容，Content-Type默认为该属性，默认必须要传该参数名对应的参数，否则会报错。补充：(1)get请求参数是
组件分享之前端组件——用于自定义表单的前端组件form-create背景近期正在探索前端、后端、系统端各类常用组件与工具，对其一些常见的组件进行再次整理一下，形成标准化组件专题，后续该专题将包含各类语言中的一些常用组件。欢迎大家进行持续关注。组件基本信息组件：form-create开源协议：MITlicense官网：www.form-create.com/v2/内容本次分享一款用于自定义表单的前端组件form-create，它可以通过JSON生成动态呈现、数据收集、验证和提交功能。支持3个UI框架，并支持生成任何Vue组件。内置20种常用表单组件和自定义组件，无论多么复杂的表单都可以轻松处理。
记录在项目中遇到跨域并进行解决的方案解决方案记录在项目中遇到跨域并进行解决的方案前端代理部分nginx转发配置origin限制,修复CORS跨域漏洞前端代理部分代理后页面请求地址截图：这里地址栏的地址是：http://127.0.0.1:13908调用登录接口请求地址是：http://127.0.0.1:13908/api/sys/login后端网关的端口不是13908，是13909，且没有api，这里是前端加了代理nginx转发nginx配置如下，监听前端访问的端口，并且拦截并转发到我们需要的地址。 server{ listen13908; server_namelocalhost;
安装测试环境：Nginx1.20+PHP7.2+MySQL5.6修复了无法上传开放平台问题安装说明：1、上传后端目录至网站2、导入提供的数据库文件3、修改数据库配置文件根目录下config.php，增加数据库用户名和密码4、网站后台直接访问网址，用户名及密码admin admin8885、小程序端mp-weixin修改common/vendor.js文件，查找https或uniacid修改为自己的网址，uniacid:"1"默认可不修改
目录一、前言二、伪元素选择器1、选择器2、注意事项3、代码示例三、伪元素清除浮动1、第一种伪元素清除浮动2、第二种伪元素清除浮动四、CSS3盒子模型1、box-sizing：content-box2、box-sizing：border-box五、CSS3图片模糊处理1、图片变模糊①、CSS3滤镜filter②、语法③、实例实现2、计算盒子宽度①、width：calc函数②、语法③、实例实现(子盒子的宽度永远比父盒子小30px)六、transition过渡1、语法规范2、实例实现3、进度条案例实现①、实现以下内容②、代码示例七、总结一、前言 css3这个相信大家不陌生了，是个非常有趣，神奇的东
Web前端常用正则校验规则作为Web前端开发，常用的正则校验规则有很多。下面是一些常见的示例：1.校验手机号码手机号码的正则表达式可以根据不同国家和地区的手机号码格式进行调整。以下是中国大陆的手机号码正则表达式：constregex=/^1[3456789]\d{9}$/;在这个示例中，正则表达式^1[3456789]\d{9}$表示：^表示匹配字符串的开头。1表示必须以数字1开头。[3456789]表示第二位必须是3、4、5、6、7、8或9中的一个。\d{9}表示后面必须跟着9个数字。$表示匹配字符串的结尾。2.校验邮箱地址邮箱地址的正则表达式可以根据不同的邮箱服务提供商进行调整。以下是一个
运行npminstall提示错误Modulenotfound:Error:Can’tresolve‘swiper/vue’inxxx,该错误是vue-awesome-swiper版本过高引起的，降低版本即可，解决办法如下：1.Modulenotfound:Error:Can’tresolve‘swiper/vue’in‘D:\前端\Git\Git\Vue\music\node_modules\vue-awesome-swiper’2.去node_modules中删除文件夹vue-awesome-swiper3.下载vue-awesome-swiper@3.1.3cnpminstallvue-a
目录1.WebsocketWebsocket与HTTP的介绍不同使用场景Websocket链接过程2.Session&CookieCookie的工作原理Session的工作原理区别3.前端基础知识1.WebsocketWebsocket与HTTP的介绍HTTP：1.HTTP是单向的，客户端发送请求，服务器发送响应。每个HTTP或HTTPS请求每次都会新建与服务器的连接，并且在获得响应后，连接将自行终止。 每个HTTP请求都会建立单独的TCP连接到服务器。2.从 HTTP/1.1起，默认使用长连接，用以保持连接特性。使用长连接的HTTP协议，会在响应头有加入这个头部字段：Connection:k
