uniapp 微信签名图l-signature

<l-signature disableScroll ref="signatureRef" :penColor="penColor" :penSize="penSize"
:openSmooth="openSmooth"></l-signature>

//按钮
<view class="buttonList">
			<button @click="onClick('clear')" style="color: #009295; border: 2rpx solid #009295;">清空</button>
			<button @click="onClick('undo')" style="color: #666;border: 2rpx solid #666;">撤消</button>
			<button @click="onClick('save')" style="background-color: #009295;color: #fff;">保存</button>
		</view>

详细使用可以参考:手写板-签名签字-lime-signature - DCloud 插件市场

我主要想讲的是这个签名图得到的是临时路径,如何将其转化为base64传给后端:

主要通过uni.getFileSystemManager().readFile()

具体的使用可以参考:FileSystemManager | 微信开放文档

onClick(type) {
				if (type == 'save') {
					this.$refs.signatureRef.canvasToTempFilePath({
						success: (res) => {
							// 生成图片的临时路径  H5 生成的是base64
							// 是否为空画板 无签名
							if (!res.isEmpty) {
								let that = this
								that.url = res.tempFilePath 
								// url获取到的是临时路径  需要转化为base64
								uni.getFileSystemManager().readFile({
									filePath: that.url,
									encoding: 'base64',
									success: (data) => {
										let base64Data = data.data
										that.imgbase64 =
											'data:image/jpeg;base64,' +
											base64Data;  //base64转化成功
										uni.showToast({
											title: '保存成功',
											icon: 'none'
										})
										setTimeout(() => {
											uni.navigateBack({
												delta: 1
											})
										}, 500)
									},
									fail: (err) => {
										console.log('读取临时文件失败', err);
									}
								})

							} else {
								uni.showToast({
									title: '请先签名',
									icon: 'none'
								})
							}

						},
						fail: (err) => {
							console.log('下载文件失败', err);
						}
					})
					return
				}
				if (this.$refs.signatureRef)
					this.$refs.signatureRef[type]()
			},

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值