feat: convert jpg to png (w/o options)

src/pages/image/png/convert-jgp-to-png/index.tsx

@@ -1,5 +1,8 @@
 import { Box } from '@mui/material';
-import React from 'react';
+import ToolInputAndResult from 'components/ToolInputAndResult';
+import ToolFileInput from 'components/input/ToolFileInput';
+import ToolFileResult from 'components/result/ToolFileResult';
+import React, { useState } from 'react';
 import * as Yup from 'yup';
 
 const initialValues = {};
@@ -7,5 +10,59 @@ const validationSchema = Yup.object({
   // splitSeparator: Yup.string().required('The separator is required')
 });
 export default function ConvertJgpToPng() {
-  return <Box>Lorem ipsum</Box>;
+  const [input, setInput] = useState<File | null>(null);
+  const [result, setResult] = useState<File | null>(null);
+
+  const onFileInputChange = (file: File): void => {
+    if (!file) return;
+    setInput(file);
+    convertJpgToPng(file);
+  };
+
+  const convertJpgToPng = async (file: File): Promise<void> => {
+    if (!file) return;
+
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (ctx == null) return;
+
+    const img = new Image();
+    img.src = URL.createObjectURL(file);
+    await img.decode();
+
+    canvas.width = img.width;
+    canvas.height = img.height;
+    ctx.drawImage(img, 0, 0);
+
+    canvas.toBlob((blob) => {
+      if (blob) {
+        const newFile = new File([blob], file.name, {
+          type: 'image/png'
+        });
+        setResult(newFile);
+      }
+    }, 'image/png');
+  };
+
+  return (
+    <Box>
+      <ToolInputAndResult
+        input={
+          <ToolFileInput
+            value={input}
+            onChange={onFileInputChange}
+            accept={['image/jpeg']}
+            title={'Input JPG'}
+          />
+        }
+        result={
+          <ToolFileResult
+            title={'Output PNG'}
+            value={result}
+            extension={'png'}
+          />
+        }
+      />
+    </Box>
+  );
 }

src/pages/image/png/convert-jgp-to-png/meta.ts

@@ -1,14 +1,14 @@
 import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
-// import image from '@assets/text.png';
+import image from '@assets/image.png';
 
 export const tool = defineTool('png', {
-  name: 'Convert jgp to png',
+  name: 'Convert JPG to PNG',
   path: 'convert-jgp-to-png',
-  // image,
+  image,
   description:
-    'Quickly your JPG images to PNG. Just import your PNG image in the editor on the left',
+    'Quickly convert your JPG images to PNG. Just import your PNG image in the editor on the left',
-  shortDescription: '',
+  shortDescription: 'Quickly convert your JPG images to PNG',
-  keywords: ['convert', 'jgp', 'to', 'png'],
+  keywords: ['convert', 'jgp', 'png'],
   component: lazy(() => import('./index'))
 });

src/pages/image/png/index.ts

@@ -1,5 +1,9 @@
-import { tool as pngConvertJgpToPng } from './convert-jgp-to-png/meta';
+import { tool as convertJgpToPng } from './convert-jgp-to-png/meta';
 import { tool as pngCreateTransparent } from './create-transparent/meta';
 import { tool as changeColorsInPng } from './change-colors-in-png/meta';
 
-export const pngTools = [changeColorsInPng, pngCreateTransparent];
+export const pngTools = [
+  changeColorsInPng,
+  pngCreateTransparent,
+  convertJgpToPng
+];