微信小程序實現電子簽名

<style lang="less">
.paper{border:1px solid #dedede; margin: 10px; height:160px }
.image{border:1px solid #dedede; margin: 10px; height:160px }
.signBtn{display: flex; margin-top:20px;}
.signTitle{ text-align: center; font-size:1.2em;margin:10px auto;}
.handWriting{width:100%}
.image image{width:100%; height:160px }
</style>

<template>
    <view class="sign">
        <view class="signTitle">被檢查單位簽字</view>
        <view class="paper">
            <canvas class="handWriting" disable-scroll="true" bindtouchstart="touchstart1" bindtouchmove="touchmove1"  canvas-id="handWriting1">
            </canvas>
        </view>
        <view class="signBtn">
            <button size="" type="primary" bindtap="sign1ok">完成簽字</button>
            <button size="" type="warn" bindtap="reSign1">重新簽字</button>
        </view>
    </view>
    <view class="image" hidden="{{src?false:true}}">
        <image src="{{src}}" ></image>
    </view>
</template>

<script>
import wepy from 'wepy'
import api from '../api/api';
    export default class Login extends wepy.page {
        config = {
            navigationBarTitleText: '電子簽名',
            backgroundColor: "#f5f5f5",
            navigationBarBackgroundColor: "#2EBAFF",
            navigationBarTextStyle: "white",
            "usingComponents": {
                "i-icon": "../iview/icon/index",
                'i-modal': '../iview/modal/index'
            }
        };
        data = {
            context1: null,
            hasDraw:false, //默認沒有畫
            src:null
        };
        computed = {
        }
        methods = {
            touchstart1(e) {
                let context1 = this.context1;
                context1.moveTo(e.touches[0].x, e.touches[0].y);
                this.context1 = context1;
                this.hasDraw = true; //要簽字了
                this.$apply();
            },
            touchmove1(e) {
                let x = e.touches[0].x;
                let y = e.touches[0].y;
                let context1 = this.context1;
                context1.setLineWidth(3);
                context1.lineTo(x, y);
                context1.stroke();
                context1.setLineCap('round');
                context1.draw(true);
                context1.moveTo(x, y);
            },
            reSign1() { //重新畫
                let that = this;
                let context1 = that.context1;
                context1.draw(); //清空畫布
                that.hasDraw = false;
                that.src= null;
                that.$apply()
            },
            sign1ok() {
                let that = this;
                if(!that.hasDraw){
                    console.log("簽字是空白的 沒有簽字")
                }else{
                    let context1 = that.context1;
                    context1.draw(true, wx.canvasToTempFilePath({
                        canvasId: 'handWriting1',
                        success(res) {
                            console.log(res.tempFilePath) //得到了圖片下面自己寫上傳吧
                            that.src = res.tempFilePath;
                            that.$apply();

                            // wx.uploadFile({
                            //   url: "http://**************",
                            //   filePath: res.tempFilePath,
                            //   name: "file",
                            //   formData: {
                            //     filetype: "image",
                            //   },
                            //   success: function (result) {
                            //     console.log(result)
                            //   }
                            // })
                            /*api.uploadImg({data:res.tempFilePath})
                                .then(res => {

                                    that.$apply()
                                })*/
                        }
                    }))
                }
            },
        }
        onUnload() {

        }
        onLoad(){
            let context1 = wx.createCanvasContext('handWriting1');
            context1.setStrokeStyle("#000000")
            context1.setLineWidth(3);
            this.context1= context1;
            console.log(context1)
            this.$apply()
        }
    }
</script>

參考：https://www.dznx.cn/front/16.html