refactor: tools folder inside pages

src/pages/tools/image/index.ts

@@ -0,0 +1,3 @@
+import { pngTools } from './png';
+
+export const imageTools = [...pngTools];

src/pages/tools/image/png/change-colors-in-png/change-colors-in-png.e2e.spec.ts

@@ -0,0 +1,43 @@
+import { expect, test } from '@playwright/test';
+import { Buffer } from 'buffer';
+import path from 'path';
+import Jimp from 'jimp';
+import { convertHexToRGBA } from '../../../../../utils/color';
+
+test.describe('Change colors in png', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/png/change-colors-in-png');
+  });
+
+  test('should change pixel color', async ({ page }) => {
+    // Upload image
+    const fileInput = page.locator('input[type="file"]');
+    const imagePath = path.join(__dirname, 'test.png');
+    await fileInput?.setInputFiles(imagePath);
+
+    await page.getByTestId('from-color-input').fill('#FF0000');
+    const toColor = '#0000FF';
+    await page.getByTestId('to-color-input').fill(toColor);
+
+    // Click on download
+    const downloadPromise = page.waitForEvent('download');
+    await page.getByText('Save as').click();
+
+    // Intercept and read downloaded PNG
+    const download = await downloadPromise;
+    const downloadStream = await download.createReadStream();
+
+    const chunks = [];
+    for await (const chunk of downloadStream) {
+      chunks.push(chunk);
+    }
+    const fileContent = Buffer.concat(chunks);
+
+    expect(fileContent.length).toBeGreaterThan(0);
+
+    // Check that the first pixel is transparent
+    const image = await Jimp.read(fileContent);
+    const color = image.getPixelColor(0, 0);
+    expect(color).toBe(convertHexToRGBA(toColor));
+  });
+});

src/pages/tools/image/png/change-colors-in-png/index.tsx

@@ -0,0 +1,140 @@
+import { Box } from '@mui/material';
+import React, { useState } from 'react';
+import * as Yup from 'yup';
+import ToolFileInput from '@components/input/ToolFileInput';
+import ToolFileResult from '@components/result/ToolFileResult';
+import ToolOptions from '@components/options/ToolOptions';
+import ColorSelector from '@components/options/ColorSelector';
+import Color from 'color';
+import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
+import ToolInputAndResult from '@components/ToolInputAndResult';
+import { areColorsSimilar } from 'utils/color';
+
+const initialValues = {
+  fromColor: 'white',
+  toColor: 'black',
+  similarity: '10'
+};
+const validationSchema = Yup.object({
+  // splitSeparator: Yup.string().required('The separator is required')
+});
+export default function ChangeColorsInPng() {
+  const [input, setInput] = useState<File | null>(null);
+  const [result, setResult] = useState<File | null>(null);
+
+  const compute = (optionsValues: typeof initialValues, input: any) => {
+    if (!input) return;
+    const { fromColor, toColor, similarity } = optionsValues;
+    let fromRgb: [number, number, number];
+    let toRgb: [number, number, number];
+    try {
+      //@ts-ignore
+      fromRgb = Color(fromColor).rgb().array();
+      //@ts-ignore
+      toRgb = Color(toColor).rgb().array();
+    } catch (err) {
+      return;
+    }
+    const processImage = async (
+      file: File,
+      fromColor: [number, number, number],
+      toColor: [number, number, number],
+      similarity: number
+    ) => {
+      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);
+
+      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+      const data: Uint8ClampedArray = imageData.data;
+
+      for (let i = 0; i < data.length; i += 4) {
+        const currentColor: [number, number, number] = [
+          data[i],
+          data[i + 1],
+          data[i + 2]
+        ];
+        if (areColorsSimilar(currentColor, fromColor, similarity)) {
+          data[i] = toColor[0]; // Red
+          data[i + 1] = toColor[1]; // Green
+          data[i + 2] = toColor[2]; // Blue
+        }
+      }
+
+      ctx.putImageData(imageData, 0, 0);
+
+      canvas.toBlob((blob) => {
+        if (blob) {
+          const newFile = new File([blob], file.name, {
+            type: 'image/png'
+          });
+          setResult(newFile);
+        }
+      }, 'image/png');
+    };
+
+    processImage(input, fromRgb, toRgb, Number(similarity));
+  };
+  return (
+    <Box>
+      <ToolInputAndResult
+        input={
+          <ToolFileInput
+            value={input}
+            onChange={setInput}
+            accept={['image/png']}
+            title={'Input PNG'}
+          />
+        }
+        result={
+          <ToolFileResult
+            title={'Output PNG with new colors'}
+            value={result}
+            extension={'png'}
+          />
+        }
+      />
+      <ToolOptions
+        compute={compute}
+        getGroups={({ values, updateField }) => [
+          {
+            title: 'From color and to color',
+            component: (
+              <Box>
+                <ColorSelector
+                  value={values.fromColor}
+                  onColorChange={(val) => updateField('fromColor', val)}
+                  description={'Replace this color (from color)'}
+                  inputProps={{ 'data-testid': 'from-color-input' }}
+                />
+                <ColorSelector
+                  value={values.toColor}
+                  onColorChange={(val) => updateField('toColor', val)}
+                  description={'With this color (to color)'}
+                  inputProps={{ 'data-testid': 'to-color-input' }}
+                />
+                <TextFieldWithDesc
+                  value={values.similarity}
+                  onOwnChange={(val) => updateField('similarity', val)}
+                  description={
+                    'Match this % of similar colors of the from color. For example, 10% white will match white and a little bit of gray.'
+                  }
+                />
+              </Box>
+            )
+          }
+        ]}
+        initialValues={initialValues}
+        input={input}
+      />
+    </Box>
+  );
+}

