aiarrive-h5/src/pages/ai/components/canvaspopup.vue

<!-- 分享图片弹框 -->
<template>
	<!-- 普通弹窗 -->
	<uni-popup ref="canvaspopup" >
		<view class="canvaspopup-content">
			<canvas class="drawimg-canvas" id="drawimg" type="2d" :style="{width:width+'px',height: height+'px'}"></canvas>
			<template v-if="poster">
				<!-- <label for="btnId_1234" style="z-index:99;">				 -->
					<img :src="poster"  mode="widthFix" class="poster-img" :show-menu-by-longpress="true" alt="" @click="showShareSheet">
				<!-- </label> -->
				<!-- <view class="footer">
					<button type="default" id="btnId_1234" class="btn" open-type="share">转发</button>
					<button type="default" class="btn"  @click="handleSaveImg">保存</button>
				</view> -->
			</template>
			<template v-else>
				<view class="empty">
					海报生成中
					<image src="/static/ai/loading.gif" style="margin-left: 8rpx;height: 10rpx; width: 50rpx;" alt="" srcset="">
				</view>
			</template>
			
		</view>
	</uni-popup>
</template>

<script>
	import { dateFormat } from '@/common/util.js'
	import { getQrcode } from '@/api/index.js'
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	var app = getApp();
	export default {
		props: {
			imgsrc: {
				type: String,
				default: ''
			},
			message: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				systemInfo: null,
				width: 0,
				height: 0,
				canvasAttrs: null,
				poster: '',
				netqrcode: 'https://api.aibaidu.com.cn/image/20230318_2c1b8aa247524edfa9ac7fb056f4814d.jpg',
				qrcode: ''
			};
		},
		computed: {
			...mapState(['userId', 'settings', 'chatType'])
		},
		created() {
			console.log('app.globalData.systemInfo', app.globalData.systemInfo)
			this.systemInfo = app.globalData.systemInfo
			this.width = 256 * this.systemInfo.pixelRatio
			this.height = 320 * this.systemInfo.pixelRatio
		},
		mounted() {
			
		},
		methods: {
			dateFormat,
			async getQrcode() {
				const data = {
					page: "pages/ai/main/main",
					scene: `uid=${this.userId}&ctype=DRAW`,
					check_path: true,
					env_version: "release", //"release"，体验版为 "trial"，开发版为 "develop"
					width: 420,
					auto_color: false,
					line_color: {
					    r: 5,
					    g: 5,
					    b: 5
					},
					is_hyaline: false
				}
				const res = await getQrcode(data)
				 
				this.qrcode = "data:image/png;base64," + res.data
				this.drawCanvas()
			},
			getQrCodeImg() {
				// const src = this.settings.qrcode
				const that = this
				let fileName = new Date().valueOf();
				wx.downloadFile({ //下载图片到本地
					url: that.netqrcode,
					filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.png',
					success(res) {
						if (res.statusCode === 200) {
							that.qrcode = res.filePath
							
							console.log("Drawing2:", new Date().getTime() % 10000);
							that.drawCanvas()
						}
					},
					fail() {
					}
				})
			},
			showPopup() {
				this.$refs.canvaspopup.open('center');
				this.poster = ''
				console.log("Drawing1:", new Date().getTime() % 10000);
				// this.startDownLoadImg()
				// this.drawCanvas()
				this.getQrcode()
			},
			// 先下载二维码
			startDownLoadImg() {
				this.getQrCodeImg()
			},
			startQueryElement() {
				// this.$nextTick(() => {
					var query = uni.createSelectorQuery().in(this);
					query.select('#drawimg').boundingClientRect().exec((res) => {
						// 返回值包括画布的实际宽高
						console.log(res)
						this.drawCanvas(res[0])
					})
				// })
			},
			drawCanvas() {
				const that = this
				// let ctx = wx.createCanvasContext('drawimg', this)
				const dpr = this.systemInfo.pixelRatio
				const query = uni.createSelectorQuery().in(this)
				query.select('#drawimg')
					.fields({ node: true, size: true })
					.exec(async (res) => {
						console.log("Drawing3:", new Date().getTime() % 10000);
						console.log(res)
						const canvas = res[0].node
						const ctx = canvas.getContext('2d')
						
						// const dpr = wx.getSystemInfoSync().pixelRatio
						canvas.width = res[0].width * dpr
						canvas.height = res[0].height * dpr
						ctx.scale(dpr, dpr)
						// ctx.scale(dpr, dpr)
						let canvasW = res[0].width // 画布的真实宽度
						let canvasH = res[0].height //画布的真实高度

						// 头像和二维码大小都需要在规定大小的基础上放大像素比的比例后面都会 *this.systemInfo.pixelRatio
						// let headerW = 48 * this.systemInfo.pixelRatio
						// let headerX = (canvasW - headerW) / 2
						// let headerY = 40 * this.systemInfo.pixelRatio
						// let qrcodeW = 73 * this.systemInfo.pixelRatio
						// let qrcodeX = 216 * this.systemInfo.pixelRatio
						// let qrcodeY = 400 * this.systemInfo.pixelRatio
						// 填充背景
						ctx.fillStyle = '#FFFFFF'  
						ctx.fillRect(0, 0, canvasW, canvasH)
						ctx.save()
						// 画图
						
						const mainImg = canvas.createImage();
						mainImg.src = that.imgsrc;
						let mainImgPo = await new Promise((resolve, reject) => {
						  mainImg.onload = () => {
							resolve(mainImg)
						  }
						  mainImg.onerror = (e) => {
							reject(e)
						  }
						});
						let h = mainImgPo.height;
						let w = mainImgPo.width;
						const space = 10
						ctx.drawImage(mainImgPo, space * dpr, space * dpr, canvasW - space * dpr * 2, canvasW - space * dpr * 2)
						ctx.save()
						console.log("Drawing4 img1:", new Date().getTime() % 10000);
						 
						// 画二维码 
						const qrcodeImg = canvas.createImage();
						qrcodeImg.src = that.qrcode;
						let qrcodeImgPo = await new Promise((resolve, reject) => {
						  qrcodeImg.onload = () => {
							resolve(qrcodeImg)
						  }
						  qrcodeImg.onerror = (e) => {
							reject(e)
						  }
						});
						ctx.drawImage(qrcodeImgPo, canvasW - (space + 50) * dpr, canvasW + 4 * dpr,  50 * dpr, 50  * dpr)
						ctx.save()
						console.log("Drawing4 img2:", new Date().getTime() % 10000);
						//问题文案内容
						const msg = this.message.length > 13 ? this.message.substr(0, 13) + '...' : this.message
						ctx.textBaseline = 'top';
						ctx.textAlign = 'left';
						ctx.font = `${12 * dpr}px bold`; //设置字体大小，默认10
						ctx.fillStyle = '#333333'; //文字颜色：默认黑色
						ctx.fillText(msg, space * dpr , canvasW + 12 * dpr)//绘制文本
						ctx.save()
						
						// //文案内容
						// ctx.textBaseline = "bottom";
						// ctx.textAlign = 'left';
						// ctx.font = `${12 * dpr}px bold`; //设置字体大小，默认10
						// ctx.fillStyle = '#333333'; //文字颜色：默认黑色
						// ctx.fillText('AI降临派', space * dpr , canvasW + 32 * dpr)//绘制文本
						// ctx.save()
						 
						
						ctx.font = `${10 * dpr}px bold`; //设置字体大小，默认10
						// ctx.fillStyle = '#333333'; //文字颜色：默认黑色
						ctx.fillText('长按识别体验AI绘画', space * dpr, canvasW + 36 * dpr)//绘制文本
						ctx.save()
						
						console.log("Drawing4 over:", new Date().getTime() % 10000);
						setTimeout(() => {
							wx.canvasToTempFilePath({
								canvas: canvas,
								success: (res) => {
									console.log("Drawing5 canvasToTempFilePath:", new Date().getTime() % 10000);
									console.log('canvasToTempFilePath', res);
									that.poster = res.tempFilePath
									that.showShareSheet()
								},
								fail(res) {
									console.log('canvasToTempFilePath FAIL:', res);
								}
							})
						}, 200)

					})

			},
			showShareSheet() {
				const that = this
				wx.showShareImageMenu({
					path: this.poster,
					success: (res) => {
						console.log('showShareImageMenu success');
						that.$refs.canvaspopup.close();
					},
					fail() {
						console.log('showShareImageMenu fail');
						that.$refs.canvaspopup.close();
					}
				})
			},
			handleSaveImg() {
				const that = this
				wx.saveImageToPhotosAlbum({
				  filePath: that.poster,
				  success: function (data) {
					wx.showToast({
					  title: '已保存到相册',
					  icon: 'success',
					  duration: 2000
					})
				  },
				  fail: function (err) {
					console.log(err)
				  },
				  complete(res) {
					console.log(res);
				  }
				})
			},
			async handleSaveImg2() {
				let self = this;
				const query = wx.createSelectorQuery();
				const canvasObj = await new Promise((resolve, reject) => {
				  query.select('#posterCanvas')
					.fields({ node: true, size: true })
					.exec(async (res) => {
					  resolve(res[0].node);
					})
				});
				console.log(canvasObj);
				wx.canvasToTempFilePath({
				  //fileType: 'jpg',
				  //canvasId: 'posterCanvas', //之前的写法
				  canvas: canvasObj, //现在的写法
				  success: (res) => {
					console.log(res);
					//保存图片
					wx.saveImageToPhotosAlbum({
					  filePath: res.tempFilePath,
					  success: function (data) {
						wx.showToast({
						  title: '已保存到相册',
						  icon: 'success',
						  duration: 2000
						})
					  },
					  fail: function (err) {
						console.log(err);
						if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
						  console.log("当初用户拒绝，再次发起授权")
						} 
						self.$refs.canvaspopup.close();
					  },
					  complete(res) {
						wx.hideLoading();
						console.log(res);
					  }
					})
				  },
				  fail(res) {
					console.log(res);
				  }
				}, this)
			},
			getPhotosAuthorize: function () {
			    let self = this;
			    wx.getSetting({
			      success(res) {
			        console.log(res)
			        if (!res.authSetting['scope.writePhotosAlbum']) {
			          wx.authorize({
			            scope: 'scope.writePhotosAlbum',
			            success() {
			              console.log('授权成功')
			              self.saveImg();
			            },
			            //用户拒绝
			            fail() {
			              console.log("用户再次拒绝")
			            }
			          })
			        } else {
			          self.saveImg();
			        }
			      }
			    })
			  },
		}
	}
</script>

<style lang="less" scoped>

	.canvaspopup-content {
		min-height: 750rpx;
		width: 600rpx;
		// padding: 20rpx 0rpx 130rpx;
		background-color: #33373f;
		box-sizing: border-box;
		position: relative;
		display: flex;
		flex-direction: column;
		.empty {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			color: @fontColor;
		}
		.poster-img {
			width: 100%;
		}
		
		.drawimg-canvas {
			// background-color: #fafafa;
			// zoom: 50%; // 将画布缩小到50%（最好通过像素比进行缩小，像素比是2的话就是50%，如果不全是以像素比为标准，在生成图片的时候可能会出现四周黑边）
			position: absolute;
			left: -10000px; // 将画布隐藏在可视区域外
			// top: 0;
			// background: #206949;
		}
		
		.footer {
			color: @fontColor;
			flex: 1;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.btn {
				.combtn(28rpx, 72rpx);
				width: 160rpx;
			}
		}
	}
	
</style>