cropimagekit

ImageCropKit은 스크린샷, AI 데이터셋, 여권 또는 프로필 사진을 위한 브라우저 기반 이미지 크롭 플랫폼입니다. README에서는 모든 처리가 로컬에서 이루어지며, 업로드, 가입, 워터마크가 없다는 점을 강조합니다. 설명된 핵심 기능은 다음과 같습니다: - 자유 크롭, 종횡비 프리셋 및 정확한 픽셀 치수를 이용한 단일 이미지 크롭. - 개인적인 캡처본을 업로드하고 싶지 않은 사용자를 위한 공백 및 가장자리 트리밍을 포함한 스크린샷 크롭 및 트리밍. - SD 1.5 (512x512) 및 SDXL (1024x1024)과 같은 배치 크롭 프리셋과 사용자 정의 크기를 통한 AI 데이터셋 준비. - 여권, 헤드샷, 아바타 및 프로필 사진 크롭. - 대량 크롭: 여러 이미지를 업로드하고 공통 크롭을 적용한 후 결과를 ZIP 파일로 다운로드. - Instagram, TikTok, YouTube, Shopify, Amazon, Etsy, LinkedIn 및 여권 사진을 아우르는 플랫폼 프리셋. - 아바타 및 프로필 사진을 위한 원형 및 타원형 출력 모양 크롭. - 품질 제어가 가능한 PNG, JPG 또는 WebP로 내보내기. 작동 방식: 사용자가 드래그 앤 드롭, 클릭 또는 붙여넣기로 이미지를 업로드하고, 크롭 영역이나 종횡비 프리셋을 선택하여 영역을 조정한 후 내보냅니다. README에 따르면 이미지 처리는 HTML5 Canvas API를 사용하여 브라우저에서 실행되며, 서버 업로드, 계정 생성 또는 워터마크가 없습니다. 기술 스택: App Router와 Turbopack이 적용된 Next.js 16, TypeScript 기반의 React 19, Tailwind CSS 4, 이미지 처리를 위한 Canvas API, 크롭 UI를 위한 react-image-crop, 그리고 대량 다운로드를 위한 JSZip 및 file-saver를 사용합니다. 개발에는 pnpm(pnpm install, pnpm dev 후 localhost:3000 접속)을 사용합니다. 프로젝트 구조는 app 디렉토리를 도구당 하나의 페이지로 구성하며, 여기에는 crop-image, crop-screenshot, trim-screenshot, ai-dataset-cropper, profile-photo-cropper, bulk-crop-images, crop-product-images, crop-image-for-instagram, crop-image-for-tiktok, crop-headshot, circle-crop-image가 포함됩니다. 재사용 가능한 컴포넌트로는 단일 이미지 에디터를 위한 CropEditor.tsx, 다중 이미지 에디터를 위한 BulkCropEditor.tsx, JSON-LD 구조화된 데이터를 위한 StructuredData.tsx가 있습니다. lib 디렉토리에는 Canvas 기반 내보내기 파이프라인인 cropImage.ts, 플랫폼 크기 프리셋인 presets.ts, 그리고 siteConfig.ts와 같은 유틸리티 함수가 포함되어 있습니다. 이슈를 통한 기여를 환영하며, 프로젝트는 MIT 라이선스로 배포됩니다. README에서 라이브 사이트 링크를 확인할 수 있습니다.