shoot-miniprograms/src/pages/image-share.vue

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import {
  renderText,
  renderRankTitle,
  renderLine,
  renderScores,
  drawRoundImage,
} from "@/util.js";
import { getPractiseAPI } from "@/apis";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);

onLoad(async (options) => {
  const id = options.id || 462;
  const data = await getPractiseAPI(id);
  if (!data.arrows.length) return;
  var ctx = uni.createCanvasContext("shareCanvas");
  const width = 303;
  const height = 535;
  ctx.drawImage("../static/share-bg.png", 0, 0, 302, 534);
  drawRoundImage(ctx, user.value.avatar, 20, 20, 35, 35, 20);
  ctx.drawImage("../static/avatar-frame.png", 15, 15, 45, 45);
  renderText(ctx, user.value.nickName, 14, "#fff", 77, 35, "center");
  renderRankTitle(ctx, user.value.lvlName, "center");

  let titleImage = "../static/first-try-title.png";
  let subTitle = "正式开启弓箭手之路";
  if (options.type > 1) {
    subTitle = `今日弓箭练习打卡 ${data.createdAt
      .split(" ")[0]
      .replaceAll("-", ".")}`;
  }
  if (options.type == 2) {
    titleImage = "../static/practise-one-title.png";
  } else if (options.type == 3) {
    titleImage = "../static/practise-two-title.png";
  }
  ctx.drawImage(titleImage, (width - 160) / 2, 160, 160, 40);
  const subTitleWidth = ctx.measureText(subTitle).width;
  renderText(ctx, subTitle, 18, "#fff", width / 2 - subTitleWidth + 10, 220);
  renderText(ctx, "共", 16, "#fff", 124, 300);
  const totalRing = data.arrows.reduce((last, next) => last + next.ring, 0);
  renderText(ctx, totalRing, 16, "#fed847", totalRing < 100 ? 144 : 142, 300);
  renderText(ctx, "环", 16, "#fff", 166, 300);
  renderLine(ctx, 80);
  renderLine(ctx, 192);
  renderScores(ctx, data.arrows);
  ctx.drawImage(
    "../static/device-icon.png",
    width * 0.06,
    height * 0.87,
    55,
    55
  );
  renderText(ctx, "射灵平台", 16, "#fff", width * 0.28, height * 0.9);
  renderText(
    ctx,
    "快加入我们一起玩吧~",
    11,
    "rgba(255, 255, 255, 0.5)",
    width * 0.28,
    height * 0.93
  );
  renderText(
    ctx,
    "后羿就是这样练成的",
    11,
    "rgba(255, 255, 255, 0.5)",
    width * 0.28,
    height * 0.96
  );
  ctx.drawImage("../static/qr-code.png", width * 0.75, height * 0.86, 60, 60);
  ctx.draw();
});

const saveImage = () => {
  uni.canvasToTempFilePath({
    canvasId: "shareCanvas",
    success: (res) => {
      const tempFilePath = res.tempFilePath;

      // 保存图片到相册
      uni.saveImageToPhotosAlbum({
        filePath: tempFilePath,
        success: () => {
          uni.showToast({ title: "保存成功" });
        },
        fail: () => {
          uni.showToast({ title: "保存失败", icon: "error" });
        },
      });
    },
  });
};
</script>

<template>
  <Container>
    <view class="content">
      <view :style="{ overflow: 'hidden', borderRadius: '10px' }">
        <canvas
          style="width: 302px; height: 534px"
          canvas-id="shareCanvas"
          id="firstCanvas"
        ></canvas>
      </view>
      <view class="footer">
        <view>
          <image src="../static/wechat-outline.png" mode="widthFix" />
          <text>微信好友</text>
        </view>
        <view>
          <image src="../static/wechat-moment.png" mode="widthFix" />
          <text>朋友圈</text>
        </view>
        <view @click="saveImage">
          <image src="../static/download.png" mode="widthFix" />
          <text>保存到相册</text>
        </view>
      </view>
    </view>
  </Container>
</template>

<style scoped>
.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
}
.footer {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 50px;
}
.footer > view {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-size: 12px;
}
.footer > view > image {
  width: 45px;
  margin-bottom: 10px;
}
</style>