newmyj/pages/user/signing/ht.vue

<template>
	<view class="content">
		<image v-if="!showcanvas" :src="img" mode="widthFix" style="width: 750rpx;"></image>
		<view @click="savePic" class="btn">保存</view>
		<view class="" style="height: 100rpx;">
			
		</view>
		<canvas canvas-id="firstCanvas" id="firstCanvas" class="htDetail"
			:style="{height: (cHeight + 'px'),width:(cWidth + 'px')}"></canvas>
	</view>
</template>

<script>
	import {
		getYyDetail
	} from '@/api/model.js'
	export default {
		data() {
			return {
				content: {},
				showcanvas: true,
				cWidth: '',
				cHeight: '',
				imgs: [],
				img: '',
				htDetail: {},
				id: 0,
				hid: 0,
				contents: {}
			}
		},
		onLoad(opt) {
			
			if(opt.id) {
				this.id = opt.id
				this.getYyDetail()
				this.htDetail = uni.getStorageSync('htDetail') || {}
			}
			if(opt.hid) {
				this.hid = opt.hid
				this.setDetail()
			}
		},
		onShow() {
			// this.SystemInfo = await this.getSystemInfo();
		},
		onReachBottom() {

		},
		onReady() {

		},
		methods: {
			savePic() {
				uni.getSetting({
					//获取用户的当前设置
					success: res => {
						if (res.authSetting['scope.writePhotosAlbum']) {
							//验证用户是否授权可以访问相册
							uni.saveImageToPhotosAlbum({
								filePath: this.img,
								success: function(res2) {
									uni.hideLoading();
									uni.showToast({
										title: '保存成功，请从相册选择再分享',
										icon: 'none',
										duration: 2000
									});
								},
								fail: function(err) {
									uni.hideLoading();
									uni.showToast({
										title: '保存失败',
										icon: 'none',
										duration: 2000
									});
								}
							});
						} else {
							uni.authorize({
								//如果没有授权，向用户发起请求
								scope: 'scope.writePhotosAlbum',
								success: () => {
									this.saveImageToPhotosAlbum();
								},
								fail: () => {
									uni.showToast({
										title: '请打开保存相册权限，再点击保存相册分享',
										icon: 'none',
										duration: 2000
									});
									setTimeout(() => {
										uni.openSetting({
											//调起客户端小程序设置界面,让用户开启访问相册
											success: res2 => {
												// console.log(res2.authSetting)
											}
										});

									}, 2000);
								}
							});
						}
					}
				});
			},
			getSystemInfo() {
				return new Promise((req, rej) => {
					console.log('zheli');
					// wx.getWindowInfo({
					// 	success: function(res) {
					// 		console.log(res,'wind');
					// 		req(res)
					// 	}
					// });
					let win = wx.getWindowInfo()
					console.log(win);
					req(win)
				})
			},
			getImageInfo(image) {
				return new Promise((req, rej) => {
					uni.getImageInfo({
						src: image,
						success: function(res) {
							req(res)
						},
					});
				})
			},
			async downloadAndProcessFile(url) {
				return new Promise((resolve, reject) => {
					uni.downloadFile({
						url: url,
						success: (res) => {
							if (res.statusCode === 200) {
								console.log(res.tempFilePath, 'res.tempFilePath');
								resolve(res.tempFilePath);
							} else {
								reject(new Error('File download failed'));
							}
						},
						fail: (error) => {
							console.log(error, 'tupianerro',url);
							reject(error);
						}
					});
				});
			},
			// 绘制
			async showCanvas() {
				let that = this
				try {
					let SystemInfo = await this.getSystemInfo();
					var context = uni.createCanvasContext('firstCanvas')
					let cheight = 0;
					let heightList = [0]
					const pjWidht = that.imgs.reduce((sum, item) => sum + item.width, 0) / that.imgs.length;
					for (let i = 0; i < that.imgs.length;) {
						console.log(that.imgs[i].width, 'that.imgs[i].width');
						let mheight = that.imgs[i].height * (that.imgs[i].width / pjWidht);
						console.log(that.imgs[i].height, 'that.imgs[i].height');
						that.imgs[i].height = mheight
						cheight += mheight;
						heightList.push(cheight)
						i++
					}
					console.log(heightList, 'heightList');
					//设置画布宽高
					that.cHeight = cheight
					that.cWidth = pjWidht
					context.fillRect(0, 0, that.cWidth, that.cHeigh);
					context.setFillStyle('#000000');
					let height = 0
					// 绘制底图
					for (let i = 0; i < that.imgs.length;) {
						console.log('that.imgs[i].src',that.imgs[i].src);
						const avatarImagePath = await that.downloadAndProcessFile(that.imgs[i].src);
						console.log(avatarImagePath, 'avatarImagePath');
						context.drawImage(avatarImagePath, 0, height, pjWidht, that.imgs[i].height)
						height += that.imgs[i].height
						i++
					}
					// 绘制甲方数据
					console.log(that.htDetail.content.jsonAr,'that.htDetail.content.jsonAr');
					await that.setFont(that.htDetail.content.jsonAr, context)

					// 计算图像变形率
					let bl = that.cWidth / 750
					console.log(bl);
					// 绘制甲方数据


					// 绘制乙方数据
					console.log(that.htDetail.content.jsonBr,'that.htDetail.content.jsonBr');
					await that.setFont(that.htDetail.content.jsonBr, context)

					context.draw(false, e => {
						console.log('wancheng');
						setTimeout(() => {
							console.log(that.cWidth, that.cHeight);
							uni.canvasToTempFilePath({
								x: 0,
								y: 0,
								width: that.cWidth,
								height: that.cHeight,
								destWidth: that.cWidth,
								destHeight: that.cHeight,
								canvasId: 'firstCanvas',
								success: function(res) {
									console.log(333, res);
									// 在H5平台下，tempFilePath 为 base64
									that.showcanvas = false;
									that.img = res.tempFilePath;
								}
							});
						}, 500)

					});
				} catch (error) {
					console.log(error, 'error');
					//TODO handle the exception
				}


			},
			async setFont(array, context) {
				let that = this
				// 计算图像变形率
				let bl = that.cWidth / 750
				for (let j = 0; j < array.length;) {
					let item = array[j]
					let x = item.left * bl;
					// 文字大小
					let fontSize = item.fontSize * bl
					// 处理文字基准线问题
					let y = item.top * bl + fontSize;
					if (item.value) {
						if (item.type == 'text' || item.type == 'number') {
							context.setFontSize(fontSize);
							context.fillText(item.value, x, y);
						}
						if (item.type == 'date') {
							let arr = item.value.split('-')
							let val = ''
							if (item.dateType) {
								if (item.dateType == 'xxxx年xx月xx日') {
									val = arr[0] + '年' + arr[1] + '月' + arr[2] + '日'
								} else if (item.dateType == 'xxxx-xx-xx') {
									val = item.value
								}
							} else {
								val = arr[0] + ' ' + arr[1] + ' ' + arr[2] + ' '
							}
							context.setFontSize(fontSize);
							context.fillText(val, x, y);
							console.log(x, y, '时间');
						}
						// 处理地址换行
						if (item.type == 'address') {
							that.setAddress(x, y, item.value, that.cWidth - 30, context, fontSize)
						}
						if (item.type == 'langtext') {
							that.setAddress(x, y, item.value, x + item.width * bl, context, fontSize)
						}
						console.log(item.code);
						if (item.type == 'img') {
							if(item.value && item.value != '1') {
								let path = await that.downloadAndProcessFile(item.value)
								context.drawImage(path, item.left * 1 * bl, item.top * 1 * bl, item.width * bl,
									item.height * bl)
							}else if(that.contents[item.code]) {
								console.log('zhe');
								let path = await that.downloadAndProcessFile(that.contents[item.code])
								context.drawImage(path, item.left * 1 * bl, item.top * 1 * bl, item.width * bl,
									item.height * bl)
							}
							
						}
					}else {
						if (item.type == 'date' && item.code == 'to_check_time' && that.contents[item.code]) {
							
							let date = new Date(that.contents[item.code] * 1000)
							const year = date.getFullYear();
							const month = String(date.getMonth() + 1).padStart(2, '0');
							const day = String(date.getDate()).padStart(2, '0');
							let val = `${year} ${month} ${day}`;
							context.setFontSize(fontSize);
							context.fillText(val, x, y);
							console.log(x, y, '时间');
						}
						if (item.type == 'img') {
							if(that.contents[item.code]) {
								console.log('zhe');
								let path = await that.downloadAndProcessFile(that.contents[item.code])
								context.drawImage(path, item.left * 1 * bl, item.top * 1 * bl, item.width * bl,
									item.height * bl)
							}
							
						}
					}
					j++

				}
			},
			setAddress(x, y, text, maxWidth, context, fontSize) {
				let that = this
				// let text = item.value
				let words = text.split('');
				let line = '';
				// let maxWidth = that.cWidth - 30
				for (let n = 0; n < words.length; n++) {
					let testLine = line + words[n] + ' ';
					let metrics = context.measureText(testLine);
					let testWidth = metrics.width + x;
					if (testWidth > maxWidth && n > 0) {
						console.log(line);
						context.fillText(line, x, y);
						line = words[n] + ' ';
						y += fontSize * 1.5; // 移动到下一行
					} else {
						line = testLine;
					}
				}
				context.fillText(line, x, y);
			},
			getHtDetail() {

			},
			setDetail() {
				let that = this
				that.htDetail = uni.getStorageSync('htDetails') || {}
				let lens = 0
				let width = 0;
				let height = 0;
				console.log();
				let len = that.htDetail.imgs.length
				that.htDetail.imgs.forEach(async (item, index) => {
					let data = await uni.getImageInfo({
						src: item,
						success(ress) {
							that.$set(that.imgs, index, {
								src: item,
								width: ress.width,
								height: ress.height
							})
							lens++;
							if (lens == len) {
								that.cHeight = height;
								console.log(that.cHeight, 'heigh');
								that.showCanvas()
							}
						}
					})
				
				})
			},
			getYyDetail() {
				let that = this
				getYyDetail({
					id: this.id
				}).then(res => {
					console.log(res,'resssssss');
					let width = 0;
					let height = 0;
					let len = res.data.imgs.length
					that.content = JSON.parse(res.data.content)
					console.log(that.content,'that.content--------------------------------------------------');
					that.contents = res.data
					let lens = 0
					res.data.imgs.forEach(async (item, index) => {
						let data = await uni.getImageInfo({
							src: item,
							success(ress) {
								that.$set(that.imgs, index, {
									src: item,
									width: ress.width,
									height: ress.height
								})
								lens++;
								if (lens == len) {
									that.cHeight = height;
									console.log(that.cHeight, 'heigh');
									that.showCanvas()
								}
							}
						})

					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.htDetail {
		width: 750rpx;
		position: fixed;
		top: -999999px;
		z-index: 0;

	}
	.btn {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		color: #fff;
		background-color: $base-color;
	}
</style>