nherp-shop/pages/views/poster/signature.vue

<template>
	<signatureH5 
		:options="options" >
		<template v-slot:default="{ signatrue }">
				<div class="btn-box flex-row">
				  <span class="del-btn" @click="clearHandle(signatrue)">清除</span>
				  <span class="sure-btn" @click="confirmHandle(signatrue)">确认</span>
				</div>
		 </template>
	</signatureH5>
</template>
<script>
	import { rotateBase64Img　}　from '@/utils/util.js'
	export default {
		data() {
			return {
				options: {
					// minWidth: 5,
					// maxWidth: 10,
					penColor: "rgb(66, 133, 244)"
				}
			}
		},
		onShow() {
			
		},
		methods: {
			confirm(data) {
				console.log(data)
			},
			clearHandle(canvasNode) {
				if (canvasNode) {
				  canvasNode.clear()
				}
			},
			confirmHandle(canvasNode) {
				if (!canvasNode) {
				  return
				}
				
				// 是否签字
				if (canvasNode.isEmpty()) {
				  console.warn('您还没有签名');
					this.$toast('您还没有签名')
				  return false
				}
				// 图像旋转二次处理
				const _boxWidth = window.innerWidth
				const _boxHeight = window.innerHeight
				const _signImg = canvasNode.toDataURL('image/png', 0.6) || null
				if (_boxWidth < _boxHeight) {
				  rotateBase64Img(_signImg, -90, (imgUrlRes) => {
				    console.log(imgUrlRes)
				  })
				}
			}
		}
	}
</script>

<style>
</style>