新增全亮后分享页

 /*
  * @Date: 2024-04-07 10:14:17
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-04-11 09:39:29
+ * @LastEditTime: 2024-04-11 15:36:49
  * @FilePath: /fxPark/src/router/routes/modules/fxPark/index.js
  * @Description: 文件描述
  */
@@ -50,6 +50,15 @@ const index = [{
     title: '生成海报',
   },
   children: [],
-},]
+}, {
+  path: '/finish',
+  name: '分享海报',
+  component: () => import('@/views/fxPark/finish.vue'),
+  redirect: '',
+  meta: {
+    title: '分享海报',
+  },
+  children: [],
+}]
 
 export default index;

+<!--
+ * @Date: 2024-04-11 15:33:54
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2024-04-11 15:43:46
+ * @FilePath: /fxPark/src/views/fxPark/finish.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div class="finish-page">
+    <div style="height: calc(90vh - 2rem); padding: 1rem;">
+      <div v-if="flag" ref="canvasRef" style="position: relative; padding: 1rem; background-color: #fff;">
+        <!-- <div style="position: absolute; top: 3rem; left: 2rem; color: #FFF; writing-mode: vertical-lr; text-orientation: upright;">
+          <div style="position: relative;">
+            <span style="font-size: 2.5rem; font-weight: bolder; letter-spacing: 5px;">悬铃木</span>
+            <div style="position: absolute; bottom: -1rem; letter-spacing: 5px;">智者长老</div>
+          </div>
+        </div> -->
+        <img :src="imgSrc" style="width: 100%; height: 78vh;">
+        <div style="color: #CCCCCC; margin-top: 1rem;">
+
+        </div>
+      </div>
+      <div v-if="imgUrl">
+        <img :src="imgUrl" alt="" crossOrigin="anonymous" :style="{ width: ref_width, height: ref_height }">
+      </div>
+    </div>
+    <p style="text-align: center; color: #fff; margin-top: 1rem;">长按保存到相册</p>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import html2canvas from "html2canvas";
+import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
+//import { } from '@/utils/generateModules.js'
+//import { } from '@/utils/generateIcons.js'
+//import { } from '@/composables'
+const $route = useRoute();
+const $router = useRouter();
+useTitle($route.meta.title);
+
+const canvasRef = ref(null);
+const imgUrl = ref('');
+const imgSrc = ref('https://picsum.photos/800');
+const flag = ref(true);
+const ref_width = ref('');
+const ref_height = ref('');
+
+onMounted(async () => {
+  nextTick(() => {
+    let canvasDom = canvasRef.value;
+    ref_width.value = canvasDom.offsetWidth + 'px';
+    ref_height.value = canvasDom.offsetHeight + 'px';
+    // const screenWidth = window.innerWidth;
+    // alert(screenWidth); // 输出移动设备屏幕的宽度
+  });
+  createImage();
+});
+
+// 获取像素比
+const DPR = () => {
+  // 获取设备dpi
+  if (window.devicePixelRatio && window.devicePixelRatio > 1) {
+    return window.devicePixelRatio * 2
+  }
+  // 直接返回高像素比
+  return 8
+}
+
+const createImage = () => {
+  nextTick(() => {
+    // 获取要生成图片的 DOM 元素
+    let canvasDom = canvasRef.value;
+    const options = {
+      backgroundColor: '#fff',
+      // canvas: canvas,
+      useCORS: true,//配置允许跨域
+      scale: DPR(),
+      // windowWidth: document.body.scrollWidth,
+      // windowHeight: document.body.scrollHeight,
+      // x: 0,
+      // y: window.pageYOffset,
+      // allowTaint: true,
+      // background: "#d21f2c", // 一定要添加背景颜色，否则出来的图片，背景全部都是透明的
+      // dpi: 300 // 处理模糊问题
+    };
+    // console.log("获取指定的宽高", width, height, canvas);
+    html2canvas(canvasDom, options)
+      .then(canvas => {
+        try {
+          // 生成图片地址
+          imgUrl.value = canvas.toDataURL("image/png");
+          // console.log("canvas.toDataURL('image/png')", this.imgUrl);
+          flag.value = false;
+        } catch (e) {
+          alert("图片跨域,保存失败");
+        }
+      })
+      .catch(error => {
+        console.error("绘制失败");
+        console.error(error);
+      });
+  });
+}
+
+</script>
+
+<style lang="less" scoped>
+.finish-page {
+  height: 100vh;
+  background-color: green;
+}
+</style>

 <!--
  * @Date: 2024-04-07 10:15:55
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-04-11 14:52:47
+ * @LastEditTime: 2024-04-11 15:38:58
  * @FilePath: /fxPark/src/views/fxPark/index.vue
  * @Description: 文件描述
 -->
@@ -17,7 +17,7 @@
       <img :src="item.src" class="img">
     </div>
     <div style="position: fixed; bottom: 1rem; left: 0; right: 0; display: flex; z-index: 25;justify-content: space-evenly;">
-      <div style="display: inline-flex; padding: 0.6rem 2rem; color: #F68015; background-color: #fff; align-items: center; border-radius: 1.5rem;">分享海报</div>
+      <div @click="onShare" style="display: inline-flex; padding: 0.6rem 2rem; color: #F68015; background-color: #fff; align-items: center; border-radius: 1.5rem;">分享海报</div>
       <div @click="commentsBtn" style="display: inline-flex; padding: 0.6rem 2rem; color: #fff; background-color: #F68015;align-items: center; border-radius: 1.5rem;">弹幕留言</div>
     </div>
 
@@ -62,6 +62,8 @@ import danmaku from '@/components/danmaku.vue'
 
 // 初始化WX环境
 import wx from 'weixin-js-sdk'
+import { useGo } from '@/hooks/useGo'
+const go = useGo();
 
 const $route = useRoute();
 const $router = useRouter();
@@ -127,6 +129,10 @@ const onFocus = () => {
 const onCancel = () => {
   console.warn(0);
 }
+
+const onShare = () => {
+  go('/finish')
+}
 </script>
 
 <style lang="less" scoped>