微信小程序如何实现对背景图片进行涂鸦并且保存图片，把图片上传到服务器上

阳光穿透心脏的1/2处 2022-01-27 00:11 515阅读 0赞

### 我的qq 2038373094 ###

我做的是微信小程序、网站、手机app，后端java+前端vue、bootstrap框架、原生的html+css+js都会

做过律师在线咨询系统、共享农场手机app、在线心理咨询系统

### ***要解决三个问题*** ###

**1、如何设置画布背景是一张图片而不是空白的**

**2、如何在图片上进行涂鸦**

**3、如何保存这个涂鸦**

**4、把这个涂鸦图片上传到服务器上面**

**5、可以把图片保存到相机里面**

### 实现的效果图如下 ###

![20190525092713307.gif][]

## ##

### ***解决方案*** ###

首先要感谢贡献文章的前辈  我是看了不少的博客，然后在这个基础上设置了画布的背景图片；

### ***wxml文件*** ###

## ##

### ***js文件*** ###

### ***难点*** ###

### ***1、显示背景图片是数学题目*** ###

ctx = wx.createContext();
        ctx.drawImage(this.data.img, 0, 0, 686, 686);
        ctx.stroke();
        wx.drawCanvas({
          canvasId: "myCanvas",
          reserve: true,
          actions: ctx.getActions() // 获取绘图动作数组
        });

### **2、 保存图片** ###

wx.canvasToTempFilePath({
          width: 686,
          height: 686,
          canvasId: "myCanvas",
          success: function success(res) {
            var tempFilePath = res.tempFilePath;
            console.log(tempFilePath);
            //把图片保存到相册
            wx.saveImageToPhotosAlbum({
              filePath: tempFilePath
            });
            //把图片保存到相册
            //进行文件的拷贝
            //上传
            wx.uploadFile({
              url: "http://192.168.0.101:8080/Teacher/copyfile.action",
              filePath: tempFilePath,
              name: "file",
              header: { "Content-Type": "multipart/form-data" },
              //成功
              success: function success(res) {
                console.log(res);
                if (res.statusCode != 200) {
                  wx.showModal({
                    title: "提示",
                    content: "上传失败",
                    showCancel: false
                  });
                  return;
                }
                var data = res.data;
                console.log("田江南你好刷币:" + data);
              },
              //成功
              fail: function fail(e) {
                console.log(e);
                wx.showModal({
                  title: "提示",
                  content: "上传失败",
                  showCancel: false
                });
              }
            });
            //进行文件的拷贝
          }
        });

### ***完整的源代码在这里*** ###

[https://download.csdn.net/download/qq\_37591637/11202924][https_download.csdn.net_download_qq_37591637_11202924]

[20190525092713307.gif]: /images/20220127/ef9a5a29678f4612b69c3eed4c281ec0.png
[https_download.csdn.net_download_qq_37591637_11202924]: https://download.csdn.net/download/qq_37591637/11202924