education-front/pages_order/case/poster.vue

<template>
  <view class="page__view">
    
		<!-- 导航栏 -->
		<navbar leftClick @leftClick="$utils.navigateBack" />

    <view style="width: 750rpx; height: 1184rpx; overflow: hidden;">
      <canvas id="myCanvas" canvas-id="firstCanvas1" type="2d" style="width: 100%; height: 100%;"></canvas>
    </view>

    <view class="flex bottom">
      <view class="flex">
        <button class="btn" @click="saveImg">保存到手机</button>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
		data() {
			return {
				wxCodeImage: '',
				baseUrl: 'https://image.hhlm1688.com/',
				canvas: {},
        posterData: {},
			}
		},
    async onLoad() {
      uni.showLoading({
          title: '加载中...'
      });
      this.posterData = uni.getStorageSync('posterData')
			await this.fetchQrCode(this.posterData.path)
      uni.hideLoading();
			console.log('this.configList.config_paper', this.configList.config_paper)
      this.draw()
    },
    methods: {
			async fetchQrCode(path) {
				try {
					this.wxCodeImage = (await this.$fetch('getInviteCode', { path }))?.url

				} catch (err) {

				}
			},
			draw() {

				uni.showLoading({
					title: "拼命绘画中..."
				})

				wx.createSelectorQuery()
					.select('#myCanvas') // 绘制的canvas的id
					.fields({
						node: true,
						size: true
					})
					.exec(async (res) => {
						const canvas = res[0].node
						// 渲染上下文
						const ctx = canvas.getContext('2d')
						// Canvas 画布的实际绘制宽高
						const width = res[0].width
						const height = res[0].height
						// 初始化画布大小
						const dpr = wx.getWindowInfo().pixelRatio

						//根据dpr调整
						// dpr  2 4
						//      3 6
						console.log("--dpr", dpr)
						canvas.width = width * dpr
						canvas.height = height * dpr

						let Ratio = canvas.width / 750

						this.canvas = canvas
						ctx.scale(dpr, dpr)
						ctx.clearRect(0, 0, width, height)

						ctx.fillStyle = '#fff'
						ctx.fillRect(0, 0, canvas.width, canvas.height)

						ctx.fillStyle = '#999999';
						const fontSize = 28 * Ratio / dpr
						ctx.font = `${fontSize}px PingFangSC-regular`;
	
            // 海报图片
            const paperImage = canvas.createImage()
						paperImage.src = this.posterData.paperImage
						paperImage.onload = () => {
							console.log('paperImage onload')
							const w = 750 * Ratio / dpr
							const h = 890 * Ratio / dpr
							ctx.drawImage(paperImage, 0, 0, w, h)

							// 配置图片
							const configImage = canvas.createImage()
							configImage.src = this.configList.config_paper
							configImage.onload = () => {
								console.log('configImage onload')
								const y = 890 * Ratio / dpr
								const w = 750 * Ratio / dpr
								const h = 294 * Ratio / dpr
								ctx.drawImage(configImage, 0, y, w, h)

								//二维码图片
								const coderImage = canvas.createImage()
								coderImage.src = this.wxCodeImage
								coderImage.onload = () => {
									console.log('coderImage onload')
                	// const x = 539 * Ratio / dpr
									const x = 560 * Ratio / dpr
									const y = 987 * Ratio / dpr
									const size = 162 * Ratio / dpr
									ctx.drawImage(coderImage, x, y, size, size)

									uni.hideLoading()
								}
							}
						}

					})

			},
			saveImg() {
				this.$authorize('scope.writePhotosAlbum').then((res) => {
					this.imgApi()
				})
			},
			imgApi() {
        uni.showLoading({
            title: '保存中...'
        });
				wx.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: this.canvas.width,
					height: this.canvas.height,
					canvas: this.canvas,
					success: (res) => {
						let tempFilePath = res.tempFilePath;
						this.saveImgToPhone(tempFilePath)
					},
					fail: (err) => {
						console.log('--canvasToTempFilePath--fail', err)
				    uni.hideLoading();
					}
				}, this);

			},
			saveImgToPhone(image) {
				/* 获取图片的信息 */
				uni.getImageInfo({
					src: image,
					success: function(image) {
						/* 保存图片到手机相册 */
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success: function() {
								uni.showModal({
									title: '保存成功',
									content: '图片已成功保存到相册',
									showCancel: false
								});
							},
							complete(res) {
								console.log(res);
				        uni.hideLoading();
							}
						});
					}
				});
			}
      
    },
  }
</script>

<style scoped lang="scss">

  .page__view {
    background: $uni-bg-color-grey;
  }

  .bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 154rpx;
		padding-bottom: env(safe-area-inset-bottom);
    background: #FFFFFF;

    .btn {
      padding: 20rpx 77rpx;
      font-size: 28rpx;
      color: #FFFFFF;
      background: #4883F9;
      border-radius: 14rpx;
    }
  }
</style>