
笔记
文章平均质量分 52
ZegTsai
这个作者很懒,什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
HTML5唤起摄像头拍摄、裁剪并上传
页面唤起相机拍摄、保存、修改尺寸以及上传近期有个需求,需要在微信中打开移动端页面,让用户在页面中唤起相机进行人脸拍摄,用于身份认证或满足其他业务上的需要。同时要保证上传图像不能过大,需要对图片进行裁剪再上传过程利用input的accept和capture这两个属性来限定接收类型和相机方向(前后摄像)拍摄获取的图片和普通文件上传一样利用FileReader进行读取处理设置到图片目标大小,再用canvas.drawImage读取图片,最后利用canvas.toDataURL转化为base64原创 2021-11-24 17:26:38 · 1856 阅读 · 0 评论 -
微信小程序onCameraFrame获取的ArrayBuffer转为base64图片的方法
ArrayBufferToBase64前言:由于小程序不在维护wx.arrayBufferToBase64(已弃用),项目中需要用摄像头获取人脸并将获取的ArrayBuffer数据转化为base64,经过各种搜索整合,最后解决问题。ArrayBuffer编码为png下载UPNG https://github.com/photopea/UPNG.js 结尾提供完整代码修改代码,将UPNG导出,并引入依赖pako安装pako(npm i pako --save),小程序安装后需要构建npm(具体原创 2021-11-17 16:38:42 · 6464 阅读 · 8 评论 -
Typescript定义数组,让数组的所有Item只能是指定对象的key值
描述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中取,该如何定义类型?即原创 2021-05-18 14:50:40 · 3344 阅读 · 0 评论 -
function components cannot be given refs. Attempts to access this ref will fail.
父组件访问子组件方法使用useRef生成childRef,props ref={childRef}访问子组件时报错。报错内容的大意是子组件是函数式组件,不能使用useRef,让你尝试下forwardRef。方案一:尝试forwardRef可能会遇到一直是null的情况function Demo(props, ref) { ... return ( <Child ref={ref}></Child> )}export default forwardRef原创 2021-05-13 10:33:13 · 3553 阅读 · 0 评论 -
React如何在请求完成后实现页面跳转
React函数组件如何在请求完成后实现页面跳转由于用react开发时直接使用函数式组件,一开始以为需要用Redirect组件来跳转,然后查看文档后发现有withRouter这个高阶函数,能让props中获取location和history对象。利用withRouterimport { withRouter } from "react-router-dom";function Demo(props) { ... api(params).then(res => { props.原创 2021-05-11 17:26:55 · 1200 阅读 · 0 评论 -
Error: Module “crypto“ has been externalized for browser compatibility and cannot be accessed in ...
背景使用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原创 2021-05-08 17:22:14 · 12930 阅读 · 2 评论 -
什么是闭包?一看就会!
定义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原创 2021-04-17 23:41:06 · 220 阅读 · 0 评论 -
无限长滚动列表(虚拟列表)的实现
无限长滚动列表(虚拟列表)的实现原理:监听容器滚动,根据滚动距离生成对应列表,再利用绝对定位,将列表展示到容器的对应位置。1、预先处理容器样式与生成数据容器列表的最大高度为500px,列表项(li)的高度定为50px,即容器只展示10条数据。<style> ul.container { position: relative; width:500px; max-height: 500px; /* 限定容器展示区域的大小 */原创 2021-03-04 16:47:19 · 2124 阅读 · 2 评论 -
Vue中模板渲染原理
Vue中模板渲染原理1、概念模板:本质字符串。与字符串的区别:有逻辑(vue中有v-if、v-for)嵌入js变量({{变量}})需要转化为html,页面才会识别并正确解析。2、过程理解目的:理解模板(字符串)---->JS的vnode的过程,是如何实现嵌入变量和执行逻辑。转化为html则由updateComponent函数调用patch方法实现。例子1(只有js...原创 2019-09-14 15:35:35 · 3224 阅读 · 0 评论 -
Vue响应式原理(浅显理解与MVVM的实现)
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,...原创 2019-09-13 21:50:38 · 668 阅读 · 0 评论 -
virtual DOM(虚拟节点的实现)
virtual DOM(虚拟节点的实现)1 利用JS操作真实DOM节点实现页面渲染任务:在一个容器渲染(利用用户信息生成的)表格,再点击按钮进行数据修改,修改后再重新渲染修改后的信息。方式:利用jQuery操作DOM节点,一开始清空容器的内容,再生成表格,渲染表格。弊端:操作DOM很耗费性能,这种方式是直接替换容器中的所有节点,重复的节点无法复用,降低浏览器性能。HTML代码:&l...原创 2019-09-13 00:49:57 · 1101 阅读 · 0 评论 -
关于JS函数的问题
关于JS函数的问题主要讨论函数声明式和函数表达式的区别:先看两个例子:例子1:a();//我是声明式函数function a(){ console.log('我是声明式函数')}例子2:a();//a is not a functionvar a = function (){ console.log('我是赋值型函数(即函数表达式)')}问题:为什么执行会结...原创 2019-09-03 22:50:04 · 313 阅读 · 0 评论 -
JS实现深拷贝
JS实现深拷贝思路:判断传入的类型,创建空数组或对象>>>创建myCopy用于递归调用,分析属性值或项的类型>>>如果值为基本类型值则返回,是对象或数组则递归调用myCopy进一步分析>>>返回拷贝的结果。function deepCopy(obj) { //判断拷贝后的结果是数组还是对象 let copy = Object.p...原创 2019-08-26 21:43:24 · 142 阅读 · 0 评论 -
JS关于“==”运算符
参考自《JavaScript权威指南》console.log(([])?true:false); console.log(([]==false?true:false)); console.log(({}==false)?true:false)([])?true:false//会调用Boolean([]),等价于true?true: false[] == false?true:false...原创 2019-08-22 00:35:04 · 290 阅读 · 0 评论 -
JS实现防抖和节流
JS实现防抖节流1、实现防抖目的:避免多次触发,触发时间时,让事件处理程序在一段时间后执行。原创 2019-08-21 20:13:48 · 430 阅读 · 0 评论 -
JS实现数组的find方法
JS实现数组的常用方法编程思路:先确定方法要传入的参数和返回的值,再通过原型定义,在Array的原型上添加自定的方法,验证是否达到预期效果。1、find的功能array.find(function(currentValue, index, arr), thisValue)功能:返回通过测试(函数内判断)的数组的第一个元素的值。简单理解就是:传入判断条件,判断数组各个元素,返回满足条件...原创 2019-08-20 16:54:47 · 8443 阅读 · 0 评论 -
JS从“深度优先”和“广度优先”遍历获取数据中某一属性值的集合
JS实现深度优先遍历和广度优先遍历1、要求获取以下数据结构中所有name属性值的集合。数据的结构如下:const myData = [ { name: 'a', children: [ { name: 'b', children: [{ name: 'e' }] }, { name: 'c', children: [{...原创 2019-08-20 00:28:47 · 676 阅读 · 2 评论