前端图像处理之马赛克
开门见山
接了个需求,图片处理新增马赛克,可以撤销上一步与还原撤销
项目地址可拉下来直接用
技术需求
JS、canvas
设计思路
canvas画布绘制图片,保证图片比例不变,并且画布不能有留白
鼠标在画布上移动时,获取鼠标位置
获取鼠标定位范围size(每个马赛克大小)的像素平均值
将该区域所有像素点的rgba设为刚刚所求的平均值
循环2-4步,绘制前需要判断当前绘制点与上一次绘制点是否相离太近
导出原尺寸大小的马赛克图片url
撤销:保存每一次打马赛克后的图片数据
恢复:缓存撤销数据
代码实现
定义
原创
2021-05-20 17:56:13 ·
806 阅读 ·
0 评论