fix: OffscreenCanvas

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">

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.moveTo(this.canvasWidthL, 0);
-      c.lineTo(this.canvas.width / 2, this.canvas.height);
+      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.moveTo(this.canvasWidthL - this.textWidthL, 0);
-      c.lineTo(this.canvas.width / 2 - this.textWidthL, this.canvas.height);
+      c.lineTo(this.canvasWidthL - this.textWidthL, this.canvas.height);
-      c.moveTo(this.canvas.width / 2 + this.textWidthR, 0);
+      c.moveTo(this.canvasWidthL + this.textWidthR, 0);
-      c.lineTo(this.canvas.width / 2 + this.textWidthR, this.canvas.height);
+      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(
+      outputCanvas = document.createElement('canvas');
-        this.textWidthL + this.textWidthR + paddingX * 2,
+      outputCanvas.width = this.textWidthL + this.textWidthR + paddingX * 2;
-        this.canvas.height
+      outputCanvas.height = this.canvas.height;
-      );
+      const ctx = outputCanvas.getContext('2d')!;
-      const ctx = imgCanvas.getContext('2d')!;
       ctx.drawImage(
         this.canvas,
         canvasWidth / 2 - this.textWidthL - paddingX,
@@ -198,10 +199,11 @@ export default class LogoCanvas {
         this.textWidthL + this.textWidthR + paddingX * 2,
         this.canvas.height
       );
-      return imgCanvas.convertToBlob();
     } else {
+      outputCanvas = this.canvas;
+    }
     return new Promise<Blob>((resolve, reject) => {
-        this.canvas.toBlob((blob) => {
+      outputCanvas.toBlob((blob) => {
         if (blob) {
           resolve(blob);
         } else {
@@ -210,13 +212,12 @@ export default class LogoCanvas {
       });
     });
   }
-  }
   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);
     });

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';
+const lang = ['zh', 'zh-CN', 'zh-cn'].includes(navigator.language) ? 'zh' : 'en';
-i18next.init({
+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);
 });

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();
 })();

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],
+    [284, 136],
-    [327, 155],
+    [321, 153],
-    [161, 412],
+    [159, 410],
-    [146, 401],
+    [148, 403],
   ],
 };

vite.config.ts

@@ -12,9 +12,4 @@ export default defineConfig({
       },
     },
   },
-  // resolve: {
-  //   alias: {
-  //     '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
-  //   },
-  // },
 });