ఉచిత ఇమేజ్ క్రాపర్

ఇది ఎలా పనిచేస్తుంది

క్రాపింగ్ HTML5 Canvas API ఉపయోగించి పూర్తిగా మీ బ్రౌజర్‌లో జరుగుతుంది — అప్‌లోడ్ లేదు, సర్వర్ లేదు. మీరు కాన్వాస్ ఎలిమెంట్‌పై నేరుగా ఎంపిక ప్రాంతాన్ని లాగుతారు, క్రాప్ వర్తింపజేసినప్పుడు, బ్రౌజర్ అంతర్నిర్మిత 2D రెండరింగ్ ఇంజిన్ ఎంచుకున్న పిక్సెల్‌లను మాత్రమే చదివి వాటిని JPEG, PNG, లేదా WebPగా మళ్లీ ఎన్‌కోడ్ చేస్తుంది.

1. 1
   చిత్రం మెమరీలోకి లోడ్ అవుతుంది

   మీ ఫైల్ URL.createObjectURL()తో చదవబడుతుంది, ఇది బ్రౌజర్‌కు లోకల్ blob URL ఇస్తుంది. HTMLImageElement ఫైల్‌ను పూర్తిగా బ్రౌజర్ ట్యాబ్‌లో డీకోడ్ చేస్తుంది — ఇమేజ్ బైట్‌లు ఎప్పుడూ మీ పరికరం దాటి వెళ్లవు.
2. 2
   Pointer Events క్రాప్ ఎంపికను నడుపుతాయి

   బ్రౌజర్ Pointer Events API (మౌస్, టచ్, మరియు పెన్ ఇన్‌పుట్‌ను ఏకీకృతం చేస్తుంది) కాన్వాస్ ఓవర్‌లేపై లాగడాలను ట్రాక్ చేస్తుంది. ఎంపిక వెలుపల నొక్కితే కొత్త దీర్ఘచతురస్రం మొదలవుతుంది; లోపల నొక్కితే అది కదులుతుంది; కింది-కుడి మూల దగ్గర నొక్కితే పరిమాణం మారుతుంది. ఐచ్ఛిక aspect-ratio ప్రీసెట్‌లు (1:1, 16:9, 4:3, మొదలైనవి) లాగేటప్పుడు జ్యామితిని పరిమితం చేస్తాయి.
3. 3
   Canvas లైవ్ ప్రివ్యూను గీస్తుంది

   ప్రతి క్రాప్ మార్పుపై, Canvas 2D context చిత్రాన్ని మళ్లీ గీసి, ఎంపిక వెలుపల ముదురు ఓవర్‌లే వర్తింపజేసి, అసలు చిత్రాన్ని పూర్తి నాణ్యతతో చూపడానికి క్రాప్ ప్రాంతాన్ని క్లియర్ చేసి, rule-of-thirds గ్రిడ్ మరియు టీల్ resize హ్యాండిల్‌ను పైన చూపుతుంది.
4. 4
   toBlob() ఫలితాన్ని ఎన్‌కోడ్ చేసి అందిస్తుంది

   మీరు Crop క్లిక్ చేసినప్పుడు, ఖచ్చితమైన క్రాప్ కొలతలతో కొత్త ఆఫ్-స్క్రీన్ కాన్వాస్ సృష్టించబడుతుంది. ctx.drawImage() ఎంచుకున్న దీర్ఘచతురస్రాన్ని మాత్రమే కాపీ చేస్తుంది, canvas.toBlob() మీరు ఎంచుకున్న నాణ్యత సెట్టింగ్‌లో బ్రౌజర్ స్థానిక JPEG, PNG, లేదా WebP ఎన్‌కోడర్ ఉపయోగించి ఫలితాన్ని ఎన్‌కోడ్ చేస్తుంది. అవుట్‌పుట్ డౌన్‌లోడ్ కోసం లోకల్ blob URLగా తిరిగి ఇవ్వబడుతుంది.

సంబంధిత సాధనాలు