快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)電子簽名并導(dǎo)出圖片

更新時間：2020年05月27日 17:10:40 作者：朝花�

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)電子簽名，并導(dǎo)出圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序做電子簽名，并導(dǎo)出圖片的具體代碼，供大家參考，具體內(nèi)容如下

wxml:

<canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback"></canvas>

<button type="default" bindtap="cleardraw">清除畫布</button>
<button type="default" bindtap="getimg">導(dǎo)出圖片</button>

wxss:

.canvas {
 width: 100%;
 min-height: 400rpx;
 border: 1rpx solid #000;  /*//突出canvas畫布范圍 */
 box-sizing: border-box;
}

js:

var context = null;// 使用 wx.createContext 獲取繪圖上下文
var isButtonDown = false;
var arrx = [];
var arry = [];
var arrz = [];
var canvasw = 0;
var canvash = 0;
//獲取系統(tǒng)信息
wx.getSystemInfo({
 success: function (res) {
  canvasw = res.windowWidth;//設(shè)備寬度
  canvash = res.windowHeight; //設(shè)備高度
 }
});

Page({
 canvasIdErrorCallback: function (e) {
  console.error(e.detail.errMsg)
 },
 //繪制開始
 canvasStart: function (event) {
  isButtonDown = true;
  arrz.push(0);
  arrx.push(event.changedTouches[0].x);
  arry.push(event.changedTouches[0].y);
 },
 //繪制過程
 canvasMove: function (event) {
  if (isButtonDown) {
   arrz.push(1);
   arrx.push(event.changedTouches[0].x);
   arry.push(event.changedTouches[0].y);
  };

  for (var i = 0; i < arrx.length; i++) {
   if (arrz[i] == 0) {
    context.moveTo(arrx[i], arry[i])
   } else {
    context.lineTo(arrx[i], arry[i])
   };
  };
  context.clearRect(0, 0, canvasw, canvash);

  context.setStrokeStyle('#000000');
  context.setLineWidth(4);
  context.setLineCap('round');
  context.setLineJoin('round');
  context.stroke();

  context.draw(false);
 },
 canvasEnd: function (event) {
  isButtonDown = false;
 },
 cleardraw: function () {
  //清除畫布
  arrx = [];
  arry = [];
  arrz = [];
  context.clearRect(0, 0, canvasw, canvash);
  context.draw(true);
 },
 //導(dǎo)出圖片
 getimg: function () {
  if (arrx.length == 0) {
   wx.showModal({
    title: '提示',
    content: '簽名內(nèi)容不能為空！',
    showCancel: false
   });
   return false;
  };
  //生成圖片
  wx.canvasToTempFilePath({
   canvasId: 'canvas',
   success: function (res) {
    wx.saveImageToPhotosAlbum({
     filePath: res.tempFilePath,
     success(res) {
      // console.log(res)
      wx.showToast({
       title: '保存成功',
      });
     },
     fail(err) {
      console.log(err)
     }
    })
    //將照片存入服務(wù)器
    // wx.uploadFile({
    //  url: '', //接口地址
    //  filePath: res.tempFilePath,
    //  name: 'file',
    //  formData: {               
    //   'user': 'test'
    //  },
    //  success function (res) {
    //   console.log(res);
    //  },
    //  fail: function (res) {
    //   console.log(res);
    //  },
    //  complete: function (res) {
    //  }
    // });
   }
  })

 },
 /**
  * 頁面的初始數(shù)據(jù)
  */
 data: {
  
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面加載
  */
 onLoad: function (options) {
  // 使用 wx.createContext 獲取繪圖上下文 context
  context = wx.createCanvasContext('canvas');
  context.beginPath()
  context.setStrokeStyle('#000000');
  context.setLineWidth(4);
  context.setLineCap('round');
  context.setLineJoin('round');
 }
})

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: