jsm-mall-h5-front/src/packageWorkorder/pages/signName.vue

<template>
	<!-- #ifdef H5 -->
	<view>
		<view class="wrapper">
			<view class="handBtn">
				<view class="left">
					<u-button @click="retDraw">重写</u-button>
					<u-button @click="previewCanvasImg">预览</u-button>
				</view>
				<view class="right">
					<u-button @click="subCanvas" type="primary">完成</u-button>
				</view>
			</view>
			<view class="handCenter">
				<canvas class="handWriting" id="handWriting" :disable-scroll="true" @touchstart="uploadScaleStart"
					@touchmove="uploadScaleMove" canvas-id="handWriting"></canvas>
			</view>
			<view class="handRight">
				<view class="handTitle">请签名</view>
			</view>
		</view>
	</view>
	<!-- #endif -->

	<!-- #ifndef H5 -->
	<web-view :src="webViewHref(`/packageWorkorder/pages/signName`, pam, crossPagePam)" @message="crossPage.$listener"></web-view>
	<!-- #endif -->
</template>

<script>
	// #ifdef H5
	import { uploadImgFull } from '@/common/utils/util.js';

	export default {
		data() {
			return {
				canvasName: 'handWriting',
				ctx: '',
				startX: null,
				startY: null,
				canvasWidth: 0,
				canvasHeight: 0,
				selectColor: 'black',
				lineColor: '#1A1A1A', // 颜色
				lineSize: 5, // 笔记倍数
				isWrite: false,
			};
		},

		onLoad() {
			this.ctx = uni.createCanvasContext("handWriting");
			this.$nextTick(() => {
				uni.createSelectorQuery().select('.handCenter').boundingClientRect(rect => {
						this.canvasWidth = rect.width;
						this.canvasHeight = rect.height;
						/* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
						this.setCanvasBg('#fff');
					})
					.exec();
			});
		},

		methods: {
			// 笔迹开始
			uploadScaleStart(e) {
				this.startX = e.changedTouches[0].x
				this.startY = e.changedTouches[0].y
				//设置画笔参数
				//画笔颜色
				this.ctx.setStrokeStyle(this.lineColor)
				//设置线条粗细
				this.ctx.setLineWidth(this.lineSize)
				//设置线条的结束端点样式
				this.ctx.setLineCap("round") //'butt'、'round'、'square'
				//开始画笔
				this.ctx.beginPath()
			},

			// 笔迹移动
			uploadScaleMove(e) {
				//取点
				let temX = e.changedTouches[0].x
				let temY = e.changedTouches[0].y
				//画线条
				this.ctx.moveTo(this.startX, this.startY)
				this.ctx.lineTo(temX, temY)
				this.ctx.stroke()
				this.startX = temX
				this.startY = temY
				this.ctx.draw(true)

				this.isWrite = true;
			},

			// 重写
			retDraw() {
				this.ctx.clearRect(0, 0, 700, 730);
				this.ctx.draw();
				//设置canvas背景
				this.setCanvasBg('#fff');

				this.isWrite = false;
			},

			// 完成
			subCanvas() {
				if(!this.isWrite) return this.$toast('请签名');
				uni.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'png',
					quality: 1, //图片质量
          destWidth: document.getElementById('handWriting').offsetWidth / 2,
          destHeight: document.getElementById('handWriting').offsetHeight / 2,
					success: async (res) => {
            this.rotateBase64(res.tempFilePath).then(async (img) => {
            	if(img){
            		let data = await uploadImgFull(img);
            		// console.log(res.tempFilePath, 'canvas生成图片地址');
            		this.crossPage.$emit('finishSign', data.url);
            		this.$navToPage({
            			delta: 1
            		}, 'navigateBack')
            	}
            });

					}
				});
			},

      // 将base64图片旋转90度以后上传
      rotateBase64(imgBase64) {
        return new Promise((resolve) => {
          const imgView = new Image();
          imgView.src = imgBase64;
          const canvas = document.createElement('canvas');
          const context = canvas.getContext('2d');
          const cutCoor = {
            sx: 0,
            sy: 0,
            ex: 0,
            ey: 0,
          };
          // 裁剪坐标
          imgView.onload = () => {
            const imgW = imgView.width;
            const imgH = imgView.height;
            const size = imgH;
            //   常量大小 = imgH;
            canvas.width = size * 2;
            canvas.height = size * 2;
            cutCoor.sx = size;
            cutCoor.sy = size - imgW;
            cutCoor.ex = size + imgH;
            cutCoor.ey = size + imgW;
            context.translate(size, size);
            context.rotate((Math.PI / 2) * 3);
            context.drawImage(imgView, 0, 0);
            const imgData = context.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey);
            canvas.width = imgH;
            canvas.height = imgW;
            context.putImageData(imgData, 0, 0);
            resolve(canvas.toDataURL('image/png'));
          };
        });
      },

			// 预览
			previewCanvasImg() {
				uni.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'jpg',
					quality: 1, //图片质量
					success(res) {
						uni.previewImage({
							urls: [res.tempFilePath] //预览图片 数组
						});
					}
				});
			},

			//设置canvas背景色  不设置  导出的canvas的背景为透明
			//@params：字符串  color
			setCanvasBg(color) {
				/* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
				//rect() 参数说明  矩形路径左上角的横坐标，左上角的纵坐标, 矩形路径的宽度, 矩形路径的高度
				//这里是 canvasHeight - 4 是因为下边盖住边框了，所以手动减了写
				this.ctx.rect(0, 0, this.canvasWidth, this.canvasHeight - 4);
				// ctx.setFillStyle('red')
				this.ctx.setFillStyle(color);
				this.ctx.fill(); //设置填充
				this.ctx.draw(); //开画
			}
		}
	};
	// #endif
	// #ifndef H5
	export default {
	  data() {
	    return {
	      pam: {},
	    }
	  },
	  onLoad(pam) {
	    this.pam = pam;
	  }
	}
	// #endif
</script>

<style scoped lang="scss">
	page {
		background: #fbfbfb;
		height: auto;
		overflow: hidden;
	}

	.wrapper {
		width: 100%;
		height: 95vh;
		margin: 30rpx 0;
		overflow: hidden;
		display: flex;
		align-content: center;
		flex-direction: row;
		justify-content: center;
		font-size: 28rpx;
	}

	.handWriting {
		background: #fff;
		width: 100%;
		height: 95vh;
	}

	.handRight {
		display: inline-flex;
		align-items: center;
	}

	.handCenter {
		border: 4rpx dashed #e9e9e9;
		flex: 5;
		overflow: hidden;
		box-sizing: border-box;
	}

	.handTitle {
		transform: rotate(90deg);
		flex: 1;
		color: #666;
	}

	.handBtn button {
		font-size: 28rpx;
	}

	.handBtn {
		height: 95vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1;
		.left {
			display: flex;
			flex-direction: column;
		}
		::v-deep .u-button {
			flex-shrink: 0;
			transform: rotate(90deg);
			margin-bottom: 30rpx;
			margin-top: 30rpx;
		}
	}
</style>