<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]()
},