From dd0a6c520a6996f6eb975b9e8d2fea99415e70ee Mon Sep 17 00:00:00 2001
From: nulla2011 <nulla@outlook.com>
Date: Fri, 13 Oct 2023 11:38:41 +0800
Subject: [PATCH] fix: OffscreenCanvas

---
 index.html      |  2 +-
 src/canvas.ts   | 45 +++++++++++++++++++++++----------------------
 src/i18n.ts     |  8 ++++----
 src/main.ts     |  2 --
 src/settings.ts | 10 +++++-----
 vite.config.ts  |  5 -----
 6 files changed, 33 insertions(+), 39 deletions(-)

diff --git a/index.html b/index.html
index b170d96..17ebf71 100644
--- a/index.html
+++ b/index.html
@@ -56,7 +56,7 @@
       <span><button class="i18n btn btn-primary" id="save" data-i18n="save">Save</button></span>
       <span><button class="i18n btn btn-primary" id="copy" data-i18n="copy">Copy</button></span>
     </div>
-    <label class="swap">
+    <label class="swap cursor-default">
       <input type="checkbox" disabled id="message-switch" />
       <div class="alert alert-success swap-on">
         <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
diff --git a/src/canvas.ts b/src/canvas.ts
index cfe8d32..5397495 100644
--- a/src/canvas.ts
+++ b/src/canvas.ts
@@ -31,6 +31,7 @@ export default class LogoCanvas {
     this.ctx = this.canvas.getContext('2d')!;
     this.canvas.height = canvasHeight;
     this.canvas.width = canvasWidth;
+    this.bindEvent();
   }
   async draw() {
     const loading = document.querySelector('#loading')!;
@@ -55,15 +56,15 @@ export default class LogoCanvas {
       c.strokeStyle = '#00cccc';
       c.lineWidth = 1;
       c.beginPath();
-      c.moveTo(this.canvas.width / 2, 0);
-      c.lineTo(this.canvas.width / 2, this.canvas.height);
+      c.moveTo(this.canvasWidthL, 0);
+      c.lineTo(this.canvasWidthL, this.canvas.height);
       c.stroke();
       console.log(this.textMetricsL.width, this.textMetricsR.width);
       console.log(this.textWidthL, this.textWidthR);
-      c.moveTo(this.canvas.width / 2 - this.textWidthL, 0);
-      c.lineTo(this.canvas.width / 2 - this.textWidthL, this.canvas.height);
-      c.moveTo(this.canvas.width / 2 + this.textWidthR, 0);
-      c.lineTo(this.canvas.width / 2 + this.textWidthR, this.canvas.height);
+      c.moveTo(this.canvasWidthL - this.textWidthL, 0);
+      c.lineTo(this.canvasWidthL - this.textWidthL, this.canvas.height);
+      c.moveTo(this.canvasWidthL + this.textWidthR, 0);
+      c.lineTo(this.canvasWidthL + this.textWidthR, this.canvas.height);
       c.stroke();
     }
     //blue text -> halo -> black text -> cross
@@ -178,15 +179,15 @@ export default class LogoCanvas {
     this.canvas.width = this.canvasWidthL + this.canvasWidthR;
   }
   generateImg() {
+    let outputCanvas: HTMLCanvasElement;
     if (
       this.textWidthL + paddingX < canvasWidth / 2 ||
       this.textWidthR + paddingX < canvasWidth / 2
     ) {
-      const imgCanvas = new OffscreenCanvas(
-        this.textWidthL + this.textWidthR + paddingX * 2,
-        this.canvas.height
-      );
-      const ctx = imgCanvas.getContext('2d')!;
+      outputCanvas = document.createElement('canvas');
+      outputCanvas.width = this.textWidthL + this.textWidthR + paddingX * 2;
+      outputCanvas.height = this.canvas.height;
+      const ctx = outputCanvas.getContext('2d')!;
       ctx.drawImage(
         this.canvas,
         canvasWidth / 2 - this.textWidthL - paddingX,
@@ -198,25 +199,25 @@ export default class LogoCanvas {
         this.textWidthL + this.textWidthR + paddingX * 2,
         this.canvas.height
       );
-      return imgCanvas.convertToBlob();
     } else {
-      return new Promise<Blob>((resolve, reject) => {
-        this.canvas.toBlob((blob) => {
-          if (blob) {
-            resolve(blob);
-          } else {
-            reject();
-          }
-        });
-      });
+      outputCanvas = this.canvas;
     }
+    return new Promise<Blob>((resolve, reject) => {
+      outputCanvas.toBlob((blob) => {
+        if (blob) {
+          resolve(blob);
+        } else {
+          reject();
+        }
+      });
+    });
   }
   saveImg() {
     this.generateImg().then((blob) => {
       const url = URL.createObjectURL(blob);
       const a = document.createElement('a');
       a.href = url;
-      a.download = `ba-style-logo@nulla.top_${Math.round(new Date().getTime() / 1000)}.png`;
+      a.download = `${this.textL}${this.textR}_ba-style@nulla.top.png`;
       a.click();
       URL.revokeObjectURL(url);
     });
diff --git a/src/i18n.ts b/src/i18n.ts
index e9c2854..fa5d8bd 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -1,9 +1,9 @@
-import i18next from 'i18next';
+import { init, t } from 'i18next';
 import en from './locales/en.json';
 import zh from './locales/zh.json';
 
-const lang = ['zh', 'zh-CN', 'zh-TW'].includes(navigator.language) ? 'zh' : 'en';
-i18next.init({
+const lang = ['zh', 'zh-CN', 'zh-cn'].includes(navigator.language) ? 'zh' : 'en';
+init({
   lng: lang,
   resources: {
     en: {
@@ -17,5 +17,5 @@ i18next.init({
 
 document.querySelectorAll('.i18n').forEach((el) => {
   const key = el.getAttribute('data-i18n')!;
-  el.textContent = i18next.t(key);
+  el.textContent = t(key);
 });
diff --git a/src/main.ts b/src/main.ts
index 98f50ae..8ed45d4 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,9 +4,7 @@ import loadImages from './utils/loadImages';
 import './i18n';
 
 (async function () {
-  // await loadFont();
   await loadImages();
   const logo = new LogoCanvas();
-  logo.bindEvent();
   logo.draw();
 })();
diff --git a/src/settings.ts b/src/settings.ts
index 3da4aeb..c7ff2b6 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -5,11 +5,11 @@ export default {
   textBaseLine: 0.68,
   horizontalTilt: -0.4,
   paddingX: 10,
-  graphOffset: { X: -18, Y: 0 },
+  graphOffset: { X: -15, Y: 0 },
   hollowPath: [
-    [280, 134],
-    [327, 155],
-    [161, 412],
-    [146, 401],
+    [284, 136],
+    [321, 153],
+    [159, 410],
+    [148, 403],
   ],
 };
diff --git a/vite.config.ts b/vite.config.ts
index c7243ac..fbec33f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -12,9 +12,4 @@ export default defineConfig({
       },
     },
   },
-  // resolve: {
-  //   alias: {
-  //     '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
-  //   },
-  // },
 });