提交

src/view/finance2024/index.vue

@@ -149,11 +149,11 @@ const play_stats = ref(false);
 const canvas = document.createElement('canvas');
 const show = ref(false);
 const username = ref('');
-let img_local = ref(localStorage.getItem('hb20241022'));
+let img_local = ref(!!localStorage.getItem('hb20241022'));
 let d2 = undefined;
 let isInitAudio = true;
 canvas.width = 750;
-canvas.height = 1334;
+canvas.height = 2500;
 
 const audio = new Audio('https://cxzx.smcic.net/topic/tool/media/bgm2024.mp3');
 audio.loop = true; // 循环播放
@@ -193,8 +193,8 @@ const init = () => {
 const look_more = ref(false);
 
 const createhb = () => {
-  if (img_local.value) showImagePreview([img_local.value]);
-  else show.value = true;
+    if (img_local.value) showImagePreview([localStorage.getItem('hb20241022')]);
+    else show.value = true;
 };
 
 const canvas_init = (uname, num) => {
@@ -205,25 +205,21 @@ const canvas_init = (uname, num) => {
     img.src = 'https://cxzx.smcic.net/topic/tool/img/hb2024.png';
     if (!d2) d2 = canvas.getContext('2d');
     img.onload = () => {
-      d2.drawImage(img, 0, 0, 750, 1334);
-      let line1 = [40, 1280];
-      let fontsize = '30px';
-      d2.font = fontsize + ' ZhangqingpingXingkai';
-      d2.fillStyle = '#000000';
-      d2.fillText('第', line1[0], line1[1]);
+      d2.drawImage(img, 0, 0, 750, 2500);
+      let line1 = [140, 2380];
+
       d2.font = '50px ZhangqingpingXingkai';
       d2.fillStyle = '#000000';
-      d2.fillText(uname, line1[0], 1240);
-      d2.font = 'blod 50px ZhangqingpingXingkai';
+      d2.fillText(uname, 700 - d2.measureText(uname).width, 2340);
+
+      d2.font = '30px ZhangqingpingXingkai';
+      const fontWidth30 = d2.measureText('第').width;
+      const fontWidth50 = d2.measureText(num).width;
+      d2.fillText('个参与本次活动的人', 700 - fontWidth30 * 9, line1[1]);
+      d2.fillText('第',  700 - fontWidth50 - fontWidth30 * 9 - d2.measureText('第').width, line1[1]);
       d2.fillStyle = '#fb0301';
-      d2.fillText(num, 60, line1[1] + 5);
-      d2.font = fontsize + ' ZhangqingpingXingkai';
-      d2.fillStyle = '#000000';
-      d2.fillText(
-        '个参与本次活动的人',
-        line1[0] + num.toString().length * 30,
-        line1[1]
-      );
+      d2.fillText(num, 700 - fontWidth50 - fontWidth30 * 9, line1[1]);
+
       resolve();
     };
   });
@@ -243,7 +239,7 @@ const onSubmit = e => {
     canvas_init(r.userName, r.userOrder + r.userOrderUnreal).then(() => {
       const imgs = canvas.toDataURL('image/png');
       showImagePreview([imgs]);
-      img_local.value = imgs;
+      img_local.value = true;
       localStorage.setItem('hb20241022', imgs);
     });
   });