更新记录

3.2.0（2024-08-27） 下载此版本

修复全屏签名图片未正确旋转问题

3.1.0（2024-06-03） 下载此版本

修复签名部分BUG

3.0.4（2024-05-28） 下载此版本

修改部分文档内容

平台兼容性

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

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

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

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

有合作需求请私

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

平台兼容

代码演示

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

事件 Events

常见问题

• 放在弹窗里时，尺寸不对 可以延时手写板出现时机，给手写板加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>

参数

方法

事假

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>

参数

方法

常见问题

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