![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JS
文章平均质量分 69
dayTimeAffect
这是一个前端刚起步的萌新
展开
-
前端图像处理之马赛克
开门见山接了个需求,图片处理新增马赛克,可以撤销上一步与还原撤销项目地址可拉下来直接用技术需求JS、canvas设计思路canvas画布绘制图片,保证图片比例不变,并且画布不能有留白鼠标在画布上移动时,获取鼠标位置获取鼠标定位范围size(每个马赛克大小)的像素平均值将该区域所有像素点的rgba设为刚刚所求的平均值循环2-4步,绘制前需要判断当前绘制点与上一次绘制点是否相离太近导出原尺寸大小的马赛克图片url撤销:保存每一次打马赛克后的图片数据恢复:缓存撤销数据代码实现定义原创 2021-05-20 17:56:13 · 819 阅读 · 0 评论 -
手撕代码 — 防抖与节流
防抖防抖是在触发事件的n秒之后才会执行函数,触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间应用场景按钮点击事件input事件手机号验证防止用户多次重复提交…//每次触发事件时都取消之前的延时调用方法const debounce = (func, time) => { if (typeof func !== 'function') { throw new TypeError('Expected a function原创 2020-12-10 11:26:49 · 161 阅读 · 0 评论