WeChat-Miniprogramm zur Implementierung elektronischer Signaturen

<Ansichtsklasse="sign-contain">
 <Klasse anzeigen="Zeichenname">
  <canvas id="Leinwand" Canvas-ID="Leinwand" Klasse="{{ sysType === 'iOS' ? 'Leinwand' : 'Leinwand bg000'}}" disable-scroll="true" bindtouchstart="LeinwandStart" bindtouchmove="LeinwandBewegung" bindtouchend="LeinwandEnde" touchcancel="LeinwandEnde" binderror="LeinwandIdErrorCallback"></Leinwand>
 </Ansicht>

 <Ansichtsklasse="btn-wrap">
  <button catchtap="cleardraw">Signatur löschen</button>
  <button catchtap="uploadImg">Signatur hochladen</button>
 </Ansicht>
</Ansicht>

var context = null; // Verwenden Sie wx.createContext, um den Zeichenkontext zu erhalten
var isButtonDown = false; //Gibt an, ob gerade gezeichnet wird var arrx = []; //Horizontale Aktionskoordinate var arry = []; //Vertikale Aktionskoordinate var arrz = []; //Gesamtzustand, der eine Kombination aus Drücken und Anheben markiert var canvasw = 0; //Leinwandbreite var canvash = 0; //Leinwandhöhe Page({
  Daten: {
    Leinwandbild: '',
    Leinwand: '',
    imgUrl: '',
    Informationen: {},
    signBase64: '',
    sysType: '' // Bestimmen Sie das Modell},

  onLoad: Funktion (Optionen) {
    lass das = dies
    let res = wx.getSystemInfoSync()
    const system = res.system.split(' ')
    dass.setData({
      Systemtyp: System[0],
    })
    let params = JSON.parse(optionen.params)
    dass.setData({
      Info: Parameter,
    })
    das.startCanvas();
    das.initCanvas()
  },
  /**
  * Unten - Handschriftliche Unterschrift/ Unterschrift hochladen*/
  startCanvas() {//Canvas-Initialisierung ausführen var that = this;
    //Systeminformationen abrufen wx.getSystemInfo({
      Erfolg: Funktion (res) {
        canvasw = res.Fensterbreite;
        canvash = res.windowHeight;
        das.setData({ canvasw: canvasw });
        das.setData({ canvash: canvash });
      }
    });
    dies.initCanvas();
    dies.cleardraw();
  },

  // Initialisierungsfunktion initCanvas() {
    Kontext = wx.createCanvasContext('Leinwand');
    Kontext.BeginPath()
    wenn(dieser.data.sysType === 'iOS') {
      Kontext.Füllstil = "rgba(255, 255, 255, 1)";
      Kontext.setStrokeStyle('#444');
    } anders {
      Kontext.Füllstil = "rgba(0, 0, 0, 1)";
      Kontext.setStrokeStyle('#aaa');
    }
    Kontext.setLineWidth(4);
    Kontext.setLineCap('rund');
    Kontext.setLineJoin('runde');
  },
  canvasStart(Ereignis) {
    istButtonDown = true;
    arrz.push(0);
    arrx.push(event.changedTouches[0].x);
    arry.push(event.changedTouches[0].y);
  },
  canvasMove(Ereignis) {
    wenn (istButtonDown) {
      arrz.push(1);
      arrx.push(event.changedTouches[0].x);
      arry.push(event.changedTouches[0].y);
    }
    für (var i = 0; i < arrx.length; i++) {
      wenn (arrz[i] == 0) {
        Kontext.VerschiebeNach(arrx[i], arry[i])
      } anders {
        Kontext.lineTo(arrx[i], arry[i])
      }
    }
    Kontext.clearRect(0, 0, canvasw, canvash);
    wenn(dieser.data.sysType === 'iOS') {
      Kontext.Füllstil = "rgba(255, 255, 255, 1)";
      Kontext.setStrokeStyle('#444');
    } anders {
      Kontext.Füllstil = "rgba(0, 0, 0, 1)";
      Kontext.setStrokeStyle('#aaa');
    }
    Kontext.setLineWidth(3);
    Kontext.setLineCap('rund');
    Kontext.setLineJoin('runde');
    Kontext.Strich();
    Kontext.zeichnen(falsch);
  },
  canvasEnd(Ereignis) {
    istButtonDown = falsch;
  },
  // Leinwand löschen cleardraw() {
    arrx = [];
    arry = [];
    arrz = [];
    Kontext.clearRect(0, 0, canvasw, canvash);
    wenn(dieser.data.sysType === 'iOS') {
      Kontext.Füllstil = "rgba(255, 255, 255, 1)";
      Kontext.setStrokeStyle('#444');
    } anders {
      Kontext.Füllstil = "rgba(0, 0, 0, 1)";
      Kontext.setStrokeStyle('#aaa');
    }
    Kontext.zeichnen(true);
  },
  uploadImg() {
    var das = dies
    //Bild generieren// context.draw(true,()=> {
    setzeTimeout(() => {
      wx.canvasToTempFilePath({
        canvasId: "Leinwand",
        //Breite und Höhe des Ausgabebildes festlegen Dateityp: 'jpg',
        Qualität: 1,
        Erfolg: Funktion (res) {
          // Canvas-Bildadresse res.tempFilePath
          let imgBase64 = wx.getFileSystemManager().readFileSync(res.tempFilePath, 'base64')
          dass.setData({
            imgUrl: res.tempFilePath,
            signBase64: imgBase64
          })
          das.submitSign()
          Konsole.log('imgBase64', 'Daten:Bild/jpeg;base64,' + imgBase64)
          // wx.saveImageToPhotosAlbum({
          // Dateipfad: res.tempFilePath,
          // Erfolg(res4) { 
          // console.log(res,'Res4 speichern');
          // wx.showToast({
          // Titel: „Erfolgreich im Album gespeichert“,
          // Dauer: 2000
          // } );
          // }
          // })
        },
        fehlgeschlagen: Funktion () {
          wx.showModal({
            Titel: 'Tipps',
            Inhalt: ,,Canvas konnte das Bild nicht generieren. Die aktuelle Version von WeChat wird nicht unterstützt. Bitte aktualisieren Sie auf die neueste Version! ',
            anzeigenAbbrechen: false
          });
        },
        vollständig: Funktion () { }
      }, 5000)

    })
    // })
  },
  // Signatur übermitteln submitSign() {
    lass das = dies
    wx.showLoading({
      Titel: „Senden...“,
      Maske: wahr
    })
    let-Typ = "1"
    wenn (that.data.sysType === 'iOS') {
      Typ = "0"
    } anders {
      Typ = "1"
    }
    wx.$getWxLoginCode(resp => {
      Konstante Parameter = {
        qmbase64: das.data.signBase64,
      
      }
      console.info("Parameter")
      wx.kservice.yyyurl(params, res => {
        wx.hideLoading()
        wenn (res.statusCode === '200') {
          wx.showModal({
            Titel: 'Tipps',
            Inhalt: res.message,
            showCancel: false,
            confirmText: 'Zur Startseite zurückkehren',
            Erfolg(res) {
              wenn (res.bestätigen) {
                wx.reLaunch({
                  URL: '/Seiten/Index/Index'
                })
              }
            }
          })
        } anders {
          wx.showModal({
            Titel: 'Tipps',
            Inhalt: res.message,
            showCancel: true,
            cancelText: 'Zur Startseite zurückkehren',
            confirmText: 'Erneut übermitteln',
            Erfolg: (Ergebnis) => {
              if (Ergebnis.Abbrechen) {
                //Aufenthalt abbrechen wx.reLaunch({
                  URL: '/Seiten/Index/Index'
                })
              } sonst wenn (Ergebnis.bestätigen) {
                //Senden Sie that.submitSign() erneut
              }
            },
          });
        }
      }, {}, wahr, wahr)
    })
  },

  /**
  * Lebenszyklusfunktion - Deinstallation der Seite überwachen*/
  beimEntladen: Funktion () {

  },

  /**
   * Seitenbezogene Ereignisverarbeitungsfunktion - Achten Sie auf die Pulldown-Aktion des Benutzers */
  onPullDownRefresh: Funktion () {

  },

  /**
   * Die Funktion, die das Bottoming-Ereignis auf der Seite behandelt*/
  onReachBottom: Funktion () {

  },

  /**
   * Der Benutzer klickt auf die obere rechte Ecke, um zu teilen*/
  beiShareAppMessage: Funktion () {

  }
})

.sign-enthalten {
  Anzeige: Flex;
  Flex-Richtung:Spalte;
  Breite: 100 %;
  Höhe: 100%;
}
.signName {
  biegen: 1;
}
.Leinwand {
  Breite: 100 %;
  Höhe: 100%;
}
.bg000{
  Hintergrundfarbe: #000;
}
.btn-wrap{
  Anzeige: Block;
  Breite: 100 %;
  Höhe: 100rpx;
  Rand: 20 Rpx 0;
  Position: relativ;
}
.btn-wrap button{
  Breite: 43%;
}