更新记录

1.3.9（2024-04-11）

• feat: 增加preferToDataURLporps，是否优先使用toDataURL生成图片，在支持toDataURL的环境优先使用，会生成base64的图片

1.3.8（2024-04-10）

• fix: 修复因兼容抖音导致微信小程序图片不完整

1.3.7（2024-04-10）

• fix: 修复uniapp x(web)无法生图的问题
• feat: 支持uniapp x(web on pc)

平台兼容性

signature 写字板

uniapp 写字板，可用业务签名等场景
查看更多 站点1
查看更多 站点2
Q群：1169785031

平台兼容

代码演示

基本用法

<view style="width: 750rpx ;height: 750rpx;">
    <l-signature disableScroll  ref="signatureRef" :penColor="penColor" :penSize="penSize" :openSmooth="openSmooth" ></l-signature>
</view>
<view>
    <button @click="onClick('clear')">清空</button>
    <button @click="onClick('undo')">撤消</button>
    <button @click="onClick('save')">保存</button>
    <!-- uvue 不支持 openSmooth -->
    <button @click="onClick('openSmooth')">压感{{openSmooth?'开':'关'}}</button>
</view>

Vue/Nvue

export default {
    data() {
        return {
            title: 'Hello',
            penColor: 'red',
            penSize: 5,
            url: '',
            openSmooth: true
        }
    },
    methods: {
        onClick(type) {
             if(type == 'openSmooth') {
                 this.openSmooth = !this.openSmooth
                 return
             }
            if (type == 'save') {
                this.$refs.signatureRef.canvasToTempFilePath({
                    success: (res) => {
                        // 是否为空画板 无签名
                        console.log(res.isEmpty)
                        // 生成图片的临时路径
                        // H5 生成的是base64
                        this.url = res.tempFilePath
                    }
                })
                return
            }
            if (this.$refs.signatureRef)
                this.$refs.signatureRef[type]()
        }
    }
}

Uvue

import {LSignatureToTempFilePathOptions, LSignatureToFileSuccess} from '@/uni_modules/lime-signature'
export default {
    data() {
        return {
            title: 'Hello',
            penColor: 'red',
            penSize: 5,
            url: '',
            openSmooth: true
        }
    },
    methods: {
        onClick(type: string) {
            const signatureRef = this.$refs['signatureRef'] as LSignatureComponentPublicInstance
            // APP 不支持
            // #ifndef APP 
             if(type == 'openSmooth') {
                 this.openSmooth = !this.openSmooth
             }
             // #endif
            if (type == 'save') {
                signatureRef.canvasToTempFilePath({
                    success: (res: LSignatureToFileSuccess) => {
                        // 是否为空画板 无签名
                        console.log(res.isEmpty)
                        // 生成图片的临时路径
                        // H5 生成的是base64
                        this.url = res.tempFilePath
                    }
                } as LSignatureToTempFilePathOptions)
                return
            }
            if(type == 'undo'){
                signatureRef.undo()
            }
            if(type == 'redo'){
                signatureRef.redo()
            }
            if(type == 'clear'){
                signatureRef.clear()
            }
        }
    }
}

横屏

通过设置landscape,改变生成图片的方向，达到横屏的作用

<view style="width: 100vw; height: 100vh;">
    <l-signature landscape></l-signature>
</view>
<view style="transform: rotate(90deg);">
    <button @click="onClick('clear')">清空</button>
    <button @click="onClick('undo')">撤消</button>
    <button @click="onClick('save')">保存</button>
    <button @click="onClick('openSmooth')">压感{{openSmooth?'开':'关'}}</button>
</view>

插件标签

• 默认 l-signature 为 component
• 默认 lime-signature 为 demo demo使用了uni-popup,如果要看演示请自行导入这个插件

API

Props

事件 Events

常见问题

• 放在弹窗里时，尺寸不对 可以延时手写板出现时机，给手写板加vif或beforeDelay="300"
• boundingBox 微信小程序 pc / uvue 不支持, 因为获取不到 ImageData 数据
• backgroundColor 不能设置为transparent,填了也没用，我在代码里排除了。因为会导致微信小程序无法生成图片

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。