FE-V2-XCX/pages_manage/workbench/signature/signatureImg.vue

<!-- 电子签名图片 -->
<template>
	<view class="avatar-page">
		<view style="height:100%;width:100%;" v-if="src&&src!='null'">
			<image-cropper
				id="image-cropper"
				:zoom="1"
				:angle="0"
				:src="src"
				cutWidth='688rpx'
				cutHeight='250rpx'
				canvasBackground="red"
				@cropped="cropped"
				@afterDraw="afterDraw"
				@beforeDraw="beforeDraw"/>
		</view>
		<view class="left-button" @click="backButton">取消</view>
		<view class="right-button" @click="upImg">确定</view>
	</view>
</template>

<script>
    import { config } from '@/api/request/config.js'
    import { querygenSign} from '@/api/index.js'
	import ImageCropper from '@/component/cropper.vue'
	export default {
		components: {
			ImageCropper
		},
		data() {
			return {
				src:"",
				srcData:"",
				signatureData:'',
			}
		},
		onLoad(option){
			this.src = option.src;
			//this.src = 'https://www.baidu.com/img/flexible/logo/pc/result@2.png';
			console.log(this.src)
		},
		onShow(){

		},
		methods:{
			/************************************************修改头像************************************************/
			
			beforeDraw(context, transform) {
				context.setFillStyle('yellow')
				transform.zoom = 2
			},
			afterDraw(ctx, info) {
				ctx.fillText('', 20, 20)
				console.log(`当前画布大小：${info.width}*${info.height}`)
			},
			async cropped(imagePath, imageInfo) {
				console.log("imagePath",imagePath)
				this.srcData = imagePath;
				console.log(imagePath)
				//小程序电子签名抠图生成图片
				uni.uploadFile({
				    url: config.base_url+'/app/sysuser/api/genSign', //仅为示例，非真实的接口地址
				    header:{'Authorization':uni.getStorageSync('token')},
				    filePath: imagePath,
				    name: 'file',
				    formData: {
				        'user': 'test'
				    },
				    success: (response) => {
						console.log(typeof(response.data))
						let data=JSON.parse(response.data)
						if(data.code == 200){
							let text = data.data.replace(/[\r\n]/g,"");
							this.signatureData = 'data:image/png;base64,'+ text;
							
						} else {
							uni.showToast({
								title: response.msg,
								icon:"none",
								mask:true,
								duration: 2000
							});
						}
				       
				    },
				    fail: err => {},
				    complete: () => {
				        uni.hideLoading()
				    }
				});
				
			},
		
			/************************************************************************************************/
			upImg(){
				let self = this;
				console.log(this.signatureData)
			    uni.setStorageSync('signatureData',this.signatureData)
				setTimeout(function(){
				    uni.navigateBack();
				},200);
				/* uni.showModal({
				    content: '确认提交吗?',
				    cancelColor:"#999",
				    confirmColor:"#0183FA",
				    success: function (res) {
				        if (res.confirm) {
				            self.uploadImg(self.srcData);
				            console.log('用户点击确定');
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				}); */
				 
			},
			backButton(){
				uni.navigateBack();
			},
			
			/* //小程序电子签名抠图生成图片
			async querygenSign(formData){
				const {data} = await querygenSign(formData);
				if(data.code == 200){
					console.log('程序电子签名抠图生成图片')
				}
			}, */
			
		}
	}
</script>

<style lang="stylus" scoped>
	.avatar-page{
		height:100%;
		width:100%
		.left-button{
			background #E0E0E0;
			color:#333;
			text-align center;
			font-size:26rpx;
			width:140rpx;
			height:60rpx;
			line-height:60rpx;
			position fixed;
			left:40rpx;
			bottom:40rpx;
			z-index:100;
			border-radius:10rpx;
		}
		.right-button{
			background #007AFF;
			color:#fff;
			text-align center;
			font-size:26rpx;
			width:140rpx;
			height:60rpx;
			line-height:60rpx;
			position fixed;
			right:40rpx;
			bottom:40rpx;
			z-index:100;
			border-radius:10rpx;
		}
	}
</style>