API Referansı

<template>
  <ImageCropper
    :aspect-ratio="aspectRatio"
    :output-format="format"
    :quality="quality"
    @crop-complete="handleCropComplete"
  />
</template>

interface CropResult {
  url: string; // Kırpılan görüntünün Blob URL'si
  blob: Blob; // Görüntü blob verisi
  canvas: HTMLCanvasElement; // Canvas öğesi
  info: {
    width: number; // Piksel cinsinden çıktı genişliği
    height: number; // Piksel cinsinden çıktı yüksekliği
    size: number; // Bayt cinsinden dosya boyutu
    format: string; // Çıktı formatı
  };
}

interface ImageInfo {
  width: number; // Orijinal genişlik
  height: number; // Orijinal yükseklik
  size: number; // Bayt cinsinden dosya boyutu
  type: string; // MIME türü
  name: string; // Orijinal dosya adı
}

interface CropSettings {
  aspectRatio: number | "free";
  outputFormat: "png" | "jpeg" | "webp";
  quality: number;
  outputWidth?: number;
  outputHeight?: number;
}

const cropperOptions = {
  aspectRatio: NaN, // Serbest en-boy oranı
  viewMode: 1, // Kırpma kutusunu tuvale kısıtla
  responsive: true, // Duyarlı cropper
  restore: false, // Yeniden boyutlandırmadan sonra geri yükleme yapma
  guides: true, // Kesik çizgileri göster
  center: true, // Merkez göstergesini göster
  highlight: false, // Kırpma alanını vurgulama
  cropBoxMovable: true, // Kırpma kutusunu taşımaya izin ver
  cropBoxResizable: true, // Kırpma kutusunu yeniden boyutlandırmaya izin ver
  toggleDragModeOnDblclick: false, // Çift tıklamayı devre dışı bırak
};

// Dosyadan görüntü yükle
function loadImageFromFile(file: File): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e) => resolve(e.target?.result as string);
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

// Blob'u dosya olarak indir
function downloadBlob(blob: Blob, filename: string): void {
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}

// Tuvali blob'a dönüştür
function canvasToBlob(canvas: HTMLCanvasElement, format: string, quality?: number): Promise<Blob> {
  return new Promise((resolve) => {
    canvas.toBlob(resolve, `image/${format}`, quality);
  });
}

// Görüntü boyutlarını al
function getImageDimensions(src: string): Promise<{ width: number; height: number }> {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () =>
      resolve({
        width: img.naturalWidth,
        height: img.naturalHeight,
      });
    img.src = src;
  });
}

// Görüntüleme için dosya boyutunu biçimlendir
function formatFileSize(bytes: number): string {
  const sizes = ["Bytes", "KB", "MB", "GB"];
  if (bytes === 0) return "0 Bytes";
  const i = Math.floor(Math.log(bytes) / Math.log(1024));
  return Math.round((bytes / Math.pow(1024, i)) * 100) / 100 + " " + sizes[i];
}

// Görüntü dosyasını doğrula
function isValidImageFile(file: File): boolean {
  return file.type.startsWith("image/");
}

// Dosya doğrulama hataları
class InvalidFileTypeError extends Error {
  constructor() {
    super("Geçersiz dosya türü. Lütfen bir görüntü dosyası seçin.");
  }
}

// Bellek hataları
class ImageTooLargeError extends Error {
  constructor() {
    super("Görüntü bu tarayıcıda işlenmek için çok büyük.");
  }
}

// İşleme hataları
class CropProcessingError extends Error {
  constructor(message: string) {
    super(`Kırpma işlemi başarısız oldu: ${message}`);
  }
}

// Zarif hata yönetimi
function handleCropError(error: Error): void {
  if (error instanceof InvalidFileTypeError) {
    // Dosya türü hata mesajını göster
    showErrorMessage("Lütfen geçerli bir görüntü dosyası seçin");
  } else if (error instanceof ImageTooLargeError) {
    // Görüntü boyutu küçültme önerisi
    showErrorMessage("Görüntü çok büyük. Lütfen daha küçük bir görüntü kullanın");
  } else {
    // Genel hata yönetimi
    showErrorMessage("Bir hata oluştu. Lütfen tekrar deneyin");
  }
}

// Kaynakları temizle
function cleanup(): void {
  // Blob URL'lerini iptal et
  blobUrls.forEach((url) => URL.revokeObjectURL(url));

  // Cropper örneğini yok et
  if (cropper) {
    cropper.destroy();
    cropper = null;
  }

  // Tuval referanslarını temizle
  canvasRefs.length = 0;
}

// Büyük görüntüleri verimli bir şekilde işle
function processLargeImage(canvas: HTMLCanvasElement): HTMLCanvasElement {
  const maxDimension = 4096; // Tarayıcı sınırı
  const scale = Math.min(maxDimension / canvas.width, maxDimension / canvas.height, 1);

  if (scale < 1) {
    const scaledCanvas = document.createElement("canvas");
    scaledCanvas.width = canvas.width * scale;
    scaledCanvas.height = canvas.height * scale;

    const ctx = scaledCanvas.getContext("2d");
    ctx.drawImage(canvas, 0, 0, scaledCanvas.width, scaledCanvas.height);

    return scaledCanvas;
  }

  return canvas;
}