收藏
回答

ios扫码进入页面undefined,canvas组件ios会出现字迹清除这是为什么?

<template>
	<view >
		<view class="wrapper" style="position: relative;">
			<view class="handBtn">
				<image @click="selectColorEvent('black','#1A1A1A')"
					:src="selectColor === 'black' ? '../static/other/color_black_selected.png' : '../static/other/color_black.png'"
					:class="[selectColor === 'black' ? 'color_select' : '', 'black-select']"></image>
				<image @click="selectColorEvent('red','#ca262a')"
					:src="selectColor === 'red' ? '../static/other/color_red_selected.png' : '../static/other/color_red.png'"
					:class="[selectColor === 'red' ? 'color_select' : '', 'black-select']"></image>
				<button @click="retDraw2" class="delBtn">重写</button>
				<!-- <button @click="saveCanvasAsImg" class="saveBtn">保存</button> -->
				<button @click="previewCanvasImg" class="previewBtn">预览</button>
				<button @click="autoFix" class="previewBtn1" v-if="gzcName=='重庆市渝北公证处' ">自动生成</button>
				<!-- <button @click="uploadCanvasImg" class="uploadBtn">上传</button> -->
				<button @click="subCanvas" class="subBtn">完成</button>
			</view>
			<view class="handCenter">
				<canvas class="handWriting" style="width: 300px;height: 95vh;" :disable-scroll="true"
					@touchstart="uploadScaleStart" @touchmove="uploadScaleMove" @touchend="uploadScaleEnd"
					canvas-id="handWriting"></canvas>
			</view>
			<view class="handRight">
				<view class="handTitle">请签名</view>
			</view>
		</view>
	</view>
</template>
<script>
import {
	startEid
} from '@/mp_ecard_sdk/main.js'
import { config } from '@/config/index.js'
let { appId } = config
export default {
	data () {
		return {
			gzcName:'重庆市渝北公证处',
			autoWrite:"",
			
			name:'',
			showText:false,
			drawLine: [],
			signStatus: '',
			appId: appId,
			signType: '',
			canvasName: 'handWriting',
			ctx: '',
			canvasWidth: 0,
			canvasHeight: 0,
			transparent: 1, // 透明度
			selectColor: 'black',
			lineColor: '#1A1A1A', // 颜色
			lineSize: 1.5, // 笔记倍数
			lineMin: 0.5, // 最小笔画半径
			lineMax: 4, // 最大笔画半径
			pressure: 1, // 默认压力
			smoothness: 60, //顺滑度,用60的距离来计算速度
			currentPoint: {},
			currentLine: [], // 当前线条
			firstTouch: true, // 第一次触发
			radius: 1, //画圆的半径
			cutArea: {
				top: 0,
				right: 0,
				bottom: 0,
				left: 0
			}, //裁剪区域
			bethelPoint: [], //保存所有线条 生成的贝塞尔点;
			lastPoint: 0,
			chirography: [], //笔迹
			currentChirography: {}, //当前笔迹
			linePrack: [], //划线轨迹 , 生成线条的实际点
			gzOrderId: '',
			userId: '',
			role: 0
		};
	},


	onShow () {


	},
	onLoad (options) {
		console.log(options);
		this.gzOrderId = options.gzOrderId
		this.userId = options.userId
		this.signUserType = options.signUserType
		this.role = options.role
		this.name = options.name
		this.signStatus = options.signStatus
		if(uni.getStorageSync('gzcName')){
			this.gzcName=uni.getStorageSync('gzcName')
		}
		
		// 输出gzName
		console.log('this.gzcName',this.gzcName)
		
		let canvasName = this.canvasName;
		let ctx = wx.createCanvasContext(canvasName);
		this.ctx = ctx;
		var query = wx.createSelectorQuery();
		query
			.select('.handCenter')
			.boundingClientRect(rect => {
				console.log(rect);
				this.canvasWidth = rect.width;
				this.canvasHeight = rect.height;
				/* 将canvas背景设置为 白底,不设置  导出的canvas的背景为透明 */
				this.setCanvasBg("#fff");
				
				this.initText()
				
			})
			.exec();
		// 人脸核验初始化
		// this.faceCheckInit()
		
		


	},
	onUnload () {
		uni.removeStorageSync('faceidToken')
	},
	methods: {
		autoFix(){
			this.autoWrite=true
			this.initText()
		},
		initText () {
			console.log('initTExt');
			let text = this.name||'请签字'
			console.log(text.length);
			let arr = text.split('')
			let textArr = arr.map((it, index) => {
				return index + 1 == arr.length ? it : it + '\xa0'
			})
			let texta = textArr.join('')
			// 查看当前文字的宽高
			// let width = this.ctx.measureText(text)
			this.ctx.font = `${text.length==2?150:text.length==3?120:100}px FangSong`
			// 设置文本的对齐方式的属性left文本左对齐、right文本右对齐、center文本居中对齐、
			// start(默认)文本对齐界线开始的地方、end文本对齐界线结束的地方
			this.ctx.textAlign = "center"
			// 设置文字上下对齐方式top文本基线在文本块的顶部。
			//hanging文本基线是悬挂基线。
			//middle文本基线在文本块的中间。
			//alphabetic文本基线是标准的字母基线。
			// ideographic文字基线是表意字基线;如果字符本身超出了 alphabetic 基线,那么 ideograhpic 基线位置在字符本身的底部。
			// bottom文本基线在文本块的底部。与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。
			this.ctx.textBaseline = "middle"


			//以下是基准点
			this.ctx.arc(300, 200, 3, 0, Math.PI * 2)
			this.ctx.fillStyle = 'black'
			this.ctx.save()
			this.ctx.translate(this.canvasWidth / 2, this.canvasHeight / 2)
			this.ctx.rotate(Math.PI / 2)
			this.ctx.setLineDash([4])
			// this.ctx.strokeText(texta)
			if(this.autoWrite){
				this.ctx.fillText(texta)
			}else{
				console.log('镂空效果');
				
				this.ctx.strokeText(texta)
			}


			
			// this.ctx.strokeText(texta)
			this.ctx.setFillStyle("#fff");
			this.ctx.fill(); //设置填充
			this.ctx.draw()
			this.ctx.restore()
			this.showText=true;
		},
		async faceCheckInit () {
			// 拿到签署类型告诉后端是走人脸识别还是新的视频操作
			let res = await this.$http.post(this.$api.faceCheckInit, {
				"returnUrl": '/pagesInput/handleInput/inputResult/index',
			});
			if (res.token) {
				let url = `https://api-h5.jumdata.com/lifecheck/v2/check/index`
				uni.navigateTo({
					url: `/shareWeb/shareWeb?url=${url}&token=${res.token}`
				})
			}
			console.log('faceCheckInit', res);
		},
		// 笔迹开始
		uploadScaleStart (e) {
			// 判断当前 chirography 是否为空
			console.log(this.chirography);
				// this.retDraw(false)
			// if(this.chirography.length<1){
			// 	// 如果不为空,则返回 false
			// 	this.retDraw(false)
			// 	return 
			// }
			// 判断当前事件类型是否为 touchstart
			if (e.type != 'touchstart') return false;
			// 获取当前 ctx
			let ctx = this.ctx;
			// 设置当前线条颜色
			ctx.setFillStyle(this.lineColor); // 初始线条设置颜色
			// 设置当前线条透明度
			ctx.setGlobalAlpha(this.transparent); // 设置半透明
			// 获取当前触摸点
			let currentPoint = {
				x: e.touches[0].x,
				y: e.touches[0].y
			};
			// 获取当前线条
			let currentLine = this.currentLine;
			// 将当前触摸点添加到当前线条中
			currentLine.unshift({
				time: new Date().getTime(),
				dis: 0,
				x: currentPoint.x,
				y: currentPoint.y
			});
			// 更新当前触摸点
			this.currentPoint = currentPoint;
			// currentLine
			// 判断当前是否为第一次触摸
			if (this.firstTouch) {
				// 如果是第一次触摸,则设置剪切区域
				this.cutArea = {
					top: currentPoint.y,
					right: currentPoint.x,
					bottom: currentPoint.y,
					left: currentPoint.x
				};
				// 将当前状态设置为非第一次触摸
				this.firstTouch = false;
			}
			// 将当前触摸点添加到当前线条中
			this.pointToLine(currentLine);
		},
		// 笔迹移动
		uploadScaleMove (e) {
			if (e.type != 'touchmove') return false;
			if (e.cancelable) {
				// 判断默认行为是否已经被禁用
				if (!e.defaultPrevented) {
					e.preventDefault();
				}
			}
			let point = {
				x: e.touches[0].x,
				y: e.touches[0].y
			};


			//测试裁剪
			if (point.y < this.cutArea.top) {
				this.cutArea.top = point.y;
			}
			if (point.y < 0) this.cutArea.top = 0;


			if (point.x > this.cutArea.right) {
				this.cutArea.right = point.x;
			}
			if (this.canvasWidth - point.x <= 0) {
				this.cutArea.right = this.canvasWidth;
			}
			if (point.y > this.cutArea.bottom) {
				this.cutArea.bottom = point.y;
			}
			if (this.canvasHeight - point.y <= 0) {
				this.cutArea.bottom = this.canvasHeight;
			}
			if (point.x < this.cutArea.left) {
				this.cutArea.left = point.x;
			}
			if (point.x < 0) this.cutArea.left = 0;


			this.lastPoint = this.currentPoint;
			this.currentPoint = point;


			let currentLine = this.currentLine;
			currentLine.unshift({
				time: new Date().getTime(),
				dis: this.distance(this.currentPoint, this.lastPoint),
				x: point.x,
				y: point.y
			});
			// console.log('this.currentLine', this.currentLine);
			this.drawLine = JSON.parse(JSON.stringify(currentLine))


			this.pointToLine(currentLine);
		},
		// 笔迹结束
		uploadScaleEnd (e) {
			if (e.type != 'touchend') return 0;
			let point = {
				x: e.changedTouches[0].x,
				y: e.changedTouches[0].y
			};
			this.lastPoint = this.currentPoint;
			this.currentPoint = point;


			let currentLine = this.currentLine;
			currentLine.unshift({
				time: new Date().getTime(),
				dis: this.distance(this.currentPoint, this.lastPoint),
				x: point.x,
				y: point.y
			});


			if (currentLine.length > 2) {
				var info = (currentLine[0].time - currentLine[currentLine.length - 1].time) / currentLine.length;
				//$("#info").text(info.toFixed(2));
			}
			//一笔结束,保存笔迹的坐标点,清空,当前笔迹
			//增加判断是否在手写区域;
			this.pointToLine(currentLine);
			var currentChirography = {
				lineSize: this.lineSize,
				lineColor: this.lineColor
			};
			var chirography = this.chirography;
			chirography.unshift(currentChirography);
			this.chirography = chirography;


			var linePrack = this.linePrack;
			linePrack.unshift(this.currentLine);
			this.linePrack = linePrack;
			// 暂时注释
			this.currentLine = [];
		},
		retDraw () {
			this.ctx.clearRect(0, 0, 700, 730);
			this.ctx.draw();
			//设置canvas背景
			this.setCanvasBg('#fff');
			
		},
		retDraw2 () {
		console.log('重写',this.showText);
		this.autoWrite=false
			this.chirography=[]
			this.ctx.clearRect(0, 0, 700, 730);
			this.ctx.draw();
			//设置canvas背景
			this.setCanvasBg('#fff');
			// this.initText()
			
		},
		//画两点之间的线条;参数为:line,会绘制最近的开始的两个点;
		pointToLine (line) {
			this.calcBethelLine(line);
			return;
		},
		//计算插值的方式;
		calcBethelLine (line) {
			if (line.length <= 1) {
				line[0].r = this.radius;
				return;
			}
			let x0,
				x1,
				x2,
				y0,
				y1,
				y2,
				r0,
				r1,
				r2,
				len,
				lastRadius,
				dis = 0,
				time = 0,
				curveValue = 0.5;
			if (line.length <= 2) {
				x0 = line[1].x;
				y0 = line[1].y;
				x2 = line[1].x + (line[0].x - line[1].x) * curveValue;
				y2 = line[1].y + (line[0].y - line[1].y) * curveValue;
				//x2 = line[1].x;
				//y2 = line[1].y;
				x1 = x0 + (x2 - x0) * curveValue;
				y1 = y0 + (y2 - y0) * curveValue;
			} else {
				x0 = line[2].x + (line[1].x - line[2].x) * curveValue;
				y0 = line[2].y + (line[1].y - line[2].y) * curveValue;
				x1 = line[1].x;
				y1 = line[1].y;
				x2 = x1 + (line[0].x - x1) * curveValue;
				y2 = y1 + (line[0].y - y1) * curveValue;
			}
			//从计算公式看,三个点分别是(x0,y0),(x1,y1),(x2,y2) ;(x1,y1)这个是控制点,控制点不会落在曲线上;实际上,这个点还会手写获取的实际点,却落在曲线上
			len = this.distance({
				x: x2,
				y: y2
			}, {
				x: x0,
				y: y0
			});
			lastRadius = this.radius;
			for (let n = 0; n < line.length - 1; n++) {
				dis += line[n].dis;
				time += line[n].time - line[n + 1].time;
				if (dis > this.smoothness) break;
			}


			this.radius = Math.min((time / len) * this.pressure + this.lineMin, this.lineMax) * this.lineSize;
			line[0].r = this.radius;
			//计算笔迹半径;
			if (line.length <= 2) {
				r0 = (lastRadius + this.radius) / 2;
				r1 = r0;
				r2 = r1;
				//return;
			} else {
				r0 = (line[2].r + line[1].r) / 2;
				r1 = line[1].r;
				r2 = (line[1].r + line[0].r) / 2;
			}
			let n = 5;
			let point = [];
			for (let i = 0; i < n; i++) {
				let t = i / (n - 1);
				let x = (1 - t) * (1 - t) * x0 + 2 * t * (1 - t) * x1 + t * t * x2;
				let y = (1 - t) * (1 - t) * y0 + 2 * t * (1 - t) * y1 + t * t * y2;
				let r = lastRadius + ((this.radius - lastRadius) / n) * i;
				point.push({
					x: x,
					y: y,
					r: r
				});
				if (point.length == 3) {
					let a = this.ctaCalc(point[0].x, point[0].y, point[0].r, point[1].x, point[1].y, point[1].r, point[
							2].x, point[2]
						.y, point[2].r);
					a[0].color = this.lineColor;
					// let bethelPoint = this.bethelPoint;
					// bethelPoint = bethelPoint.push(a);
					this.bethelDraw(a, 1);
					point = [{
						x: x,
						y: y,
						r: r
					}];
				}
			}
			this.currentLine = line;
		},
		//求两点之间距离
		distance (a, b) {
			let x = b.x - a.x;
			let y = b.y - a.y;
			return Math.sqrt(x * x + y * y);
		},
		ctaCalc (x0, y0, r0, x1, y1, r1, x2, y2, r2) {
			let a = [],
				vx01,
				vy01,
				norm,
				n_x0,
				n_y0,
				vx21,
				vy21,
				n_x2,
				n_y2;
			vx01 = x1 - x0;
			vy01 = y1 - y0;
			norm = Math.sqrt(vx01 * vx01 + vy01 * vy01 + 0.0001) * 2;
			vx01 = (vx01 / norm) * r0;
			vy01 = (vy01 / norm) * r0;
			n_x0 = vy01;
			n_y0 = -vx01;
			vx21 = x1 - x2;
			vy21 = y1 - y2;
			norm = Math.sqrt(vx21 * vx21 + vy21 * vy21 + 0.0001) * 2;
			vx21 = (vx21 / norm) * r2;
			vy21 = (vy21 / norm) * r2;
			n_x2 = -vy21;
			n_y2 = vx21;
			a.push({
				mx: x0 + n_x0,
				my: y0 + n_y0,
				color: '#1A1A1A'
			});
			a.push({
				c1x: x1 + n_x0,
				c1y: y1 + n_y0,
				c2x: x1 + n_x2,
				c2y: y1 + n_y2,
				ex: x2 + n_x2,
				ey: y2 + n_y2
			});
			a.push({
				c1x: x2 + n_x2 - vx21,
				c1y: y2 + n_y2 - vy21,
				c2x: x2 - n_x2 - vx21,
				c2y: y2 - n_y2 - vy21,
				ex: x2 - n_x2,
				ey: y2 - n_y2
			});
			a.push({
				c1x: x1 - n_x2,
				c1y: y1 - n_y2,
				c2x: x1 - n_x0,
				c2y: y1 - n_y0,
				ex: x0 - n_x0,
				ey: y0 - n_y0
			});
			a.push({
				c1x: x0 - n_x0 - vx01,
				c1y: y0 - n_y0 - vy01,
				c2x: x0 + n_x0 - vx01,
				c2y: y0 + n_y0 - vy01,
				ex: x0 + n_x0,
				ey: y0 + n_y0
			});
			a[0].mx = a[0].mx.toFixed(1);
			a[0].mx = parseFloat(a[0].mx);
			a[0].my = a[0].my.toFixed(1);
			a[0].my = parseFloat(a[0].my);
			for (let i = 1; i < a.length; i++) {
				a[i].c1x = a[i].c1x.toFixed(1);
				a[i].c1x = parseFloat(a[i].c1x);
				a[i].c1y = a[i].c1y.toFixed(1);
				a[i].c1y = parseFloat(a[i].c1y);
				a[i].c2x = a[i].c2x.toFixed(1);
				a[i].c2x = parseFloat(a[i].c2x);
				a[i].c2y = a[i].c2y.toFixed(1);
				a[i].c2y = parseFloat(a[i].c2y);
				a[i].ex = a[i].ex.toFixed(1);
				a[i].ex = parseFloat(a[i].ex);
				a[i].ey = a[i].ey.toFixed(1);
				a[i].ey = parseFloat(a[i].ey);
			}
			return a;
		},
		bethelDraw (point, is_fill, color) {
			// console.log('bethelDraw', point);
			let ctx = this.ctx;
			ctx.beginPath();
			ctx.moveTo(point[0].mx, point[0].my);
			if (undefined != color) {
				ctx.setFillStyle(color);
				ctx.setStrokeStyle(color);
			} else {
				ctx.setFillStyle(point[0].color);
				ctx.setStrokeStyle(point[0].color);
			}
			for (let i = 1; i < point.length; i++) {
				ctx.bezierCurveTo(point[i].c1x, point[i].c1y, point[i].c2x, point[i].c2y, point[i].ex, point[i].ey);
			}
			ctx.stroke();
			if (undefined != is_fill) {
				ctx.fill(); //填充图形 ( 后绘制的图形会覆盖前面的图形, 绘制时注意先后顺序 )
			}
			// console.log('开始画画');
			ctx.draw(true);
		},
		selectColorEvent (str, color) {
			this.selectColor = str;
			this.lineColor = color;
		},
		//将Canvas内容转成 临时图片 --> cb 为回调函数 形参 tempImgPath 为 生成的图片临时路径
		canvasToImg (cb) {
			//这种写法移动端 出不来


			this.ctx.draw(true, () => {
				wx.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'png',


					quality: 1, //图片质量
					success (res) {
						wx.getImageInfo({
							src: res.tempFilePath,
							success: info => {
								console.log('info.width', info.width)
								console.log('info.height', info.height)
								cb(res.tempFilePath);
							}
						})
						// console.log(res.tempFilePath, 'canvas生成图片地址');




						// wx.showToast({
						// 	title: '执行了吗?'
						// });


						
					}
				});
			});
		},
		//完成
		subCanvas () {
			console.log(this.drawLine);


			let role = this.role
			if (this.chirography.length == 0&&!this.autoWrite) {
				uni.showToast({
					title: '请先签字',
					icon: 'none'
				})
				return
			}
			let that = this


			const query = wx.createSelectorQuery()
		 wx.canvasToTempFilePath({
				canvasId: 'handWriting',
				fileType: 'png',
				destHeight: 1908,
				destWidth: 798,
				quality: 1, //图片质量
				success (res) {
					wx.getImageInfo({
						src: res.tempFilePath,
						success: info => {
							console.log('info.width', info.width)
							console.log('info.height', info.height)
						}
					})
					console.log(res, 'canvas生成图片地址');
					uni.getFileSystemManager().readFile({
						filePath: res.tempFilePath,
						encoding: 'base64',
						success: r => {
							// 拿到签署类型告诉后端是走人脸识别还是新的视频操作
							that.$http.post(that.$api.getOrderSignType, {
								"gzOrderId": that.gzOrderId,
							}).then(signtypeRes => {
								console.log('签署类型', signtypeRes);
								that.signType = signtypeRes;
								console.log('本地签署类型', that.signType);
								// 8888
								let base64 = 'data:image/png;base64,' + r.data;
								that.$http.post(that.$api.userSignWithSeal, {
									"gzOrderId": that.gzOrderId,
									"sealBase64": r.data,
									"userId": that.userId,
									"userType": uni.getStorageSync("role"),
									// 签署用户类型
									
									'signUserType': that.signUserType,
									signType: that.signType,
									returnUrl: '/pagesInput/handleInput/inputResult/index',
									phoneType: uni.getSystemInfoSync()
										.platform == 'android' || uni
										.getSystemInfoSync()
										.platform == 'devtools' ? '1' : '2',
								}).then(res => {
									let platform = uni.getSystemInfoSync()
										.platform
									console.log('platform', platform);
									if (res.transStaus == "000000") {
										uni.setStorageSync('faceOrderId', 0)
										that.androidOrPhone(res.tokenType, res
											.faceidToken)
									}


								})










							})
							// 888


						}


					})
				}
			});
		},
		androidOrPhone (phoneType, faceidToken) {
			let that = this
			let path1 =
				`pages/meeting/waiting/waiting?gzOrderId=${that.gzOrderId}&roles=${that.role}&token=${uni.getStorageSync('token')}&signType=${that.signType}&hostUrl=${uni.getStorageSync('hostUrl')}&customerCoreNo=${that.userId}`
			let path2 =
				`pages/meeting/waiting/waiting?gzOrderId=${that.gzOrderId}&roles=${that.role}&token=${uni.getStorageSync('token')}&signType=${that.signType}&customerCoreNo=${that.userId}`
			// 安卓


			if (phoneType == 1) {
				console.log('安卓');
				if (that.signType == "NormalSign" || uni
					.getStorageSync('realNameSign') == 1
				) {
					// 正常签署
					// 聚美
					uni.setStorageSync('faceOrderId', that.gzOrderId)
					let url =
						`https://api-h5.jumdata.com/lifecheck/v2/check/index`
					uni.navigateTo({
						url: `/shareWeb/shareWeb?url=${url}&token=${faceidToken}`
					})






				} else {


					if (that.signStatus == 8) {
						uni.setStorageSync('faceOrderId', that.gzOrderId)
						let url =
							`https://api-h5.jumdata.com/lifecheck/v2/check/index`
						uni.navigateTo({
							url: `/shareWeb/shareWeb?url=${url}&token=${faceidToken}`
						})
					} else {
						console.log('视频签署');
						// 去视频里面签署
						uni.navigateToMiniProgram({
							appId: uni
								.getStorageSync(
									'hostUrl') ?
								'wxc325b5e1ff7fcc5d' : appId,
							path: uni
								.getStorageSync(
									'hostUrl') ?
								path1 : path2,


							extraData: {
								gzOrderId: that
									.gzOrderId,
								roles: that.role,
								customerCoreNo: that
									.userId,
								signType: that
									.signType
							},
							envVersion: 'trial'
						})
					}


				}


				// 苹果
			} else if (phoneType == 2) {
				console.log('苹果');


				// e证通
				if (that.signType == "NormalSign" || uni
					.getStorageSync('realNameSign') == 1
				) {
					console.log('e证通');
					startEid({
						data: {
							token: faceidToken,
						},
						verifyDoneCallback (
							res) {
							const {
								token,
								verifyDone
							} = res;
							console.log(
								'收到核身完成的res:',
								res);
							console.log(
								'核身的token是:',
								token);
							console.log(
								'是否完成核身:',
								verifyDone);
							if (verifyDone) {


								if (uni
									.getStorageSync(
										'role'
									) == 0 || that.signStatus == 8
								) {
									uni.switchTab({
										url: `/pages/userIndex/userIndex?gzOrderId=${that.gzOrderId}userId=${that.userId}`
									})
								} else {
									uni.navigateTo({
										url: '/selectFunc/index?customerCoreNo=' +
											uni
											.getStorageSync(
												'customerCoreNo'
											)
									})
								}


							}
						},
					});
				} else {
					if (that.signStatus == 8) {
						console.log('是苹果也是视屏签署但是只签字不视频ss');
						startEid({
							data: {
								token: faceidToken,
							},
							verifyDoneCallback (
								res) {
								const {
									token,
									verifyDone
								} = res;
								console.log(
									'收到核身完成的res:',
									res);
								console.log(
									'核身的token是:',
									token);
								console.log(
									'是否完成核身:',
									verifyDone);
								if (verifyDone) {


									if (uni
										.getStorageSync(
											'role'
										) == 0 || that.signStatus == 8
									) {
										uni.switchTab({
											url: `/pages/userIndex/userIndex?gzOrderId=${that.gzOrderId}userId=${that.userId}`
										})
									} else {
										uni.navigateTo({
											url: '/selectFunc/index?customerCoreNo=' +
												uni
												.getStorageSync(
													'customerCoreNo'
												)
										})
									}


								}
							},
						});
					} else {


						uni.navigateToMiniProgram({
							appId: uni
								.getStorageSync(
									'hostUrl') ?
								'wxc325b5e1ff7fcc5d' : appId,
							path: uni
								.getStorageSync(
									'hostUrl') ?
								path1 : path2,


							extraData: {
								gzOrderId: that
									.gzOrderId,
								roles: that.role,
								customerCoreNo: that
									.userId,
								signType: that
									.signType
							},
							envVersion: 'trial'
						})
					}


				}




			} else {
				// 视频签
				uni.navigateToMiniProgram({
					appId: uni
						.getStorageSync(
							'hostUrl') ?
						'wxc325b5e1ff7fcc5d' : appId,
					path: uni
						.getStorageSync(
							'hostUrl') ?
						path1 : path2,


					extraData: {
						gzOrderId: that
							.gzOrderId,
						roles: that.role,
						customerCoreNo: that
							.userId,
						signType: that
							.signType
					},
					envVersion: 'trial'
				})
			}






		},
		//保存到相册
		saveCanvasAsImg () {


			/*
				this.canvasToImg( tempImgPath=>{
					// console.log(tempImgPath, '临时路径');
					wx.saveImageToPhotosAlbum({
						filePath: tempImgPath,
						success(res) {
							wx.showToast({
								title: '已保存到相册',
								duration: 2000
							});
						}
					})
				} );
		*/


			wx.canvasToTempFilePath({
				canvasId: 'handWriting',
				fileType: 'png',
				quality: 1, //图片质量
				success (res) {
					// console.log(res.tempFilePath, 'canvas生成图片地址');
					wx.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success (res) {
							wx.showToast({
								title: '已保存到相册',
								duration: 2000
							});
						}
					});
				}
			});
		},
		//预览
		previewCanvasImg () {
			// wx.canvasToTempFilePath({
			// 	canvasId: 'handWriting',
			// 	fileType: 'png',
			// 	quality: 1, //图片质量
			// 	success (res) {
			// 		// console.log(res.tempFilePath, 'canvas生成图片地址');


			// 		wx.previewImage({
			// 			urls: [res.tempFilePath] //预览图片 数组
			// 		});
			// 	}
			// });
			
			this.canvasToImg( tempImgPath=>{
				console.log('tempImgPath',tempImgPath);
				setTimeout(()=>{
					wx.previewImage({
						urls: [tempImgPath], //预览图片 数组
					})
				},500)


			} );


			/*	//移动端出不来  ^~^!!
					this.canvasToImg( tempImgPath=>{
						wx.previewImage({
							urls: [tempImgPath], //预览图片 数组
						})
					} );
			*/
		},
		//上传
		uploadCanvasImg () {
			if (this.chirography.length == 0) {
				uni.showToast({
					title: '请先签字'
				})
			} else {
				wx.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'png',
					quality: 1, //图片质量
					success (res) {
						console.log(res.tempFilePath, 'canvas生成图片地址');
					}
				});
			}


		},
		//设置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(); //开画
		},
		justSign (sealBase64) {
			let that = this
			that.$http.post(that.$api.userSignWithSeal, {
				"gzOrderId": that.gzOrderId,
				"sealBase64": sealBase64,
				"userId": that.userId,
				returnUrl: '/pagesInput/handleInput/inputResult/index',
				"userType": uni.getStorageSync("role"),
				// 签署用户类型
				'signUserType': that.signUserType,
				signType: that.signType,
				phoneType: '2'
			}).then(res => {
				console.log('本地签署类型justSign', that.signType);


				// 正常签署
				if (res.faceidToken != "DONE") {
					startEid({
						data: {
							token: res.faceidToken,
						},
						verifyDoneCallback (res) {
							const {
								token,
								verifyDone
							} = res;
							console.log('收到核身完成的res:', res);


							console.log(
								'核身的token是:',
								token);
							console.log('是否完成核身:',
								verifyDone);
							if (verifyDone) {
								if (uni
									.getStorageSync(
										'role') == 0
								) {
									uni.switchTab({
										url: `/pages/userIndex/userIndex?gzOrderId=${that.gzOrderId}userId=${that.userId}`
									})
								} else {
									uni.navigateTo({
										url: '/selectFunc/index?customerCoreNo=' +
											uni
											.getStorageSync(
												'customerCoreNo'
											)
									})
								}


							}
						},
					});
				} else {
					uni.showToast({
						title: '签署已完成',
						icon: 'error'
					})
				}


			})
		}
	}
};
</script>


