前端微信小程序签名生成

最新推荐文章于 2024-09-05 10:39:16 发布
最新推荐文章于 2024-09-05 10:39:16 发布
阅读量606 收藏 5
点赞数 4
文章标签： 前端 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xue_tingting/article/details/136293930
版权
文章详细描述了如何在微信小程序中使用签名组件，通过CanvasAPI进行手写签名，并将签名图片转换为Base64格式发送给后端，以及处理用户重签和保存图片至临时文件路径并上传的功能实现。
摘要由CSDN通过智能技术生成

1、签名组件（思路是使用canvas 转换成base64图片 返给后端 之后 获取的时候 后端再把当前存储的 路径返回）

const app = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 高度百分比
    h: {
      type: Number,
      value: 0.2,
    },
    //  填充描述文字
    fillText: {
      type: String,
      value: "请使用正楷",
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    canvas: "",
    ctx: "",
    pr: 0,
    width: '',
    height: '',
    first: true,
  },
  attached: function () {
    this.getSystemInfo();
    this.createCanvas();
  },
  ready() {
  },
  /**
   * 组件的方法列表
   */
  methods: {
    start(e) {
      if (this.data.first) {
        this.clearClick();
        this.setData({ first: false });
      }
      // 开始创建一个路径，如果不调用该方法，最后无法清除画布
      this.data.ctx.beginPath();
      // 把路径移动到画布中的指定点，不创建线条。用 stroke 方法来画线条
      this.data.ctx.moveTo(e.changedTouches[0].x, e.changedTouches[0].y);
    },
    move(e) {
      // 增加一个新点，然后创建一条从上次指定点到目标点的线。用 stroke 方法来画线条
      this.data.ctx.lineTo(e.changedTouches[0].x, e.changedTouches[0].y);
      this.data.ctx.stroke();
    },
    error: function (e) {
      console.log("画布触摸错误" + e);
    },
    /**
     * 初始化
     */
    createCanvas() {
      const pr = this.data.pr; // 像素比
      const query = this.createSelectorQuery();
      query
        .select("#canvas")
        .fields({ node: true, size: true })
        .exec((res) => {
          const canvas = res[0].node;
          console.log(res[0],'res[0]')
          const ctx = canvas.getContext("2d");
          canvas.width = this.data.width * pr; // 画布宽度
          canvas.height = this.data.height * pr; // 画布高度
          ctx.scale(pr, pr); // 缩放比
          ctx.lineGap = "round";
          ctx.lineJoin = "round";
          ctx.lineWidth = 4; // 字体粗细
          ctx.font = "40px Arial"; // 字体大小，
          ctx.fillStyle = "#ecf0ef"; // 填充颜色
          ctx.fillText(
            this.data.fillText,
            this.data.width / 2 - 100,
            this.data.height / 2
          );
          this.setData({ ctx, canvas });
        });

    },
    // 获取系统信息,宽，高，像素比
    getSystemInfo() {
      let _that = this;
      wx.getSystemInfo({
        success(res) {
            console.log(res,'getSystemInfo')
          _that.setData({
            pr: res.pixelRatio,
            width: res.windowWidth,
            height: res.windowHeight * _that.data.h ,
          });
        },
      });
    },
    //重签
    clearClick: function () {
      //清除画布
      this.data.first = true;
      this.data.ctx.clearRect(0, 0, this.data.width, this.data.height);
    },
    //保存图片
    saveClick: function (cb) {
      if (this.data.first) {
        wx.showToast({
          title: "签名数据为空!",
          icon: "none",
        });
        return false;
      }
      //  获取临时文件路径
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: this.data.width,
        height: this.data.height,
        destWidth: this.data.width * this.data.pr,
        destHeight: this.data.height * this.data.pr,
        canvasId: "canvas",
        canvas: this.data.canvas,
        fileType: "png",
        success: (res) => {
            cb && cb(res);
        //       //  转换成功派发事件
            this.triggerEvent("success", res);

            // 如果需要使用base64的可以使用下面的，此处只用临时路径，注释掉这个功能
          // 文件转base64
        //   wx.getFileSystemManager().readFile({
        //     filePath: res.tempFilePath,
        //     encoding: "base64",
        //     success: (val) => {
        //       cb && cb(val,res);
        //       //  转换成功派发事件
        //       this.triggerEvent("success", val.data);
        //     },
        //   });
        },
      });
    },
  },
});

