更新记录

1.4.0(2024-05-21)

  • fix: 修复nvue因重复widthheight重复导致无法使用

1.3.9(2024-04-11)

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

1.3.8(2024-04-10)

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

平台兼容性

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

signature 写字板

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

平台兼容

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

代码演示

基本用法

<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

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

事件 Events

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

常见问题

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

打赏

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

隐私、权限声明

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

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

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

许可协议

MIT协议

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