微信小程序用canvas实现电子签名攻略

1.前置知识

了解canvas的基本用法
了解微信小程序的基本开发知识

2.实现步骤

2.1 引进canvas组件

在小程序的json文件中引进canvas组件，例如：

{
  "usingComponents": {
    "canvasdrawer": "../../components/canvasdrawer/canvasdrawer"
  }
}

2.2 在页面上使用canvas组件

在wxml文件中使用canvas组件，在canvas组件上设置id并设定宽高，例如：

<canvasdrawer canvas-id='canvas' canvas-width=750 canvas-height=1000></canvasdrawer>

2.3 配置canvas组件

在小程序的js文件的onReady方法中获取canvas组件，将canvas的2d上下文赋予draw函数，设置样式

onReady: function () {
    var context = wx.createCanvasContext('canvas', this)
    this.draw(context);
},

draw: function (ctx) {
    ctx.setStrokeStyle('#000000')
    ctx.setLineWidth(4)
    ctx.setLineCap('round')
    ctx.beginPath()
}

2.4 实现签名功能

绑定touchstart、touchmove和touchend事件，在touchstart事件中获取当时的坐标，touchmove中实时画出线条，touchend中结束线条绘制

canvasStart: function(event) {
    this.setData({
        hidden: false
    });
    this.context.setStrokeStyle('#000000');
    this.context.setLineWidth(4);
    this.context.setLineCap('round');
    this.context.beginPath();

    var touches = event.touches[0];
    var x = touches.x;
    var y = touches.y;
    this.context.moveTo(x, y);
},

canvasMove: function(event) {
    var touches = event.touches[0];
    var x = touches.x;
    var y = touches.y;
    this.context.lineTo(x, y);
    this.context.stroke();
},

canvasEnd: function(event) {
    this.setData({
        hidden: true
    });
}

2.5 保存签名

将签名存储到临时文件中，使用小程序提供的api进行保存

canvasSave: function() {
    var that = this;
    wx.canvasToTempFilePath({
        canvasId: 'canvas',
        success: function(res) {
            console.log(res.tempFilePath)
            wx.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: function(res) {
                    wx.showToast({
                        title: '保存成功',
                        icon: 'success',
                        duration: 2000
                    })
                },
                fail: function(res) {
                    console.log(res)
                    if (res.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
                        wx.openSetting({
                            success(settingdata) {
                                console.log(settingdata)
                                if (settingdata.authSetting["scope.writePhotosAlbum"]) {
                                    console.log("获取权限成功，再次点击图片保存到相册")
                                } else {
                                    console.log("获取权限失败")
                                }
                            },
                            fail(failed) {
                                console.log("打开设置失败", failed)
                            }
                        })
                    }
                }
            })
        },
        fail: function(res) {
            console.log(res.errMsg)
        }
    });
}