feat: change colors in png

src/components/input/ToolFileInput.tsx

@@ -5,6 +5,7 @@ import InputHeader from '../InputHeader';
 import InputFooter from './InputFooter';
 import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
 import greyPattern from '@assets/grey-pattern.png';
+import { globalInputHeight } from '../../config/uiConfig';
 
 interface ToolFileInputProps {
   value: File | null;
@@ -57,7 +58,7 @@ export default function ToolFileInput({
       <Box
         sx={{
           width: '100%',
-          height: 250,
+          height: globalInputHeight,
           border: preview ? 0 : 1,
           borderRadius: 2,
           boxShadow: '5'
@@ -77,7 +78,7 @@ export default function ToolFileInput({
             <img
               src={preview}
               alt="Preview"
-              style={{ maxWidth: '100%', maxHeight: 250 }}
+              style={{ maxWidth: '100%', maxHeight: globalInputHeight }}
             />
           </Box>
         ) : (

src/components/options/ColorSelector.tsx

@@ -0,0 +1,48 @@
+import React, { useState, ChangeEvent, useRef } from 'react';
+import { Box, Stack, TextField } from '@mui/material';
+import PaletteIcon from '@mui/icons-material/Palette';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import { descriptionFontSize } from '../../config/uiConfig';
+
+interface ColorSelectorProps {
+  value: string;
+  onChange: (val: string) => void;
+  description: string;
+}
+
+const ColorSelector: React.FC<ColorSelectorProps> = ({
+  value = '#ffffff',
+  onChange,
+  description
+}) => {
+  const [color, setColor] = useState<string>(value);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleColorChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const val = event.target.value;
+    setColor(val);
+    onChange(val);
+  };
+
+  return (
+    <Box mb={1}>
+      <Stack direction={'row'}>
+        <TextField value={color} onChange={handleColorChange} />
+        <IconButton onClick={() => inputRef.current?.click()}>
+          <PaletteIcon />
+        </IconButton>
+        <TextField
+          style={{ display: 'none' }}
+          inputRef={inputRef}
+          type="color"
+          value={color}
+          onChange={handleColorChange}
+        />
+      </Stack>
+      <Typography fontSize={descriptionFontSize}>{description}</Typography>
+    </Box>
+  );
+};
+
+export default ColorSelector;

src/components/result/ToolFileResult.tsx

@@ -2,6 +2,7 @@ import { Box } from '@mui/material';
 import React from 'react';
 import InputHeader from '../InputHeader';
 import greyPattern from '@assets/grey-pattern.png';
+import { globalInputHeight } from '../../config/uiConfig';
 
 export default function ToolFileResult({
   title = 'Result',
@@ -29,7 +30,7 @@ export default function ToolFileResult({
       <Box
         sx={{
           width: '100%',
-          height: 250,
+          height: globalInputHeight,
           border: preview ? 0 : 1,
           borderRadius: 2,
           boxShadow: '5'
@@ -49,7 +50,7 @@ export default function ToolFileResult({
             <img
               src={preview}
               alt="Result"
-              style={{ maxWidth: '100%', maxHeight: 250 }}
+              style={{ maxWidth: '100%', maxHeight: globalInputHeight }}
             />
           </Box>
         )}

src/config/uiConfig.ts

@@ -0,0 +1,2 @@
+export const globalInputHeight = 300;
+export const descriptionFontSize = 12;

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

@@ -1,14 +1,18 @@
-import { Box } from '@mui/material';
+import { Box, Stack } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 import * as Yup from 'yup';
 import Grid from '@mui/material/Grid';
-import ToolTextInput from '../../../../components/input/ToolTextInput';
-import ToolTextResult from '../../../../components/result/ToolTextResult';
 import ToolFileInput from '../../../../components/input/ToolFileInput';
 import ToolFileResult from '../../../../components/result/ToolFileResult';
+import ToolOptions from '../../../../components/options/ToolOptions';
+import Typography from '@mui/material/Typography';
+import { Formik, useFormikContext } from 'formik';
+import ColorSelector from '../../../../components/options/ColorSelector';
+import Color from 'color';
 
 const initialValues = {
-  rgba: [0, 0, 0, 0]
+  fromColor: 'white',
+  toColor: 'black'
 };
 const validationSchema = Yup.object({
   // splitSeparator: Yup.string().required('The separator is required')
@@ -17,9 +21,27 @@ export default function ChangeColorsInPng() {
   const [input, setInput] = useState<File | null>(null);
   const [result, setResult] = useState<File | null>(null);
 
-  useEffect(() => {
-    if (input) {
-      const processImage = async (file: File) => {
+  const FormikListenerComponent = ({ input }: { input: File }) => {
+    const { values } = useFormikContext<typeof initialValues>();
+    const { fromColor, toColor } = values;
+
+    useEffect(() => {
+      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;
@@ -34,12 +56,28 @@ export default function ChangeColorsInPng() {
 
         const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
         const data: Uint8ClampedArray = imageData.data;
+
+        const colorDistance = (
+          c1: [number, number, number],
+          c2: [number, number, number]
+        ) => {
+          return Math.sqrt(
+            Math.pow(c1[0] - c2[0], 2) +
+              Math.pow(c1[1] - c2[1], 2) +
+              Math.pow(c1[2] - c2[2], 2)
+          );
+        };
+
         for (let i = 0; i < data.length; i += 4) {
-          // Check for white pixel
-          if (data[i] === 255 && data[i + 1] === 255 && data[i + 2] === 255) {
-            data[i] = 255; // Red
-            data[i + 1] = 0; // Green
-            data[i + 2] = 0; // Blue
+          const currentColor: [number, number, number] = [
+            data[i],
+            data[i + 1],
+            data[i + 2]
+          ];
+          if (colorDistance(currentColor, fromColor) <= similarity) {
+            data[i] = toColor[0]; // Red
+            data[i + 1] = toColor[1]; // Green
+            data[i + 2] = toColor[2]; // Blue
           }
         }
 
@@ -53,9 +91,12 @@ export default function ChangeColorsInPng() {
         }, 'image/png');
       };
 
-      processImage(input);
-    }
-  }, [input]);
+      processImage(input, fromRgb, toRgb, 10);
+    }, [input, fromColor, toColor]);
+
+    return null;
+  };
+
   return (
     <Box>
       <Grid container spacing={2}>
@@ -71,6 +112,33 @@ export default function ChangeColorsInPng() {
           <ToolFileResult title={'Output PNG with new colors'} value={result} />
         </Grid>
       </Grid>
+      <ToolOptions>
+        <Formik
+          initialValues={initialValues}
+          validationSchema={validationSchema}
+          onSubmit={() => {}}
+        >
+          {({ setFieldValue, values }) => (
+            <Stack direction={'row'} spacing={2}>
+              {input && <FormikListenerComponent input={input} />}
+              <Box>
+                <Typography fontSize={22}>From color and to color</Typography>
+                <ColorSelector
+                  value={values.fromColor}
+                  onChange={(val) => setFieldValue('fromColor', val)}
+                  description={'Replace this color (from color)'}
+                />
+                <ColorSelector
+                  value={values.toColor}
+                  onChange={(val) => setFieldValue('toColor', val)}
+                  description={'With this color (to color).\n'}
+                />
+              </Box>
+              <Box></Box>
+            </Stack>
+          )}
+        </Formik>
+      </ToolOptions>
     </Box>
   );
 }

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

@@ -6,7 +6,8 @@ export const tool = defineTool('png', {
   name: 'Change colors in png',
   path: 'change-colors-in-png',
   image,
-  description: '',
+  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.",
   keywords: ['change', 'colors', 'in', 'png'],
   component: lazy(() => import('./index'))
 });