uniapp：手写签名，多张图合成一张图

sunly_

已于 2023-11-06 09:18:26 修改

阅读量1.3k

点赞数

分类专栏： uniapp 文章标签： uni-app javascript 前端

于 2023-07-27 13:39:46 首次发布

本文链接：https://blog.csdn.net/qq_40745143/article/details/131957083

版权

要实现的内容：手写签名，协议内容。点击提交后：生成1张图片，有协议内容和签署日期和签署人。
实现的效果图如下：
在这里插入图片描述

1、签名页面

<template>
	<view class="index">
		<u-navbar title="电子协议" :is-back="false" :border-bottom="false" title-color="#333" :background="{background:''}">
		<view class="page_navbar_warp">
				<image src="../../static/icon/0.png" mode="" class="page_navbar_commonImg" @click="$go(1,1)"></image>
			</view>
		</u-navbar>
		<image src="https://www.*****/xieyi.png" mode="" class="banner"></image>
			<view class="signBox">
				<view class="title">签名区</view>
				<view style="width: 700rpx;height: 450rpx;">
					<l-signature disableScroll backgroundColor="rgba(255, 249, 238, .0)" ref="signatureRef" penColor="#333" :penSize="5" :openSmooth="true" ></l-signature>
				</view>
			</view>
		<view class="footer">
			<view class="btn1 t-c" @click="onClick('undo')">撤消</view>
			<u-button class="btn2 t-c" @click="onClick('save')" :loading="loading">提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
     
		data() {
     
			return {
     
				loading:false,
			}
		},
		methods:{
     
			onClick(type) {
     
				 if(type == 'openSmooth') {
     
					 this.openSmooth