Decupează o imagine _

Cum funcționează decuparea imaginilor în browser

Procesul de decupare rulează în întregime în fila browserului tău folosind API-ul Canvas. Fără procesare pe server, fără încărcări, fără servicii terțe. Fiecare pas are loc pe dispozitivul tău.

1. Încarcă imaginea într-un element <img> astfel încât browserul să o decodeze local. O suprapunere canvas redă imaginea scalată pentru a se potrivi în fereastra de vizualizare, în timp ce un dreptunghi de selecție tragabil arată regiunea curentă de decupare.
2. Trage dreptunghiul de margini sau colțuri pentru a ajusta zona de decupare. Dreptunghiul rămâne fixat la limitele imaginii, astfel încât să nu poți selecta o regiune în afara imaginii. Când un raport de aspect fix este activ (1:1, 16:9, 4:3), redimensionarea păstrează acel raport automat.
3. Citirea pixelilor se actualizează în timp real pe măsură ce tragi, arătând lățimea, înălțimea, X și Y curente ale decupării în coordonatele pixelilor imaginii. Acest lucru îți permite să țintești dimensiuni exacte fără presupuneri.
4. Când faci click pe Decupează și Descarcă, pagina desenează doar regiunea selectată a imaginii sursă pe un canvas în afara ecranului la rezoluția originală a pixelilor, apoi exportă rezultatul prin canvas.toBlob() în același format ca fișierul sursă. Se generează un URL Blob pentru descărcare.

De ce să decupezi imagini online?

• Decuparea elimină marginile nedorite, spațiul gol sau dezordinea vizuală. O singură trecere de decupare îmbunătățește adesea compoziția unei fotografii mai mult decât orice filtru sau ajustare de culoare.
• Controlul raportului de aspect este esențial pentru platformele de publicare. Feedurile de social media așteaptă 1:1 pentru profiluri, 16:9 pentru thumbnail-uri video și 4:3 pentru fotografie standard. Decuparea la raportul corect evită letterboxing-ul incomod sau tăierile la încărcare.
• Decuparea pe partea clientului este singura opțiune pe dispozitivele corporative blocate care nu au un editor foto. Deoarece nimic nu se încarcă, nu există risc de scurgere de date și nu este necesară nicio revizuire de conformitate pentru imaginile sensibile.
• Citirea dimensiunilor în timp real elimină presupunerile. Vezi coordonatele pixelilor și dimensiunea selecției pe măsură ce tragi, astfel încât poți decupa la o lățime și înălțime exacte fără a comuta la un instrument de măsurare a pixelilor.

Aplicații comune de decupare

Decuparea este una dintre cele mai comune editări de imagine în publicarea web, social media și dezvoltarea software. Iată trei tipare în care un decupator bazat pe browser economisește timp.

• Pregătirea fotografiilor de produs pentru un magazin online. Decupează la un raport de aspect consistent 1:1 sau 4:5 pentru ca fiecare thumbnail de listare să se alinieze în grilă. Exportul păstrează formatul original, deci fotografiile de produs JPEG rămân JPEG.
• Trimiterea capturilor de ecran pentru documentație sau rapoarte de erori. Decupează bara de instrumente a browserului, bara de activități Windows sau notificările sensibile înainte de a atașa imaginea la un ticket sau un pull request.
• Încadrarea unei imagini hero sau a unui banner pentru o pagină de destinație. Blochează presetarea 16:9, poziționează cea mai importantă parte a fotografiei în centrul dreptunghiului de decupare și exportă la rezoluția originală pentru cea mai bună calitate pe ecrane retina.

Un exemplu practic: decuparea unei fotografii 4000×3000 la 1200×675 pentru un banner hero

O fotografie de 4000×3000 pixeli de la o cameră digitală este mult prea mare pentru un banner hero web tipic. Spațiul bannerului poate fi 1200×675 (un cadru 16:9).

