ZegTsai's blogs

页面唤起相机拍摄、保存、修改尺寸以及上传近期有个需求，需要在微信中打开移动端页面，让用户在页面中唤起相机进行人脸拍摄，用于身份认证或满足其他业务上的需要。同时要保证上传图像不能过大，需要对图片进行裁剪再上传过程利用input的accept和capture这两个属性来限定接收类型和相机方向（前后摄像）拍摄获取的图片和普通文件上传一样利用FileReader进行读取处理设置到图片目标大小，再用canvas.drawImage读取图片，最后利用canvas.toDataURL转化为base64

ArrayBufferToBase64前言：由于小程序不在维护wx.arrayBufferToBase64（已弃用），项目中需要用摄像头获取人脸并将获取的ArrayBuffer数据转化为base64，经过各种搜索整合，最后解决问题。ArrayBuffer编码为png下载UPNG https://github.com/photopea/UPNG.js 结尾提供完整代码修改代码，将UPNG导出，并引入依赖pako安装pako（npm i pako --save），小程序安装后需要构建npm（具体

描述Typescript定义一个数组，该数组的所有Item只能是指定对象的key值。示例const targetObj = { a: "", b: "", c: ""}// okconst arr = ["a", "b"]// errorconst arr = ["a", "d"]解决const arr: (keyof targetObj)[] = ["a", "b"]思考如果要定义一个对象，对象的key值必须从targetArr的Item中取，该如何定义类型？即

父组件访问子组件方法使用useRef生成childRef，props ref={childRef}访问子组件时报错。报错内容的大意是子组件是函数式组件，不能使用useRef，让你尝试下forwardRef。方案一：尝试forwardRef可能会遇到一直是null的情况function Demo(props, ref) { ... return ( <Child ref={ref}></Child> )}export default forwardRef

React函数组件如何在请求完成后实现页面跳转由于用react开发时直接使用函数式组件，一开始以为需要用Redirect组件来跳转，然后查看文档后发现有withRouter这个高阶函数，能让props中获取location和history对象。利用withRouterimport { withRouter } from "react-router-dom";function Demo(props) { ... api(params).then(res => { props.

背景使用vite构建项目的时候需要用到crypto进行加密出现的错误。问题出在vite本身使用了crypto，我们如果通过npm i crypto -S会导致vite构建时报错。Error: Module "crypto" has been externalized for browser compatibilityand cannot be accessed in client code.解决采用js-md5来进行加密。https://www.npmjs.com/package/js-md5

定义A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, cl

无限长滚动列表（虚拟列表）的实现原理：监听容器滚动，根据滚动距离生成对应列表，再利用绝对定位，将列表展示到容器的对应位置。1、预先处理容器样式与生成数据容器列表的最大高度为500px，列表项（li）的高度定为50px，即容器只展示10条数据。<style> ul.container { position: relative; width:500px; max-height: 500px; /* 限定容器展示区域的大小 */

Vue中模板渲染原理1、概念模板：本质字符串。与字符串的区别：有逻辑（vue中有v-if、v-for）嵌入js变量（{{变量}}）需要转化为html，页面才会识别并正确解析。2、过程理解目的：理解模板（字符串）---->JS的vnode的过程，是如何实现嵌入变量和执行逻辑。转化为html则由updateComponent函数调用patch方法实现。例子1（只有js...

Vue响应式原理MVVM的设计模式：M是Model数据层，V是View视图层，VM则是ViewModel。Vue中的MVVM实现方式：V层通过DOM Listeners来通知VM层修改数据，M层则通过Data Bindings来通知VM层让V层更新显示内容。具体实现方式：数据绑定（Model–>VM–>View）：通过Object.defineProperty(obj,...

virtual DOM（虚拟节点的实现）1 利用JS操作真实DOM节点实现页面渲染任务：在一个容器渲染（利用用户信息生成的）表格，再点击按钮进行数据修改，修改后再重新渲染修改后的信息。方式：利用jQuery操作DOM节点，一开始清空容器的内容，再生成表格，渲染表格。弊端：操作DOM很耗费性能，这种方式是直接替换容器中的所有节点，重复的节点无法复用，降低浏览器性能。HTML代码：&l...

关于JS函数的问题主要讨论函数声明式和函数表达式的区别：先看两个例子：例子1：a();//我是声明式函数function a(){ console.log('我是声明式函数')}例子2：a();//a is not a functionvar a = function (){ console.log('我是赋值型函数（即函数表达式）')}问题：为什么执行会结...

JS实现深拷贝思路：判断传入的类型，创建空数组或对象>>>创建myCopy用于递归调用，分析属性值或项的类型>>>如果值为基本类型值则返回，是对象或数组则递归调用myCopy进一步分析>>>返回拷贝的结果。function deepCopy(obj) { //判断拷贝后的结果是数组还是对象 let copy = Object.p...

参考自《JavaScript权威指南》console.log(([])?true:false); console.log(([]==false?true:false)); console.log(({}==false)?true:false)([])?true:false//会调用Boolean([])，等价于true?true: false[] == false?true:false...

JS实现防抖节流1、实现防抖目的：避免多次触发，触发时间时，让事件处理程序在一段时间后执行。

JS实现数组的常用方法编程思路：先确定方法要传入的参数和返回的值，再通过原型定义，在Array的原型上添加自定的方法，验证是否达到预期效果。1、find的功能array.find(function(currentValue, index, arr), thisValue)功能：返回通过测试（函数内判断）的数组的第一个元素的值。简单理解就是：传入判断条件，判断数组各个元素，返回满足条件...

JS实现深度优先遍历和广度优先遍历1、要求获取以下数据结构中所有name属性值的集合。数据的结构如下：const myData = [ { name: 'a', children: [ { name: 'b', children: [{ name: 'e' }] }, { name: 'c', children: [{...