我的qq 2038373094

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

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

 

 

要解决三个问题

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

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

3、如何保存这个涂鸦

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

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

 

实现的效果图如下

 

解决方案

 

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

wxml文件

<view class="container">
  <!--画布区域-->
  <button type="warn" bindtap="saveimg" size="mini">保存</button>
  <view class="canvas_area">
    <!--注意：同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作-->
    <canvas canvas-id="myCanvas" class="myCanvas" disable-scroll="false" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
    </canvas>
  </view>
  <!--画布工具区域-->
  <view class="canvas_tools">
    <view class="box box1" bindtap="penSelect" data-param="5"></view>
    <view class="box box2" bindtap="penSelect" data-param="15"></view>
    <view class="box box3" bindtap="colorSelect" data-param="#cc0033"></view>
    <view class="box box4" bindtap="colorSelect" data-param="#ff9900"></view>
  </view>
</view>

 

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