<view class="signatureView">
    <canvas type="2d" id="canvas" bindtouchmove="move" bindtouchstart="start" binderror="error" style="width:{{width}}px;height:{{height}}px;"
    force-use-old-canvas="true">
    </canvas>
</view>
 saveSignature(){
        let _this=this;
        let signature = this.selectComponent('.signature');
        signature.saveClick((result)=>{
             //图片上传
        wx.showLoading({
            title: '上传中...',
            onLoad: true,
            mask: true
        })
        wx.uploadFile({
            url: app.data.upfileDomainName,
            filePath:result.tempFilePath,
            name: 'file',
            formData: {},
            header: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + wx.getStorageSync('access_token')
            },
            success(res) {
                var dataInfo = JSON.parse(res.data);
                if (res.statusCode == 200 && dataInfo.status*1===200) {
                    _this.setData({
                        ['audit.signatureFilePath']:dataInfo.data[0].fileNewName,
                        previewPath:dataInfo.data[0].url,
                    })
                    _this.onCloseSignature()
                } else {
                    _this._Toast('上传失败');
                }
                wx.hideLoading({noConflict: true}) 
            },
            fail(err) {
                console.log(err, '图片上传失败')
                wx.hideLoading({noConflict: true}) 
                _this._Toast('上传失败');
            }
        })
            
        })
    },

2、完整代码

  //这个是 编写的时候
  <van-field
            label="签名"
            readonly
            required
            title-width="100%"
            border="{{ false }}"
        />
        <view class="bg-white padding15">
            <view class="ww-flex flex-col col-ct row-ct" style="background: #F7F8FA;height:140px" data-qmuser="ywclqm" bindtap="openSignature">
                <image wx:if="{{!audit.signatureFilePath}}" src="./img/icon_qm.png" style="width:36px;height:36px"></image>
                <view wx:if="{{!audit.signatureFilePath}}" style="padding-top:5px;color:#4E5969">点此签名</view>
                <image wx:if="{{audit.signatureFilePath}}" src="{{previewPathName}}{{previewPath}}" style="width:100%;height:140px"></image>
            </view>
        </view>
//编写打开弹窗
<van-popup closeable  show="{{ show }}" position="bottom" z-index="35" custom-style="width:100%;height: 50%"   bind:close="onCloseSignature">
    <view class="WH ww-flex flex-col" wx:if="{{show}}">
        <view class="flex1">
            <signature  h="{{0.4}}" class="signature" /> //组件
        </view>
        <view class="flex-none ww-flex flex-row  paddingLR15">
            <view class="flex1 textCenter signatureBtn marginR20"  bindtap="resetSignature">重置</view>
            <view class="flex1 textCenter signatureBtn"  bindtap="saveSignature">确认</view>
        </view> 
    </view>
</van-popup>

 

