weapp-v1/pages/certificate/notice.vue

<template>
	<view class="notice">
		<custom-nav title="录取通知书"></custom-nav>
		<view class="canvas_container content">
			<!-- <image src="https://api.jiuweiyun.cn/public/uploads/icon/new_tzs.png" mode="" class="bg"></image> -->
			<canvas id="canvas" canvas-id="canvas" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }" @longpress="saveImage()" />
		</view>
		<view class="save">（长按保存图片）</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			canvasWidth: 0, //canvas 宽
			canvasHeight: 0, //canvas 高
			header: '',
			headerImg: ''
		};
	},
	computed: {
		...mapState(['userServerInfo'])
		// userServerInfo() {
		// 	return this.$store.state.userServerInfo
		// }
	},
	onShow() {
		uni.hideLoading()
		this.initCanvas()
	},
	methods: {
		initCanvas(cb) {
			const _this = this
			// this.header = this.userServerInfo.avatar
			// const nickname = uni.getStorageSync('nickName').slice(0,8)
			// const nickname = '柳德湖'
			this.header = this.userServerInfo.avatar
			const nickname = this.userServerInfo.name.slice(0,8)
			uni.showLoading({
				title: '加载中',
				mask: true
			})
			uni.downloadFile({
				url: this.header,
				success: ({ statusCode, tempFilePath }) => {
					if (statusCode === 200) {
						this.headerImg = tempFilePath
					}
				},
				fail:(e) => {
					uni.showModal({
						content: JSON.stringify(e),
						showCancel: false
					})
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '获取用户头像失败',
					// 	duration: 3000
					// })
				},
				complete: () => {
					uni.getImageInfo({
						src: 'https://api.jiuweiyun.cn/public/uploads/icon/new_tzs.png',
						success: res => {
							uni.hideLoading()  //停止 loading
							_this.canvasWidth = uni.upx2px(690);
							_this.canvasHeight = uni.upx2px(1100);
							let ctx = uni.createCanvasContext('canvas');
							ctx.drawImage(res.path, 0, 0, uni.upx2px(690), uni.upx2px(1100))
							ctx.save()
							ctx.beginPath()
							ctx.arc(uni.upx2px(342), uni.upx2px(430), uni.upx2px(60), 0, 2 * Math.PI, false)
							ctx.clip()
							ctx.drawImage(_this.headerImg, uni.upx2px(282), uni.upx2px(370), uni.upx2px(120), uni.upx2px(120))
							ctx.restore()
							ctx.font = 'normal	normal 20px PingFang SC'
							let year = new Date(_this.userServerInfo.enroll_time).getFullYear();
							let month = new Date(_this.userServerInfo.enroll_time).getMonth() + 1;
							let day = new Date(_this.userServerInfo.enroll_time).getDate();
							ctx.setFillStyle("#333333")
							ctx.textAlign = "left"
							ctx.setFontSize(uni.upx2px(32));
							ctx.fillText(_this.userServerInfo.season, uni.upx2px(200), uni.upx2px(678));
							ctx.setFontSize(uni.upx2px(28));
							ctx.fillText(year, uni.upx2px(380), uni.upx2px(918));
							ctx.fillText(month > 10 ? month : `0${month}`, uni.upx2px(478), uni.upx2px(918));
							ctx.fillText(day > 10 ? day : `0${day}`, uni.upx2px(535), uni.upx2px(918));
							ctx.setFontSize(uni.upx2px(30));
							ctx.setFillStyle("#193669")
							ctx.font = 'normal bold 15px PingFang SC'
							ctx.textAlign = "center"
							ctx.fillText(nickname, uni.upx2px(338), uni.upx2px(560));
							ctx.draw();
						}
					})
				}
			})
		},
		saveImage() {
			this.getCanvas()
		},
		getCanvas() {
			uni.showLoading({
				title: '下载中...'
			});
			uni.canvasToTempFilePath({
				width: uni.upx2px(690),
				height: uni.upx2px(1100),
				canvasId: 'canvas',
				success: function(res) {
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success: res => {
							uni.showModal({
								content: '录取通知书保存成功',
								showCancel: false
							});
						},
						fail: err => {
							if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
								uni.showModal({
									title: '提示',
									content: '您好,请先授权，再保存此图片。',
									showCancel: false,
									success: res => {
										if (res.confirm) {
											uni.openSetting({
												success(settingdata) {
													console.log(settingdata);
													if (settingdata.authSetting['scope.writePhotosAlbum']) {
														uni.showModal({
															content: '请重新长按保存图片',
															showCancel: false
														});
													} else {
														uni.showModal({
															content: '您拒绝了保存到相册权限',
															showCancel: false
														});
													}
												},
												fail: err => {
													uni.showModal({
														content: '手动打开相册权限失败',
														showCancel: false
													});
												}
											});
										}
									}
								});
							} else {
								_this.initCanvas()
							}
						},
						complete() {
							uni.hideLoading();
						}
					});
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.notice {
	// @include page();
	width: 100%;
	height: 100%;
	min-height: 100%;
	// display: flex;
	// justify-content: space-between;
	// flex-direction: column;
	background-color: #ededed;
	.canvas_container {
		// flex: 1;
		padding: 170rpx 30rpx 0rpx 30rpx;
		position: relative;
		.bg {
			width: 690rpx;
			height: 1100rpx;
		}
		#canvas {
			width: 690rpx;
			height: 1100rpx;
			// position: absolute;
			// top: 169rpx;
			// bottom: 0;
			// left: 30rpx;
			// right: 0;
		}
	}
}
.save {
	width: 100%;
	text-align: center;
	margin-top:10rpx;
}
</style>