微信小程序实现横屏手写签名

本文实例为大家分享了微信小程序实现横屏手写签名的具体代码,供大家参考,具体内容如下

1.关键配置:

"pageOrientation": "landscape"  ---- 配置该页面横屏展示

2.效果图:

3.代码:

wxml

<view class="container">
  <canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart"
    bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd"
    binderror="canvasIdErrorCallback"></canvas>
  <view class="tips">
    请在框内签字
  </view>
  <view class='addBtn'>
    <button type="default" class='txt' bindtap="cleardraw">重新签名</button>
    <button type="default" class='txt' bindtap="getimg">提交签字</button>
  </view>
</view>

js

const fileManager = wx.getFileSystemManager();
 
// canvas 全局配置
var context = null; // 使用 wx.createContext 获取绘图上下文 context
var isButtonDown = false;
var arrx = [];
var arry = [];
var arrz = [];
var canvasw = 0;
var canvash = 0;
//获取系统信息
wx.getSystemInfo({
  success: function (res) {
    canvasw = res.windowHeight * 1.2; //设备宽度
    // canvash = res.windowWidth * 7 / 15;
    canvash = res.windowWidth * 1.2;
  }
});
//注册页面
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    signFlag: false,
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    context = wx.createCanvasContext('canvas');
    context.setFillStyle('#fff')
    context.fillRect(0, 0, canvasw, canvash)
    context.draw(true)
    context.beginPath()
    context.setStrokeStyle('#000000');
    context.setLineWidth(4);
    context.setLineCap('round');
    context.setLineJoin('round');
  },
  onShow() {
    arrx = [];
    arry = [];
    arrz = [];
  },
 
  isJSON(str) {
    if (typeof str == 'string') {
      try {
        var obj = JSON.parse(str);
        if (typeof obj == 'object' && obj) {
          return true;
        } else {
          return false;
        }
      } catch (e) {
        return false;
      }
    }
  },
 
  canvasIdErrorCallback: function (e) { },
  //开始
  canvasStart: function (event) {
    isButtonDown = true;
    arrz.push(0);
    arrx.push(event.changedTouches[0].x);
    arry.push(event.changedTouches[0].y);
    //context.moveTo(event.changedTouches[0].x, event.changedTouches[0].y);
 
  },
  //过程
  canvasMove: function (event) {
    if (isButtonDown) {
      arrz.push(1);
      arrx.push(event.changedTouches[0].x);
      arry.push(event.changedTouches[0].y);
      // context.lineTo(event.changedTouches[0].x, event.changedTouches[0].y);
      // context.stroke();
      // context.draw()
    };
 
    this.setData({
      signFlag: true,
    })
 
    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.setStrokeStyle('#000000');
    context.setLineWidth(4);
    context.setLineCap('round');
    context.setLineJoin('round');
    context.stroke();
    context.draw(true);
  },
  canvasEnd: function (event) {
    isButtonDown = false;
  },
  cleardraw: function () {
    //清除画布
    arrx = [];
    arry = [];
    arrz = [];
    context.clearRect(0, 0, canvasw, canvash);
    context.draw(true);
  },
  //导出图片
  getimg: function () {
    let that = this
    if (arrx.length == 0) {
      wx.showModal({
        title: '提示',
        content: '签名内容不能为空!',
        showCancel: false
      });
      return false;
    };
    console.log(this.data.signFlag);
    if (!this.data.signFlag) {
      wx.showModal({
        title: '提示',
        content: '签名内容不能为空!',
        showCancel: false
      });
      return false;
    }
    //生成图片
    wx.canvasToTempFilePath({
      canvasId: 'canvas',
      success: function (res) {
        //将图片转换为base64 的格式
        let base64 = 'data:image/jpg;base64,' + fileManager.readFileSync(res.tempFilePath, 'base64');
        //其他
        
      }
    })
 
  },
 
})

wxss

page{
  background: #fff;
}
.container {
  width: 95%;
  position: absolute;
  height: 95%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  background: #fff;
  border-radius: 5px;
}
.canvas {
  width: 100%;
  height: 70%;
  border: 1px solid #aaa;
  box-sizing: border-box;
}
.tips{
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #aaa;
}
 
.addBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18%;
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  z-index: 100;
}
 
.addBtn .txt {
  text-align: center;
  width: 90%;
  font-size: 13px;
  border-radius: 100px;
  background: #0097fe;
  color: #fff;
  box-sizing: border-box;
  margin: 0 10px;
  padding: 10px;
  z-index: 100;
}

json

