fission-star-applet-250304/pages_order/mine/sharing.vue

<template>
  <view class="page">
    <navbar title="分享好友" leftClick @leftClick="$utils.navigateBack" />

    <view class="flex content">

      <view style="width: 598rpx; height: 1063rpx;">
        <canvas id="myCanvas" canvas-id="firstCanvas1" type="2d" style="width: 100%; height: 100%;"></canvas>
      </view>
      
      <view class="flex btns">
        <button class="flex btn btn-back" @click="$utils.navigateBack">返回</button>
        <button plain class="flex btn btn-save" @click="saveImg" >保存到相册</button>
      </view>
    </view>
  </view>
</template>

<script>
	import { mapState } from 'vuex'

	export default {
		data() {
			return {
        wxCodeImage: null,
				canvas: {},
      }
    },
		computed : {
			...mapState(['configList'])
		},
    onLoad() {
    },
    onReady() {
      this.fetchQrCode()
    },
    methods: {
      async fetchQrCode() {
        try {
          const url = (await this.$fetch('getQrCode'))?.url

          this.wxCodeImage = this.$config.aliOss.url + url

          console.log('--wxCodeImage', this.wxCodeImage)

          this.draw()
        } 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 / 598

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

            //背景图片
            const bgImage = canvas.createImage()
            bgImage.src = this.configList.index_lvxing || 'https://image.hhlm1688.com//upload/组3833x_1742803627396.png'
						bgImage.onload = () => {

							ctx.drawImage(bgImage, 0, 0, width, height)
     
              //二维码图片
              const coderImage = canvas.createImage()
              coderImage.src = this.wxCodeImage
              coderImage.onload = () => {
                const x = 197 * Ratio / dpr
                const y = 562 * Ratio / dpr
                const size = 206 * Ratio / dpr
                ctx.drawImage(coderImage, x, y, size, size)

                uni.hideLoading()
              }

						}

					})

			},
      saveImg(){
        this.$authorize('scope.writePhotosAlbum').then((res) => {
          this.imgApi()
        })
      },
			imgApi() {
        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)
          }
        }, 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);
							}
						});
					}
				});
      }
    },
  }
</script>

<style scoped lang="scss">
.page {
  background-color: #111317;
  height: 100vh;
}

.content {
  margin-top: 79rpx;
  flex-direction: column;
}

.btns {
  justify-content: space-between; 
  margin-top: 53rpx;
  width: 598rpx;
}

.btn {
  display: inline-flex;
  width: 280rpx; 
  height: 90rpx;
  font-size: 36rpx;
  line-height: 1;
  color: #FFFFFF;
  border-radius: 45rpx;
  margin: 0;

  &-back {
    background-color: #4E5053;
  }

  &-save {
    background-image: linear-gradient(to right, #02DED6, #05D9A2);
  }
}
</style>