src/pages/tools/image/png/change-colors-in-png/meta.ts

@@ -0,0 +1,14 @@
+import { defineTool } from '@tools/defineTool';
+import { lazy } from 'react';
+import image from '@assets/image.png';
+
+export const tool = defineTool('png', {
+  name: 'Change colors in png',
+  path: 'change-colors-in-png',
+  image,
+  description:
+    "World's simplest online Portable Network Graphics (PNG) color changer. Just import your PNG image in the editor on the left, select which colors to change, and you'll instantly get a new PNG with the new colors on the right. Free, quick, and very powerful. Import a PNG – replace its colors.",
+  shortDescription: 'Quickly swap colors in a PNG image',
+  keywords: ['change', 'colors', 'in', 'png'],
+  component: lazy(() => import('./index'))
+});

src/pages/tools/image/png/convert-jgp-to-png/convert-jgp-to-png.e2e.spec.ts

@@ -0,0 +1,72 @@
+import { expect, test } from '@playwright/test';
+import { Buffer } from 'buffer';
+import path from 'path';
+import Jimp from 'jimp';
+
+test.describe('Convert JPG to PNG tool', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/png/convert-jgp-to-png');
+  });
+
+  test('should convert jpg to png', async ({ page }) => {
+    // Upload image
+    const fileInput = page.locator('input[type="file"]');
+    const imagePath = path.join(__dirname, 'test.jpg');
+    await fileInput?.setInputFiles(imagePath);
+
+    // Click on download
+    const downloadPromise = page.waitForEvent('download');
+    await page.getByText('Save as').click();
+
+    // Intercept and read downloaded PNG
+    const download = await downloadPromise;
+    const downloadStream = await download.createReadStream();
+
+    const chunks = [];
+    for await (const chunk of downloadStream) {
+      chunks.push(chunk);
+    }
+    const fileContent = Buffer.concat(chunks);
+
+    expect(fileContent.length).toBeGreaterThan(0);
+
+    // Check that the first pixel is 0x808080ff
+    const image = await Jimp.read(fileContent);
+    const color = image.getPixelColor(0, 0);
+    expect(color).toBe(0x808080ff);
+  });
+
+  test('should apply transparency before converting jpg to png', async ({
+    page
+  }) => {
+    // Upload image
+    const fileInput = page.locator('input[type="file"]');
+    const imagePath = path.join(__dirname, 'test.jpg');
+    await fileInput?.setInputFiles(imagePath);
+
+    // Enable transparency on color 0x808080
+    await page.getByLabel('Enable PNG Transparency').check();
+    await page.getByTestId('color-input').fill('#808080');
+
+    // Click on download
+    const downloadPromise = page.waitForEvent('download');
+    await page.getByText('Save as').click();
+
+    // Intercept and read downloaded PNG
+    const download = await downloadPromise;
+    const downloadStream = await download.createReadStream();
+
+    const chunks = [];
+    for await (const chunk of downloadStream) {
+      chunks.push(chunk);
+    }
+    const fileContent = Buffer.concat(chunks);
+
+    expect(fileContent.length).toBeGreaterThan(0);
+
+    // Check that the first pixel is transparent
+    const image = await Jimp.read(fileContent);
+    const color = image.getPixelColor(0, 0);
+    expect(color).toBe(0);
+  });
+});

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

