Optimize type conversion logic to avoid repeated coding

src/engines/handler.ts

@@ -53,8 +53,25 @@ export async function convert(
   const bitmap = await createImageBitmap(data.info.blob);
   data.info.width = bitmap.width;
   data.info.height = bitmap.height;
-  if (method === "compress" && data.option.format.target) {
+
+  // Type convert logic here
+  if (
+    // Only compress task need convert
+    method === "compress" &&
+    // If there is no target type, don't need convert
+    data.option.format.target &&
+    // If target type is equal to original type, don't need convert
+    data.option.format.target !== data.info.blob.type
+  ) {
     const target = data.option.format.target.toLowerCase();
+
+    // Currently no browsers support creation of an AVIF from a canvas
+    // So we should encode AVIF image type using webassembly, and the
+    // result blob don't need compress agin, return it directly
+    if (target === "avif") {
+      return createHandler(data, method, Mimes.avif);
+    }
+
     const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
     const context = canvas.getContext("2d")!;
 
@@ -75,16 +92,13 @@ export async function convert(
       bitmap.height,
     );
 
-    // Currently no browsers support creation of an AVIF from a canvas
-    // So we should encode AVIF image type using webassembly, and the
-    // result blob don't need compress agin, return it directly
-    if (target === "avif") {
-      return createHandler(data, method, Mimes.avif);
-    }
-
-    data.info.blob = await canvas.convertToBlob({ type: Mimes[target] });
+    data.info.blob = await canvas.convertToBlob({
+      type: Mimes[target],
+      quality: 1,
+    });
   }
 
+  // Release bitmap
   bitmap.close();
 
   return createHandler(data, method);
@@ -95,28 +109,24 @@ export async function createHandler(
   method: HandleMethod,
   specify?: string,
 ): Promise<OutputMessageData | null> {
-  // console.log(data);
   let mime = data.info.blob.type.toLowerCase();
   if (specify) {
     mime = specify;
   }
   let image: ImageBase | null = null;
   if ([Mimes.jpg, Mimes.webp].includes(mime)) {
     image = new CanvasImage(data.info, data.option);
-  }
-  if (mime === Mimes.avif) {
+  } else if (mime === Mimes.avif) {
     image = new AvifImage(data.info, data.option);
-  }
-  if (mime === Mimes.png) {
+  } else if (mime === Mimes.png) {
     image = new PngImage(data.info, data.option);
-  }
-  if (mime === Mimes.gif) {
+  } else if (mime === Mimes.gif) {
     image = new GifImage(data.info, data.option);
-  }
-  if (mime === Mimes.svg) {
+  } else if (mime === Mimes.svg) {
     image = new SvgImage(data.info, data.option);
   }
 
+  // Unsupported handler type, return it
   if (!image) return null;
 
   const result: OutputMessageData = {

src/functions.ts

@@ -20,16 +20,18 @@ export function normalize(pathname: string, base = import.meta.env.BASE_URL) {
   return "error404";
 }
 
-// 通过自增生成全局唯一的数字ID
+/**
+ * Globaly uniqid in browser session lifecycle
+ */
 let __UniqIdIndex = 0;
 export function uniqId() {
   __UniqIdIndex += 1;
   return __UniqIdIndex;
 }
 
 /**
- * 格式化字节数据
- * @param num
+ * Beautify byte size
+ * @param num byte size
  * @returns
  */
 export function formatSize(num: number) {
@@ -38,7 +40,7 @@ export function formatSize(num: number) {
 }
 
 /**
- * 弹出一个下载框
+ * Create a download dialog from browser
  * @param name
  * @param blob
  */
@@ -51,9 +53,11 @@ export function createDownload(name: string, blob: Blob) {
 }
 
 /**
- * 判断names中是否已经存在name，如果存在，则创建一个新的name
- * @param names 用来检测的names
- * @param name 待判断的name
+ * If names Set already has name, add suffix '(1)' for the name
+ * which will newly pushed to names set
+ *
+ * @param names will checked names Set
+ * @param name will pushed to names
  */
 export function getUniqNameOnNames(names: Set<string>, name: string): string {
   const getName = (checkName: string): string => {

src/locale.ts

@@ -38,13 +38,6 @@ export async function changeLang(lang: string) {
 }
 
 export async function initLang() {
-  const lang = getLang();
-  /**
-   * Q: Why is the lang value not stored in localStorage here?
-   * A: Considering that the user's language might be the default language
-   * and that the user's language settings can change,
-   * the lang value is not stored in localStorage here.
-   */
-  gstate.lang = lang;
-  await setLocaleData(lang);
+  gstate.lang = getLang();
+  await setLocaleData(gstate.lang);
 }