zhxg_app/uni_modules/jp-signature

jp-signature 、jp-signature-popup、 jp-merge 写字板

jp-signature 写字板，可用业务签名等场景，方便用户自行改造

jp-signature-popup 小白专用弹框签名组件，方便小白开发使用，和输入框一样使用简单

jp-merge 图片签字组件，提供用户在图片文档上进行签字

有合作需求请私

开发不易，如果帮助到你的，请支持 有问题请留言，作者会积极更新

平台兼容

H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ 小程序	App
√	√	√	未测	未测	未测	√

代码演示

jp-signature 基本用法

<view style="width: 750rpx ;height: 500rpx;">
	<jp-signature  ref="signatureRef"   ></jp-signature>
</view>
<view>
	<button @click="clear">清空</button>
	<button @click="">撤消</button>
	<button @click="save">保存</button>
</view>

export default {
	data() {
		return {
			url: '',
		}
	},
	methods: {
		save(){
			this.$refs.signatureRef.canvasToTempFilePath({
				success: (res) => {
					// 是否为空画板 无签名
					console.log(res.isEmpty)
					// 生成图片的临时路径
					// H5 生成的是base64
					this.url = res.tempFilePath
				}
			})
		},
		clear(){
			this.$refs.signatureRef.clear()
		},
		undo(){
			this.$refs.signatureRef.undo()
		},
	}
}

API

Props

参数	说明	类型	默认值
penSize	画笔大小	number	2
minLineWidth	线条最小宽	number	2
maxLineWidth	线条最大宽	number	6
penColor	画笔颜色	string	black
backgroundColor	背景颜色	string	``
type	指定 canvas 类型	string	2d
openSmooth	是否模拟压感	boolean	false
beforeDelay	延时初始化，在放在弹窗里可以使用 （毫秒）	number	0
maxHistoryLength	限制历史记录数，即最大可撤销数，传入0则关闭历史记录功能	boolean	20
landscape	横屏	boolean	``
disableScroll	当在写字时，禁止屏幕滚动以及下拉刷新	boolean	true
boundingBox	只生成内容区域，即未画部分不生成，有性能的损耗（微信小程序pc不支持）	boolean	false

事件 Events

事件名	说明	回调
undo	撤消，回退到上一步
clear	清空，清空画板
canvasToTempFilePath	保存，生成图片，与官方保持一致，但不需要传canvasId

常见问题

• 放在弹窗里时，尺寸不对 可以延时手写板出现时机，给手写板加vif或beforeDelay="300"
• boundingBox 微信小程序 pc 不支持, 因为获取不到 ImageData 数据

jp-signature-popup 基础用法

<template>
	<view class="content">
		   <!-- #ifdef VUE2 -->
			<jp-signature-popup v-model="title"  />
			<!-- #endif -->
			<!-- #ifdef VUE3 -->
			<jp-signature-popup  v-model:value="title" />
			<!-- #endif -->
			{{title}}
	</view>
</template>
<script>
	export default {
		data() {
			return {
				title: ''
			}
		},
	}
</script>

####参数

参数名	类型	默认值	说明
value	String		签名内容，可以通过v-model和v-model:value绑定
label	String	手写签名
popup	Boolean	false	是否隐藏原有样式，该模式只使用弹框
required	Boolean	false
placeholder	String	点击签名	签名说明
readonly	Boolean	false	是否只能可读
openSmooth	Boolean	false	是否开启签名笔锋
boundingBox	boolean	false	只生成内容区域，即未画部分不生成，有性能的损耗（微信小程序不支持）

####方法

方法名	返回参数	说明
toPop		打开弹窗
close		关闭弹窗
deleteImg		删除内容

####事假

事件名	返回参数	说明
input	签名内容	签名内容
change	签名内容	签名内容改变后触发
toImg	图片编码	点击图片时触发

jp-merge 基础用法

<template>
	<view class="content">
		<view>下面是使用 jp-signature-popup 结合 jp-merge  在文档上签字</view>
		<view style="text-align: center;padding-bottom: 150px;">
			<image :src="image4" v-if="image4" style="width: 350px;height: 350px;border: 1px solid #ccc;"></image>
			<image src="../../static/sqs.jpg" v-else style="width: 350px;height: 350px;border: 1px solid #ccc;"></image>
			<view class="but" style="margin: 0 25px;" @click="toPop">我要在上面签字</view>
			<jp-signature-popup ref="signature" @change="setImg" popup v-model:value="image3" />
			<jp-merge bgImage="../../static/sqs.jpg" ref="jpMerge"></jp-merge>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				image3:'',
				image4:''
			}
		},
		methods: {
			setImg(val){
				if(val){
					<!-- 生成签字结果的方法可以传入网络及本地图片 -->
					this.$refs.jpMerge.exportPost(val).then(res => {
						this.image4 = res
				    })
				}
			},
			toPop(){
				this.$refs.signature.toPop()
			}
		}
	}
</script>
<style lang="scss">
	.but{
		margin: 25px;
		line-height: 40px;
		text-align: center;
		background-color: #55aaff;
		color: #fff;
	}
</style>

####参数

参数名	类型	默认值	说明
bgImage	String		文档图片地址，支持本地及线上图片（小程序如果是网络图片需要配置白名单）
canvasWidth	number	400	生成图片的最终宽，建议长高和文档长高一致
canvasHeight	number	400	生成图片的最终高，建议长高和文档长高一致
width	number	80	签字图片宽
height	number	80	签字图片高
left	number	80	签字图片距离左边位置
top	number	80	签字图片距离顶边位置

####方法

方法名	返回参数	说明
exportPost		传入签字图片生成最终结果

常见问题

• 在vue2和vue3中使用v-model有区别，vue2中为v-model，vue3为v-model:value
• 使用实例已放在 uni_modules/jp-signature/pages 中，可复制后测试