Plasează fotografia în zona de încărcare. Imaginea se încarcă la rezoluție completă, dar se scalează pentru a se potrivi în fereastra de vizualizare pentru o interacțiune confortabilă de tragere. Selectează presetarea raportului de aspect 16:9. Dreptunghiul de decupare se fixează instantaneu pe cea mai largă regiune 16:9 care se potrivește imaginii. Trage dreptunghiul pentru a poziționa punctul focal — un vârf de munte, un produs, fața unei persoane — în cadru. Citirea în timp real arată selecția curentă la 4000×2250 (fereastra 16:9 a întregii imagini). Apucă un mâner de colț și trage în interior până când citirea lățimii ajunge la 1200 px. Înălțimea urmează automat deoarece raportul este blocat. Click pe Decupează și Descarcă. Pagina extrage regiunea selectată de 1200×675 din pixelii originali și livrează fișierul decupat în formatul sursă. Întregul proces durează o secundă sau două și nu folosește lățime de bandă de rețea dincolo de încărcarea inițială a paginii.

Ce formate de imagine sunt suportate pentru decupare?

Instrumentul acceptă orice format pe care browserul îl poate decoda: PNG, JPEG și WebP acoperă aproape toate cazurile de utilizare reale. Rezultatul decupat este salvat în același format ca fișierul sursă. PNG rămâne fără pierderi, JPEG păstrează nivelul său original de calitate, iar WebP rămâne WebP. Formatul este detectat din tipul MIME al fișierului sursă.

Decuparea reduce dimensiunea fișierului imagine?

Decuparea elimină pixeli, deci dimensiunea fișierului de ieșire este de obicei mai mică decât sursa, mai ales când decupezi o margine mare sau o zonă goală. Exportul folosește formatul original al fișierului și parametrii săi de codificare — PNG rămâne fără pierderi, JPEG păstrează setarea originală de calitate — deci singurele economii provin din numărul redus de pixeli, nu din re-comprimare.

Ce fac presetările de raport de aspect?

Presetările (1:1, 16:9, 4:3, 3:2, 9:16) blochează raportul lățime-înălțime al dreptunghiului de decupare. Când o presetare este activă, tragerea oricărui mâner de colț sau margine ajustează dimensiunea selecției păstrând raportul constant. Comutarea în modul Liber elimină constrângerea, astfel încât poți redimensiona dreptunghiul arbitrar. Raportul este aplicat pe coordonatele pixelilor imaginii, deci rezultatul exportat are exact raportul de aspect pe care l-ai selectat.

Imaginea se încarcă pe un server?

Nu. Imaginea nu părăsește niciodată dispozitivul tău. Pagina folosește API-ul File al browserului pentru a citi imaginea în memorie și API-ul Canvas pentru a decupa și exporta rezultatul. Poți verifica acest lucru deschizând panoul Network al DevTools — singurele cereri externe în timpul decupării sunt încărcarea inițială a paginii și apelurile de reclame. Nicio imagine nu este transmisă.

Pot decupa o zonă specifică introducând coordonate exacte ale pixelilor?

Versiunea curentă ajustează dreptunghiul de decupare prin interacțiunea de tragere pe previzualizarea imaginii. Poți citi coordonatele pixelilor în timp real pentru X, Y, lățimea și înălțimea selecției. Introducerea numerică directă pentru dreptunghiul de decupare nu este disponibilă în v1, dar este o îmbunătățire planificată pentru o actualizare viitoare.

Ce se întâmplă cu imaginea originală?

Fișierul original rămâne pe dispozitivul tău. Pagina îl citește în memoria browserului pentru afișare și decupare, dar nu modifică niciodată fișierul sursă de pe disc. Rezultatul decupat este un fișier nou pe care îl descarci separat. Originalul rămâne neatins la locația sa originală pe computerul sau telefonul tău.

Există o limită de dimensiune pentru decupare?

Instrumentul respectă o limită de 30 MB per fișier în zona de încărcare pentru a menține memoria browserului sub control pe dispozitivele mai puțin performante. Dacă imaginea ta este mai mare de 30 MB, o poți redimensiona mai întâi folosind un instrument dedicat de redimensionare a imaginilor înainte de a o încărca aici pentru decupare.

Decuparea funcționează pe telefoane mobile și tablete?

Da. Mânerele de decupare sunt dimensionate ținând cont de țintele tactile, iar interacțiunea folosește evenimente pointer care funcționează atât cu click-uri de mouse, cât și cu atingeri cu degetul. Pe ecranul unui telefon, previzualizarea imaginii se adaptează la lățimea disponibilă, iar comenzile se așează vertical pentru o utilizare ușoară cu o singură mână.