電子署名を実装するWeChatミニプログラム

<view class="sign-contain">
 <view class="signName">
  <canvas id="canvas" canvas-id="canvas" class="{{ sysType === 'iOS' ? 'canvas' : 'canvas bg000'}}" disabled-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback"></canvas>
 </ビュー>

 <view class="btn-wrap">
  <button catchtap="cleardraw">署名をクリア</button>
  <button catchtap="uploadImg">署名をアップロード</button>
 </ビュー>
</ビュー>

var context = null; // wx.createContext を使用して描画コンテキストコンテキストを取得します
var isButtonDown = false; // 描画が進行中かどうか var arrx = []; // アクションの水平座標 var arry = []; // アクションの垂直座標 var arrz = []; // 押すことと持ち上げることの組み合わせを示す全体の状態 var canvasw = 0; // キャンバスの幅 var canvash = 0; // キャンバスの高さ Page({
  データ： {
    キャンバスw: ''、
    キャンバス: '',
    画像URL: ''、
    情報： {}、
    符号Base64: ''、
    sysType: '' // モデルを決定する},

  onLoad: 関数 (オプション) {
    それを = これとする
    res = wx.getSystemInfoSync() とします。
    const システム = res.system.split(' ')
    that.setData({
      システムタイプ: システム[0],
    })
    パラメータをJSON.parse(options.params)とします。
    that.setData({
      情報: パラメータ、
    })
    その.startCanvas();
    that.initCanvas()
  },
  /**
  * 下記 - 手書き署名/署名のアップロード*/
  startCanvas(){//Canvas 初期化実行 var that = this;
    //システム情報を取得する wx.getSystemInfo({
      成功: 関数 (res) {
        キャンバス幅 = res.windowWidth;
        キャンバスの高さ = res.windowHeight;
        that.setData({ canvasw: canvasw });
        that.setData({ canvash: canvash });
      }
    });
    キャンバスを初期化します。
    this.cleardraw();
  },

  // 初期化関数 initCanvas() {
    コンテキスト = wx.createCanvasContext('キャンバス');
    コンテキスト.beginPath()
    if(this.data.sysType === 'iOS') {
      context.fillStyle = 'rgba(255, 255, 255, 1)';
      コンテキスト.setStrokeStyle('#444');
    } それ以外 {
      context.fillStyle = 'rgba(0, 0, 0, 1)';
      コンテキスト.setStrokeStyle('#aaa');
    }
    コンテキスト.setLineWidth(4);
    context.setLineCap('round');
    context.setLineJoin('round');
  },
  キャンバス開始(イベント) {
    isButtonDown = true;
    arrz.push(0);
    arrx.push(イベントが変更されたタッチ[0].x);
    arry.push(event.changedTouches[0].y);
  },
  キャンバス移動(イベント) {
    if (isButtonDown) {
      arrz.push(1);
      arrx.push(イベントが変更されたタッチ[0].x);
      arry.push(event.changedTouches[0].y);
    }
    (var i = 0; i < arrx.length; i++) の場合 {
      (arrz[i] == 0)の場合{
        コンテキストを移動します(arrx[i], arry[i])
      } それ以外 {
        コンテキスト.lineTo(arrx[i], arry[i])
      }
    }
    context.clearRect(0, 0, キャンバスw, キャンバスh);
    if(this.data.sysType === 'iOS') {
      context.fillStyle = 'rgba(255, 255, 255, 1)';
      コンテキスト.setStrokeStyle('#444');
    } それ以外 {
      context.fillStyle = 'rgba(0, 0, 0, 1)';
      コンテキスト.setStrokeStyle('#aaa');
    }
    コンテキスト.setLineWidth(3);
    context.setLineCap('round');
    context.setLineJoin('round');
    コンテキスト.stroke();
    コンテキストを描画します(false);
  },
  キャンバス終了(イベント) {
    isButtonDown = false;
  },
  // キャンバスをクリアする cleardraw() {
    arx = [];
    配列 = [];
    arz = [];
    コンテキストをクリアする矩形(0, 0, canvasw, canvash);
    if(this.data.sysType === 'iOS') {
      context.fillStyle = 'rgba(255, 255, 255, 1)';
      コンテキスト.setStrokeStyle('#444');
    } それ以外 {
      context.fillStyle = 'rgba(0, 0, 0, 1)';
      コンテキスト.setStrokeStyle('#aaa');
    }
    コンテキストを描画します(true);
  },
  アップロード画像() {
    var that = これ
    //画像を生成// context.draw(true,()=> {
    タイムアウトを設定する(() => {
      wx.canvasToTempFilePath({
        キャンバスID: 'キャンバス',
        //出力画像の幅と高さを設定します。fileType: 'jpg',
        品質: 1,
        成功: 関数 (res) {
          // キャンバス画像アドレス res.tempFilePath
          imgBase64 = wx.getFileSystemManager().readFileSync(res.tempFilePath, 'base64') とします。
          that.setData({
            画像URL: res.tempFilePath,
            符号Base64: imgBase64
          })
          that.submitSign()
          console.log('imgBase64', 'data:image/jpeg;base64,' + imgBase64)
          // wx.saveImageToPhotosAlbum({
          // ファイルパス: res.tempFilePath,
          // 成功(res4) { 
          // console.log(res,'res4 を保存');
          // wx.showToast({
          // タイトル: 'アルバムに正常に保存されました',
          // 期間: 2000
          // } );
          // }
          // })
        },
        失敗: 関数() {
          wx.showModal({
            タイトル: 「ヒント」
            内容: 'Canvas はイメージの生成に失敗しました。 WeChatの現在のバージョンはサポートされていません。最新バージョンに更新してください。 '、
            表示キャンセル: false
          });
        },
        完了: 関数 () { }
      }, 5000)

    })
    // })
  },
  // 署名を送信する submitSign() {
    それを = これとする
    wx.showLoading({
      タイトル: '送信中...'、
      マスク: 真
    })
    タイプ = '1' とします
    if (that.data.sysType === 'iOS') {
      タイプ = '0'
    } それ以外 {
      タイプ = '1'
    }
    wx.$getWxLoginCode(resp => {
      定数パラメータ = {
        qmbase64: that.data.signBase64、
      
      }
      console.info("パラメータ")
      wx.kservice.yyyurl(パラメータ、res => {
        wx.hideLoading()
        （res.statusCode === '200'）の場合{
          wx.showModal({
            タイトル: 「ヒント」
            コンテンツ: res.message、
            表示キャンセル: false、
            confirmText: 'ホームページに戻る',
            成功(res) {
              （res.confirm）の場合{
                wx.reLaunch({
                  URL: '/pages/index/index'
                })
              }
            }
          })
        } それ以外 {
          wx.showModal({
            タイトル: 「ヒント」
            コンテンツ: res.message、
            キャンセル表示: true、
            cancelText: 'ホームページに戻る',
            確認テキスト: '再送信',
            成功: (結果) => {
              if (結果.キャンセル) {
                //滞在をキャンセルする wx.reLaunch({
                  URL: '/pages/index/index'
                })
              } そうでない場合 (結果を確認) {
                // that.submitSign() を再送信します
              }
            },
          });
        }
      }, {}, 真, 真)
    })
  },

  /**
  * ライフサイクル機能 - ページのアンインストールを監視する*/
  onUnload: 関数 () {

  },

  /**
   * ページ関連のイベント処理関数 - ユーザーのプルダウンアクションをリッスンする */
  onPullDownRefresh: 関数 () {

  },

  /**
   * ページ上のボトムイベントを処理する関数*/
  onReachBottom: 関数 () {

  },

  /**
   * ユーザーは右上隅をクリックして共有します*/
  onShareAppMessage: 関数 () {

  }
})

.sign-contain {
  ディスプレイ: フレックス;
  flex-direction:列;
  幅: 100%;
  高さ: 100%;
}
.signName {
  フレックス: 1;
}
.キャンバス{
  幅: 100%;
  高さ: 100%;
}
.bg000{
  背景色: #000;
}
.btn-wrap{
  表示: ブロック;
  幅:100%;
  高さ: 100rpx;
  マージン: 20rpx 0;
  位置: 相対的;
}
.btn-wrap ボタン{
  幅: 43%;
}