{
  "navigationBarTitleText": "电子签名",
  "pageOrientation": "landscape"
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序实现简单手写签名组件的方法实例

    目录 背景: 需求: 效果 一.思路 二.实现 1. 页面与样式 2. 初始化 3. 点击时 4. 签名时 三.总结 背景: 在做项目过程中,需要在微信小程序中实现手写签名组件.在网上找了微信小程序手写签名实现,但是都是不太理想.在实际运用中,会因为实时计算较多的贝塞尔曲线而产生卡顿.效果不理想.所以退一步,不需要笔锋以及笔迹模拟效果.只需要简单的手写签名实现. 需求: 可以实现用户在微信小程序上手写签名. 需要组件化. 效果 一.思路 在微信小程序中,我们使用canvas组件实现.将用户的输入

  • 微信小程序实现横屏和竖屏签名功能

    本文实例为大家分享了微信小程序实现横屏和竖屏签名的具体代码,供大家参考,具体内容如下 wxml <view class="container">   <canvas canvas-id="firstCanvas" id="firstCanvas" bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove"></ca

  • 微信小程序实现电子签名并导出图片

    本文实例为大家分享了微信小程序做电子签名,并导出图片的具体代码,供大家参考,具体内容如下 wxml: <canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouch

  • 微信小程序实现手写签名的示例代码

    目录 1.效果图 2.相关代码 canvas代码 js相关 在微信小程序上实现手写签名,获取canvascontext新版本和旧版本有点坑,新版本在获取canvas后如果页面有滑动,则签名坐标出现异常(在微信开发者工具上会出现2022-2-17),但是在真机上即使滑动也不会出现异常,为了防止出现问题,暂时使用旧版本获取canvascontext 1.效果图 2.相关代码 canvas代码 新版2d canvas <canvas id="canvas" class="ca

  • 微信小程序实现电子签名

    本文实例为大家分享了微信小程序实现电子签名的具体代码,供大家参考,具体内容如下 <view class="sign-contain"> <view class="signName"> <canvas id="canvas" canvas-id="canvas" class="{{ sysType === 'iOS' ? 'canvas' : 'canvas bg000'}}"

  • 微信小程序实现手写签名

    本文实例为大家分享了微信小程序实现手写签名的具体代码,供大家参考,具体内容如下 本示例具备的功能: 1.笔迹绘制 2.笔迹清空 以下是js代码: var content = null; var touchs = []; var canvasw = 0; var canvash = 0; var that = null;   Page({   /**    * 页面的初始数据    */   data: {        },   // 画布的触摸移动开始手势响应   start: functio

  • uniapp实现微信小程序的电子签名效果(附demo)

    目录 1.标签和样式 2.横屏切换 3.绘图 3.1.初始化数据会吧? 3.2.触摸开始时获取起点,会吧? 3.3.触摸移动获取路径点,会吧? 3.4.触摸结束,将未绘制的点清空防止对后续路径产生干扰,简单吧? 3.5.绘制笔迹,没得问题吧? 4.扫尾处理 画布可以做很多事情,比如可以绘图,也可以做海报.在这里只是想拿它来的实现亲笔签名,开启不一样的亲笔签名姿势. 开发框架:uniapp开发语言:vue2展示平台:微信小程序(实际可以兼容多个平台) 标签和样式没什么好说的,这里绘制了简单的页面,

  • 微信小程序canvas实现签名功能

    在微信小程序项目中,开发模块涉及到手写签名功能,微信小程序canvas闪亮登场 前言 微信小程序canvas实现签名功能 核心内容简介: (1)签名实现,开始,移动,结束 (2)重写 (3)完成 (4)上传 一.微信小程序canvas实现签名功能 效果演示: (1)签名实现 (2)重写 (3)完成 完成后将图片展示在相应的位置 (4)根据业务需求,可以将图片上传到后台,在需要的地方展示 二.上代码 1.全部演示 wxml <!--pages/canvas-test/canvas-test.wxm

  • 微信小程序实现电子签名功能

    本文实例为大家分享了微信小程序实现电子签名的具体代码,供大家参考,具体内容如下 // XXXX.wxml <view class="signName"> <canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bind

  • 微信小程序canvas实现手写签名

    本文实例为大家分享了微信小程序canvas实现手写签名的具体代码,供大家参考,具体内容如下 很多时候,程序中需要用到签名的功能,附上源码(微信小程序) .wxml <view class="canvasBox">       <view class="canvasTitle">请签名:</view>       <view class="canvasContent">         <vie

随机推荐