平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
×

signature

uni-app Canvas手写板(use canvas in weapp for user signature)

已弃用,新的插件请访问电子签名

参考了GitHub上的小程序canvas手写板,并进行部分修改 小程序Canvas手写板地址: 核心文件为static中signature.js.js

插件

将signature.js.js 引入页面中

要使用的页面 index.vue

<script>
import Handwriting from "../../static/js/signature.js.js"

使用JS index.js

 onLoad: function (options) {
    this.handwriting = new Handwriting({
      lineColor: this.lineColor,
      slideValue: this.slideValue,
      canvasName:'handWriting'
    })
  },

  // 初始化需传入三个参数 
  // lineColor  字体颜色 默认#1A1A1A 
  // slideValue 字体粗细 默认50(内置 0,25,50, 75, 100 5档粗细)
  // canvasName canvas的id名 canvas-id

   //绑定canvas事件  event为canvas事件回调传值
    this.handwriting.uploadScaleStart(event)  绑定到canvas的touchstart事件
    this.handwriting.uploadScaleMove(event)   绑定到canvas的touchmove事件
    this.handwriting.uploadScaleEnd(event)    绑定到canvas的uploadScaleEnd事件

   // 内置函数
   this.handwriting.selectColorEvent(color);   // 传入颜色参数 改变字体颜色
   this.handwriting.selectSlideValue(slideValue);  // 传入粗细参数 0,25,50,75,100 改变字体粗细
   this.handwriting.retDraw() //清楚canvas内容
   this.handwriting.saveCanvas() //生成图片,基于uni-app接口 uni.canvasToTempFilePath(OBJECT) 异步封装,默认未传参,需要传参可自行在signature.js.js中修改

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问