Ritaglia Immagini

Ritaglia un'immagine senza caricarla da nessuna parte

Trascinare sull'immagine registra un riquadro di selezione in pixel mostrati — la dimensione che l'immagine occupa davvero sul tuo schermo, di solito minore della sua dimensione reale. Prima di tagliare il ritaglio, questo strumento moltiplica la tua selezione per il rapporto tra naturalWidth/naturalHeight reali dell'immagine e la sua dimensione mostrata, poi disegna solo quella regione scalata sul canvas di output con ctx.drawImage(img, sx, sy, sw, sh, 0, 0, sw, sh). Saltare quel passaggio di scalatura è l'errore più comune nei ritagliatori fatti in casa — fa sì che il ritaglio scaricato finisca nel posto sbagliato o con la dimensione sbagliata, perché usa coordinate dello schermo contro dati di pixel reali.

Esempio pratico

Supponiamo che una foto abbia una dimensione reale di 1200 × 800 px ma venga mostrata sul tuo schermo larga 600 px (quindi alta 400 px) — un fattore di scala di 2× in entrambe le direzioni. Trascini un riquadro dalla posizione mostrata (100, 50) a (300, 200) — una selezione di 200×150 sullo schermo. Moltiplicando per il fattore di scala 2× si ottiene una regione sorgente reale che inizia a (200, 100) e arriva a (600, 400) — un ritaglio di 400×300 tagliato dall'immagine reale a piena risoluzione, che corrisponde esattamente a quanto hai visto selezionato sullo schermo.