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)
						console.log(res)
						let base64 = res.tempFilePath.split(',')[1]
					    
					  //   this.base64ToBlob({b64data: base64, contentType: 'image/png'}).then(res => {
					  //       // 转后后的blob对象
					  //       console.log('blob', res)
							// console.log(URL.createObjectURL(res))
							// uni.uploadFile({
							// 	url: this.baseUrl+'api/common/upload', 
							// 	filePath: URL.createObjectURL(res),
							// 	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")
							// 	}
							// });
							// // console.log(new File([blob],filename,{ type }))
					  //   })
						
						// 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>