You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
152 lines
4.0 KiB
152 lines
4.0 KiB
<template>
|
|
<view class="sign">
|
|
<view style="width: 100vw; height: 100vh;">
|
|
<l-signature disableScroll backgroundColor="#ddd"
|
|
ref="signatureRef"
|
|
:penColor="penColor"
|
|
:penSize="penSize"
|
|
:landscape="true"
|
|
:openSmooth="openSmooth" ></l-signature>
|
|
</view>
|
|
<view class="btn">
|
|
<button @click="onClick('clear')">清空</button>
|
|
<button @click="onClick('undo')">撤消</button>
|
|
<button @click="onClick('save')">保存</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {getToken} from '@/common/auth.js'
|
|
import {updateUserInfo} from '@/common/api.js'
|
|
export default{
|
|
data(){
|
|
return{
|
|
title: 'Hello',
|
|
penColor: '#000000',
|
|
penSize: 5,
|
|
picurl: '',
|
|
landscape:true,
|
|
openSmooth: false
|
|
}
|
|
},
|
|
methods: {
|
|
base64toBlob(base64, type = 'application/octet-stream') {
|
|
const bstr = atob(base64);
|
|
let n = bstr.length;
|
|
const u8arr = new Uint8Array(n);
|
|
while (n--) {
|
|
u8arr[n] = bstr.charCodeAt(n);
|
|
}
|
|
return new Blob([u8arr], { type });
|
|
},
|
|
|
|
onClick(type) {
|
|
if(type == 'openSmooth') {
|
|
this.openSmooth = !this.openSmooth
|
|
return
|
|
}
|
|
if (type == 'save') {
|
|
this.$refs.signatureRef.canvasToTempFilePath({
|
|
success: (res) => {
|
|
// 是否为空画板 无签名
|
|
console.log(res.isEmpty)
|
|
|
|
const base64String = res.tempFilePath.replace("data:image/png;base64,",'');
|
|
const blob = this.base64toBlob(base64String, 'image/jpg')
|
|
console.log(blob)
|
|
let path = URL.createObjectURL(blob);
|
|
console.log(path,"999")
|
|
uni.uploadFile({
|
|
url: this.baseUrl+'api/common/upload',
|
|
filePath: path,
|
|
name: 'file',
|
|
header:{
|
|
token:getToken()
|
|
},
|
|
formData: {
|
|
},
|
|
success: (res) => {
|
|
console.log(res)
|
|
// if(JSON.parse(res.data).code==1){
|
|
// setTimeout(() => {
|
|
// // this.finishImageList.push({url:JSON.parse(res.data).data.fullurl,path:JSON.parse(res.data).data.url})
|
|
// // resolve(res.data)
|
|
// console.log(res)
|
|
// }, 1000)
|
|
// }else{
|
|
// uni.$u.toast(JSON.parse(res.data).msg)
|
|
|
|
// resolve(res.data)
|
|
// }
|
|
},
|
|
fail: (res) => {
|
|
console.log(res,"rrr")
|
|
}
|
|
});
|
|
// this.saveSignPic()
|
|
}
|
|
})
|
|
return
|
|
}
|
|
if (this.$refs.signatureRef)
|
|
this.$refs.signatureRef[type]()
|
|
},
|
|
|
|
saveSignPic(){
|
|
updateUserInfo({sign_image:this.picurl}).then(res=>{
|
|
console.log(res,"ooooo")
|
|
})
|
|
},
|
|
// 原理：利用URL.createObjectURL为blob对象创建临时的URL
|
|
|
|
// base64ToBlob ({b64data = '', contentType = '', sliceSize = 512} = {}) {
|
|
// return new Promise((resolve, reject) => {
|
|
// // 使用 atob() 方法将数据解码
|
|
// let byteCharacters = atob(b64data);
|
|
// let byteArrays = [];
|
|
// for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
|
|
// let slice = byteCharacters.slice(offset, offset + sliceSize);
|
|
// let byteNumbers = [];
|
|
// for (let i = 0; i < slice.length; i++) {
|
|
// byteNumbers.push(slice.charCodeAt(i));
|
|
// }
|
|
// // 8 位无符号整数值的类型化数组。内容将初始化为 0。
|
|
// // 如果无法分配请求数目的字节，则将引发异常。
|
|
// byteArrays.push(new Uint8Array(byteNumbers));
|
|
// }
|
|
// let result = new Blob(byteArrays, {
|
|
// type: contentType
|
|
// })
|
|
// result = Object.assign(result,{
|
|
// // jartto: 这里一定要处理一下 URL.createObjectURL
|
|
// preview: URL.createObjectURL(result),
|
|
// name: `图片示例.png`
|
|
// });
|
|
// resolve(result)
|
|
// })
|
|
// }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.sign{
|
|
height:calc(100vh);
|
|
overflow: hidden;
|
|
.btn{
|
|
// transform: rotate(90deg);
|
|
display: flex;
|
|
position: fixed;
|
|
bottom:10px;
|
|
width:100%;
|
|
button{
|
|
flex:1;
|
|
margin:0 10rpx;
|
|
background-color: $base;
|
|
color:#fff;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |