From a455ee0a8f33898ec5a9940ad85ae6891100b290 Mon Sep 17 00:00:00 2001
From: Chris Tran <6634746+sYnVerse@users.noreply.github.com>
Date: Sat, 6 Jun 2026 14:21:41 -0700
Subject: [PATCH 1/6] Add crop-image tool

Introduce a new Crop Image tool: adds an interactive Vue cropper component (src/tools/crop-image/crop-image.vue) with drag/drop upload, viewport cropping, zoom, rotation, horizontal/vertical flip, aspect-ratio presets/custom ratio, rule-of-thirds grid, background color, and export options (PNG/JPEG/WebP, quality and width modes). Also adds tool registration (src/tools/crop-image/index.ts), a placeholder service (crop-image.service.ts), a Vitest unit test (crop-image.service.test.ts) and a Playwright e2e spec stub (crop-image.e2e.spec.ts).
---
 src/tools/crop-image/crop-image.e2e.spec.ts   |  15 +
 .../crop-image/crop-image.service.test.ts     |   7 +
 src/tools/crop-image/crop-image.service.ts    |   0
 src/tools/crop-image/crop-image.vue           | 604 ++++++++++++++++++
 src/tools/crop-image/index.ts                 |  14 +
 5 files changed, 640 insertions(+)
 create mode 100644 src/tools/crop-image/crop-image.e2e.spec.ts
 create mode 100644 src/tools/crop-image/crop-image.service.test.ts
 create mode 100644 src/tools/crop-image/crop-image.service.ts
 create mode 100644 src/tools/crop-image/crop-image.vue
 create mode 100644 src/tools/crop-image/index.ts

