微信小程序 手写签名并保存成图片形式

<template>

    <view class="Container">

        <view class="PaintRegion">

            <!-- 画板区域 -->

            <canvas class="myCanvas" canvas-id="myCanvas" @touchstart="touchStart" @touchmove="touchMove"

                @touchend="touchEnd">

            </canvas>

        </view>

        <view class="BtnRegion">

            <!-- 按钮区域，有保存，清空等按钮 -->

            <button type="primary" size="mini" @click="clearCanvas">清空</button>　　　

            <button type="primary" size="mini" @click="SaveImg">保存</button>

        </view>

        <!-- <view>

            图片预览区域

            <image class="" src="{{url}}">

            </image>

        </view> -->

    </view>

</template>

<script>

    // var config = require("../../utils/config.js");

    export default {

        data() {

            return {

                penColor: 'black',

                lineWidth: 3,

                Imgurl: ""

            }

        },

        methods: {

            /**

             * 触摸开始

             */

            touchStart: function(e) {

                //得到触摸点的坐标

                this.startX = e.changedTouches[0].x;

                this.startY = e.changedTouches[0].y;

                this.context = wx.createCanvasContext("myCanvas", this);

                // 设置画笔颜色

                this.context.setStrokeStyle(this.penColor);

                // 设置线条宽度

                this.context.setLineWidth(this.lineWidth);

                this.context.setLineCap('round'); // 让线条圆润

                this.context.beginPath();

            },

            /**

             * 手指触摸后移动

             */

            touchMove: function(e) {

                var startX1 = e.changedTouches[0].x;

                var startY1 = e.changedTouches[0].y;

                this.context.moveTo(this.startX, this.startY);

                this.context.lineTo(startX1, startY1);

                this.context.stroke();

                this.startX = startX1;

                this.startY = startY1;

                //只是一个记录方法调用的容器，用于生成记录绘制行为的actions数组。context跟<canvas/>不存在对应关系，一个context生成画布的绘制动作数组可以应用于多个<canvas/>

                wx.drawCanvas({

                    canvasId: 'myCanvas',

                    reserve: true,

                    actions: this.context.getActions() // 获取绘图动作数组

                })

            },

            /**

             * 触摸结束

             */

            touchEnd: function(e) {

                this.touchMove(e);

            },

            /**

             * 清除涂鸦信息

             */

            clearCanvas: function(e) {

                this.context = wx.createCanvasContext("myCanvas", this);

                this.context.draw();

                //CanvasContext.draw(boolean reserve, function callback)

                //将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。

                //reserve:本次绘制是否接着上一次绘制。false则会清空画布，true则保留

            },

            SaveImg: function() {

                var that = this;

                this.context = wx.createCanvasContext("myCanvas", this);

                this.context.draw(true, function() {

                    wx.canvasToTempFilePath({

                        canvasId: 'myCanvas',

                        success: function(res) {

                            // that.setData({

                            //这里是为了预览功能做准备

                            that.Imgurl = res.tempFilePath

                            // });

                            //将图片保存到服务器

                            // wx.uploadFile({

                            //  url: config.fileUrl + "UpLoadFile.php", //接口地址

                            //  filePath: res.tempFilePath,

                            //  name: 'uploadfile_ant',

                            //  header: {

                            //      "Content-Type": "multipart/form-data"

                            //  },

                            //  success: function(res) {

                            //      console.log(JSON.parse(res.data)

                            //      .url); //打印出后台传回前端的图片的url地址

                            //  },

                            //  fail: function(res) {

                            //      wx.hideToast();

                            //      wx.showModal({

                            //          title: '错误提示',

                            //          content: '上传图片失败',

                            //          showCancel: false,

                            //          success: function(res) {}

                            //      })

                            //  }

                            // });

                            //若需要将图片下载到本地，则打开下面的注释

                            // wx.saveImageToPhotosAlbum({

                            //     // 下载图片

                            //     filePath: res.tempFilePath,

                            //     success: function() {

                            //         wx.showToast({

                            //             title: '保存成功',

                            //             icon: 'success',

                            //         })

                            //     },

                            // })

                        },

                    })

                });

            },

        }

    }

</script>

<style>

    .Container {

        border: black 2px solid;

        border-radius: 3px;

        height: 99vh;

        width: 98vw;

        margin: 0 auto;

        box-shadow: 0 0 3px 2px black;

    }

    .PaintRegion {

        height: 90%;

        border: black 1px solid;

        margin: 3px 3px;

        margin-bottom: 10px;

    }

    .BtnRegion {

        /* height: 8%; */

        text-align: center;

    }

    .myCanvas {

        height: 99%;

        width: 99%;

    }

</style>