3.组件内容(画布）

<view class="signatureView">
    <canvas type="2d" id="canvas" bindtouchmove="move" bindtouchstart="start" binderror="error" style="width:{{width}}px;height:{{height}}px;"
    force-use-old-canvas="true">
    </canvas>
</view>

4、画布js

const app = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 高度百分比
    h: {
      type: Number,
      value: 0.2,
    },
    //  填充描述文字
    fillText: {
      type: String,
      value: "请使用正楷",
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    canvas: "",
    ctx: "",
    pr: 0,
    width: '',
    height: '',
    first: true,
  },
  attached: function () {
    this.getSystemInfo();
    this.createCanvas();
  },
  ready() {
  },
  /**
   * 组件的方法列表
   */
  methods: {
    start(e) {
      if (this.data.first) {
        this.clearClick();
        this.setData({ first: false });
      }
      // 开始创建一个路径，如果不调用该方法，最后无法清除画布
      this.data.ctx.beginPath();
      // 把路径移动到画布中的指定点，不创建线条。用 stroke 方法来画线条
      this.data.ctx.moveTo(e.changedTouches[0].x, e.changedTouches[0].y);
    },
    move(e) {
      // 增加一个新点，然后创建一条从上次指定点到目标点的线。用 stroke 方法来画线条
      this.data.ctx.lineTo(e.changedTouches[0].x, e.changedTouches[0].y);
      this.data.ctx.stroke();
    },
    error: function (e) {
      console.log("画布触摸错误" + e);
    },
    /**
     * 初始化
     */
    createCanvas() {
      const pr = this.data.pr; // 像素比
      const query = this.createSelectorQuery();
      query
        .select("#canvas")
        .fields({ node: true, size: true })
        .exec((res) => {
          const canvas = res[0].node;
          console.log(res[0],'res[0]')
          const ctx = canvas.getContext("2d");
          canvas.width = this.data.width * pr; // 画布宽度
          canvas.height = this.data.height * pr; // 画布高度
          ctx.scale(pr, pr); // 缩放比
          ctx.lineGap = "round";
          ctx.lineJoin = "round";
          ctx.lineWidth = 4; // 字体粗细
          ctx.font = "40px Arial"; // 字体大小，
          ctx.fillStyle = "#ecf0ef"; // 填充颜色
          ctx.fillText(
            this.data.fillText,
            this.data.width / 2 - 100,
            this.data.height / 2
          );
          this.setData({ ctx, canvas });
        });

    },
    // 获取系统信息,宽，高，像素比
    getSystemInfo() {
      let _that = this;
      wx.getSystemInfo({
        success(res) {
            console.log(res,'getSystemInfo')
          _that.setData({
            pr: res.pixelRatio,
            width: res.windowWidth,
            height: res.windowHeight * _that.data.h ,
          });
        },
      });
    },
    //重签
    clearClick: function () {
      //清除画布
      this.data.first = true;
      this.data.ctx.clearRect(0, 0, this.data.width, this.data.height);
    },
    //保存图片
    saveClick: function (cb) {
      if (this.data.first) {
        wx.showToast({
          title: "签名数据为空!",
          icon: "none",
        });
        return false;
      }
      //  获取临时文件路径
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: this.data.width,
        height: this.data.height,
        destWidth: this.data.width * this.data.pr,
        destHeight: this.data.height * this.data.pr,
        canvasId: "canvas",
        canvas: this.data.canvas,
        fileType: "png",
        success: (res) => {
            cb && cb(res);
        //       //  转换成功派发事件
            this.triggerEvent("success", res);

            // 如果需要使用base64的可以使用下面的，此处只用临时路径，注释掉这个功能
          // 文件转base64
        //   wx.getFileSystemManager().readFile({
        //     filePath: res.tempFilePath,
        //     encoding: "base64",
        //     success: (val) => {
        //       cb && cb(val,res);
        //       //  转换成功派发事件
        //       this.triggerEvent("success", val.data);
        //     },
        //   });
        },
      });
    },
  },
});

