微信小程序签名功能

html

<canvas class="canvans" bindtouchstart="start" canvas-id="first" bindtouchmove="move" bindtouchend="end" id="content"></canvas>
<view class="gong">
    <view>
        <view class="gong_name" bindtap="goBack">取消</view>
    </view>
    <view>
        <view class="gong_name" bindtap="clearData">清除</view>
    </view>
    <view>
        <view class="gong_name" bindtap="save">保存</view>
    </view>
    </view>

js

import Util from '../../utils/util'
import URLconstant from '../../utils/URLconstant'
import request from '../../utils/request'
Page({

    /**
     * 页面的初始数据
     */
    data: {
        context: {}
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
        //获取画笔
        var context = wx.createCanvasContext('first')
        // console.log(context);
        this.setData({
            context
        })

    },

    /**
     * 生命周期函数--监听页面显示
     */
    move(e) {
        //手指移动
        console.log("移动", e.touches[0]);
        let ctx = this.data.context
        let x = e.touches[0].x
        let y = e.touches[0].y
        //把这个点画出
        ctx.lineTo(x, y)
        ctx.stroke()
        ctx.draw(true)
        //并且作为下一个起点
        ctx.moveTo(x, y)
    },
    start(e) {
        //触摸开始
        console.log("开始", e.touches[0]);
        let ctx = this.data.context
        let x = e.touches[0].x
        let y = e.touches[0].y

        ctx.moveTo(x, y)
    },
    end(e) {
        //触摸结算
        console.log("end", e.changedTouches[0]);
        let ctx = this.data.context
        let x = e.changedTouches[0].x
        let y = e.changedTouches[0].y

    },

    /**
     * 将画布下载到相册
     */
    save() {
        let query = wx.createSelectorQuery();
        query.select('#content').boundingClientRect(rect => {
            let height = rect.height;
            let width = rect.width;
            console.log(rect);

            wx.canvasToTempFilePath({
                x: 0,
                y: 0,
                width,
                height,
                fileType: 'png',
                canvasId: 'first',
                destWidth: width,
                destHeight: height,
                success(res) {
                    console.log(res.tempFilePath, res)
                    //下载图片至本地
                    // wx.saveImageToPhotosAlbum({
                    //     filePath: res.tempFilePath,
                    //     success(r) {
                    //         console.log(r, "相册");
                    //     }
                    // })
                  //把本地图片变成网络图片
                    request.uploadFile(res.tempFilePath).then(res => {
                        console.log(res);
                    })
                }
            })
        }).exec()


    },
    //清除
    clearData() {
        let ctx = this.data.context
        ctx.draw()
    },
    //取消
    goBack() {
        wx.navigateBack()
    }

})

css

.canvans {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.tishici {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: rotate(90deg) translate(-50%, -50%);
    width: 380rpx;
    /* height: 200rpx; */
    background-color: red;

}

.gong {
    position: absolute;
    left: 30rpx;
    bottom: 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* background-color: red; */
    /* align-items: center; */
    /* background-color: red; */
    /* transform: rotate(90deg); */
}

.gong>view {
    width: 80rpx;
    height: 120rpx;
    line-height: 120rpx;
    text-align: center;
    border: 2rpx solid #5EAB59;
    margin-left: 30rpx;
    /* transform: rotate(90deg); */
    margin-bottom: 30rpx;
}

.gong .gong_name {
    transform: rotate(90deg);
}