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 { generateCanvasImage } from "@/util";
import { getPractiseAPI } from "@/apis";
import { wxShare } from "@/util";
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;
  generateCanvasImage("shareCanvas", options.type, user.value, data);
});

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"
        ></canvas>
      </view>
      <view class="footer">
        <button hover-class="none" @click="wxShare">
          <image src="../static/wechat-outline.png" mode="widthFix" />
          <text>微信好友</text>
        </button>
        <button hover-class="none">
          <image src="../static/wechat-moment.png" mode="widthFix" />
          <text>朋友圈</text>
        </button>
        <button hover-class="none" @click="saveImage">
          <image src="../static/download.png" mode="widthFix" />
          <text>保存到相册</text>
        </button>
      </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 > button {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-size: 12px;
}
.footer > button > image {
  width: 45px;
  margin-bottom: 10px;
}
</style>