feat: svg change colors

src/pages/tools/image/generic/change-colors/index.tsx

@@ -0,0 +1,93 @@
+import { Box } from '@mui/material';
+import React, { useState } from 'react';
+import * as Yup from 'yup';
+import ToolFileResult from '@components/result/ToolFileResult';
+import { GetGroupsType } from '@components/options/ToolOptions';
+import ColorSelector from '@components/options/ColorSelector';
+import Color from 'color';
+import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
+import ToolImageInput from '@components/input/ToolImageInput';
+import { processImage } from './service';
+
+const initialValues = {
+  fromColor: 'white',
+  toColor: 'black',
+  similarity: '10'
+};
+const validationSchema = Yup.object({
+  // splitSeparator: Yup.string().required('The separator is required')
+});
+export default function ChangeColorsInImage({ 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, 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;
+    }
+
+    processImage(input, fromRgb, toRgb, Number(similarity), setResult);
+  };
+
+  const getGroups: GetGroupsType<typeof initialValues> = ({
+    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>
+      )
+    }
+  ];
+  return (
+    <ToolContent
+      title={title}
+      initialValues={initialValues}
+      getGroups={getGroups}
+      compute={compute}
+      input={input}
+      validationSchema={validationSchema}
+      inputComponent={
+        <ToolImageInput
+          value={input}
+          onChange={setInput}
+          accept={['image/*']}
+          title={'Input image'}
+        />
+      }
+      resultComponent={<ToolFileResult title={'Result image'} value={result} />}
+    />
+  );
+}

src/pages/tools/image/generic/change-colors/meta.ts

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

src/pages/tools/image/generic/change-colors/service.ts

@@ -0,0 +1,169 @@
+import { areColorsSimilar } from '@utils/color';
+
+export const processImage = async (
+  file: File,
+  fromColor: [number, number, number],
+  toColor: [number, number, number],
+  similarity: number,
+  setResult: (result: File | null) => void
+): Promise<void> => {
+  if (file.type === 'image/svg+xml') {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      if (!e.target?.result) return;
+
+      let svgContent = e.target.result as string;
+      const toColorHex = rgbToHex(toColor[0], toColor[1], toColor[2]);
+
+      // Replace hex colors with various formats (#fff, #ffffff)
+      const hexRegexShort = new RegExp(`#[0-9a-f]{3}\\b`, 'gi');
+      const hexRegexLong = new RegExp(`#[0-9a-f]{6}\\b`, 'gi');
+
+      svgContent = svgContent.replace(hexRegexShort, (match) => {
+        // Expand short hex to full form for comparison
+        const expanded =
+          '#' + match[1] + match[1] + match[2] + match[2] + match[3] + match[3];
+        const matchRgb = hexToRgb(expanded);
+        if (matchRgb && areColorsSimilar(matchRgb, fromColor, similarity)) {
+          return toColorHex;
+        }
+        return match;
+      });
+
+      svgContent = svgContent.replace(hexRegexLong, (match) => {
+        const matchRgb = hexToRgb(match);
+        if (matchRgb && areColorsSimilar(matchRgb, fromColor, similarity)) {
+          return toColorHex;
+        }
+        return match;
+      });
+
+      // Replace RGB colors
+      const rgbRegex = new RegExp(
+        `rgb\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*\\)`,
+        'gi'
+      );
+      svgContent = svgContent.replace(rgbRegex, (match, r, g, b) => {
+        const matchRgb: [number, number, number] = [
+          parseInt(r),
+          parseInt(g),
+          parseInt(b)
+        ];
+        if (areColorsSimilar(matchRgb, fromColor, similarity)) {
+          return `rgb(${toColor[0]}, ${toColor[1]}, ${toColor[2]})`;
+        }
+        return match;
+      });
+
+      // Replace RGBA colors (preserving alpha)
+      const rgbaRegex = new RegExp(
+        `rgba\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*([\\d.]+)\\s*\\)`,
+        'gi'
+      );
+      svgContent = svgContent.replace(rgbaRegex, (match, r, g, b, a) => {
+        const matchRgb: [number, number, number] = [
+          parseInt(r),
+          parseInt(g),
+          parseInt(b)
+        ];
+        if (areColorsSimilar(matchRgb, fromColor, similarity)) {
+          return `rgba(${toColor[0]}, ${toColor[1]}, ${toColor[2]}, ${a})`;
+        }
+        return match;
+      });
+
+      // Replace named SVG colors if they match our target color
+      const namedColors = {
+        red: [255, 0, 0],
+        green: [0, 128, 0],
+        blue: [0, 0, 255],
+        black: [0, 0, 0],
+        white: [255, 255, 255]
+        // Add more named colors as needed
+      };
+
+      Object.entries(namedColors).forEach(([name, rgb]) => {
+        if (
+          areColorsSimilar(
+            rgb as [number, number, number],
+            fromColor,
+            similarity
+          )
+        ) {
+          const colorRegex = new RegExp(`\\b${name}\\b`, 'gi');
+          svgContent = svgContent.replace(colorRegex, toColorHex);
+        }
+      });
+
+      // Create new file with modified content
+      const newFile = new File([svgContent], file.name, {
+        type: 'image/svg+xml'
+      });
+      setResult(newFile);
+    };
+    reader.readAsText(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);
+
+  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: file.type
+      });
+      setResult(newFile);
+    }
+  }, file.type);
+};
+
+const rgbToHex = (r: number, g: number, b: number): string => {
+  return (
+    '#' +
+    [r, g, b]
+      .map((x) => {
+        const hex = x.toString(16);
+        return hex.length === 1 ? '0' + hex : hex;
+      })
+      .join('')
+  );
+};
+
+// Helper function to parse hex to RGB
+const hexToRgb = (hex: string): [number, number, number] | null => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? [
+        parseInt(result[1], 16),
+        parseInt(result[2], 16),
+        parseInt(result[3], 16)
+      ]
+    : null;
+};

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

@@ -1,4 +1,5 @@
 import { tool as resizeImage } from './resize/meta';
 import { tool as compressImage } from './compress/meta';
+import { tool as changeColors } from './change-colors/meta';
 
-export const imageGenericTools = [resizeImage, compressImage];
+export const imageGenericTools = [resizeImage, compressImage, changeColors];