feat: change pgn opacity

src/pages/tools/image/png/change-opacity/index.tsx

@@ -7,13 +7,29 @@ import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
 import { CardExampleType } from '@components/examples/ToolExamples';
 import { ToolComponentProps } from '@tools/defineTool';
 import { updateNumberField } from '@utils/string';
+import { Box } from '@mui/material';
+import SimpleRadio from '@components/options/SimpleRadio';
 
 type InitialValuesType = {
   opacity: number;
+  mode: 'solid' | 'gradient';
+  gradientType: 'linear' | 'radial';
+  gradientDirection: 'left-to-right' | 'inside-out';
+  areaLeft: number;
+  areaTop: number;
+  areaWidth: number;
+  areaHeight: number;
 };
 
 const initialValues: InitialValuesType = {
-  opacity: 1
+  opacity: 0.5,
+  mode: 'solid',
+  gradientType: 'linear',
+  gradientDirection: 'left-to-right',
+  areaLeft: 0,
+  areaTop: 0,
+  areaWidth: 100,
+  areaHeight: 100
 };
 
 const exampleCards: CardExampleType<InitialValuesType>[] = [
@@ -21,7 +37,14 @@ const exampleCards: CardExampleType<InitialValuesType>[] = [
     title: 'Semi-transparent PNG',
     description: 'Make an image 50% transparent',
     sampleOptions: {
-      opacity: 0.5
+      opacity: 0.5,
+      mode: 'solid',
+      gradientType: 'linear',
+      gradientDirection: 'left-to-right',
+      areaLeft: 0,
+      areaTop: 0,
+      areaWidth: 100,
+      areaHeight: 100
     },
     sampleResult: ''
   },
@@ -29,7 +52,29 @@ const exampleCards: CardExampleType<InitialValuesType>[] = [
     title: 'Slightly Faded PNG',
     description: 'Create a subtle transparency effect',
     sampleOptions: {
-      opacity: 0.8
+      opacity: 0.8,
+      mode: 'solid',
+      gradientType: 'linear',
+      gradientDirection: 'left-to-right',
+      areaLeft: 0,
+      areaTop: 0,
+      areaWidth: 100,
+      areaHeight: 100
+    },
+    sampleResult: ''
+  },
+  {
+    title: 'Radial Gradient Opacity',
+    description: 'Apply a radial gradient opacity effect',
+    sampleOptions: {
+      opacity: 0.8,
+      mode: 'gradient',
+      gradientType: 'radial',
+      gradientDirection: 'inside-out',
+      areaLeft: 25,
+      areaTop: 25,
+      areaWidth: 50,
+      areaHeight: 50
     },
     sampleResult: ''
   }
@@ -41,7 +86,7 @@ export default function ChangeOpacity({ title }: ToolComponentProps) {
 
   const compute = (values: InitialValuesType, input: any) => {
     if (input) {
-      changeOpacity(input, values.opacity).then(setResult);
+      changeOpacity(input, values).then(setResult);
     }
   };
   return (
@@ -64,20 +109,92 @@ export default function ChangeOpacity({ title }: ToolComponentProps) {
         />
       }
       initialValues={initialValues}
-      exampleCards={exampleCards}
+      // exampleCards={exampleCards}
       getGroups={({ values, updateField }) => [
         {
           title: 'Opacity Settings',
           component: (
-            <TextFieldWithDesc
-              description="Set opacity between 0 (transparent) and 1 (opaque)"
-              value={values.opacity}
-              onOwnChange={(val) =>
-                updateNumberField(val, 'opacity', updateField)
-              }
-              type="number"
-              inputProps={{ step: 0.1, min: 0, max: 1 }}
-            />
+            <Box>
+              <TextFieldWithDesc
+                description="Set opacity between 0 (transparent) and 1 (opaque)"
+                value={values.opacity}
+                onOwnChange={(val) =>
+                  updateNumberField(val, 'opacity', updateField)
+                }
+                type="number"
+                inputProps={{ step: 0.1, min: 0, max: 1 }}
+              />
+              <SimpleRadio
+                onClick={() => updateField('mode', 'solid')}
+                checked={values.mode === 'solid'}
+                description={'Set the same opacity level for all pixels'}
+                title={'Apply Solid Opacity'}
+              />
+              <SimpleRadio
+                onClick={() => updateField('mode', 'gradient')}
+                checked={values.mode === 'gradient'}
+                description={'Change opacity in a gradient'}
+                title={'Apply Gradient Opacity'}
+              />
+            </Box>
+          )
+        },
+        {
+          title: 'Gradient Options',
+          component: (
+            <Box>
+              <SimpleRadio
+                onClick={() => updateField('gradientType', 'linear')}
+                checked={values.gradientType === 'linear'}
+                description={'Linear opacity direction'}
+                title={'Linear Gradient'}
+              />
+              <SimpleRadio
+                onClick={() => updateField('gradientType', 'radial')}
+                checked={values.gradientType === 'radial'}
+                description={'Radial opacity direction'}
+                title={'Radial Gradient'}
+              />
+            </Box>
+          )
+        },
+        {
+          title: 'Opacity Area',
+          component: (
+            <Box>
+              <TextFieldWithDesc
+                description="Left position"
+                value={values.areaLeft}
+                onOwnChange={(val) =>
+                  updateNumberField(val, 'areaLeft', updateField)
+                }
+                type="number"
+              />
+              <TextFieldWithDesc
+                description="Top position"
+                value={values.areaTop}
+                onOwnChange={(val) =>
+                  updateNumberField(val, 'areaTop', updateField)
+                }
+                type="number"
+              />
+              <TextFieldWithDesc
+                description="Width"
+                value={values.areaWidth}
+                onOwnChange={(val) =>
+                  updateNumberField(val, 'areaWidth', updateField)
+                }
+                type="number"
+              />
+              <TextFieldWithDesc
+                description="Height"
+                value={values.areaHeight}
+                onOwnChange={(val) =>
+                  updateNumberField(val, 'areaHeight', updateField)
+                }
+                type="number"
+              />
+            </Box>
           )
         }
       ]}

src/pages/tools/image/png/change-opacity/service.ts

@@ -1,7 +1,15 @@
-export async function changeOpacity(
-  file: File,
-  opacity: number
-): Promise<File> {
+interface OpacityOptions {
+  opacity: number;
+  mode: 'solid' | 'gradient';
+  gradientType: 'linear' | 'radial';
+  gradientDirection: 'left-to-right' | 'inside-out';
+  areaLeft: number;
+  areaTop: number;
+  areaWidth: number;
+  areaHeight: number;
+}
+
+export async function changeOpacity(file: File, options: OpacityOptions): Promise<File> {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
     reader.onload = (event) => {
@@ -13,13 +21,14 @@ export async function changeOpacity(
           reject(new Error('Canvas context not supported'));
           return;
         }
-
         canvas.width = img.width;
         canvas.height = img.height;
 
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.globalAlpha = opacity;
-        ctx.drawImage(img, 0, 0);
+        if (options.mode === 'solid') {
+          applySolidOpacity(ctx, img, options);
+        } else {
+          applyGradientOpacity(ctx, img, options);
+        }
 
         canvas.toBlob((blob) => {
           if (blob) {
@@ -31,9 +40,82 @@ export async function changeOpacity(
         }, 'image/png');
       };
       img.onerror = () => reject(new Error('Failed to load image'));
-      img.src = <string>event.target?.result;
+      img.src = event.target?.result as string;
     };
     reader.onerror = () => reject(new Error('Failed to read file'));
     reader.readAsDataURL(file);
   });
 }
+
+function applySolidOpacity(
+  ctx: CanvasRenderingContext2D,
+  img: HTMLImageElement,
+  options: OpacityOptions
+) {
+  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+  ctx.globalAlpha = options.opacity;
+  ctx.drawImage(img, 0, 0);
+}
+
+function applyGradientOpacity(
+  ctx: CanvasRenderingContext2D,
+  img: HTMLImageElement,
+  options: OpacityOptions
+) {
+  const { areaLeft, areaTop, areaWidth, areaHeight } = options;
+
+  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+  ctx.drawImage(img, 0, 0);
+
+  const gradient = options.gradientType === 'linear'
+    ? createLinearGradient(ctx, options)
+    : createRadialGradient(ctx, options);
+
+  ctx.fillStyle = gradient;
+  ctx.fillRect(areaLeft, areaTop, areaWidth, areaHeight);
+}
+
+function createLinearGradient(
+  ctx: CanvasRenderingContext2D,
+  options: OpacityOptions
+) {
+  const { areaLeft, areaTop, areaWidth, areaHeight } = options;
+  const gradient = ctx.createLinearGradient(
+    areaLeft,
+    areaTop,
+    areaLeft + areaWidth,
+    areaTop
+  );
+  gradient.addColorStop(0, `rgba(255,255,255,${options.opacity})`);
+  gradient.addColorStop(1, 'rgba(255,255,255,0)');
+  return gradient;
+}
+
+function createRadialGradient(
+  ctx: CanvasRenderingContext2D,
+  options: OpacityOptions
+) {
+  const { areaLeft, areaTop, areaWidth, areaHeight } = options;
+  const centerX = areaLeft + areaWidth / 2;
+  const centerY = areaTop + areaHeight / 2;
+  const radius = Math.min(areaWidth, areaHeight) / 2;
+
+  const gradient = ctx.createRadialGradient(
+    centerX,
+    centerY,
+    0,
+    centerX,
+    centerY,
+    radius
+  );
+
+  if (options.gradientDirection === 'inside-out') {
+    gradient.addColorStop(0, `rgba(255,255,255,${options.opacity})`);
+    gradient.addColorStop(1, 'rgba(255,255,255,0)');
+  } else {
+    gradient.addColorStop(0, 'rgba(255,255,255,0)');
+    gradient.addColorStop(1, `rgba(255,255,255,${options.opacity})`);
+  }
+
+  return gradient;
+}