uniapp 在线签名

安装

npm install --save sign-canvas

引入

import SignCanvas from 'sign-canvas';
Vue.use(SignCanvas);

页面代码

<template>
	<view class="sign">
		<view class="top"><span>|</span><span>请在下方空白处签名</span></view>
		<sign-canvas class="sign-canvas" ref="SignCanvas" :options="options" v-model="value" />
		<view class="btnList" ref="btnList">
			<button type="warn" @click="canvasClear">重签</button>
			<button type="primary" @click="saveAsImg">保存</button>
			<!-- <button type="default" @click="back">返回</button> -->
		</view>
	</view>
</template>

<script>
	export default {
		name: "signDialog",
		data() {
			return {
				value: null,
				options: {
					lastWriteSpeed: 1, //书写速度 [Number] 可选
					lastWriteWidth: 2, //下笔的宽度 [Number] 可选
					lineCap: "round", //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square]	正方形线帽
					lineJoin: "round", //线条交汇时边角的类型  [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
					canvasWidth: 350, //canvas宽高 [Number] 可选
					canvasHeight: 350, //高度  [Number] 可选
					isShowBorder: true, //是否显示边框 [可选]
					bgColor: "#fcc", //背景色 [String] 可选
					borderWidth: 1, // 网格线宽度  [Number] 可选
					borderColor: "#ffffff", //网格颜色  [String] 可选
					writeWidth: 5, //基础轨迹宽度  [Number] 可选
					maxWriteWidth: 30, // 写字模式最大线宽  [Number] 可选
					minWriteWidth: 5, // 写字模式最小线宽  [Number] 可选
					writeColor: "#101010", // 轨迹颜色  [String] 可选
					isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
					imgType: "png", //下载的图片格式  [String] 可选为 jpeg  canvas本是透明背景的
				}
			};
		},
		props: {
			// options: { 
			// 	required: false,
			// 	type: [Object],
			// 	default: () => null
			// }
		},
		methods: {
			/**
			 * 清除画板
			 */
			canvasClear() {
				this.$refs.SignCanvas.canvasClear();
			},

			/**
			 * 保存图片
			 */
			saveAsImg() {
				if (!this.value) {
					uni.$u.toast('请先签名再进行保存')
					return false
				}
				const img = this.$refs.SignCanvas.saveAsImg();
				uni.setStorageSync('sign',img)
			},

			/**
			 * 下载图片
			 */
			downloadSignImg() {
				this.$refs.SignCanvas.downloadSignImg();
			},
			/**
			 * 返回
			 */
			back() {
				this.$router.back()
			}
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F7F7F7;

		.top {
			padding: 20rpx;

			span {
				&:first-child {
					font-weight: bold;
					color: blue;
					margin-right: 10rpx;
				}

				&:last-child {
					color: black;
					font-weight: bold;
				}
			}

		}

		button {
			background: #ffffff;
			color: blue;
			width: 375rpx;
			margin-top: 20rpx;
		}

		.btnList {
			flex-direction: column;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 30px 0;
			display: flex;
			justify-content: center;
		}

		.sign-canvas {
			display: block;
			margin: 0 auto;
			background: white !important;
		}
	}
</style>

效果图：