@@ -0,0 +1,154 @@
+import { Box } from '@mui/material';
+import ToolInputAndResult from 'components/ToolInputAndResult';
+import ToolFileInput from 'components/input/ToolFileInput';
+import CheckboxWithDesc from 'components/options/CheckboxWithDesc';
+import ColorSelector from 'components/options/ColorSelector';
+import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
+import ToolOptions from 'components/options/ToolOptions';
+import ToolFileResult from 'components/result/ToolFileResult';
+import Color from 'color';
+import React, { useState } from 'react';
+import * as Yup from 'yup';
+import { areColorsSimilar } from 'utils/color';
+
+const initialValues = {
+  enableTransparency: false,
+  color: 'white',
+  similarity: '10'
+};
+const validationSchema = Yup.object({
+  // splitSeparator: Yup.string().required('The separator is required')
+});
+export default function ConvertJgpToPng() {
+  const [input, setInput] = useState<File | null>(null);
+  const [result, setResult] = useState<File | null>(null);
+
+  const compute = async (
+    optionsValues: typeof initialValues,
+    input: any
+  ): Promise<void> => {
+    if (!input) return;
+
+    const processImage = async (
+      file: File,
+      transparencyTransform?: {
+        color: [number, number, number];
+        similarity: number;
+      }
+    ) => {
+      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);
+
+      if (transparencyTransform) {
+        const { color, similarity } = transparencyTransform;
+
+        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        const data: Uint8ClampedArray = imageData.data;
+
+        for (let i = 0; i < data.length; i += 4) {
+          const currentColor: [number, number, number] = [
+            data[i],
+            data[i + 1],
+            data[i + 2]
+          ];
+          if (areColorsSimilar(currentColor, color, similarity)) {
+            data[i + 3] = 0;
+          }
+        }
+
+        ctx.putImageData(imageData, 0, 0);
+      }
+
+      canvas.toBlob((blob) => {
+        if (blob) {
+          const newFile = new File([blob], file.name, {
+            type: 'image/png'
+          });
+          setResult(newFile);
+        }
+      }, 'image/png');
+    };
+
+    if (optionsValues.enableTransparency) {
+      let rgb: [number, number, number];
+      try {
+        //@ts-ignore
+        rgb = Color(optionsValues.color).rgb().array();
+      } catch (err) {
+        return;
+      }
+
+      processImage(input, {
+        color: rgb,
+        similarity: Number(optionsValues.similarity)
+      });
+    } else {
+      processImage(input);
+    }
+  };
+
+  return (
+    <Box>
+      <ToolInputAndResult
+        input={
+          <ToolFileInput
+            value={input}
+            onChange={setInput}
+            accept={['image/jpeg']}
+            title={'Input JPG'}
+          />
+        }
+        result={
+          <ToolFileResult
+            title={'Output PNG'}
+            value={result}
+            extension={'png'}
+          />
+        }
+      />
+      <ToolOptions
+        compute={compute}
+        getGroups={({ values, updateField }) => [
+          {
+            title: 'PNG Transparency Color',
+            component: (
+              <Box>
+                <CheckboxWithDesc
+                  key="enableTransparency"
+                  title="Enable PNG Transparency"
+                  checked={!!values.enableTransparency}
+                  onChange={(value) => updateField('enableTransparency', value)}
+                  description="Make the color below transparent."
+                />
+                <ColorSelector
+                  value={values.color}
+                  onColorChange={(val) => updateField('color', val)}
+                  description={'With this color (to color)'}
+                  inputProps={{ 'data-testid': 'color-input' }}
+                />
+                <TextFieldWithDesc
+                  value={values.similarity}
+                  onOwnChange={(val) => updateField('similarity', val)}
+                  description={
+                    'Match this % of similar. For example, 10% white will match white and a little bit of gray.'
+                  }
+                />
+              </Box>
+            )
+          }
+        ]}
+        initialValues={initialValues}
+        input={input}
+      />
+    </Box>
+  );
+}

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

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

src/pages/tools/image/png/create-transparent/create-transparent.e2e.spec.ts

@@ -0,0 +1,40 @@
+import { expect, test } from '@playwright/test';
+import { Buffer } from 'buffer';
+import path from 'path';
+import Jimp from 'jimp';
+
+test.describe('Create transparent PNG', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/png/create-transparent');
+  });
+
+  test('should make png color transparent', async ({ page }) => {
+    // Upload image
+    const fileInput = page.locator('input[type="file"]');
+    const imagePath = path.join(__dirname, 'test.png');
+    await fileInput?.setInputFiles(imagePath);
+
+    await page.getByTestId('color-input').fill('#FF0000');
+
+    // Click on download
+    const downloadPromise = page.waitForEvent('download');
+    await page.getByText('Save as').click();
+
+    // Intercept and read downloaded PNG
+    const download = await downloadPromise;
+    const downloadStream = await download.createReadStream();
+
+    const chunks = [];
+    for await (const chunk of downloadStream) {
+      chunks.push(chunk);
+    }
+    const fileContent = Buffer.concat(chunks);
+
+    expect(fileContent.length).toBeGreaterThan(0);
+
+    // Check that the first pixel is transparent
+    const image = await Jimp.read(fileContent);
+    const color = image.getPixelColor(0, 0);
+    expect(color).toBe(0);
+  });
+});

