TheKingMaker-CSDN博客

原创前端放大镜功能实现

先说思路，和裁剪的差不多，都是监听鼠标的坐标，放大效果无非就是裁剪出一个较小的区域然后给他一个正常的宽高，比如你的放大镜宽高都是100，要放大2倍，那么放大的区域就是以鼠标坐标为中心宽高是50的区域，把他放到100的框里面。这个功能相比前一篇的图片裁剪还是比较简单的，至少我这里的代码量只有三分之一，同样也要使用到drawImage这个方法，不熟悉的同学可以先去看一下上一篇介绍图片裁剪的，里面有说明。今天和大家分享一下放大镜的实现，同样也要使用到canvas，不了解的同学可以先去学习一下。

2023-01-20 14:53:11 368

原创使用canvas实现前端图片裁剪功能，以vue为例

今天和大家分享一下我个人使用canvas实现前端图片裁剪功能的方法，canvas算是前端进阶的一个必修课了，不太了解的同学可以先去找点资料打点基础，个人对canvas的理解就是把他类比成一个画图工具，在画图工具中我们是使用可视化的界面去画图，而在canvas里则是使用代码去实现我们在可视化界面的操作进而去画图wind-slayer-ui。

2023-01-19 17:47:41 3949

原创小记录一下，使用child_process和npm script注意的地方

首先是在script定义的名字不要和一些保留字相同，我在package.json定义了一个叫publish的脚本用来执行build.js，然后再build.js的最后我是执行了npm publish这个命令去更新，这会导致无限执行build.js这个脚本，将package.json里的脚本名字改一下就可以了然后要注意的是npm这个命令名字在win32里面是不同的需要判定一下，不然会报spawn npm ENOENT这个错误...

2022-07-04 00:40:43 622

原创使用vite实现按需引入

这个本来是在上一篇的里面发的，但那会突然有问题了，应该是我那会看走眼了，明明前一晚已经ok的，只需要在入口文件哪里export就可以了使用ts的需要编写一个d.ts文件，不然ts会报错，但不影响使用...

2022-07-02 21:19:06 473

原创使用vite打包插件并上传到npm

接上文，目前这个组件库是已经初步上线了，昨晚弄了一晚的打包问题，今天上午优化了点东西开源仓库：https://gitee.com/li-hanming/wind-slayer-ui 别问为什么不用github，问就是上不去https://gitee.com/li-hanming/wind-slayer-uihttps://gitee.com/li-hanming/wind-slayer-ui现在来说一说问题和经验总结1.打包出来的css和js分离了，导致样式会消失，需要手动引入：翻了资料说在配置的时候加上一

2022-06-29 15:06:29 2170

原创使用vue3+ts实现组件库并发布到npm（会持续更新）

博主目前已在一家公司实习，技术总监挺厉害的源代码也都公开，使用的技术也比较新，学习了一段时间过后想自己写一点插件之类的。目前个人计划是先做一个组件库，再做一个页面栈管理的插件。先说说组件库，个人并不打算像ant-design和element-ui那样把所有的常用的页面组件写出来，没有太多必要而且也肯定是远不如这些成熟的组件库的，所以个人的想法是，补盲。目前对这个组件库的内容想法就是一个分页组件，还有一个弹窗的组件。这些都是我个人在实习中遇到的，在我自己实习做的项目由于是商用项目是比较少使用到这些第三方组件，

2022-06-28 16:36:59 929 1

原创前端post传递文件出500错误no multipart boundary was found

前端传递formdata的时候一直传不过去，报500错误，和后端沟通后发现是这个错误，这个错误是需要在请求头，content-type：multipart/form-data后面加上个boundary，用了axios貌似不会给我自动加上，自己手动加也不行，于是直接用原生fetch了，就给我自动加上了...

2022-06-10 13:58:14 1127

原创 js面试题：链式定时任务

u.console("hello").settimeout(3000).console("world").settimeout(3000).console()首先输出hello，3s后输出world,再间隔3s,再输出这个我们可以使用累加定时来完成function uc() { this.arr = [] this.event = [] this.time = 0 this.console = function (str) { if (this.

2022-05-07 12:07:08 204

原创 js面试题：实现一个构造函数 new的时候每次加一

这个题还是有点懵的，网上没什么答案，看了别人的回答感觉不是很行，就自己想了，我们可以使用原型链上的一个属性来记录次数，同时还需要判定是否是new调用let cl = function (name) { this.name = name if (this instanceof cl) {//判定是否是new调用 if (cl.prototype.count !== undefined) { cl.prototype.count++

2022-05-07 12:02:39 157

原创 antd form表单initialValue不生效的问题

首先是在组件里form不能被div或空标签包裹着其次是数据源要要赋初值，不能初值是空后面再赋值，这样是没效果的，这种情况createref然后手动setFieldValue//错误例子let [managerInit,change] = useState([])useEffect(() => { change(...) }, [managerInit])//正确例子1let [managerInit] = useState(useSelector((state) =&gt

2022-04-08 12:09:08 5277

原创 react eject后报错Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` env

前言，react后台项目进入到了接口阶段，需要设置webpack代理，还有改端口（因为node服务器端和react都是用3000端口）我们eject出webpack.config.js，eject前要把git修改的提交完，这个真的醉，弄出一大堆东西出来，我就想要一个webpack.config.js不能直接给？完事后就出了标题那个错误Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV

2022-04-06 00:15:55 7538 6

原创 react图片动态路径

这react槽点真多。。还是vue好用他不能直接在src中写入路径，我在webpack里用file-loader也是不行，无语居然推荐的方法是import？我变量import你个****************于是只能用require，服气，这个require要注意的是，路径一定要写死。。什么意思呢，就是你的变量必须只是你的文件名，不然就会给你把你路径里全部东西全都require，服let i=require('../../../src/assets/home-recom/'+e.

2022-03-30 21:44:10 882

原创 React-router-dom实现路由监听

博主来学react啦，真的挺多坑的相比vue，文档和版本很乱，一开始我不知道React-router-dom和React-router有啥区别，资料也不全，就下了React-router然后百度出了一个0.x的版本的文档出来，我也是佛了，就各种错误，才知道原来最新是React-router-dom，文档地址是https://reactrouter.com/docs/en/v6/api#uselocation，不要走错了，写的还可以相比而言，说实话这些文档都写得不是很通俗易懂，查了很多资料都很少找到有关Rea

2022-03-28 20:22:32 3690 1

原创 uniapp中使用微信组件picker-view个人经验总结

博主最近在使用uniapp做一个微信小程序，要使用到picker UI组件，原先是使用vant的，但由于在created组件的时候使用云函数异步获取picker内的数据，最终导致展示不了，真的无语，如果是使用本地数据就没问题，于是就去找其他UI，用了很多，各种问题，最终使用了微信原生的组件，可能很多人要问我为什么不使用picker而要用picker-view，是因为。。picker的字体太小了，这微信，上网查也说改不了，于是只能用picker-view，下面进入正文picker-view的遮罩层这

2022-03-17 14:27:24 5044

exxes的博客