头秃女孩子
关注
基于微信签名signature获取(实例讲解)
08-29
下面就为大家带来一篇基于微信签名signature获取(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
sign签名的实现
m0_37577103的博客
03-07 2136
最近工作中，在开发app端接口的时候，app端调用后端服务接口的时候，一直报签名错误。这里介绍一下前后端生成签名的大概流程。 所以需要明白的几点: 1、前后端签名我们项目采用的md5的加密方法。 具体方法可以看下面代码。当然还可以有其他的好多的加密方法。这只是其中一种。 2、前端和后端将数据生成对应的sign必须采用相同的规则，生成对应的字符串，然后进行md5加密，这样生成的sign才能相同。如果数据被拦截，修改其中任意一点数据，都会造成前后端数据不一致，从而导致生成的s
微信小程序手写签名
最新发布
ZionHH的博客
09-05 1124
微信小程序手写签名，canvas旋转图片
前端生成sign签名
热门推荐
qq_39554240的博客
04-28 1万+
接着上一篇博文写写前端如何生成sign签名，此处生成的签名和前两篇的（sign签名）中验证是一致的，可以对比使用。使用方式在上一篇（vue中post请求使用form表单格式发送数据）中使用过，可参考 function getSign(param) { // 获取签名 返回一个包含"?“的参数串 var appKey = “sbkjCarWebBEIJING”; var securityKey......
微信小程序电子签名组件
weixin_49258413的博客
12-09 3499
微信小程序电子签名组件，封装抽离可复用，签名成功输出base64和临时文件路径，解决vant弹窗中使用导致背景滚动问题，宽度自适应，高度设置百分比，开箱即用!
微信小程序实现电子签名功能
10-15
微信小程序实现电子签名功能是利用了微信小程序的Canvas组件，通过捕捉用户的触摸事件，生成签名笔迹，并提供上传和清除签名的接口。在实现过程中，涉及到的关键知识点包括： 1. 微信小程序基础架构：微信小程序是...
微信小程序前端解密获取手机号
06-03
本文将深入探讨微信小程序如何在前端实现安全地解密获取用户手机号。 一、微信小程序授权获取手机号流程 1. 用户授权：当用户首次打开微信小程序时，系统会提示用户是否允许小程序获取手机号。用户同意后，微信会...
微信小程序二维码生成源码
05-07
微信小程序二维码生成源码是基于ASP.NET C#技术实现的，用于创建带有参数的小程序二维码。在微信小程序的开发过程中，二维码作为一种常见的用户入口，能够快速引导用户进入特定的页面或者执行特定的操作。本源码提供...
姓氏头像生成器微信小程序源码
03-17
【标题】：“姓氏头像生成器微信小程序源码”是指一种用于创建个性化头像的微信小程序开发资源，其中包含了各种姓氏元素和设计模板，用户可以通过选择不同的模板和自己的姓氏来定制独一无二的头像。 【描述】：“超...
微信小程序使用canvas绘图并且把图片上传到服务器上面.rar
05-25
微信小程序是一种轻量级的应用开发框架，由腾讯推出，它允许开发者在微信内构建原生体验的应用。在微信小程序中，Canvas是一个非常重要的组件，它提供了丰富的绘图能力，可以用于实现各种动态效果和交互功能，如涂鸦...
新版 2D微信小程序 canvas画布签名
qq_33476262的博客
10-28 322
【代码】新版 2D微信小程序 canvas画布签名。
微信小程序手写签名2.0
刘刘刘的博客
10-20 1142
【代码】微信小程序手写签名。
微信小程序签名
生命不息，学习不止
12-19 2818
微信小程序，canvas，签名
uniapp小程序自定义签名面板组件,小程序页面引用实现横屏签字(亲测有效)
m0_47791238的博客
07-13 4256
uniapp小程序自定义签字面板组件, canvas手写签名画板, 小程序页面引用实现横屏签字
微信小程序用 canvas 实现手写签名弹框（全网最最最详细！！）
香菜的博客
10-16 2048
微信小程序用canvas实现手写签名弹框
微信小程序自定义canvas手写签名组件
S筱潇S四维Smile
08-19 1596
微信小程序自定义canvas手写签名组件
uniapp签名组件-适用于微信小程序
qq_45797421的博客
02-20 853
【代码】uniapp,微信小程序--签字版(签名)组件。
微信小程序前端获取openId详细流程
在微信小程序开发中，获取用户的OpenID是一个关键步骤，因为它允许应用与微信用户进行身份验证并收集用户数据。OpenID是微信为每个用户生成的一个唯一标识符，它在微信的生态系统中扮演着至关重要的角色，特别是在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值