huazhiyu/pages/home/sign.vue

<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>