<style lang="scss">
page {
	background: #fbfbfb;
	height: auto;
	overflow: hidden;
}
.bgi{
	position: absolute;
	width: 300px;
	height: 95vh;
	// z-index: 99;
	
	.image{
		width: 100%;
		height: 100%;
	}
}
.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; */
	width: 300px;
	height: 95vh;
}


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


.handCenter {
	/* border: 4rpx dashed #e9e9e9;
	 */
	border: 4rpx dashed #666;
	flex: 5;
	overflow: hidden;
	box-sizing: border-box;
	height: 95vh;
	width: 300px;
}


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


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


.handBtn {
	height: 95vh;
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
	align-content: space-between;
	flex: 1;
}


.delBtn {
	position: absolute;
	top: 250rpx;
	left: 0rpx;
	transform: rotate(90deg);
	color: #666;
}


.delBtn image {
	position: absolute;
	top: 13rpx;
	left: 25rpx;
}


.subBtn {
	position: absolute;
	bottom: 52rpx;
	left: -3rpx;
	display: inline-flex;
	transform: rotate(90deg);
	background: #008ef6;
	color: #fff;
	margin-bottom: 30rpx;
	text-align: center;
	justify-content: center;
	z-index: 999999;
}


/*Peach - 新增 - 保存*/


.saveBtn {
	position: absolute;
	top: 375rpx;
	left: 0rpx;
	transform: rotate(90deg);
	color: #666;
}


.previewBtn {
	position: absolute;
	top: 500rpx;
	left: 0rpx;
	transform: rotate(90deg);
	color: #666;
}
.previewBtn1 {
	position: absolute;
	top: 700rpx;
	left: -30rpx;
	
	transform: rotate(90deg);
	background: #008ef6;
	
	color: #fff;
	
}


.uploadBtn {
	position: absolute;
	top: 625rpx;
	left: 0rpx;
	transform: rotate(90deg);
	color: #666;
}


/*Peach - 新增 - 保存*/


.black-select {
	width: 60rpx;
	height: 60rpx;
	position: absolute;
	top: 30rpx;
	left: 25rpx;
}


.black-select.color_select {
	width: 90rpx;
	height: 90rpx;
	top: 100rpx;
	left: 10rpx;
}


.red-select {
	width: 60rpx;
	height: 60rpx;
	position: absolute;
	top: 140rpx;
	left: 25rpx;
}


.red-select.color_select {
	width: 90rpx;
	height: 90rpx;
	top: 120rpx;
	left: 10rpx;
}
</style>
回答关注问题邀请回答
收藏

2 个回答

  • Demons
    Demons
    03-24

    请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    03-24
    有用
    回复
  • 相见欢
    相见欢
    03-25

    问题出现的流程:ios部分机型形式canvas组件画图时,无法作图,字迹会被清除,安卓机没有此情况https://developers.weixin.qq.com/s/D2Xa8Wm277Pm

    页面在sign.vue文件中

    03-25
    有用
    回复
登录 后发表内容