src/pages/tools/image/png/create-transparent/index.tsx

@@ -0,0 +1,127 @@
+import { Box } from '@mui/material';
+import React, { useState } from 'react';
+import * as Yup from 'yup';
+import ToolFileInput from '@components/input/ToolFileInput';
+import ToolFileResult from '@components/result/ToolFileResult';
+import ToolOptions from '@components/options/ToolOptions';
+import ColorSelector from '@components/options/ColorSelector';
+import Color from 'color';
+import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
+import ToolInputAndResult from '@components/ToolInputAndResult';
+import { areColorsSimilar } from 'utils/color';
+
+const initialValues = {
+  fromColor: 'white',
+  similarity: '10'
+};
+const validationSchema = Yup.object({
+  // splitSeparator: Yup.string().required('The separator is required')
+});
+export default function ChangeColorsInPng() {
+  const [input, setInput] = useState<File | null>(null);
+  const [result, setResult] = useState<File | null>(null);
+
+  const compute = (optionsValues: typeof initialValues, input: any) => {
+    if (!input) return;
+    const { fromColor, similarity } = optionsValues;
+
+    let fromRgb: [number, number, number];
+    try {
+      //@ts-ignore
+      fromRgb = Color(fromColor).rgb().array();
+    } catch (err) {
+      return;
+    }
+    const processImage = async (
+      file: File,
+      fromColor: [number, number, number],
+      similarity: number
+    ) => {
+      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);
+
+      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+      const data: Uint8ClampedArray = imageData.data;
+
+      for (let i = 0; i < data.length; i += 4) {
+        const currentColor: [number, number, number] = [
+          data[i],
+          data[i + 1],
+          data[i + 2]
+        ];
+        if (areColorsSimilar(currentColor, fromColor, similarity)) {
+          data[i + 3] = 0; // Set alpha to 0 (transparent)
+        }
+      }
+
+      ctx.putImageData(imageData, 0, 0);
+
+      canvas.toBlob((blob) => {
+        if (blob) {
+          const newFile = new File([blob], file.name, { type: 'image/png' });
+          setResult(newFile);
+        }
+      }, 'image/png');
+    };
+
+    processImage(input, fromRgb, Number(similarity));
+  };
+
+  return (
+    <Box>
+      <ToolInputAndResult
+        input={
+          <ToolFileInput
+            value={input}
+            onChange={setInput}
+            accept={['image/png']}
+            title={'Input PNG'}
+          />
+        }
+        result={
+          <ToolFileResult
+            title={'Transparent PNG'}
+            value={result}
+            extension={'png'}
+          />
+        }
+      />
+      <ToolOptions
+        compute={compute}
+        getGroups={({ values, updateField }) => [
+          {
+            title: 'From color and similarity',
+            component: (
+              <Box>
+                <ColorSelector
+                  value={values.fromColor}
+                  onColorChange={(val) => updateField('fromColor', val)}
+                  description={'Replace this color (from color)'}
+                  inputProps={{ 'data-testid': 'color-input' }}
+                />
+                <TextFieldWithDesc
+                  value={values.similarity}
+                  onOwnChange={(val) => updateField('similarity', val)}
+                  description={
+                    'Match this % of similar colors of the from color. For example, 10% white will match white and a little bit of gray.'
+                  }
+                />
+              </Box>
+            )
+          }
+        ]}
+        initialValues={initialValues}
+        input={input}
+      />
+    </Box>
+  );
+}

src/pages/tools/image/png/create-transparent/meta.ts

@@ -0,0 +1,14 @@
+import { defineTool } from '@tools/defineTool';
+import { lazy } from 'react';
+import image from '@assets/image.png';
+
+export const tool = defineTool('png', {
+  name: 'Create transparent PNG',
+  path: 'create-transparent',
+  image,
+  shortDescription: 'Quickly make a PNG image transparent',
+  description:
+    "World's simplest online Portable Network Graphics transparency maker. Just import your PNG image in the editor on the left and you will instantly get a transparent PNG on the right. Free, quick, and very powerful. Import a PNG – get a transparent PNG.",
+  keywords: ['create', 'transparent'],
+  component: lazy(() => import('./index'))
+});

src/pages/tools/image/png/index.ts

@@ -0,0 +1,9 @@
+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,
+  convertJgpToPng
+];