chore: move from png to image-generic

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

@@ -0,0 +1,41 @@
+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('/image-generic/create-transparent');
+  });
+
+  //TODO check why failing
+  // 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/generic/create-transparent/index.tsx

@@ -0,0 +1,138 @@
+import { Box } from '@mui/material';
+import React, { useState } from 'react';
+import * as Yup from 'yup';
+import ToolImageInput from '@components/input/ToolImageInput';
+import ToolFileResult from '@components/result/ToolFileResult';
+import ColorSelector from '@components/options/ColorSelector';
+import Color from 'color';
+import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
+import { areColorsSimilar } from 'utils/color';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
+import { GetGroupsType } from '@components/options/ToolOptions';
+
+const initialValues = {
+  fromColor: 'white',
+  similarity: '10'
+};
+
+const validationSchema = Yup.object({
+  // splitSeparator: Yup.string().required('The separator is required')
+});
+
+export default function CreateTransparent({ title }: ToolComponentProps) {
+  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));
+  };
+
+  const getGroups: GetGroupsType<typeof initialValues> = ({
+    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>
+      )
+    }
+  ];
+
+  return (
+    <ToolContent
+      title={title}
+      inputComponent={
+        <ToolImageInput
+          value={input}
+          onChange={setInput}
+          accept={['image/*']}
+          title={'Input image'}
+        />
+      }
+      resultComponent={
+        <ToolFileResult
+          title={'Transparent PNG'}
+          value={result}
+          extension={'png'}
+        />
+      }
+      initialValues={initialValues}
+      getGroups={getGroups}
+      compute={compute}
+      input={input}
+      validationSchema={validationSchema}
+      toolInfo={{
+        title: 'Create Transparent PNG',
+        description:
+          'This tool allows you to make specific colors in an image transparent. You can select the color to replace and adjust the similarity threshold to include similar colors.'
+      }}
+    />
+  );
+}

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

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