diff --git a/src/tools/crop-image/crop-image.e2e.spec.ts b/src/tools/crop-image/crop-image.e2e.spec.ts
new file mode 100644
index 0000000000..e614293fab
--- /dev/null
+++ b/src/tools/crop-image/crop-image.e2e.spec.ts
@@ -0,0 +1,15 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Tool - Crop image', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/crop-image');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('Crop image - IT Tools');
+  });
+
+  test('', async ({ page }) => {
+
+  });
+});
diff --git a/src/tools/crop-image/crop-image.service.test.ts b/src/tools/crop-image/crop-image.service.test.ts
new file mode 100644
index 0000000000..451fbde1d1
--- /dev/null
+++ b/src/tools/crop-image/crop-image.service.test.ts
@@ -0,0 +1,7 @@
+import { describe, expect, it } from 'vitest';
+
+describe('crop-image service', () => {
+  it('should pass', () => {
+    expect(true).toBe(true);
+  });
+});
diff --git a/src/tools/crop-image/crop-image.service.ts b/src/tools/crop-image/crop-image.service.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/tools/crop-image/crop-image.vue b/src/tools/crop-image/crop-image.vue
new file mode 100644
index 0000000000..d5f5300729
--- /dev/null
+++ b/src/tools/crop-image/crop-image.vue
@@ -0,0 +1,604 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue';
+import {
+  Download,
+  FlipHorizontal,
+  FlipVertical,
+  Focus,
+  Maximize,
+  Refresh,
+  Rotate,
+  RotateClockwise,
+} from '@vicons/tabler';
+
+// Image references
+const imageSrc = ref<string | null>(null);
+const fileName = ref<string>('image');
+const fileType = ref<string>('image/png');
+
+// Image dimensions and position
+const imgNaturalWidth = ref(0);
+const imgNaturalHeight = ref(0);
+const zoom = ref(1.0);
+const rotation = ref(0); // in degrees
+const offsetX = ref(0);
+const offsetY = ref(0);
+const flipH = ref(false);
+const flipV = ref(false);
+
+// Background and UI settings
+const backgroundColor = ref('#00000000'); // hex or rgba/hsla
+const aspectRatio = ref<string>('1'); // presets: '1', '1.777777778' (16:9), '0.5625' (9:16), '1.333333333' (4:3), '1.5' (3:2), 'original', 'free'
+const customRatioWidth = ref(4);
+const customRatioHeight = ref(3);
+const showGrid = ref(true);
+
+// Export settings
+const exportFormat = ref<'png' | 'jpeg' | 'webp'>('png');
+const exportQuality = ref(0.9);
+const exportWidthMode = ref<'original' | 'viewport' | 'custom'>('original');
+const customExportWidth = ref(1024);
+
+// Dragging state
+const isDragging = ref(false);
+let startPointerX = 0;
+let startPointerY = 0;
+let startOffsetX = 0;
+let startOffsetY = 0;
+
+// Presets for aspect ratios
+const aspectRatioOptions = [
+  { label: '1:1 (Square)', value: '1' },
+  { label: '16:9 (Widescreen)', value: '1.777777778' },
+  { label: '9:16 (Portrait)', value: '0.5625' },
+  { label: '4:3 (Standard)', value: '1.333333333' },
+  { label: '3:2 (Photo)', value: '1.5' },
+  { label: 'Original Aspect Ratio', value: 'original' },
+  { label: 'Custom Ratio', value: 'free' },
+];
+
+const exportFormatOptions = [
+  { label: 'PNG', value: 'png' },
+  { label: 'JPEG', value: 'jpeg' },
+  { label: 'WebP', value: 'webp' },
+];
+
+const exportWidthOptions = [
+  { label: 'Original Crop Size', value: 'original' },
+  { label: 'Viewport Size', value: 'viewport' },
+  { label: 'Custom Width', value: 'custom' },
+];
+
+// Computed aspect ratio value
+const currentRatio = computed(() => {
+  if (aspectRatio.value === 'original') {
+    if (imgNaturalWidth.value && imgNaturalHeight.value) {
+      return imgNaturalWidth.value / imgNaturalHeight.value;
+    }
+    return 1;
+  }
+  if (aspectRatio.value === 'free') {
+    const w = customRatioWidth.value || 1;
+    const h = customRatioHeight.value || 1;
+    return w / h;
+  }
+  return Number.parseFloat(aspectRatio.value);
+});
+
+// Viewport width and height (max bounded inside 450x450 box)
+const maxViewportWidth = 450;
+const maxViewportHeight = 450;
+
+const viewportDimensions = computed(() => {
+  const ratio = currentRatio.value;
+  if (ratio >= 1) {
+    return {
+      width: maxViewportWidth,
+      height: maxViewportWidth / ratio,
+    };
+  }
+  else {
+    return {
+      width: maxViewportHeight * ratio,
+      height: maxViewportHeight,
+    };
+  }
+});
+
+// Image base dimensions when fitting cover
+const baseDimensions = computed(() => {
+  const vW = viewportDimensions.value.width;
+  const vH = viewportDimensions.value.height;
+  if (!imgNaturalWidth.value || !imgNaturalHeight.value) {
+    return { width: vW, height: vH };
+  }
+  const vRatio = vW / vH;
+  const iRatio = imgNaturalWidth.value / imgNaturalHeight.value;
+
+  if (iRatio > vRatio) {
+    // Landscape relative to viewport
+    return {
+      width: vH * iRatio,
+      height: vH,
+    };
+  }
+  else {
+    // Portrait relative to viewport
+    return {
+      width: vW,
+      height: vW / iRatio,
+    };
+  }
+});
+
+// Reset image to center with cover scale
+function resetPosition() {
+  zoom.value = 1.0;
+  rotation.value = 0;
+  flipH.value = false;
+  flipV.value = false;
+
+  const vW = viewportDimensions.value.width;
+  const vH = viewportDimensions.value.height;
+  const bW = baseDimensions.value.width;
+  const bH = baseDimensions.value.height;
+
+  offsetX.value = (vW - bW) / 2;
+  offsetY.value = (vH - bH) / 2;
+}
+
+// Fit image entirely inside viewport
+function fitToViewport() {
+  if (!imgNaturalWidth.value || !imgNaturalHeight.value) {
+    return;
+  }
+
+  rotation.value = 0;
+  flipH.value = false;
+  flipV.value = false;
+
+  const vW = viewportDimensions.value.width;
+  const vH = viewportDimensions.value.height;
+  const iRatio = imgNaturalWidth.value / imgNaturalHeight.value;
+  const vRatio = vW / vH;
+
+  let bW = 0;
+
+  if (iRatio > vRatio) {
+    // Fit width
+    bW = vW;
+  }
+  else {
+    // Fit height
+    bW = vH * iRatio;
+  }
+
+  zoom.value = bW / baseDimensions.value.width;
+  offsetX.value = (vW - baseDimensions.value.width * zoom.value) / 2;
+  offsetY.value = (vH - baseDimensions.value.height * zoom.value) / 2;
+}
+
+// Reset when image changes or viewport ratio changes
+watch([imageSrc, aspectRatio], () => {
+  nextTick(() => {
+    resetPosition();
+  });
+});
+
+// Drag and drop image upload
+function onUpload(file: File) {
+  if (!file) {
+    return;
+  }
+  fileName.value = file.name;
+  fileType.value = file.type;
+
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    if (e.target?.result) {
+      const img = new Image();
+      img.onload = () => {
+        imgNaturalWidth.value = img.naturalWidth;
+        imgNaturalHeight.value = img.naturalHeight;
+        imageSrc.value = e.target!.result as string;
+      };
+      img.src = e.target.result as string;
+    }
+  };
+  reader.readAsDataURL(file);
+}
+
+// Handle mouse/touch drag events
+function handlePointerDown(e: MouseEvent | TouchEvent) {
+  if (!imageSrc.value) {
+    return;
+  }
+  e.preventDefault();
+  isDragging.value = true;
+
+  const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+  const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+
+  startPointerX = clientX;
+  startPointerY = clientY;
+  startOffsetX = offsetX.value;
+  startOffsetY = offsetY.value;
+
+  window.addEventListener('mousemove', handlePointerMove);
+  window.addEventListener('mouseup', handlePointerUp);
+  window.addEventListener('touchmove', handlePointerMove, { passive: false });
+  window.addEventListener('touchend', handlePointerUp);
+}
+
+function handlePointerMove(e: MouseEvent | TouchEvent) {
+  if (!isDragging.value) {
+    return;
+  }
+
+  const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+  const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+
+  const dx = clientX - startPointerX;
+  const dy = clientY - startPointerY;
+
+  offsetX.value = startOffsetX + dx;
+  offsetY.value = startOffsetY + dy;
+}
+
+function handlePointerUp() {
+  isDragging.value = false;
+  window.removeEventListener('mousemove', handlePointerMove);
+  window.removeEventListener('mouseup', handlePointerUp);
+  window.removeEventListener('touchmove', handlePointerMove);
+  window.removeEventListener('touchend', handlePointerUp);
+}
+
+// Mouse wheel zoom
+function handleWheel(e: WheelEvent) {
+  if (!imageSrc.value) {
+    return;
+  }
+  e.preventDefault();
+  const zoomStep = 0.05;
+  let newZoom = zoom.value;
+  if (e.deltaY < 0) {
+    newZoom = Math.min(zoom.value + zoomStep, 10.0);
+  }
+  else {
+    newZoom = Math.max(zoom.value - zoomStep, 0.05);
+  }
+  zoom.value = newZoom;
+}
+
+// Draw to Canvas & Trigger Download
+function exportImage() {
+  if (!imageSrc.value) {
+    return;
+  }
+
+  const img = new Image();
+  img.onload = () => {
+    const vW = viewportDimensions.value.width;
+    const vH = viewportDimensions.value.height;
+
+    let canvasWidth = vW;
+    let canvasHeight = vH;
+
+    if (exportWidthMode.value === 'original') {
+      const bW = baseDimensions.value.width;
+      const scaleFactor = imgNaturalWidth.value / bW;
+      canvasWidth = vW * scaleFactor;
+      canvasHeight = vH * scaleFactor;
+    }
+    else if (exportWidthMode.value === 'custom') {
+      canvasWidth = customExportWidth.value;
+      canvasHeight = customExportWidth.value / currentRatio.value;
+    }
+
+    const canvas = document.createElement('canvas');
+    canvas.width = canvasWidth;
+    canvas.height = canvasHeight;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+      return;
+    }
+
+    // Background color
+    if (backgroundColor.value !== '#00000000') {
+      ctx.fillStyle = backgroundColor.value;
+      ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+    }
+    else {
+      ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+    }
+
+    // Replicate CSS: transform-origin center center on an element of size (bW x bH)
+    // CSS computes: T(origin) · translate(ox, oy) · rotate(r) · scale(sx, sy) · T(-origin)
+    // We scale from viewport coordinates to canvas coordinates first.
+    const scaleFactor = canvasWidth / vW;
+    const bW = baseDimensions.value.width;
+    const bH = baseDimensions.value.height;
+    const ox = offsetX.value;
+    const oy = offsetY.value;
+    const r = rotation.value * Math.PI / 180;
+    const sx = zoom.value * (flipH.value ? -1 : 1);
+    const sy = zoom.value * (flipV.value ? -1 : 1);
+
+    ctx.save();
+    ctx.scale(scaleFactor, scaleFactor); // viewport → canvas coords
+    ctx.translate(bW / 2, bH / 2); // T(origin)
+    ctx.translate(ox, oy); // CSS translate
+    ctx.rotate(r); // CSS rotate
+    ctx.scale(sx, sy); // CSS scale (includes flip)
+    ctx.translate(-bW / 2, -bH / 2); // T(-origin)
+    ctx.drawImage(img, 0, 0, bW, bH); // draw at element's natural position
+    ctx.restore();
+
+    // Trigger Download
+    const mime = exportFormat.value === 'jpeg' ? 'image/jpeg' : exportFormat.value === 'webp' ? 'image/webp' : 'image/png';
+    const extension = exportFormat.value;
+    const dataUrl = canvas.toDataURL(mime, exportQuality.value);
+
+    const link = document.createElement('a');
+    link.href = dataUrl;
+
+    let baseName = fileName.value || 'image';
+    if (baseName.includes('.')) {
+      baseName = baseName.substring(0, baseName.lastIndexOf('.'));
+    }
+    link.download = `${baseName}_cropped.${extension}`;
+    link.click();
+  };
+  img.src = imageSrc.value;
+}
+</script>
+
+<template>
+  <div>
+    <!-- Drop Zone Mode -->
+    <c-card v-if="!imageSrc">
+      <div flex flex-col items-center justify-center gap-6 py-12>
+        <c-file-upload
+          accept="image/*"
+          title="Drag and drop your image here, or click to browse"
+          w-full
+          @file-upload="onUpload"
+        />
+      </div>
+    </c-card>
+
+    <!-- Interactive Cropper Mode -->
+    <n-grid v-else cols="1 900:12" x-gap="24" y-gap="24">
+      <!-- Left Column: Viewport & Canvas transformations -->
+      <n-gi span="1 900:5">
+        <c-card>
+          <div flex flex-col items-center>
+            <div
+              class="viewport-box relative cursor-move select-none overflow-hidden border-2 border-gray-300 rounded-lg shadow-lg transition-all duration-200 dark:border-gray-600"
+              :style="{
+                width: `${viewportDimensions.width}px`,
+                height: `${viewportDimensions.height}px`,
+                backgroundColor,
+              }"
+              @mousedown="handlePointerDown"
+              @touchstart="handlePointerDown"
+              @wheel="handleWheel"
+            >
+              <!-- Transparent checkerboard background -->
+              <div
+                v-if="backgroundColor === '#00000000' || backgroundColor.includes('rgba(') && backgroundColor.endsWith(', 0)')"
+                class="checkerboard-bg pointer-events-none absolute inset-0"
+              />
+
+              <!-- The transformable image -->
+              <img
+                :src="imageSrc"
+                class="pointer-events-none absolute"
+                :style="{
+                  width: `${baseDimensions.width}px`,
+                  height: `${baseDimensions.height}px`,
+                  transform: `translate(${offsetX}px, ${offsetY}px) rotate(${rotation}deg) scale(${zoom * (flipH ? -1 : 1)}, ${zoom * (flipV ? -1 : 1)})`,
+                  transformOrigin: 'center center',
+                }"
+              >
+
+              <!-- 3x3 rule of thirds grid overlay -->
+              <div
+                v-if="showGrid"
+                class="grid-overlay pointer-events-none absolute inset-0 grid grid-cols-3 grid-rows-3 border border-white/20"
+              >
+                <div class="border-b border-r border-white/20 border-dashed" />
+                <div class="border-b border-r border-white/20 border-dashed" />
+                <div class="border-b border-white/20 border-dashed" />
+                <div class="border-b border-r border-white/20 border-dashed" />
+                <div class="border-b border-r border-white/20 border-dashed" />
+                <div class="border-b border-white/20 border-dashed" />
+                <div class="border-r border-white/20 border-dashed" />
+                <div class="border-r border-white/20 border-dashed" />
+                <div />
+              </div>
+            </div>
+
+            <!-- Viewport Hint -->
+            <div mt-3 text-center text-xs text-gray-400>
+              Drag to position • Scroll to zoom ({{ Math.round(zoom * 100) }}%)
+            </div>
+
+            <!-- Quick Action Transform Buttons -->
+            <div mt-5 flex flex-wrap justify-center gap-2>
+              <c-button size="small" @click="rotation -= 90">
+                <n-icon :component="Rotate" class="mr-1" />
+                -90°
+              </c-button>
+              <c-button size="small" @click="rotation += 90">
+                <n-icon :component="RotateClockwise" class="mr-1" />
+                +90°
+              </c-button>
+              <c-button size="small" @click="flipH = !flipH">
+                <n-icon :component="FlipHorizontal" class="mr-1" />
+                Flip H
+              </c-button>
+              <c-button size="small" @click="flipV = !flipV">
+                <n-icon :component="FlipVertical" class="mr-1" />
+                Flip V
+              </c-button>
+              <c-button size="small" @click="resetPosition">
+                <n-icon :component="Focus" class="mr-1" />
+                Reset
+              </c-button>
+              <c-button size="small" @click="fitToViewport">
+                <n-icon :component="Maximize" class="mr-1" />
+                Fit
+              </c-button>
+            </div>
+          </div>
+        </c-card>
+      </n-gi>
+
+      <!-- Right Column: Settings, Customizer and Download actions -->
+      <n-gi span="1 900:7">
+        <c-card>
+          <div flex flex-col gap-6>
+            <!-- Header actions -->
+            <div flex items-center justify-between border-b border-gray-200 pb-4 dark:border-gray-700>
+              <div text-lg font-bold class="max-w-220px truncate">
+                {{ fileName }}
+              </div>
+              <c-button type="warning" size="small" @click="imageSrc = null">
+                <n-icon :component="Refresh" class="mr-1" />
+                Change Image
+              </c-button>
+            </div>
+
+            <n-form label-placement="left" label-width="140" label-align="right">
+              <!-- Aspect Ratio Presets -->
+              <n-form-item label="Aspect Ratio:">
+                <c-select
+                  v-model:value="aspectRatio"
+                  :options="aspectRatioOptions"
+                  w-full
+                />
+              </n-form-item>
+
+              <!-- Custom Aspect Ratio Inputs -->
+              <n-form-item v-if="aspectRatio === 'free'" label="Custom Ratio:">
+                <div w-full flex items-center gap-3>
+                  <n-input-number v-model:value="customRatioWidth" :min="1" placeholder="W" class="flex-1" />
+                  <span font-bold text-gray-400>:</span>
+                  <n-input-number v-model:value="customRatioHeight" :min="1" placeholder="H" class="flex-1" />
+                </div>
+              </n-form-item>
+
+              <!-- Background Color Picker -->
+              <n-form-item label="Background Color:">
+                <div w-full flex items-center gap-4>
+                  <n-color-picker v-model:value="backgroundColor" :modes="['hex', 'rgba']" class="flex-1" />
+                  <c-button size="small" @click="backgroundColor = '#00000000'">
+                    Transparent
+                  </c-button>
+                </div>
+              </n-form-item>
+
+              <!-- Interactive Zoom Slider -->
+              <n-form-item label="Zoom Image:">
+                <div w-full flex items-center gap-4>
+                  <n-slider v-model:value="zoom" :min="0.1" :max="5" :step="0.01" class="flex-1" />
+                  <span w-50px text-right font-mono>{{ Math.round(zoom * 100) }}%</span>
+                </div>
+              </n-form-item>
+
+              <!-- Interactive Rotation Slider -->
+              <n-form-item label="Rotate Image:">
+                <div w-full flex items-center gap-4>
+                  <n-slider v-model:value="rotation" :min="-180" :max="180" :step="1" class="flex-1" />
+                  <span w-50px text-right font-mono>{{ rotation }}°</span>
+                </div>
+              </n-form-item>
+
+              <!-- Toggle Grid lines -->
+              <n-form-item label="Rule-of-Thirds Grid:">
+                <n-switch v-model:value="showGrid" />
+              </n-form-item>
+            </n-form>
+
+            <n-divider class="my-2" />
+
+            <div text-md mb-2 font-bold>
+              Export Settings
+            </div>
+
+            <n-form label-placement="left" label-width="140" label-align="right">
+              <!-- Export Format select -->
+              <n-form-item label="Export Format:">
+                <c-select
+                  v-model:value="exportFormat"
+                  :options="exportFormatOptions"
+                  w-full
+                />
+              </n-form-item>
+
+              <!-- Quality slider for lossy formats -->
+              <n-form-item v-if="exportFormat === 'jpeg' || exportFormat === 'webp'" label="Image Quality:">
+                <div w-full flex items-center gap-4>
+                  <n-slider v-model:value="exportQuality" :min="0.1" :max="1" :step="0.05" class="flex-1" />
+                  <span w-50px text-right font-mono>{{ Math.round(exportQuality * 100) }}%</span>
+                </div>
+              </n-form-item>
+
+              <!-- Export width options -->
+              <n-form-item label="Export Width:">
+                <c-select
+                  v-model:value="exportWidthMode"
+                  :options="exportWidthOptions"
+                  w-full
+                />
+              </n-form-item>
+
+              <!-- Custom Export Width Input -->
+              <n-form-item v-if="exportWidthMode === 'custom'" label="Custom Width (px):">
+                <n-input-number v-model:value="customExportWidth" :min="10" :max="10000" w-full />
+              </n-form-item>
+            </n-form>
+
+            <!-- Big Download/Cropped Image Button -->
+            <c-button type="primary" size="large" class="mt-4 w-full" @click="exportImage">
+              <n-icon :component="Download" class="mr-2 text-lg" />
+              Export & Download Cropped Image
+            </c-button>
+          </div>
+        </c-card>
+      </n-gi>
+    </n-grid>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.viewport-box {
+  background-color: #f3f4f6;
+  max-width: 100%;
+}
+
+.checkerboard-bg {
+  background-image:
+    linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
+    linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
+    linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
+  background-size: 16px 16px;
+  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
+
+  :deep(.dark) &, .dark & {
+    background-image:
+      linear-gradient(45deg, #374151 25%, transparent 25%),
+      linear-gradient(-45deg, #374151 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, #374151 75%),
+      linear-gradient(-45deg, transparent 75%, #374151 75%);
+  }
+}
+
+.grid-overlay {
+  & > div {
+    box-sizing: border-box;
+  }
+}
+</style>
diff --git a/src/tools/crop-image/index.ts b/src/tools/crop-image/index.ts
new file mode 100644
index 0000000000..a0ce936aa3
--- /dev/null
+++ b/src/tools/crop-image/index.ts
@@ -0,0 +1,14 @@
+import { Crop } from '@vicons/tabler';
+import { defineTool } from '../tool';
+import { translate } from '@/plugins/i18n.plugin';
+
+export const tool = defineTool({
+  name: translate('tools.crop-image.title'),
+  path: '/crop-image',
+  description: translate('tools.crop-image.description'),
+  keywords: ['crop', 'image', 'resize', 'canvas'],
+  component: () => import('./crop-image.vue'),
+  icon: Crop,
+  createdAt: new Date('2026-06-06'),
+  category: 'Images',
+});

From b688eb27d0e59bc99768e003bdd8fb4f48060f84 Mon Sep 17 00:00:00 2001
From: Chris Tran <6634746+sYnVerse@users.noreply.github.com>
Date: Sat, 6 Jun 2026 14:24:25 -0700
Subject: [PATCH 2/6] Add crop-image sizing utilities and tests

Introduce getViewportDimensions and getBaseDimensions utility functions (src/tools/crop-image/crop-image.service.ts) to centralize viewport/base sizing logic and handle missing natural dimensions. Refactor crop-image.vue to consume these utilities for computed viewport and base dimensions. Add unit tests covering landscape/portrait calculations and cover scaling (src/tools/crop-image/crop-image.service.test.ts) and expand the e2e spec to upload a 1x1 PNG and assert presence of the cropper, sliders and control buttons (src/tools/crop-image/crop-image.e2e.spec.ts). Improves testability and keeps sizing logic consistent across the component.
---
 src/tools/crop-image/crop-image.e2e.spec.ts   | 34 ++++++++++++-
 .../crop-image/crop-image.service.test.ts     | 46 +++++++++++++++--
 src/tools/crop-image/crop-image.service.ts    | 50 +++++++++++++++++++
 src/tools/crop-image/crop-image.vue           | 44 ++++------------
 4 files changed, 135 insertions(+), 39 deletions(-)

diff --git a/src/tools/crop-image/crop-image.e2e.spec.ts b/src/tools/crop-image/crop-image.e2e.spec.ts
index e614293fab..446bbeec25 100644
--- a/src/tools/crop-image/crop-image.e2e.spec.ts
+++ b/src/tools/crop-image/crop-image.e2e.spec.ts
@@ -9,7 +9,39 @@ test.describe('Tool - Crop image', () => {
     await expect(page).toHaveTitle('Crop image - IT Tools');
   });
 
-  test('', async ({ page }) => {
+  test('Upload an image and interact with crop controls', async ({ page }) => {
+    // Check that we start in upload mode
+    const fileInput = page.locator('input[type="file"]');
+    await expect(fileInput).toBeAttached();
 
+    // 1x1 transparent PNG buffer
+    const pixelPng = Buffer.from(
+      'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==',
+      'base64'
+    );
+
+    // Upload the file
+    await fileInput.setInputFiles({
+      name: 'test.png',
+      mimeType: 'image/png',
+      buffer: pixelPng,
+    });
+
+    // Interactive cropper grid should now be visible
+    const viewportBox = page.locator('.viewport-box');
+    await expect(viewportBox).toBeVisible();
+
+    // Check sliders exist for zooming and rotation
+    const sliders = page.locator('.n-slider');
+    await expect(sliders).toHaveCount(2);
+
+    // Export button should be visible
+    const exportButton = page.getByRole('button', { name: /Export & Download Cropped Image/i });
+    await expect(exportButton).toBeVisible();
+
+    // Change image button should be visible
+    const changeImageButton = page.getByRole('button', { name: /Change Image/i });
+    await expect(changeImageButton).toBeVisible();
   });
 });
+
diff --git a/src/tools/crop-image/crop-image.service.test.ts b/src/tools/crop-image/crop-image.service.test.ts
index 451fbde1d1..126d7b3a1e 100644
--- a/src/tools/crop-image/crop-image.service.test.ts
+++ b/src/tools/crop-image/crop-image.service.test.ts
@@ -1,7 +1,47 @@
 import { describe, expect, it } from 'vitest';
+import { getViewportDimensions, getBaseDimensions } from './crop-image.service';
 
-describe('crop-image service', () => {
-  it('should pass', () => {
-    expect(true).toBe(true);
+describe('crop-image service utilities', () => {
+  describe('getViewportDimensions', () => {
+    it('calculates landscape/square ratios correctly', () => {
+      // 1:1 ratio
+      const sq = getViewportDimensions(1, 400, 400);
+      expect(sq).toEqual({ width: 400, height: 400 });
+
+      // 2:1 ratio (landscape)
+      const ls = getViewportDimensions(2, 400, 400);
+      expect(ls).toEqual({ width: 400, height: 200 });
+    });
+
+    it('calculates portrait ratios correctly', () => {
+      // 1:2 ratio (portrait)
+      const pt = getViewportDimensions(0.5, 400, 400);
+      expect(pt).toEqual({ width: 200, height: 400 });
+    });
+  });
+
+  describe('getBaseDimensions', () => {
+    it('returns viewport dimensions when natural dimensions are zero or missing', () => {
+      const fallback = getBaseDimensions(300, 200, 0, 0);
+      expect(fallback).toEqual({ width: 300, height: 200 });
+    });
+
+    it('calculates cover dimensions for landscape image in portrait viewport', () => {
+      // Image: 800x600 (4:3 landscape, ratio 1.33)
+      // Viewport: 300x400 (3:4 portrait, ratio 0.75)
+      // Image should fit to height (400) and scale width to 400 * 1.3333 = 533.33
+      const cover = getBaseDimensions(300, 400, 800, 600);
+      expect(cover.height).toBe(400);
+      expect(cover.width).toBeCloseTo(533.33, 1);
+    });
+
+    it('calculates cover dimensions for portrait image in landscape viewport', () => {
+      // Image: 600x800 (3:4 portrait, ratio 0.75)
+      // Viewport: 400x300 (4:3 landscape, ratio 1.33)
+      // Image should fit to width (400) and scale height to 400 / 0.75 = 533.33
+      const cover = getBaseDimensions(400, 300, 600, 800);
+      expect(cover.width).toBe(400);
+      expect(cover.height).toBeCloseTo(533.33, 1);
+    });
   });
 });
diff --git a/src/tools/crop-image/crop-image.service.ts b/src/tools/crop-image/crop-image.service.ts
index e69de29bb2..4e41902d47 100644
--- a/src/tools/crop-image/crop-image.service.ts
+++ b/src/tools/crop-image/crop-image.service.ts
@@ -0,0 +1,50 @@
+/**
+ * Calculates viewport dimensions bounded by max width and height.
+ */
+export function getViewportDimensions(
+  ratio: number,
+  maxWidth: number = 450,
+  maxHeight: number = 450
+): { width: number; height: number } {
+  if (ratio >= 1) {
+    return {
+      width: maxWidth,
+      height: maxWidth / ratio,
+    };
+  } else {
+    return {
+      width: maxHeight * ratio,
+      height: maxHeight,
+    };
+  }
+}
+
+/**
+ * Calculates base dimensions of the image when fit to cover the viewport.
+ */
+export function getBaseDimensions(
+  vW: number,
+  vH: number,
+  naturalWidth: number,
+  naturalHeight: number
+): { width: number; height: number } {
+  if (!naturalWidth || !naturalHeight) {
+    return { width: vW, height: vH };
+  }
+  const vRatio = vW / vH;
+  const iRatio = naturalWidth / naturalHeight;
+
+  if (iRatio > vRatio) {
+    // Landscape relative to viewport
+    return {
+      width: vH * iRatio,
+      height: vH,
+    };
+  } else {
+    // Portrait relative to viewport
+    return {
+      width: vW,
+      height: vW / iRatio,
+    };
+  }
+}
diff --git a/src/tools/crop-image/crop-image.vue b/src/tools/crop-image/crop-image.vue
index d5f5300729..1fbc30ec6c 100644
--- a/src/tools/crop-image/crop-image.vue
+++ b/src/tools/crop-image/crop-image.vue
@@ -11,6 +11,8 @@ import {
   RotateClockwise,
 } from '@vicons/tabler';
 
+import { getViewportDimensions, getBaseDimensions } from './crop-image.service';
+
 // Image references
 const imageSrc = ref<string | null>(null);
 const fileName = ref<string>('image');
@@ -90,45 +92,17 @@ const maxViewportWidth = 450;
 const maxViewportHeight = 450;
 
 const viewportDimensions = computed(() => {
-  const ratio = currentRatio.value;
-  if (ratio >= 1) {
-    return {
-      width: maxViewportWidth,
-      height: maxViewportWidth / ratio,
-    };
-  }
-  else {
-    return {
-      width: maxViewportHeight * ratio,
-      height: maxViewportHeight,
-    };
-  }
+  return getViewportDimensions(currentRatio.value, maxViewportWidth, maxViewportHeight);
 });
 
 // Image base dimensions when fitting cover
 const baseDimensions = computed(() => {
-  const vW = viewportDimensions.value.width;
-  const vH = viewportDimensions.value.height;
-  if (!imgNaturalWidth.value || !imgNaturalHeight.value) {
-    return { width: vW, height: vH };
-  }
-  const vRatio = vW / vH;
-  const iRatio = imgNaturalWidth.value / imgNaturalHeight.value;
-
-  if (iRatio > vRatio) {
-    // Landscape relative to viewport
-    return {
-      width: vH * iRatio,
-      height: vH,
-    };
-  }
-  else {
-    // Portrait relative to viewport
-    return {
-      width: vW,
-      height: vW / iRatio,
-    };
-  }
+  return getBaseDimensions(
+    viewportDimensions.value.width,
+    viewportDimensions.value.height,
+    imgNaturalWidth.value,
+    imgNaturalHeight.value
+  );
 });
 
 // Reset image to center with cover scale

From 7e152bc831e0906439bf468b3b3ab40ccf6d113d Mon Sep 17 00:00:00 2001
From: Chris Tran <6634746+sYnVerse@users.noreply.github.com>
Date: Sat, 6 Jun 2026 15:06:08 -0700
Subject: [PATCH 3/6] fix(crop-image): fix crop coordinate misalignment on
 small viewports

Resolves an issue where exporting cropped images on small/mobile screens resulted in a different crop than shown in the preview.

- Added reactive viewport scaling tracking using `@vueuse/core` `useElementSize`.
- Wrapped the cropper viewport in a container that scales down via CSS `transform: scale()` to maintain aspect ratios and layout without shrinking coordinates.
- Scaled pointer dragging deltas (`dx`, `dy`) by the scale factor to preserve movement tracking accuracy.
- Cleaned up related ESLint warnings/errors and unused imports in the `crop-image` files."
---
 src/tools/crop-image/crop-image.e2e.spec.ts   |  12 +-
 .../crop-image/crop-image.service.test.ts     |   2 +-
 src/tools/crop-image/crop-image.service.ts    |  10 +-
 src/tools/crop-image/crop-image.vue           | 121 +++++++++++-------
 4 files changed, 91 insertions(+), 54 deletions(-)

diff --git a/src/tools/crop-image/crop-image.e2e.spec.ts b/src/tools/crop-image/crop-image.e2e.spec.ts
index 446bbeec25..fdf75bff7b 100644
--- a/src/tools/crop-image/crop-image.e2e.spec.ts
+++ b/src/tools/crop-image/crop-image.e2e.spec.ts
@@ -1,7 +1,16 @@
+import { Buffer } from 'node:buffer';
 import { expect, test } from '@playwright/test';
 
 test.describe('Tool - Crop image', () => {
   test.beforeEach(async ({ page }) => {
+    page.on('console', (msg) => {
+      // eslint-disable-next-line no-console
+      console.log(`[BROWSER CONSOLE] ${msg.type()}: ${msg.text()}`);
+    });
+    page.on('pageerror', (err) => {
+      // eslint-disable-next-line no-console
+      console.log(`[BROWSER ERROR] ${err.message}`);
+    });
     await page.goto('/crop-image');
   });
 
@@ -17,7 +26,7 @@ test.describe('Tool - Crop image', () => {
     // 1x1 transparent PNG buffer
     const pixelPng = Buffer.from(
       'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==',
-      'base64'
+      'base64',
     );
 
     // Upload the file
@@ -44,4 +53,3 @@ test.describe('Tool - Crop image', () => {
     await expect(changeImageButton).toBeVisible();
   });
 });
-
diff --git a/src/tools/crop-image/crop-image.service.test.ts b/src/tools/crop-image/crop-image.service.test.ts
index 126d7b3a1e..80c5179e07 100644
--- a/src/tools/crop-image/crop-image.service.test.ts
+++ b/src/tools/crop-image/crop-image.service.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { getViewportDimensions, getBaseDimensions } from './crop-image.service';
+import { getBaseDimensions, getViewportDimensions } from './crop-image.service';
 
 describe('crop-image service utilities', () => {
   describe('getViewportDimensions', () => {
diff --git a/src/tools/crop-image/crop-image.service.ts b/src/tools/crop-image/crop-image.service.ts
index 4e41902d47..8df724e395 100644
--- a/src/tools/crop-image/crop-image.service.ts
+++ b/src/tools/crop-image/crop-image.service.ts
@@ -4,14 +4,15 @@
 export function getViewportDimensions(
   ratio: number,
   maxWidth: number = 450,
-  maxHeight: number = 450
+  maxHeight: number = 450,
 ): { width: number; height: number } {
   if (ratio >= 1) {
     return {
       width: maxWidth,
       height: maxWidth / ratio,
     };
-  } else {
+  }
+  else {
     return {
       width: maxHeight * ratio,
       height: maxHeight,
@@ -26,7 +27,7 @@ export function getBaseDimensions(
   vW: number,
   vH: number,
   naturalWidth: number,
-  naturalHeight: number
+  naturalHeight: number,
 ): { width: number; height: number } {
   if (!naturalWidth || !naturalHeight) {
     return { width: vW, height: vH };
@@ -40,7 +41,8 @@ export function getBaseDimensions(
       width: vH * iRatio,
       height: vH,
     };
-  } else {
+  }
+  else {
     // Portrait relative to viewport
     return {
       width: vW,
diff --git a/src/tools/crop-image/crop-image.vue b/src/tools/crop-image/crop-image.vue
index 1fbc30ec6c..a8ed4c7509 100644
--- a/src/tools/crop-image/crop-image.vue
+++ b/src/tools/crop-image/crop-image.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from 'vue';
+import { useElementSize } from '@vueuse/core';
 import {
   Download,
   FlipHorizontal,
@@ -11,7 +12,7 @@ import {
   RotateClockwise,
 } from '@vicons/tabler';
 
-import { getViewportDimensions, getBaseDimensions } from './crop-image.service';
+import { getBaseDimensions, getViewportDimensions } from './crop-image.service';
 
 // Image references
 const imageSrc = ref<string | null>(null);
@@ -95,13 +96,25 @@ const viewportDimensions = computed(() => {
   return getViewportDimensions(currentRatio.value, maxViewportWidth, maxViewportHeight);
 });
 
+// Container ref and scale calculations for small viewports
+const containerRef = ref<HTMLElement | null>(null);
+const { width: containerWidth } = useElementSize(containerRef);
+
+const scale = computed(() => {
+  if (!containerWidth.value || !viewportDimensions.value.width) {
+    return 1;
+  }
+  const maxWidth = Math.max(0, containerWidth.value - 8);
+  return Math.min(1, maxWidth / viewportDimensions.value.width);
+});
+
 // Image base dimensions when fitting cover
 const baseDimensions = computed(() => {
   return getBaseDimensions(
     viewportDimensions.value.width,
     viewportDimensions.value.height,
     imgNaturalWidth.value,
-    imgNaturalHeight.value
+    imgNaturalHeight.value,
   );
 });
 
@@ -115,10 +128,9 @@ function resetPosition() {
   const vW = viewportDimensions.value.width;
   const vH = viewportDimensions.value.height;
   const bW = baseDimensions.value.width;
-  const bH = baseDimensions.value.height;
 
   offsetX.value = (vW - bW) / 2;
-  offsetY.value = (vH - bH) / 2;
+  offsetY.value = (vH - baseDimensions.value.height) / 2;
 }
 
 // Fit image entirely inside viewport
@@ -212,8 +224,8 @@ function handlePointerMove(e: MouseEvent | TouchEvent) {
   const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
   const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
 
-  const dx = clientX - startPointerX;
-  const dy = clientY - startPointerY;
+  const dx = (clientX - startPointerX) / scale.value;
+  const dy = (clientY - startPointerY) / scale.value;
 
   offsetX.value = startOffsetX + dx;
   offsetY.value = startOffsetY + dy;
@@ -346,50 +358,66 @@ function exportImage() {
       <!-- Left Column: Viewport & Canvas transformations -->
       <n-gi span="1 900:5">
         <c-card>
-          <div flex flex-col items-center>
-            <div
-              class="viewport-box relative cursor-move select-none overflow-hidden border-2 border-gray-300 rounded-lg shadow-lg transition-all duration-200 dark:border-gray-600"
-              :style="{
-                width: `${viewportDimensions.width}px`,
-                height: `${viewportDimensions.height}px`,
-                backgroundColor,
-              }"
-              @mousedown="handlePointerDown"
-              @touchstart="handlePointerDown"
-              @wheel="handleWheel"
-            >
-              <!-- Transparent checkerboard background -->
+          <div w-full flex flex-col items-center>
+            <div ref="containerRef" w-full flex items-center justify-center>
               <div
-                v-if="backgroundColor === '#00000000' || backgroundColor.includes('rgba(') && backgroundColor.endsWith(', 0)')"
-                class="checkerboard-bg pointer-events-none absolute inset-0"
-              />
-
-              <!-- The transformable image -->
-              <img
-                :src="imageSrc"
-                class="pointer-events-none absolute"
+                class="viewport-box-wrapper"
                 :style="{
-                  width: `${baseDimensions.width}px`,
-                  height: `${baseDimensions.height}px`,
-                  transform: `translate(${offsetX}px, ${offsetY}px) rotate(${rotation}deg) scale(${zoom * (flipH ? -1 : 1)}, ${zoom * (flipV ? -1 : 1)})`,
-                  transformOrigin: 'center center',
+                  width: `${viewportDimensions.width * scale}px`,
+                  height: `${viewportDimensions.height * scale}px`,
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
                 }"
               >
-
-              <!-- 3x3 rule of thirds grid overlay -->
-              <div
-                v-if="showGrid"
-                class="grid-overlay pointer-events-none absolute inset-0 grid grid-cols-3 grid-rows-3 border border-white/20"
-              >
-                <div class="border-b border-r border-white/20 border-dashed" />
-                <div class="border-b border-r border-white/20 border-dashed" />
-                <div class="border-b border-white/20 border-dashed" />
-                <div class="border-b border-r border-white/20 border-dashed" />
-                <div class="border-b border-r border-white/20 border-dashed" />
-                <div class="border-b border-white/20 border-dashed" />
-                <div class="border-r border-white/20 border-dashed" />
-                <div class="border-r border-white/20 border-dashed" />
-                <div />
+                <div
+                  class="viewport-box relative cursor-move select-none overflow-hidden border-2 border-gray-300 rounded-lg shadow-lg transition-all duration-200 dark:border-gray-600"
+                  :style="{
+                    width: `${viewportDimensions.width}px`,
+                    height: `${viewportDimensions.height}px`,
+                    transform: `scale(${scale})`,
+                    transformOrigin: 'center center',
+                    flexShrink: 0,
+                    backgroundColor,
+                  }"
+                  @mousedown="handlePointerDown"
+                  @touchstart="handlePointerDown"
+                  @wheel="handleWheel"
+                >
+                  <!-- Transparent checkerboard background -->
+                  <div
+                    v-if="backgroundColor === '#00000000' || backgroundColor.includes('rgba(') && backgroundColor.endsWith(', 0)')"
+                    class="checkerboard-bg pointer-events-none absolute inset-0"
+                  />
+
+                  <!-- The transformable image -->
+                  <img
+                    :src="imageSrc"
+                    class="pointer-events-none absolute"
+                    :style="{
+                      width: `${baseDimensions.width}px`,
+                      height: `${baseDimensions.height}px`,
+                      transform: `translate(${offsetX}px, ${offsetY}px) rotate(${rotation}deg) scale(${zoom * (flipH ? -1 : 1)}, ${zoom * (flipV ? -1 : 1)})`,
+                      transformOrigin: 'center center',
+                    }"
+                  >
+
+                  <!-- 3x3 rule of thirds grid overlay -->
+                  <div
+                    v-if="showGrid"
+                    class="grid-overlay pointer-events-none absolute inset-0 grid grid-cols-3 grid-rows-3 border border-white/20"
+                  >
+                    <div class="border-b border-r border-white/20 border-dashed" />
+                    <div class="border-b border-r border-white/20 border-dashed" />
+                    <div class="border-b border-white/20 border-dashed" />
+                    <div class="border-b border-r border-white/20 border-dashed" />
+                    <div class="border-b border-r border-white/20 border-dashed" />
+                    <div class="border-b border-white/20 border-dashed" />
+                    <div class="border-r border-white/20 border-dashed" />
+                    <div class="border-r border-white/20 border-dashed" />
+                    <div />
+                  </div>
+                </div>
               </div>
             </div>
 
@@ -549,7 +577,6 @@ function exportImage() {
 <style lang="less" scoped>
 .viewport-box {
   background-color: #f3f4f6;
-  max-width: 100%;
 }
 
 .checkerboard-bg {

From 6a95f93df2954f042327b87b70678c6a26069898 Mon Sep 17 00:00:00 2001
From: Chris Tran <6634746+sYnVerse@users.noreply.github.com>
Date: Sat, 6 Jun 2026 15:08:35 -0700
Subject: [PATCH 4/6] feat: add 'crop-image' translations to locales

Add localization entries for a new 'crop-image' tool across multiple locale YAML files (ar, da, de, el, en, es, fr, ga, it, ko, nl, no, pl, pt, ru, tr, uk, vi, zh). Each file adds title and description strings for cropping, resizing, and rotating images with custom background colors.
---
 locales/ar.yml | 3 +++
 locales/da.yml | 3 +++
 locales/de.yml | 3 +++
 locales/el.yml | 3 +++
 locales/en.yml | 3 +++
 locales/es.yml | 3 +++
 locales/fr.yml | 3 +++
 locales/ga.yml | 3 +++
 locales/it.yml | 3 +++
 locales/ko.yml | 3 +++
 locales/nl.yml | 3 +++
 locales/no.yml | 3 +++
 locales/pl.yml | 3 +++
 locales/pt.yml | 3 +++
 locales/ru.yml | 3 +++
 locales/tr.yml | 3 +++
 locales/uk.yml | 3 +++
 locales/vi.yml | 3 +++
 locales/zh.yml | 3 +++
 19 files changed, 57 insertions(+)

diff --git a/locales/ar.yml b/locales/ar.yml
index 8095238456..66a72df711 100644
--- a/locales/ar.yml
+++ b/locales/ar.yml
@@ -104,6 +104,9 @@ search:
   label: بحث
   placeholder: اكتب للبحث عن أداة أو أمر...
 tools:
+  crop-image:
+    title: "قص الصورة"
+    description: "قم بقص الصور وتغيير حجمها وتدويرها باستخدام ألوان خلفية مخصصة."
   categories:
     favorite-tools: أدواتك المفضلة
     crypto: التشفير
diff --git a/locales/da.yml b/locales/da.yml
index 79343122e2..ee9095ae59 100644
--- a/locales/da.yml
+++ b/locales/da.yml
@@ -53,6 +53,9 @@ search:
   label: Søg
   placeholder: Skriv for at søge efter et værktøj eller en kommando...
 tools:
+  crop-image:
+    title: "Beskær billede"
+    description: "Beskær, tilpas størrelse og roter billeder med brugerdefinerede baggrundsfarver."
   categories:
     favorite-tools: Dine favorit værktøjer
     crypto: Crypto
diff --git a/locales/de.yml b/locales/de.yml
index 53710fe472..a5d83a4a27 100644
--- a/locales/de.yml
+++ b/locales/de.yml
@@ -124,6 +124,9 @@ formatTransformer:
   output: Ausgabe
   download: Herunterladen
 tools:
+  crop-image:
+    title: "Bild zuschneiden"
+    description: "Bilder zuschneiden, die Größe ändern und drehen mit benutzerdefinierten Hintergrundfarben."
   categories:
     favorite-tools: Deine Lieblingstools
     crypto: Krypto
diff --git a/locales/el.yml b/locales/el.yml
index 8656aa6509..78f147317f 100644
--- a/locales/el.yml
+++ b/locales/el.yml
@@ -129,6 +129,9 @@ home:
         άτομα που εργάζονται στον τομέα της πληροφορικής.
       it-tools-handy-online-tools-for-developers: Εργαλεία IT - Χρήσιμα διαδικτυακά εργαλεία για προγραμματιστές
 tools:
+  crop-image:
+    title: "Περικοπή εικόνας"
+    description: "Περικοπή, αλλαγή μεγέθους και περιστροφή εικόνων με προσαρμοσμένα χρώματα φόντου."
   chronometer:
     title: Χρονόμετρο
     description: >-
diff --git a/locales/en.yml b/locales/en.yml
index dba98b5526..d142671863 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -121,6 +121,9 @@ home:
         developers & people working in IT.
       it-tools-handy-online-tools-for-developers: IT Tools - Handy online tools for developers
 tools:
+  crop-image:
+    title: "Crop image"
+    description: "Crop, resize, and rotate images with custom background colors."
   chronometer:
     title: Chronometer
     description: >-
diff --git a/locales/es.yml b/locales/es.yml
index 6ddc8313df..5b8ad22415 100644
--- a/locales/es.yml
+++ b/locales/es.yml
@@ -110,6 +110,9 @@ search:
   label: Buscar
   placeholder: Escriba para buscar una herramienta o un comando...
 tools:
+  crop-image:
+    title: "Recortar imagen"
+    description: "Recorte, cambie el tamaño y rote imágenes con colores de fondo personalizados."
   categories:
     favorite-tools: Tus herramientas favoritas
     crypto: Cripto
diff --git a/locales/fr.yml b/locales/fr.yml
index 37eca0ce53..7fa376efd3 100644
--- a/locales/fr.yml
+++ b/locales/fr.yml
@@ -72,6 +72,9 @@ search:
   label: Rechercher
   placeholder: Tapez pour rechercher un outil ou une commande…
 tools:
+  crop-image:
+    title: "Rogner l'image"
+    description: "Rogner, redimensionner et faire pivoter des images avec des couleurs de fond personnalisées."
   categories:
     favorite-tools: Vos outils favoris
     crypto: Cryptographie
diff --git a/locales/ga.yml b/locales/ga.yml
index 2bf78e64dc..dfcbe54efc 100644
--- a/locales/ga.yml
+++ b/locales/ga.yml
@@ -127,6 +127,9 @@ formatTransformer:
   output: Aschur
   download: Íoslódáil
 tools:
+  crop-image:
+    title: "Ríomhairigh íomhá"
+    description: "Ríomhairigh, athraigh méid, agus rothlaigh íomhánna le dathanna cúlra saincheaptha."
   categories:
     favorite-tools: Is fearr leat na hairíonna
     crypto: Cripteagrafaíocht
diff --git a/locales/it.yml b/locales/it.yml
index 516b2bc8df..5d22e5e521 100644
--- a/locales/it.yml
+++ b/locales/it.yml
@@ -52,6 +52,9 @@ search:
   label: Cerca
   placeholder: Digita per cercare uno strumento o un comando...
 tools:
+  crop-image:
+    title: "Ritaglia immagine"
+    description: "Ritaglia, ridimensiona e ruota le immagini con colori di sfondo personalizzati."
   categories:
     favorite-tools: I tuoi strumenti preferiti
     crypto: Crypto
diff --git a/locales/ko.yml b/locales/ko.yml
index 469ef51806..59850aa3f2 100644
--- a/locales/ko.yml
+++ b/locales/ko.yml
@@ -51,6 +51,9 @@ search:
   label: 검색
   placeholder: 도구나 명령을 검색하려면 입력하세요...
 tools:
+  crop-image:
+    title: "이미지 자르기"
+    description: "사용자 정의 배경색으로 이미지 자르기, 크기 조정 및 회전."
   categories:
     favorite-tools: 즐겨찾기
     crypto: 암호화
diff --git a/locales/nl.yml b/locales/nl.yml
index d48800ea22..2266d39631 100644
--- a/locales/nl.yml
+++ b/locales/nl.yml
@@ -52,6 +52,9 @@ search:
   label: Zoeken
   placeholder: Typ om een gereedschap of opdracht te zoeken...
 tools:
+  crop-image:
+    title: "Afbeelding bijsnijden"
+    description: "Snijd afbeeldingen bij, wijzig het formaat en roteer ze met aangepaste achtergrondkleuren."
   categories:
     favorite-tools: Jouw favoriete tools
     crypto: Crypto
diff --git a/locales/no.yml b/locales/no.yml
index a93dfd9b59..7a1ac776f7 100644
--- a/locales/no.yml
+++ b/locales/no.yml
@@ -108,6 +108,9 @@ search:
   label: Søk
   placeholder: Skriv for å søke etter et verktøy eller en kommando...
 tools:
+  crop-image:
+    title: "Beskjær bilde"
+    description: "Beskjær, endre størrelse og roter bilder med egendefinerte bakgrunnsfarger."
   categories:
     favorite-tools: Dine favoritt verktøy
     crypto: Krypto
diff --git a/locales/pl.yml b/locales/pl.yml
index b5cf80bd32..6d1f4728cd 100644
--- a/locales/pl.yml
+++ b/locales/pl.yml
@@ -102,6 +102,9 @@ search:
   label: Szukaj
   placeholder: Wpisz, aby wyszukać narzędzie lub polecenie...
 tools:
+  crop-image:
+    title: "Przytnij obraz"
+    description: "Przycinaj, zmieniaj rozmiar i obracaj obrazy z niestandardowymi kolorami tła."
   categories:
     favorite-tools: Twoje ulubione narzędzia
     crypto: Kryptografia
diff --git a/locales/pt.yml b/locales/pt.yml
index 158c4c6dc1..8ca4d10d5e 100644
--- a/locales/pt.yml
+++ b/locales/pt.yml
@@ -107,6 +107,9 @@ search:
   label: Pesquisar
   placeholder: Digite para pesquisar uma ferramenta ou um comando...
 tools:
+  crop-image:
+    title: "Recortar imagem"
+    description: "Recortar, redimensionar e rotacionar imagens com cores de fundo personalizadas."
   categories:
     favorite-tools: Suas ferramentas favoritas
     crypto: Cripto
diff --git a/locales/ru.yml b/locales/ru.yml
index c33f6dacee..461d502137 100644
--- a/locales/ru.yml
+++ b/locales/ru.yml
@@ -108,6 +108,9 @@ search:
   label: Поиск
   placeholder: Введите для поиска инструмента или команды...
 tools:
+  crop-image:
+    title: "Обрезать изображение"
+    description: "Обрезка, изменение размера и поворот изображений с настраиваемыми цветами фона."
   categories:
     favorite-tools: Ваши любимые инструменты
     crypto: Крипта
diff --git a/locales/tr.yml b/locales/tr.yml
index e28e8893d8..1e2b1c9fc1 100644
--- a/locales/tr.yml
+++ b/locales/tr.yml
@@ -55,6 +55,9 @@ search:
   label: Ara
   placeholder: Bir aracı veya komutu aramak için yazın...
 tools:
+  crop-image:
+    title: "Resmi kırp"
+    description: "Özel arka plan renkleriyle resimleri kırpın, yeniden boyutlandırın và döndürün."
   categories:
     favorite-tools: Favori araçların
     crypto: Crypto
diff --git a/locales/uk.yml b/locales/uk.yml
index 4ee8870d76..99220a9e59 100644
--- a/locales/uk.yml
+++ b/locales/uk.yml
@@ -107,6 +107,9 @@ search:
   label: Пошук
   placeholder: Введіть запит для пошуку інструмента або команди...
 tools:
+  crop-image:
+    title: "Обрізати зображення"
+    description: "Обрізайте, змінюйте розмір та повертайте зображення за допомогою власних кольорів фону."
   categories:
     favorite-tools: Ваші улюблені інструменти
     crypto: Крипта
diff --git a/locales/vi.yml b/locales/vi.yml
index 36f0c5e1f6..fd6466a231 100644
--- a/locales/vi.yml
+++ b/locales/vi.yml
@@ -106,6 +106,9 @@ search:
   label: Tìm kiếm
   placeholder: Nhập để tìm kiếm một công cụ hoặc lệnh...
 tools:
+  crop-image:
+    title: "Cắt ảnh"
+    description: "Cắt, thay đổi kích thước và xoay hình ảnh với màu nền tùy chỉnh."
   categories:
     favorite-tools: Công cụ yêu thích của bạn
     crypto: Mã hóa
diff --git a/locales/zh.yml b/locales/zh.yml
index ef06c8a2bd..9bbe1de32e 100644
--- a/locales/zh.yml
+++ b/locales/zh.yml
@@ -106,6 +106,9 @@ home:
       collection-of-handy-online-tools-for-developers-with-great-ux-it-tools-is-a-free-and-open-source-collection-of-handy-online-tools-for-developers-and-people-working-in-it: IT Tools 是一款免费开源的在线工具合集，为开发人员和 IT 从业人员提供便捷的在线工具，拥有出色的用户体验。
       it-tools-handy-online-tools-for-developers: IT 工具 - 方便的在线开发人员工具
 tools:
+  crop-image:
+    title: "裁剪图片"
+    description: "使用自定义背景颜色裁剪、调整大小和旋转图像."
   chronometer:
     title: 秒表
     description: 监测某事物的持续时间。基本上是一个具备简单计时功能的秒表。

From d9ad48daa570aac8654329eb3115764212c0583a Mon Sep 17 00:00:00 2001
From: Chris Tran <6634746+sYnVerse@users.noreply.github.com>
Date: Sat, 6 Jun 2026 15:12:54 -0700
Subject: [PATCH 5/6] feat: add crop-image 'texts' translations to locales
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add 'texts' translation entries for the crop-image tool across multiple locales (ar, da, de, el, en, es, fr, ga, it, ko, nl, no, pl, pt, ru, tr, uk, vi, zh). Adds UI strings such as drag/drop hints, flip/reset/fit controls, aspect ratio and custom ratio labels, background color, zoom/rotate, rule-of-thirds grid, export settings (format, quality, width), ratio presets and width options. Also fixes a small typo in the Turkish description (và → ve).
---
 locales/ar.yml | 31 +++++++++++++++++++++++++++++++
 locales/da.yml | 31 +++++++++++++++++++++++++++++++
 locales/de.yml | 31 +++++++++++++++++++++++++++++++
 locales/el.yml | 31 +++++++++++++++++++++++++++++++
 locales/en.yml | 31 +++++++++++++++++++++++++++++++
 locales/es.yml | 31 +++++++++++++++++++++++++++++++
 locales/fr.yml | 31 +++++++++++++++++++++++++++++++
 locales/ga.yml | 31 +++++++++++++++++++++++++++++++
 locales/it.yml | 31 +++++++++++++++++++++++++++++++
 locales/ko.yml | 31 +++++++++++++++++++++++++++++++
 locales/nl.yml | 31 +++++++++++++++++++++++++++++++
 locales/no.yml | 31 +++++++++++++++++++++++++++++++
 locales/pl.yml | 31 +++++++++++++++++++++++++++++++
 locales/pt.yml | 31 +++++++++++++++++++++++++++++++
 locales/ru.yml | 31 +++++++++++++++++++++++++++++++
 locales/tr.yml | 33 ++++++++++++++++++++++++++++++++-
 locales/uk.yml | 31 +++++++++++++++++++++++++++++++
 locales/vi.yml | 31 +++++++++++++++++++++++++++++++
 locales/zh.yml | 31 +++++++++++++++++++++++++++++++
 19 files changed, 590 insertions(+), 1 deletion(-)

diff --git a/locales/ar.yml b/locales/ar.yml
index 66a72df711..7c16e91454 100644
--- a/locales/ar.yml
+++ b/locales/ar.yml
@@ -107,6 +107,37 @@ tools:
   crop-image:
     title: "قص الصورة"
     description: "قم بقص الصور وتغيير حجمها وتدويرها باستخدام ألوان خلفية مخصصة."
+    texts:
+      drag-drop: "اسحب وأسقط صورتك هنا، أو انقر للتصفح"
+      drag-hint: "اسحب للتحريك • مرر للتكبير ({zoom}%)"
+      flip-h: "انعكاس أفقي"
+      flip-v: "انعكاس رأسي"
+      reset: "إعادة تعيين"
+      fit: "ملائمة"
+      change-image: "تغيير الصورة"
+      aspect-ratio: "نسبة الارتفاع إلى العرض:"
+      custom-ratio: "نسبة مخصصة:"
+      background-color: "لون الخلفية:"
+      transparent: "شفاف"
+      zoom-image: "تكبير الصورة:"
+      rotate-image: "تدوير الصورة:"
+      rule-of-thirds-grid: "شبكة قاعدة الأثلاث:"
+      export-settings: "إعدادات التصدير"
+      export-format: "صيغة التصدير:"
+      image-quality: "جودة الصورة:"
+      export-width: "عرض التصدير:"
+      custom-width: "العرض المخصص (بكسل):"
+      export-download-image: "تصدير وتنزيل الصورة المقصوصة"
+      ratio-square: "1:1 (مربع)"
+      ratio-widescreen: "16:9 (شاشة عريضة)"
+      ratio-portrait: "9:16 (عمودي)"
+      ratio-standard: "4:3 (قياسي)"
+      ratio-photo: "3:2 (صورة)"
+      ratio-original: "نسبة العرض إلى الارتفاع الأصلية"
+      ratio-custom: "نسبة مخصصة"
+      width-original: "حجم القص الأصلي"
+      width-viewport: "حجم نافذة العرض"
+      width-custom: "عرض مخصص"
   categories:
     favorite-tools: أدواتك المفضلة
     crypto: التشفير
diff --git a/locales/da.yml b/locales/da.yml
index ee9095ae59..44dcd730a9 100644
--- a/locales/da.yml
+++ b/locales/da.yml
@@ -56,6 +56,37 @@ tools:
   crop-image:
     title: "Beskær billede"
     description: "Beskær, tilpas størrelse og roter billeder med brugerdefinerede baggrundsfarver."
+    texts:
+      drag-drop: "Træk og slip dit billede her, eller klik for at gennemse"
+      drag-hint: "Træk for at placere • Rul for at zoome ({zoom}%)"
+      flip-h: "Vend H"
+      flip-v: "Vend V"
+      reset: "Nulstil"
+      fit: "Tilpas"
+      change-image: "Skift billede"
+      aspect-ratio: "Billedformat:"
+      custom-ratio: "Brugerdefineret format:"
+      background-color: "Baggrundsfarve:"
+      transparent: "Gennemsigtig"
+      zoom-image: "Zoom billede:"
+      rotate-image: "Roter billede:"
+      rule-of-thirds-grid: "Tredjedelsregel-gitter:"
+      export-settings: "Eksportindstillinger"
+      export-format: "Eksportformat:"
+      image-quality: "Billedkvalitet:"
+      export-width: "Eksportbredde:"
+      custom-width: "Brugerdefineret bredde (px):"
+      export-download-image: "Eksporter og download beskåret billede"
+      ratio-square: "1:1 (Kvadratisk)"
+      ratio-widescreen: "16:9 (Widescreen)"
+      ratio-portrait: "9:16 (Portræt)"
+      ratio-standard: "4:3 (Standard)"
+      ratio-photo: "3:2 (Foto)"
+      ratio-original: "Originalt billedformat"
+      ratio-custom: "Brugerdefineret format"
+      width-original: "Original beskæringsstørrelse"
+      width-viewport: "Viewport-størrelse"
+      width-custom: "Brugerdefineret bredde"
   categories:
     favorite-tools: Dine favorit værktøjer
     crypto: Crypto
diff --git a/locales/de.yml b/locales/de.yml
index a5d83a4a27..f834db09a2 100644
--- a/locales/de.yml
+++ b/locales/de.yml
@@ -127,6 +127,37 @@ tools:
   crop-image:
     title: "Bild zuschneiden"
     description: "Bilder zuschneiden, die Größe ändern und drehen mit benutzerdefinierten Hintergrundfarben."
+    texts:
+      drag-drop: "Ziehen Sie Ihr Bild hierher oder klicken Sie zum Durchsuchen"
+      drag-hint: "Ziehen zum Positionieren • Scrollen zum Zoomen ({zoom}%)"
+      flip-h: "Spiegeln H"
+      flip-v: "Spiegeln V"
+      reset: "Zurücksetzen"
+      fit: "Anpassen"
+      change-image: "Bild ändern"
+      aspect-ratio: "Seitenverhältnis:"
+      custom-ratio: "Benutzerdefiniertes Verhältnis:"
+      background-color: "Hintergrundfarbe:"
+      transparent: "Transparent"
+      zoom-image: "Bild zoomen:"
+      rotate-image: "Bild drehen:"
+      rule-of-thirds-grid: "Drittel-Regel-Gitter:"
+      export-settings: "Exporteinstellungen"
+      export-format: "Exportformat:"
+      image-quality: "Bildqualität:"
+      export-width: "Exportbreite:"
+      custom-width: "Benutzerdefinierte Breite (px):"
+      export-download-image: "Beschnittenes Bild exportieren & herunterladen"
+      ratio-square: "1:1 (Quadratisch)"
+      ratio-widescreen: "16:9 (Breitbild)"
+      ratio-portrait: "9:16 (Porträt)"
+      ratio-standard: "4:3 (Standard)"
+      ratio-photo: "3:2 (Foto)"
+      ratio-original: "Original-Seitenverhältnis"
+      ratio-custom: "Benutzerdefiniertes Verhältnis"
+      width-original: "Originale Zuschneidegröße"
+      width-viewport: "Anzeigegröße"
+      width-custom: "Benutzerdefinierte Breite"
   categories:
     favorite-tools: Deine Lieblingstools
     crypto: Krypto
diff --git a/locales/el.yml b/locales/el.yml
index 78f147317f..e4d8824a8e 100644
--- a/locales/el.yml
+++ b/locales/el.yml
@@ -132,6 +132,37 @@ tools:
   crop-image:
     title: "Περικοπή εικόνας"
     description: "Περικοπή, αλλαγή μεγέθους και περιστροφή εικόνων με προσαρμοσμένα χρώματα φόντου."
+    texts:
+      drag-drop: "Σύρετε και αποθέστε την εικόνα σας εδώ, ή κάντε κλικ για περιήγηση"
+      drag-hint: "Σύρετε για τοποθέτηση • Κυλήστε για ζουμ ({zoom}%)"
+      flip-h: "Οριζόντια Αναστροφή"
+      flip-v: "Κατακόρυφη Αναστροφή"
+      reset: "Επαναφορά"
+      fit: "Προσαρμογή"
+      change-image: "Αλλαγή Εικόνας"
+      aspect-ratio: "Αναλογία Διαστάσεων:"
+      custom-ratio: "Προσαρμοσμένη Αναλογία:"
+      background-color: "Χρώμα Φόντου:"
+      transparent: "Διαφανές"
+      zoom-image: "Ζουμ Εικόνας:"
+      rotate-image: "Περιστροφή Εικόνας:"
+      rule-of-thirds-grid: "Πλέγμα Κανόνα των Τρίτων:"
+      export-settings: "Ρυθμίσεις Εξαγωγής"
+      export-format: "Μορφή Εξαγωγής:"
+      image-quality: "Ποιότητα Εικόνας:"
+      export-width: "Πλάτος Εξαγωγής:"
+      custom-width: "Προσαρμοσμένο Πλάτος (px):"
+      export-download-image: "Εξαγωγή & Λήψη Περικομμένης Εικόνας"
+      ratio-square: "1:1 (Τετράγωνο)"
+      ratio-widescreen: "16:9 (Ευρεία οθόνη)"
+      ratio-portrait: "9:16 (Πορτρέτο)"
+      ratio-standard: "4:3 (Τυπικό)"
+      ratio-photo: "3:2 (Φωτογραφία)"
+      ratio-original: "Αρχική Αναλογία Διαστάσεων"
+      ratio-custom: "Προσαρμοσμένη Αναλογία"
+      width-original: "Αρχικό Μέγεθος Περικοπής"
+      width-viewport: "Μέγεθος Παραθύρου Προβολής"
+      width-custom: "Προσαρμοσμένο Πλάτος"
   chronometer:
     title: Χρονόμετρο
     description: >-
diff --git a/locales/en.yml b/locales/en.yml
index d142671863..935027e75f 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -124,6 +124,37 @@ tools:
   crop-image:
     title: "Crop image"
     description: "Crop, resize, and rotate images with custom background colors."
+    texts:
+      drag-drop: "Drag and drop your image here, or click to browse"
+      drag-hint: "Drag to position • Scroll to zoom ({zoom}%)"
+      flip-h: "Flip H"
+      flip-v: "Flip V"
+      reset: "Reset"
+      fit: "Fit"
+      change-image: "Change Image"
+      aspect-ratio: "Aspect Ratio:"
+      custom-ratio: "Custom Ratio:"
+      background-color: "Background Color:"
+      transparent: "Transparent"
+      zoom-image: "Zoom Image:"
+      rotate-image: "Rotate Image:"
+      rule-of-thirds-grid: "Rule-of-Thirds Grid:"
+      export-settings: "Export Settings"
+      export-format: "Export Format:"
+      image-quality: "Image Quality:"
+      export-width: "Export Width:"
+      custom-width: "Custom Width (px):"
+      export-download-image: "Export & Download Cropped Image"
+      ratio-square: "1:1 (Square)"
+      ratio-widescreen: "16:9 (Widescreen)"
+      ratio-portrait: "9:16 (Portrait)"
+      ratio-standard: "4:3 (Standard)"
+      ratio-photo: "3:2 (Photo)"
+      ratio-original: "Original Aspect Ratio"
+      ratio-custom: "Custom Ratio"
+      width-original: "Original Crop Size"
+      width-viewport: "Viewport Size"
+      width-custom: "Custom Width"
   chronometer:
     title: Chronometer
     description: >-
diff --git a/locales/es.yml b/locales/es.yml
index 5b8ad22415..76ca0ca11f 100644
--- a/locales/es.yml
+++ b/locales/es.yml
@@ -113,6 +113,37 @@ tools:
   crop-image:
     title: "Recortar imagen"
     description: "Recorte, cambie el tamaño y rote imágenes con colores de fondo personalizados."
+    texts:
+      drag-drop: "Arrastre y suelte su imagen aquí, o haga clic para buscar"
+      drag-hint: "Arrastrar para posicionar • Desplazar para hacer zoom ({zoom}%)"
+      flip-h: "Voltear H"
+      flip-v: "Voltear V"
+      reset: "Restablecer"
+      fit: "Ajustar"
+      change-image: "Cambiar imagen"
+      aspect-ratio: "Relación de aspecto:"
+      custom-ratio: "Relación personalizada:"
+      background-color: "Color de fondo:"
+      transparent: "Transparente"
+      zoom-image: "Hacer zoom en imagen:"
+      rotate-image: "Rotar imagen:"
+      rule-of-thirds-grid: "Cuadrícula de regla de tercios:"
+      export-settings: "Configuración de exportación"
+      export-format: "Formato de exportación:"
+      image-quality: "Calidad de imagen:"
+      export-width: "Ancho de exportación:"
+      custom-width: "Ancho personalizado (px):"
+      export-download-image: "Exportar y descargar imagen recortada"
+      ratio-square: "1:1 (Cuadrado)"
+      ratio-widescreen: "16:9 (Pantalla ancha)"
+      ratio-portrait: "9:16 (Retrato)"
+      ratio-standard: "4:3 (Estándar)"
+      ratio-photo: "3:2 (Foto)"
+      ratio-original: "Relación de aspecto original"
+      ratio-custom: "Relación personalizada"
+      width-original: "Tamaño de recorte original"
+      width-viewport: "Tamaño de la pantalla de visualización"
+      width-custom: "Ancho personalizado"
   categories:
     favorite-tools: Tus herramientas favoritas
     crypto: Cripto
diff --git a/locales/fr.yml b/locales/fr.yml
index 7fa376efd3..857fcaca3a 100644
--- a/locales/fr.yml
+++ b/locales/fr.yml
@@ -75,6 +75,37 @@ tools:
   crop-image:
     title: "Rogner l'image"
     description: "Rogner, redimensionner et faire pivoter des images avec des couleurs de fond personnalisées."
+    texts:
+      drag-drop: "Glissez-déposez votre image ici, ou cliquez pour parcourir"
+      drag-hint: "Faites glisser pour positionner • Défilez pour zoomer ({zoom}%)"
+      flip-h: "Retourner H"
+      flip-v: "Retourner V"
+      reset: "Réinitialiser"
+      fit: "Ajuster"
+      change-image: "Changer d'image"
+      aspect-ratio: "Rapport d'aspect:"
+      custom-ratio: "Rapport personnalisé:"
+      background-color: "Couleur d'arrière-plan:"
+      transparent: "Transparent"
+      zoom-image: "Zoomer l'image:"
+      rotate-image: "Faire pivoter l'image:"
+      rule-of-thirds-grid: "Grille des trois tiers:"
+      export-settings: "Paramètres d'exportation"
+      export-format: "Format d'exportation:"
+      image-quality: "Qualité de l'image:"
+      export-width: "Largeur d'exportation:"
+      custom-width: "Largeur personnalisée (px):"
+      export-download-image: "Exporter & télécharger l'image rognée"
+      ratio-square: "1:1 (Carré)"
+      ratio-widescreen: "16:9 (Écran large)"
+      ratio-portrait: "9:16 (Portrait)"
+      ratio-standard: "4:3 (Standard)"
+      ratio-photo: "3:2 (Photo)"
+      ratio-original: "Rapport d'aspect d'origine"
+      ratio-custom: "Rapport personnalisé"
+      width-original: "Taille de rognage d'origine"
+      width-viewport: "Taille de la fenêtre"
+      width-custom: "Largeur personnalisée"
   categories:
     favorite-tools: Vos outils favoris
     crypto: Cryptographie
diff --git a/locales/ga.yml b/locales/ga.yml
index dfcbe54efc..ef0ed781e6 100644
--- a/locales/ga.yml
+++ b/locales/ga.yml
@@ -130,6 +130,37 @@ tools:
   crop-image:
     title: "Ríomhairigh íomhá"
     description: "Ríomhairigh, athraigh méid, agus rothlaigh íomhánna le dathanna cúlra saincheaptha."
+    texts:
+      drag-drop: "Tarraing agus scaoil d'íomhá anseo, nó cliceáil chun brabhsáil"
+      drag-hint: "Tarraing chun suíomh a shocrú • Scrollaigh chun zúmáil ({zoom}%)"
+      flip-h: "Smeach H"
+      flip-v: "Smeach V"
+      reset: "Athshocraigh"
+      fit: "Feistigh"
+      change-image: "Athraigh Íomhá"
+      aspect-ratio: "Cóimheas Gné:"
+      custom-ratio: "Cóimheas Saincheaptha:"
+      background-color: "Dath Cúlra:"
+      transparent: "Trédhearcach"
+      zoom-image: "Zúmáil Íomhá:"
+      rotate-image: "Rothlaigh Íomhá:"
+      rule-of-thirds-grid: "Greille Riail na dTríonóidí:"
+      export-settings: "Socruithe Easpórtála"
+      export-format: "Formáid Easpórtála:"
+      image-quality: "Cáilíocht Íomhá:"
+      export-width: "Leithead Easpórtála:"
+      custom-width: "Leithead Saincheaptha (px):"
+      export-download-image: "Easpórtáil & Íoslódáil Íomhá Ríofa"
+      ratio-square: "1:1 (Cearnóg)"
+      ratio-widescreen: "16:9 (Scáileán Leathan)"
+      ratio-portrait: "9:16 (Portráid)"
+      ratio-standard: "4:3 (Caighdeánach)"
+      ratio-photo: "3:2 (Grianghraf)"
+      ratio-original: "Cóimheas Gné Bunaidh"
+      ratio-custom: "Cóimheas Saincheaptha"
+      width-original: "Méid Ríofa Bunaidh"
+      width-viewport: "Méid an Réimse Amhairc"
+      width-custom: "Leithead Saincheaptha"
   categories:
     favorite-tools: Is fearr leat na hairíonna
     crypto: Cripteagrafaíocht
diff --git a/locales/it.yml b/locales/it.yml
index 5d22e5e521..259e8b835c 100644
--- a/locales/it.yml
+++ b/locales/it.yml
@@ -55,6 +55,37 @@ tools:
   crop-image:
     title: "Ritaglia immagine"
     description: "Ritaglia, ridimensiona e ruota le immagini con colori di sfondo personalizzati."
+    texts:
+      drag-drop: "Trascina e rilascia la tua immagine qui, o clicca per sfogliare"
+      drag-hint: "Trascina per posizionare • Scorri per zoomare ({zoom}%)"
+      flip-h: "Specchia Orizzontalmente"
+      flip-v: "Specchia Verticalmente"
+      reset: "Reimposta"
+      fit: "Adatta"
+      change-image: "Cambia immagine"
+      aspect-ratio: "Rapporto di aspetto:"
+      custom-ratio: "Rapporto personalizzato:"
+      background-color: "Colore dello sfondo:"
+      transparent: "Trasparente"
+      zoom-image: "Ingrandisci immagine:"
+      rotate-image: "Ruota immagine:"
+      rule-of-thirds-grid: "Griglia regola dei terzi:"
+      export-settings: "Impostazioni di esportazione"
+      export-format: "Formato di esportazione:"
+      image-quality: "Qualità immagine:"
+      export-width: "Larghezza esportazione:"
+      custom-width: "Larghezza personalizzata (px):"
+      export-download-image: "Esporta e scarica immagine ritagliata"
+      ratio-square: "1:1 (Quadrato)"
+      ratio-widescreen: "16:9 (Widescreen)"
+      ratio-portrait: "9:16 (Ritratto)"
+      ratio-standard: "4:3 (Standard)"
+      ratio-photo: "3:2 (Foto)"
+      ratio-original: "Rapporto di aspetto originale"
+      ratio-custom: "Rapporto personalizzato"
+      width-original: "Dimensione ritaglio originale"
+      width-viewport: "Dimensione della finestra di visualizzazione"
+      width-custom: "Larghezza personalizzata"
   categories:
     favorite-tools: I tuoi strumenti preferiti
     crypto: Crypto
diff --git a/locales/ko.yml b/locales/ko.yml
index 59850aa3f2..060edec580 100644
--- a/locales/ko.yml
+++ b/locales/ko.yml
@@ -54,6 +54,37 @@ tools:
   crop-image:
     title: "이미지 자르기"
     description: "사용자 정의 배경색으로 이미지 자르기, 크기 조정 및 회전."
+    texts:
+      drag-drop: "이미지를 여기에 드래그 앤 드롭하거나 클릭하여 찾아보세요"
+      drag-hint: "드래그하여 위치 조정 • 스크롤하여 확대/축소 ({zoom}%)"
+      flip-h: "좌우 반전"
+      flip-v: "상하 반전"
+      reset: "초기화"
+      fit: "맞춤"
+      change-image: "이미지 변경"
+      aspect-ratio: "가로세로 비율:"
+      custom-ratio: "사용자 정의 비율:"
+      background-color: "배경색:"
+      transparent: "투명"
+      zoom-image: "이미지 확대/축소:"
+      rotate-image: "이미지 회전:"
+      rule-of-thirds-grid: "3분할 격자:"
+      export-settings: "내보내기 설정"
+      export-format: "내보내기 형식:"
+      image-quality: "이미지 품질:"
+      export-width: "내보내기 너비:"
+      custom-width: "사용자 정의 너비 (px):"
+      export-download-image: "자른 이미지 내보내기 및 다운로드"
+      ratio-square: "1:1 (정사각형)"
+      ratio-widescreen: "16:9 (와이드스크린)"
+      ratio-portrait: "9:16 (세로)"
+      ratio-standard: "4:3 (표준)"
+      ratio-photo: "3:2 (사진)"
+      ratio-original: "원본 가로세로 비율"
+      ratio-custom: "사용자 정의 비율"
+      width-original: "원본 자르기 크기"
+      width-viewport: "뷰포트 크기"
+      width-custom: "사용자 정의 너비"
   categories:
     favorite-tools: 즐겨찾기
     crypto: 암호화
diff --git a/locales/nl.yml b/locales/nl.yml
index 2266d39631..75e97b5d7f 100644
--- a/locales/nl.yml
+++ b/locales/nl.yml
@@ -55,6 +55,37 @@ tools:
   crop-image:
     title: "Afbeelding bijsnijden"
     description: "Snijd afbeeldingen bij, wijzig het formaat en roteer ze met aangepaste achtergrondkleuren."
+    texts:
+      drag-drop: "Sleep uw afbeelding hierheen of klik om te bladeren"
+      drag-hint: "Sleep om te positioneren • Scroll om te zoomen ({zoom}%)"
+      flip-h: "Spiegel H"
+      flip-v: "Spiegel V"
+      reset: "Herstellen"
+      fit: "Passend maken"
+      change-image: "Afbeelding wijzigen"
+      aspect-ratio: "Beeldverhouding:"
+      custom-ratio: "Aangepaste verhouding:"
+      background-color: "Achtergrondkleur:"
+      transparent: "Transparant"
+      zoom-image: "Afbeelding zoomen:"
+      rotate-image: "Afbeelding roteren:"
+      rule-of-thirds-grid: "Regel-van-derden raster:"
+      export-settings: "Exportinstellingen"
+      export-format: "Exportformaat:"
+      image-quality: "Afbeeldingskwaliteit:"
+      export-width: "Exportbreedte:"
+      custom-width: "Aangepaste breedte (px):"
+      export-download-image: "Bijgesneden afbeelding exporteren & downloaden"
+      ratio-square: "1:1 (Vierkant)"
+      ratio-widescreen: "16:9 (Breedbeeld)"
+      ratio-portrait: "9:16 (Portret)"
+      ratio-standard: "4:3 (Standaard)"
+      ratio-photo: "3:2 (Foto)"
+      ratio-original: "Originele beeldverhouding"
+      ratio-custom: "Aangepaste verhouding"
+      width-original: "Originele bijsnijdgrootte"
+      width-viewport: "Viewport-grootte"
+      width-custom: "Aangepaste breedte"
   categories:
     favorite-tools: Jouw favoriete tools
     crypto: Crypto
diff --git a/locales/no.yml b/locales/no.yml
index 7a1ac776f7..dea7dc5437 100644
--- a/locales/no.yml
+++ b/locales/no.yml
@@ -111,6 +111,37 @@ tools:
   crop-image:
     title: "Beskjær bilde"
     description: "Beskjær, endre størrelse og roter bilder med egendefinerte bakgrunnsfarger."
+    texts:
+      drag-drop: "Dra og slipp bildet ditt her, eller klikk for å bla"
+      drag-hint: "Dra for å plassere • Rull for å zoome ({zoom}%)"
+      flip-h: "Vend H"
+      flip-v: "Vend V"
+      reset: "Nullstill"
+      fit: "Tilpass"
+      change-image: "Endre bilde"
+      aspect-ratio: "Bildeformat:"
+      custom-ratio: "Egendefinert format:"
+      background-color: "Bakgrunnsfarge:"
+      transparent: "Gjennomsiktig"
+      zoom-image: "Zoom bilde:"
+      rotate-image: "Roter bilde:"
+      rule-of-thirds-grid: "Tredjedelsregel-rutenett:"
+      export-settings: "Eksportinnstillinger"
+      export-format: "Eksportformat:"
+      image-quality: "Bildekvalitet:"
+      export-width: "Eksportbredde:"
+      custom-width: "Egendefinert bredde (px):"
+      export-download-image: "Eksporter og last ned beskjært bilde"
+      ratio-square: "1:1 (Kvadrat)"
+      ratio-widescreen: "16:9 (Widescreen)"
+      ratio-portrait: "9:16 (Portrett)"
+      ratio-standard: "4:3 (Standard)"
+      ratio-photo: "3:2 (Foto)"
+      ratio-original: "Originalt bildeformat"
+      ratio-custom: "Egendefinert format"
+      width-original: "Original beskjæringsstørrelse"
+      width-viewport: "Skjermstørrelse (Viewport)"
+      width-custom: "Egendefinert bredde"
   categories:
     favorite-tools: Dine favoritt verktøy
     crypto: Krypto
diff --git a/locales/pl.yml b/locales/pl.yml
index 6d1f4728cd..09029fe1f9 100644
--- a/locales/pl.yml
+++ b/locales/pl.yml
@@ -105,6 +105,37 @@ tools:
   crop-image:
     title: "Przytnij obraz"
     description: "Przycinaj, zmieniaj rozmiar i obracaj obrazy z niestandardowymi kolorami tła."
+    texts:
+      drag-drop: "Przeciągnij i upuść obraz tutaj lub kliknij, aby przeglądać"
+      drag-hint: "Przeciągnij, aby ustawić • Przewiń, aby powiększyć ({zoom}%)"
+      flip-h: "Obróć H"
+      flip-v: "Obróć V"
+      reset: "Resetuj"
+      fit: "Dopasuj"
+      change-image: "Zmień obraz"
+      aspect-ratio: "Proporcje obrazu:"
+      custom-ratio: "Niestandardowe proporcje:"
+      background-color: "Kolor tła:"
+      transparent: "Przezroczysty"
+      zoom-image: "Powiększenie obrazu:"
+      rotate-image: "Obrót obrazu:"
+      rule-of-thirds-grid: "Siatka reguły trójpodziału:"
+      export-settings: "Ustawienia eksportu"
+      export-format: "Format eksportu:"
+      image-quality: "Jakość obrazu:"
+      export-width: "Szerokość eksportu:"
+      custom-width: "Niestandardowa szerokość (px):"
+      export-download-image: "Eksportuj i pobierz przycięty obraz"
+      ratio-square: "1:1 (Kwadrat)"
+      ratio-widescreen: "16:9 (Panoramiczny)"
+      ratio-portrait: "9:16 (Portret)"
+      ratio-standard: "4:3 (Standard)"
+      ratio-photo: "3:2 (Zdjęcie)"
+      ratio-original: "Oryginalne proporcje"
+      ratio-custom: "Niestandardowe proporcje"
+      width-original: "Oryginalny rozmiar kadrowania"
+      width-viewport: "Rozmiar obszaru roboczego"
+      width-custom: "Niestandardowa szerokość"
   categories:
     favorite-tools: Twoje ulubione narzędzia
     crypto: Kryptografia
diff --git a/locales/pt.yml b/locales/pt.yml
index 8ca4d10d5e..291fbac929 100644
--- a/locales/pt.yml
+++ b/locales/pt.yml
@@ -110,6 +110,37 @@ tools:
   crop-image:
     title: "Recortar imagem"
     description: "Recortar, redimensionar e rotacionar imagens com cores de fundo personalizadas."
+    texts:
+      drag-drop: "Arraste e solte sua imagem aqui, ou clique para navegar"
+      drag-hint: "Arraste para posicionar • Role para zoom ({zoom}%)"
+      flip-h: "Espelhar H"
+      flip-v: "Espelhar V"
+      reset: "Redefinir"
+      fit: "Ajustar"
+      change-image: "Alterar imagem"
+      aspect-ratio: "Proporção de tela:"
+      custom-ratio: "Proporção personalizada:"
+      background-color: "Cor de fundo:"
+      transparent: "Transparente"
+      zoom-image: "Zoom na imagem:"
+      rotate-image: "Rotacionar imagem:"
+      rule-of-thirds-grid: "Grade da regra dos terços:"
+      export-settings: "Configurações de exportação"
+      export-format: "Formato de exportação:"
+      image-quality: "Qualidade da imagem:"
+      export-width: "Largura de exportação:"
+      custom-width: "Largura personalizada (px):"
+      export-download-image: "Exportar e baixar imagem recortada"
+      ratio-square: "1:1 (Quadrado)"
+      ratio-widescreen: "16:9 (Widescreen)"
+      ratio-portrait: "9:16 (Retrato)"
+      ratio-standard: "4:3 (Padrão)"
+      ratio-photo: "3:2 (Foto)"
+      ratio-original: "Proporção original"
+      ratio-custom: "Proporção personalizada"
+      width-original: "Tamanho de recorte original"
+      width-viewport: "Tamanho da janela de visualização"
+      width-custom: "Largura personalizada"
   categories:
     favorite-tools: Suas ferramentas favoritas
     crypto: Cripto
diff --git a/locales/ru.yml b/locales/ru.yml
index 461d502137..c974700187 100644
--- a/locales/ru.yml
+++ b/locales/ru.yml
@@ -111,6 +111,37 @@ tools:
   crop-image:
     title: "Обрезать изображение"
     description: "Обрезка, изменение размера и поворот изображений с настраиваемыми цветами фона."
+    texts:
+      drag-drop: "Перетащите изображение сюда или нажмите для выбора"
+      drag-hint: "Перетаскивайте для перемещения • Прокручивайте для масштабирования ({zoom}%)"
+      flip-h: "Отразить по гориз."
+      flip-v: "Отразить по верт."
+      reset: "Сбросить"
+      fit: "Вписать"
+      change-image: "Сменить изображение"
+      aspect-ratio: "Соотношение сторон:"
+      custom-ratio: "Свой формат:"
+      background-color: "Цвет фона:"
+      transparent: "Прозрачный"
+      zoom-image: "Масштаб:"
+      rotate-image: "Поворот:"
+      rule-of-thirds-grid: "Сетка правила третей:"
+      export-settings: "Параметры экспорта"
+      export-format: "Формат файла:"
+      image-quality: "Качество сжатия:"
+      export-width: "Ширина файла:"
+      custom-width: "Своя ширина (px):"
+      export-download-image: "Экспортировать и скачать"
+      ratio-square: "1:1 (Квадрат)"
+      ratio-widescreen: "16:9 (Широкий)"
+      ratio-portrait: "9:16 (Портрет)"
+      ratio-standard: "4:3 (Стандарт)"
+      ratio-photo: "3:2 (Фото)"
+      ratio-original: "Исходное соотношение"
+      ratio-custom: "Своя пропорция"
+      width-original: "Исходный размер"
+      width-viewport: "Размер области просмотра"
+      width-custom: "Своя ширина"
   categories:
     favorite-tools: Ваши любимые инструменты
     crypto: Крипта
diff --git a/locales/tr.yml b/locales/tr.yml
index 1e2b1c9fc1..97d0f60ea0 100644
--- a/locales/tr.yml
+++ b/locales/tr.yml
@@ -57,7 +57,38 @@ search:
 tools:
   crop-image:
     title: "Resmi kırp"
-    description: "Özel arka plan renkleriyle resimleri kırpın, yeniden boyutlandırın và döndürün."
+    description: "Özel arka plan renkleriyle resimleri kırpın, yeniden boyutlandırın ve döndürün."
+    texts:
+      drag-drop: "Resminizi buraya sürükleyip bırakın veya göz atmak için tıklayın"
+      drag-hint: "Konumlandırmak için sürükleyin • Yakınlaştırmak için kaydırın ({zoom}%)"
+      flip-h: "Yatay Çevir"
+      flip-v: "Dikey Çevir"
+      reset: "Sıfırla"
+      fit: "Sığdır"
+      change-image: "Resmi Değiştir"
+      aspect-ratio: "En Boy Oranı:"
+      custom-ratio: "Özel Oran:"
+      background-color: "Arka Plan Rengi:"
+      transparent: "Şeffaf"
+      zoom-image: "Resmi Yakınlaştır:"
+      rotate-image: "Resmi Döndür:"
+      rule-of-thirds-grid: "Üçler Kuralı Izgarası:"
+      export-settings: "Dışa Aktarma Ayarları"
+      export-format: "Dışa Aktarım Formatı:"
+      image-quality: "Resim Kalitesi:"
+      export-width: "Dışa Aktarım Genişliği:"
+      custom-width: "Özel Genişlik (px):"
+      export-download-image: "Kırpılan Resmi Dışa Aktar ve İndir"
+      ratio-square: "1:1 (Kare)"
+      ratio-widescreen: "16:9 (Geniş Ekran)"
+      ratio-portrait: "9:16 (Dikey)"
+      ratio-standard: "4:3 (Standart)"
+      ratio-photo: "3:2 (Fotoğraf)"
+      ratio-original: "Orijinal En Boy Oranı"
+      ratio-custom: "Özel Oran"
+      width-original: "Orijinal Kırpma Boyutu"
+      width-viewport: "Görüntü Alanı Boyutu"
+      width-custom: "Özel Genişlik"
   categories:
     favorite-tools: Favori araçların
     crypto: Crypto
diff --git a/locales/uk.yml b/locales/uk.yml
index 99220a9e59..596345db94 100644
--- a/locales/uk.yml
+++ b/locales/uk.yml
@@ -110,6 +110,37 @@ tools:
   crop-image:
     title: "Обрізати зображення"
     description: "Обрізайте, змінюйте розмір та повертайте зображення за допомогою власних кольорів фону."
+    texts:
+      drag-drop: "Перетягніть сюди зображення або натисніть для вибору"
+      drag-hint: "Перетягуйте для зміщення • Прокручуйте для масштабування ({zoom}%)"
+      flip-h: "Віддзеркалити по гориз."
+      flip-v: "Віддзеркалити по верт."
+      reset: "Скинути"
+      fit: "Вписати"
+      change-image: "Змінити зображення"
+      aspect-ratio: "Співвідношення сторін:"
+      custom-ratio: "Свій формат:"
+      background-color: "Колір фону:"
+      transparent: "Прозорий"
+      zoom-image: "Масштаб:"
+      rotate-image: "Поворот:"
+      rule-of-thirds-grid: "Сітка правила третин:"
+      export-settings: "Параметри експорту"
+      export-format: "Формат файлу:"
+      image-quality: "Якість зображення:"
+      export-width: "Ширина файлу:"
+      custom-width: "Своя ширина (px):"
+      export-download-image: "Експортувати та завантажити"
+      ratio-square: "1:1 (Квадрат)"
+      ratio-widescreen: "16:9 (Широкий екран)"
+      ratio-portrait: "9:16 (Портрет)"
+      ratio-standard: "4:3 (Стандарт)"
+      ratio-photo: "3:2 (Фото)"
+      ratio-original: "Оригінальне співвідношення"
+      ratio-custom: "Своє співвідношення"
+      width-original: "Оригінальний розмір обрізки"
+      width-viewport: "Розмір області перегляду"
+      width-custom: "Своя ширина"
   categories:
     favorite-tools: Ваші улюблені інструменти
     crypto: Крипта
diff --git a/locales/vi.yml b/locales/vi.yml
index fd6466a231..66d6499661 100644
--- a/locales/vi.yml
+++ b/locales/vi.yml
@@ -109,6 +109,37 @@ tools:
   crop-image:
     title: "Cắt ảnh"
     description: "Cắt, thay đổi kích thước và xoay hình ảnh với màu nền tùy chỉnh."
+    texts:
+      drag-drop: "Kéo thả ảnh của bạn vào đây, hoặc click để chọn"
+      drag-hint: "Kéo để di chuyển • Cuộn để phóng to ({zoom}%)"
+      flip-h: "Lật ngang"
+      flip-v: "Lật dọc"
+      reset: "Đặt lại"
+      fit: "Vừa khít"
+      change-image: "Đổi ảnh"
+      aspect-ratio: "Tỷ lệ khung hình:"
+      custom-ratio: "Tỷ lệ tùy chỉnh:"
+      background-color: "Màu nền:"
+      transparent: "Trong suốt"
+      zoom-image: "Phóng to ảnh:"
+      rotate-image: "Xoay ảnh:"
+      rule-of-thirds-grid: "Khung lưới tỷ lệ 1/3:"
+      export-settings: "Cài đặt xuất file"
+      export-format: "Định dạng xuất:"
+      image-quality: "Chất lượng ảnh:"
+      export-width: "Chiều rộng xuất:"
+      custom-width: "Chiều rộng tùy chỉnh (px):"
+      export-download-image: "Xuất & Tải ảnh đã cắt"
+      ratio-square: "1:1 (Hình vuông)"
+      ratio-widescreen: "16:9 (Màn hình rộng)"
+      ratio-portrait: "9:16 (Khung dọc)"
+      ratio-standard: "4:3 (Chuẩn)"
+      ratio-photo: "3:2 (Ảnh chụp)"
+      ratio-original: "Tỷ lệ gốc"
+      ratio-custom: "Tỷ lệ tùy chỉnh"
+      width-original: "Kích thước cắt gốc"
+      width-viewport: "Kích thước khung xem"
+      width-custom: "Chiều rộng tùy chỉnh"
   categories:
     favorite-tools: Công cụ yêu thích của bạn
     crypto: Mã hóa
diff --git a/locales/zh.yml b/locales/zh.yml
index 9bbe1de32e..37a6be7517 100644
--- a/locales/zh.yml
+++ b/locales/zh.yml
@@ -109,6 +109,37 @@ tools:
   crop-image:
     title: "裁剪图片"
     description: "使用自定义背景颜色裁剪、调整大小和旋转图像."
+    texts:
+      drag-drop: "拖放您的图片到这里，或点击浏览"
+      drag-hint: "拖动以调整位置 • 滚动以缩放 ({zoom}%)"
+      flip-h: "水平翻转"
+      flip-v: "垂直翻转"
+      reset: "重置"
+      fit: "适应"
+      change-image: "更换图片"
+      aspect-ratio: "宽高比:"
+      custom-ratio: "自定义比例:"
+      background-color: "背景颜色:"
+      transparent: "透明"
+      zoom-image: "缩放图片:"
+      rotate-image: "旋转图片:"
+      rule-of-thirds-grid: "三分法则网格:"
+      export-settings: "导出设置"
+      export-format: "导出格式:"
+      image-quality: "图片质量:"
+      export-width: "导出宽度:"
+      custom-width: "自定义宽度 (px):"
+      export-download-image: "导出并下载裁剪后的图片"
+      ratio-square: "1:1 (正方形)"
+      ratio-widescreen: "16:9 (宽屏)"
+      ratio-portrait: "9:16 (肖像/竖屏)"
+      ratio-standard: "4:3 (标准)"
+      ratio-photo: "3:2 (照片)"
+      ratio-original: "原始宽高比"
+      ratio-custom: "自定义比例"
+      width-original: "原始裁剪大小"
+      width-viewport: "视口大小"
+      width-custom: "自定义宽度"
   chronometer:
     title: 秒表
     description: 监测某事物的持续时间。基本上是一个具备简单计时功能的秒表。

From 66cd2fe815ec292351be4de2846c5ac83a2ea41b Mon Sep 17 00:00:00 2001
From: Chris Tran <6634746+sYnVerse@users.noreply.github.com>
Date: Sat, 6 Jun 2026 15:14:05 -0700
Subject: [PATCH 6/6] refactor: localize crop-image component

Add vue-i18n integration to crop-image.vue and replace hardcoded UI text with t() translation calls. Import useI18n and use t() for button labels, form labels, hints (with interpolation for zoom), and action text. Convert aspect ratio and export width option arrays into computed properties so they can use translated labels. These changes prepare the component for localization without changing functionality.
---
 src/tools/crop-image/crop-image.vue | 71 +++++++++++++++--------------
 1 file changed, 37 insertions(+), 34 deletions(-)

diff --git a/src/tools/crop-image/crop-image.vue b/src/tools/crop-image/crop-image.vue
index a8ed4c7509..a6a6c13bf3 100644
--- a/src/tools/crop-image/crop-image.vue
+++ b/src/tools/crop-image/crop-image.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useElementSize } from '@vueuse/core';
 import {
   Download,
@@ -14,6 +15,8 @@ import {
 
 import { getBaseDimensions, getViewportDimensions } from './crop-image.service';
 
+const { t } = useI18n();
+
 // Image references
 const imageSrc = ref<string | null>(null);
 const fileName = ref<string>('image');
@@ -50,15 +53,15 @@ let startOffsetX = 0;
 let startOffsetY = 0;
 
 // Presets for aspect ratios
-const aspectRatioOptions = [
-  { label: '1:1 (Square)', value: '1' },
-  { label: '16:9 (Widescreen)', value: '1.777777778' },
-  { label: '9:16 (Portrait)', value: '0.5625' },
-  { label: '4:3 (Standard)', value: '1.333333333' },
-  { label: '3:2 (Photo)', value: '1.5' },
-  { label: 'Original Aspect Ratio', value: 'original' },
-  { label: 'Custom Ratio', value: 'free' },
-];
+const aspectRatioOptions = computed(() => [
+  { label: t('tools.crop-image.texts.ratio-square'), value: '1' },
+  { label: t('tools.crop-image.texts.ratio-widescreen'), value: '1.777777778' },
+  { label: t('tools.crop-image.texts.ratio-portrait'), value: '0.5625' },
+  { label: t('tools.crop-image.texts.ratio-standard'), value: '1.333333333' },
+  { label: t('tools.crop-image.texts.ratio-photo'), value: '1.5' },
+  { label: t('tools.crop-image.texts.ratio-original'), value: 'original' },
+  { label: t('tools.crop-image.texts.ratio-custom'), value: 'free' },
+]);
 
 const exportFormatOptions = [
   { label: 'PNG', value: 'png' },
@@ -66,11 +69,11 @@ const exportFormatOptions = [
   { label: 'WebP', value: 'webp' },
 ];
 
-const exportWidthOptions = [
-  { label: 'Original Crop Size', value: 'original' },
-  { label: 'Viewport Size', value: 'viewport' },
-  { label: 'Custom Width', value: 'custom' },
-];
+const exportWidthOptions = computed(() => [
+  { label: t('tools.crop-image.texts.width-original'), value: 'original' },
+  { label: t('tools.crop-image.texts.width-viewport'), value: 'viewport' },
+  { label: t('tools.crop-image.texts.width-custom'), value: 'custom' },
+]);
 
 // Computed aspect ratio value
 const currentRatio = computed(() => {
@@ -346,7 +349,7 @@ function exportImage() {
       <div flex flex-col items-center justify-center gap-6 py-12>
         <c-file-upload
           accept="image/*"
-          title="Drag and drop your image here, or click to browse"
+          :title="t('tools.crop-image.texts.drag-drop')"
           w-full
           @file-upload="onUpload"
         />
@@ -423,7 +426,7 @@ function exportImage() {
 
             <!-- Viewport Hint -->
             <div mt-3 text-center text-xs text-gray-400>
-              Drag to position • Scroll to zoom ({{ Math.round(zoom * 100) }}%)
+              {{ t('tools.crop-image.texts.drag-hint', { zoom: Math.round(zoom * 100) }) }}
             </div>
 
             <!-- Quick Action Transform Buttons -->
@@ -438,19 +441,19 @@ function exportImage() {
               </c-button>
               <c-button size="small" @click="flipH = !flipH">
                 <n-icon :component="FlipHorizontal" class="mr-1" />
-                Flip H
+                {{ t('tools.crop-image.texts.flip-h') }}
               </c-button>
               <c-button size="small" @click="flipV = !flipV">
                 <n-icon :component="FlipVertical" class="mr-1" />
-                Flip V
+                {{ t('tools.crop-image.texts.flip-v') }}
               </c-button>
               <c-button size="small" @click="resetPosition">
                 <n-icon :component="Focus" class="mr-1" />
-                Reset
+                {{ t('tools.crop-image.texts.reset') }}
               </c-button>
               <c-button size="small" @click="fitToViewport">
                 <n-icon :component="Maximize" class="mr-1" />
-                Fit
+                {{ t('tools.crop-image.texts.fit') }}
               </c-button>
             </div>
           </div>
@@ -468,13 +471,13 @@ function exportImage() {
               </div>
               <c-button type="warning" size="small" @click="imageSrc = null">
                 <n-icon :component="Refresh" class="mr-1" />
-                Change Image
+                {{ t('tools.crop-image.texts.change-image') }}
               </c-button>
             </div>
 
             <n-form label-placement="left" label-width="140" label-align="right">
               <!-- Aspect Ratio Presets -->
-              <n-form-item label="Aspect Ratio:">
+              <n-form-item :label="t('tools.crop-image.texts.aspect-ratio')">
                 <c-select
                   v-model:value="aspectRatio"
                   :options="aspectRatioOptions"
@@ -483,7 +486,7 @@ function exportImage() {
               </n-form-item>
 
               <!-- Custom Aspect Ratio Inputs -->
-              <n-form-item v-if="aspectRatio === 'free'" label="Custom Ratio:">
+              <n-form-item v-if="aspectRatio === 'free'" :label="t('tools.crop-image.texts.custom-ratio')">
                 <div w-full flex items-center gap-3>
                   <n-input-number v-model:value="customRatioWidth" :min="1" placeholder="W" class="flex-1" />
                   <span font-bold text-gray-400>:</span>
@@ -492,17 +495,17 @@ function exportImage() {
               </n-form-item>
 
               <!-- Background Color Picker -->
-              <n-form-item label="Background Color:">
+              <n-form-item :label="t('tools.crop-image.texts.background-color')">
                 <div w-full flex items-center gap-4>
                   <n-color-picker v-model:value="backgroundColor" :modes="['hex', 'rgba']" class="flex-1" />
                   <c-button size="small" @click="backgroundColor = '#00000000'">
-                    Transparent
+                    {{ t('tools.crop-image.texts.transparent') }}
                   </c-button>
                 </div>
               </n-form-item>
 
               <!-- Interactive Zoom Slider -->
-              <n-form-item label="Zoom Image:">
+              <n-form-item :label="t('tools.crop-image.texts.zoom-image')">
                 <div w-full flex items-center gap-4>
                   <n-slider v-model:value="zoom" :min="0.1" :max="5" :step="0.01" class="flex-1" />
                   <span w-50px text-right font-mono>{{ Math.round(zoom * 100) }}%</span>
@@ -510,7 +513,7 @@ function exportImage() {
               </n-form-item>
 
               <!-- Interactive Rotation Slider -->
-              <n-form-item label="Rotate Image:">
+              <n-form-item :label="t('tools.crop-image.texts.rotate-image')">
                 <div w-full flex items-center gap-4>
                   <n-slider v-model:value="rotation" :min="-180" :max="180" :step="1" class="flex-1" />
                   <span w-50px text-right font-mono>{{ rotation }}°</span>
@@ -518,7 +521,7 @@ function exportImage() {
               </n-form-item>
 
               <!-- Toggle Grid lines -->
-              <n-form-item label="Rule-of-Thirds Grid:">
+              <n-form-item :label="t('tools.crop-image.texts.rule-of-thirds-grid')">
                 <n-switch v-model:value="showGrid" />
               </n-form-item>
             </n-form>
@@ -526,12 +529,12 @@ function exportImage() {
             <n-divider class="my-2" />
 
             <div text-md mb-2 font-bold>
-              Export Settings
+              {{ t('tools.crop-image.texts.export-settings') }}
             </div>
 
             <n-form label-placement="left" label-width="140" label-align="right">
               <!-- Export Format select -->
-              <n-form-item label="Export Format:">
+              <n-form-item :label="t('tools.crop-image.texts.export-format')">
                 <c-select
                   v-model:value="exportFormat"
                   :options="exportFormatOptions"
@@ -540,7 +543,7 @@ function exportImage() {
               </n-form-item>
 
               <!-- Quality slider for lossy formats -->
-              <n-form-item v-if="exportFormat === 'jpeg' || exportFormat === 'webp'" label="Image Quality:">
+              <n-form-item v-if="exportFormat === 'jpeg' || exportFormat === 'webp'" :label="t('tools.crop-image.texts.image-quality')">
                 <div w-full flex items-center gap-4>
                   <n-slider v-model:value="exportQuality" :min="0.1" :max="1" :step="0.05" class="flex-1" />
                   <span w-50px text-right font-mono>{{ Math.round(exportQuality * 100) }}%</span>
@@ -548,7 +551,7 @@ function exportImage() {
               </n-form-item>
 
               <!-- Export width options -->
-              <n-form-item label="Export Width:">
+              <n-form-item :label="t('tools.crop-image.texts.export-width')">
                 <c-select
                   v-model:value="exportWidthMode"
                   :options="exportWidthOptions"
@@ -557,7 +560,7 @@ function exportImage() {
               </n-form-item>
 
               <!-- Custom Export Width Input -->
-              <n-form-item v-if="exportWidthMode === 'custom'" label="Custom Width (px):">
+              <n-form-item v-if="exportWidthMode === 'custom'" :label="t('tools.crop-image.texts.custom-width')">
                 <n-input-number v-model:value="customExportWidth" :min="10" :max="10000" w-full />
               </n-form-item>
             </n-form>
@@ -565,7 +568,7 @@ function exportImage() {
             <!-- Big Download/Cropped Image Button -->
             <c-button type="primary" size="large" class="mt-4 w-full" @click="exportImage">
               <n-icon :component="Download" class="mr-2 text-lg" />
-              Export & Download Cropped Image
+              {{ t('tools.crop-image.texts.export-download-image') }}
             </c-button>
           </div>
         </c-card>