SplitImage

Divide una foto in riquadri uguali da scaricare

Cosa fa

Uno strumento nel browser che taglia una foto in riquadri della stessa misura, per esempio per creare un mosaico sul profilo Instagram.

Come guadagna

Startup appena presentata su BetaList, che non dichiara incassi. Idee nostre per guadagnare con un progetto simile: pubblicità leggera, versione Pro con modelli di mosaico.

Rendilo tuo

• Pagine dedicate a ricerche precise: "dividere foto in 3 per Instagram", "stampare una foto grande su più fogli A4".
• Tanti piccoli strumenti come questo su un solo sito portano visite da Google.

Le frasi da scrivere all'AI

1. Base del sito e grafica

Crea un'app web in italiano chiamata "Taglia in Riquadri": taglia una foto in riquadri della stessa misura direttamente nel browser, per creare un mosaico sul profilo Instagram, un carosello panoramico o stampe a pezzi. Usa React, Vite, TypeScript e Tailwind CSS.

Pagine da creare:
1. Pagina principale: carica la foto e scegli la griglia
2. Anteprima della griglia sopra la foto, con la possibilità di spostare e ingrandire l'inquadratura
3. Anteprima di come apparirà il profilo Instagram
4. Download dei riquadri numerati nell'ordine di pubblicazione
5. Pagina Pro

Stile: pulito e creativo: sfondo bianco, gradiente Instagram (viola #833AB4, rosa #E1306C, arancio #F77737) solo per i pulsanti, carattere "Inter", anteprima grande al centro. Nessuna immagine generica di stock.

Tutto deve funzionare perfettamente da telefono. Tutti i testi in italiano, chiari e senza parole tecniche.

2. Database, account e sicurezza

Collega il progetto a Supabase e attiva la registrazione con email e password.

Crea queste tabelle:
- nessun dato per l'uso normale: le foto non vengono caricate su nessun server
- "profili": piano (gratis o Pro), collegato all'utente

Regole di sicurezza obbligatorie:
- le foto restano nel browser dell'utente
- il piano non si modifica dal browser

Usa esattamente il codice SQL che trovi nei "Dettagli tecnici" di questa scheda: eseguilo nel SQL Editor di Supabase prima di continuare, poi collega le pagine alle tabelle.

3. Taglio nel browser

L'utente carica la foto e sceglie la griglia: 3×1 (panorama in un carosello), 3×2, 3×3, 3×4, oppure righe e colonne libere, e il formato del riquadro (quadrato 1:1, verticale 4:5 o 3:4). Sopra la foto compare la griglia; si sposta e si ingrandisce l'inquadratura con il dito o il mouse.

Il taglio avviene nel browser con canvas (codice nei Dettagli tecnici), alla massima qualità: nessuna foto viene inviata al server, e lo si dice chiaramente.

I riquadri si scaricano in uno zip, numerati nell'ordine in cui vanno pubblicati: per il profilo Instagram si parte dall'ultimo in basso a destra, perché l'ultimo pubblicato compare in alto a sinistra.

4. Anteprima del profilo e Pro

Anteprima del profilo Instagram con la griglia già al suo posto e i 3 post più recenti dell'utente (caricati da lui come immagini) per vedere l'effetto finale.

Pro: nessuna pubblicità, griglie fino a 10×10 per stampe giganti a pezzi, bordi bianchi tra i riquadri, e taglio di più foto insieme.

5. Pagamenti con Stripe

Aggiungi un pagamento singolo di 2,99 € una volta sola. Il pagamento toglie la pubblicità e sblocca griglie grandi, bordi e taglio di più foto.

A pagamento riuscito il webhook imposta "piano" a "pro" nella tabella "profili", sulla riga dell'utente indicata in client_reference_id.

Per la sessione di pagamento e il webhook segui la guida "Pagamenti con Stripe" di Fattibile.

6. Controlli specifici di questo progetto

Oltre ai controlli della guida "Controllo finale", verifica in particolare:
1. Qualità: taglia una foto da 12 megapixel in 3×3 e controlla che i riquadri siano nitidi e che, accostati, la foto combaci perfettamente.
Correggi quello che non va e scrivimi cosa hai cambiato.

Dettagli tecnici

Tagliare la foto in riquadri

Ritaglia l'inquadratura scelta e la divide in righe e colonne, restituendo i riquadri nell'ordine di pubblicazione per Instagram (dall'ultimo al primo).

export async function tagliaInRiquadri(
  file: File,
  griglia: { righe: number; colonne: number },
  inquadratura: { x: number; y: number; larghezza: number; altezza: number },   // in pixel della foto
): Promise<Blob[]> {
  const img = await createImageBitmap(file);
  const lr = Math.floor(inquadratura.larghezza / griglia.colonne);   // larghezza di un riquadro
  const ar = Math.floor(inquadratura.altezza / griglia.righe);

  const riquadri: Blob[] = [];
  for (let r = 0; r < griglia.righe; r++) {
    for (let c = 0; c < griglia.colonne; c++) {
      const tela = new OffscreenCanvas(lr, ar);
      tela.getContext("2d")!.drawImage(
        img,
        inquadratura.x + c * lr, inquadratura.y + r * ar, lr, ar,   // pezzo della foto
        0, 0, lr, ar,                                              // tutta la tela
      );
      riquadri.push(await tela.convertToBlob({ type: "image/jpeg", quality: 0.95 }));
    }
  }
  img.close();
  // Su Instagram l'ultimo pubblicato va in alto a sinistra: si pubblica dal fondo
  return riquadri.reverse();
}

Pezzi comuni a tutti i progetti

• Pagamenti con Stripe
• Profili, piano e crediti
• Controllo finale prima di pubblicare

Glossario

Canvas

Una tela del browser dove il codice può disegnare e ritagliare immagini, senza inviarle a nessuno.