vue-fabric-h5-editor
一个简单的h5 移动端图片可视化图片编辑器
效果预览
运行效果：
编辑效果：
技术选型
- Vue3
- Element-plus
- Fabric.js
- ES6
功能说明
主要实现H5 移动端简单的图片的可视化编辑、预览、下载等功能。
- 文本编辑：实现画布上的文本框的添加、字体属性的设置、样式风格编辑、背景颜色个性化设置、文本内容的设置等；
- 图片上传：点击上传图片，打开电脑文件的，实现图片的读取并添加到画布编辑区上，自由设置背景图片；
- 绘制图片：实现根据鼠标坐标自由绘制图形(目前仅实现矩形，其他类似，可自己实现)；
- 删除控件：编辑区上的控件可自由删除；
- 预览图片：编辑完成后可预览自己编辑的图片效果，并在右侧100%显示；
- 下载图片：可下载编辑好的图片；
- 画布缩放：可放大或者缩小画布，画布上的内容同步缩放；
- 一键清空：重置实现画布一键清空；
- ...
目前仅实现以上的功能，后续在继续完善更新~~
未解决的小问题：
- bug一：同步放大处理有点小问题，只能放大到80%；
- bug二：用户fabric实现的监听鼠标事件绘制会一直绘制，这个不知道是不是fabric的问题，还是我的问题，看别人（好几个）写的绘制也有这个问题