+ {
+ return new Promise((resolve, reject) => {
+ // Validate file type
+ if (!file.type.startsWith('image/')) {
+ reject(new Error('File must be an image'));
+ return;
+ }
+
+ // Check file size (limit to 10MB)
+ const maxSize = 10 * 1024 * 1024; // 10MB
+ if (file.size > maxSize) {
+ reject(new Error('Image file size must be less than 10MB'));
+ return;
+ }
+
+ const reader = new FileReader();
+
+ reader.onload = () => {
+ const img = new Image();
+ img.src = reader.result as string;
+
+ img.onload = () => {
+ try {
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+
+ if (!ctx) {
+ reject(new Error('Failed to get canvas context'));
+ return;
+ }
+
+ canvas.width = img.width;
+ canvas.height = img.height;
+
+ // Draw the original image
+ ctx.drawImage(img, 0, 0);
+
+ // Get image data
+ const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ const data = imageData.data;
+
+ // Invert colors (RGB channels only, preserve alpha)
+ for (let i = 0; i < data.length; i += 4) {
+ data[i] = 255 - data[i]; // Red
+ data[i + 1] = 255 - data[i + 1]; // Green
+ data[i + 2] = 255 - data[i + 2]; // Blue
+ // data[i + 3] is alpha - keep unchanged
+ }
+
+ // Put the modified image data back
+ ctx.putImageData(imageData, 0, 0);
+
+ // Convert to base64 PNG
+ const invertedDataUrl = canvas.toDataURL('image/png');
+ resolve(invertedDataUrl);
+ }
+ catch (err) {
+ reject(new Error(`Failed to process image: ${err}`));
+ }
+ };
+
+ img.onerror = () => {
+ reject(new Error('Failed to load image'));
+ };
+ };
+
+ reader.onerror = () => {
+ reject(new Error('Failed to read file'));
+ };
+
+ reader.readAsDataURL(file);
+ });
+}
+
+export function invertImageColors(imageData: ImageData): ImageData {
+ const data = new Uint8ClampedArray(imageData.data);
+
+ // Invert RGB values while preserving alpha
+ for (let i = 0; i < data.length; i += 4) {
+ data[i] = 255 - data[i]; // Red
+ data[i + 1] = 255 - data[i + 1]; // Green
+ data[i + 2] = 255 - data[i + 2]; // Blue
+ // data[i + 3] is alpha - keep unchanged
+ }
+
+ return new ImageData(data, imageData.width, imageData.height);
+}
diff --git a/src/tools/image-color-inverter/image-color-inverter.vue b/src/tools/image-color-inverter/image-color-inverter.vue
new file mode 100644
index 00000000..d6a783cc
--- /dev/null
+++ b/src/tools/image-color-inverter/image-color-inverter.vue
@@ -0,0 +1,129 @@
+
+
+
+
+
+
+ {{ error }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/tools/image-color-inverter/index.ts b/src/tools/image-color-inverter/index.ts
new file mode 100644
index 00000000..c407d2a5
--- /dev/null
+++ b/src/tools/image-color-inverter/index.ts
@@ -0,0 +1,13 @@
+import { Palette } from '@vicons/tabler';
+import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
+
+export const tool = defineTool({
+ name: translate('tools.image-color-inverter.title'),
+ path: '/image-color-inverter',
+ description: translate('tools.image-color-inverter.description'),
+ keywords: ['image', 'color', 'invert', 'negative', 'photo', 'filter', 'effect', 'png', 'jpg', 'jpeg'],
+ component: () => import('./image-color-inverter.vue'),
+ icon: Palette,
+ createdAt: new Date('2025-08-25'),
+});
diff --git a/src/tools/index.ts b/src/tools/index.ts
index 388cfaf4..caddda37 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -1,6 +1,7 @@
import { tool as base64FileConverter } from './base64-file-converter';
import { tool as base64StringConverter } from './base64-string-converter';
import { tool as basicAuthGenerator } from './basic-auth-generator';
+import { tool as imageColorInverter } from './image-color-inverter';
import { tool as emailNormalizer } from './email-normalizer';
import { tool as asciiTextDrawer } from './ascii-text-drawer';
@@ -91,7 +92,19 @@ import { tool as yamlViewer } from './yaml-viewer';
export const toolsByCategory: ToolCategory[] = [
{
name: 'Crypto',
- components: [tokenGenerator, hashText, bcrypt, uuidGenerator, ulidGenerator, cypher, bip39, hmacGenerator, rsaKeyPairGenerator, passwordStrengthAnalyser, pdfSignatureChecker],
+ components: [
+ tokenGenerator,
+ hashText,
+ bcrypt,
+ uuidGenerator,
+ ulidGenerator,
+ cypher,
+ bip39,
+ hmacGenerator,
+ rsaKeyPairGenerator,
+ passwordStrengthAnalyser,
+ pdfSignatureChecker,
+ ],
},
{
name: 'Converter',
@@ -141,7 +154,7 @@ export const toolsByCategory: ToolCategory[] = [
},
{
name: 'Images and videos',
- components: [qrCodeGenerator, wifiQrCodeGenerator, svgPlaceholderGenerator, cameraRecorder],
+ components: [qrCodeGenerator, wifiQrCodeGenerator, svgPlaceholderGenerator, cameraRecorder, imageColorInverter],
},
{
name: 'Development',
@@ -164,7 +177,14 @@ export const toolsByCategory: ToolCategory[] = [
},
{
name: 'Network',
- components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, macAddressGenerator, ipv6UlaGenerator],
+ components: [
+ ipv4SubnetCalculator,
+ ipv4AddressConverter,
+ ipv4RangeExpander,
+ macAddressLookup,
+ macAddressGenerator,
+ ipv6UlaGenerator,
+ ],
},
{
name: 'Math',
diff --git a/src/ui/c-select/c-select.vue b/src/ui/c-select/c-select.vue
index 7b3607c9..38e2eb8f 100644
--- a/src/ui/c-select/c-select.vue
+++ b/src/ui/c-select/c-select.vue
@@ -151,7 +151,7 @@ function onSearchInput() {
>
-
+
{{ selectedOption.label }}
diff --git a/src/ui/c-table/c-table.vue b/src/ui/c-table/c-table.vue
index ef569890..43293ab3 100644
--- a/src/ui/c-table/c-table.vue
+++ b/src/ui/c-table/c-table.vue
@@ -39,7 +39,7 @@ const headers = computed(() => {
-
+
{{ category }}
+ Original Image
+
+
+ ![Original]()
+
+
+ Inverted Image
+
+
+ Download PNG
+
+
+ Copy Base64
+
+
+
+
+ ![Inverted]()
+
+
+
+ Clear & Upload New
+
+
+ | {{ header.label }} |
|---|