Image Converter — Scope & Build

Full scope, feature list, and downloadable source ZIP for the Image Converter module.

Image Converter Source (ZIP)

6 files · ~16 KB · 2 pages, 1 component, 1 lib, 1 backend function, 1 entity

Image Converter — Scope & Feature Spec

Overview

AuctionSnap ships two image-conversion surfaces. Both run entirely client-side in the browser (HTML5 Canvas) — no server round-trip is required for the conversion itself. The simpler one uploads the result straight into the Media Library; the full one is a drag-and-drop batch converter supporting HEIC, DNG/RAW, and folder drops.

Primary Goal

Turn any incoming image format (HEIC from iPhones, DNG/RAW from cameras, WebP, PNG, GIF, BMP, SVG) into a clean JPG/PNG/WebP at a chosen quality and resolution — so auction images are uniform, small, and platform-ready before they enter the library.

Pages & Routes

  • ImageFormatConverter — /ImageFormatConverter — the full-featured batch converter (HEIC, DNG/RAW, folder drop, quality/resolution/EXIF controls, Media Library picker). This is the primary converter.
  • ImageConverter — /ImageConverter — the simple single-file "anything → JPEG" converter that saves the result into the Media Library.

Source Files (included in the ZIP)

Frontend — Pages

  • src/pages/ImageFormatConverter.jsx — full batch converter (the main one).
  • src/pages/ImageConverter.jsx — simple single-file converter page wrapper.

Frontend — Components

  • src/components/ImageConverter.jsx — the simple converter widget (canvas → JPEG → upload → MediaLibrary.create).

Frontend — Shared Libs

  • src/lib/dngConverter.js — DNG/RAW file-type detection (isDngOrRaw).

Backend Functions

  • base44/functions/uploadImage/entry.ts — uploads a base64 image to storage (used by the simple converter to persist the result).

Entities

  • base44/entities/MediaLibrary.jsonc — the simple converter saves its output as a MediaLibrary record.

Features

ImageFormatConverter (the main converter)

  1. Drag & drop — drop individual files or a whole folder (webkitdirectory).
  2. Browse Files / Browse Folder / Media Library — three ways to add images.
  3. Supported inputs — JPG, PNG, WebP, HEIC, HEIF, DNG, RAW, CR2, CR3, NEF, ARW, ORF, RW2, PEF, SRW.
  4. HEIC handling — auto-decoded via heic2any for an instant preview; re-encoded to the chosen target format on convert.
  5. DNG/RAW handling — decoded via createImageBitmap + canvas when the browser supports it; otherwise shown with a 📷 placeholder and the raw file is still offered for download.
  6. HEVC/video detection — HEVC/MOV/MP4 files are detected and listed with a download link + a note to use HandBrake/FFmpeg (browser-based H.265→H.264 needs hardware support).
  7. Target format — JPG, PNG, or WebP.
  8. Quality presets — Low (60%), Medium (80%), High (92%), Max (100%).
  9. Resolution presets — Original (100%), 75%, 50%, 25%.
  10. EXIF control — Preserve or Strip EXIF metadata (privacy).
  11. Selection — click-to-toggle, select-all/deselect-all, auto-selects newly added files.
  12. Per-file tile — preview, format badge (HEIC / RAW ext), size in KB, remove button.
  13. Convert — processes all selected files through canvas at the chosen format/quality/resolution; JPG gets a white background fill for transparency.
  14. Results grid — shows each converted file with before/after size, dimensions, and a per-file download button.
  15. Download All — downloads every converted file.
  16. 100% client-side — no upload, no credits, no server call for the conversion itself.

ImageConverter (the simple converter)

  1. Single file — pick one image (JPEG, PNG, WebP, GIF, BMP, SVG).
  2. Quality slider — 10–100%.
  3. Canvas conversion — decodes the image, draws to canvas, exports as JPEG at the chosen quality.
  4. Upload + save — uploads the JPEG via the uploadImage backend function and creates a MediaLibrary record (category collectibles, source upload).
  5. Result card — shows original → converted size and a link to the Library Manager to rename/organize.

Data Flow

ImageFormatConverter (batch):
  drop/browse/folder/Media Library → addFiles (HEIC→heic2any, DNG→createImageBitmap)
  → select files → choose format/quality/resolution/EXIF
  → canvas.toBlob (client-side) → results grid → download (no upload)

ImageConverter (simple):
  pick file → canvas → JPEG blob → uploadImage (backend) → MediaLibrary.create → Library Manager

Known Behaviors / Decisions

  • All conversion is client-side canvas-based — no AI, no credits, no server processing.
  • JPG output always gets a white background fill so transparent PNGs/WebPs don't turn black.
  • HEIC preview is generated immediately on add (so the grid isn't blank); the final target-format re-encode happens on Convert.
  • DNG/RAW decode depends on browser support; unsupported RAW files show a placeholder but are still downloadable.
  • The simple converter saves into the Media Library; the batch converter does not save — it only downloads.
  • EXIF stripping is a UI toggle; canvas re-encoding inherently drops most metadata, so "Strip EXIF" is the effective default behavior of the pipeline.

Dependencies

  • Entities: MediaLibrary (simple converter only)
  • Backend functions: uploadImage (simple converter only)
  • Libs: dngConverter (isDngOrRaw)
  • Packages: heic2any (HEIC decode), react-query, lucide-react, shadcn/ui