uniapp微信小程序实现图片涂鸦、文字、移动等功能，基于Fabric.js

一、实现思路

注：本文主要是实现的思路，由微信小程序canvas直接编辑图片改为跳转h5单独部署的项目来处理图片。

1.原来做了一版小程序中直接使用canvas实现图片的缩放、移动、涂鸦、文字，但在缩放、移动上有些卡顿，缺少撤回等功能，小程序中需要处理的功能较多，但是体验感不是很好，调整了方法，将图片传到h5项目中，在Fabric.js中处理图片，功能更丰富。

原来的界面：

2.Fabric是基于 JavaScript 的库，主要用于在浏览器中进行复杂的图形操作和交互。它最常用于创建和操作 HTML5 Canvas 元素上的内容，提供了丰富的 API 来绘制形状、处理图像、添加文本、应用滤镜效果等。

新的界面效果：

二、微信小程序处理

1.微信小程序中点击需要处理的图片，将图片信息存储在接口（需要后端配合处理，在图片编辑时有一些要显示的信息）

2.跳转至h5页面，通过接口获取到传递的信息（小程序中注意配置h5项目的业务域名，否则外链打不开）

小程序中只用处理跳转，其他图片编辑操作在h5项目中处理

三、h5项目处理

1.搭建vue项目（用的vue2）,引入fabric.js

注：需要单独发布为一个项目，从小程序中跳转到这里

2.编写图片编辑的页面，引入Fabric，将图片转化为base64，避免跨域问题（通过接口处理）

3.加上需要的功能，使用Fabric中的API来处理图片

4.点击浏览器左上角返回小程序，监听返回事件，携带编辑后的图片信息

5.小程序中接收到图片信息显示即可

四、图片编辑效果

1.移动

2.缩放

3.画笔（涂鸦）

4.旋转

5.文字（可缩放移动）

6.撤销/重做

撤回上一步的操作，或者撤销撤回的操作

7.擦除，滑动经过的区域，颜色变淡后消除