v3-lab-xcx/pages_basics/views/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 '@/pages_basics/api/index.js'
	import ImageCropper from '@/pages_basics/component/cropper.vue'
	export default {
		components: {
			ImageCropper
		},
		data() {
			return {
				src:"",
				srcData:"",
				signatureData:'',
			}
		},
		onLoad(option){
			this.src = option.src;
		},
		onShow(){

		},
		methods:{
			/************************************************修改头像************************************************/

			beforeDraw(context, transform) {
				context.setFillStyle('yellow')
				transform.zoom = 2
			},
			afterDraw(ctx, info) {
				ctx.fillText('', 20, 20)
			},
			async cropped(imagePath, imageInfo) {
				this.srcData = imagePath;
				//小程序电子签名抠图生成图片
				uni.uploadFile({
				    url: config.base_url+'/system/user/genSign', //仅为示例，非真实的接口地址
				    header:{'Authorization':uni.getStorageSync('token')},
				    filePath: imagePath,
				    name: 'file',
				    formData: {
				        'user': 'test'
				    },
				    success: (response) => {
						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;
			    uni.setStorageSync('signatureData',this.signatureData)
				setTimeout(function(){
				    uni.navigateBack();
				},200);


			},
			backButton(){
				uni.navigateBack();
			},


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