ఉచిత ఇమేజ్ రొటేటర్ & ఫ్లిప్పర్

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

ఇక్కడ భ్రమణం, తిప్పడం, మరియు కోణ సవరణ HTML Canvas API ఉపయోగించి పూర్తిగా మీ బ్రౌజర్‌లో నడుస్తాయి — ఏ ఫైల్ ఎప్పుడూ సర్వర్‌కు పంపబడదు. టూల్ మీ చిత్రాన్ని ఎంచుకున్న కోణం మరియు scale transformsతో ఆఫ్-స్క్రీన్ కాన్వాస్‌పై గీసి, బ్రౌజర్ సొంత codec ఉపయోగించి ఫలితాన్ని JPEG, PNG, లేదా WebPగా ఎన్‌కోడ్ చేస్తుంది.

1. 1
   చిత్రం లోకల్‌గా డీకోడ్ చేయబడుతుంది

   మీ JPEG, PNG, లేదా WebP ఫైల్ లోకల్ object URL ద్వారా HTMLImageElementలోకి లోడ్ చేయబడుతుంది — మీ పరికరం దాటి వెళ్లని బ్రౌజర్ మెమరీ రిఫరెన్స్. సహజ పిక్సెల్ కొలతలు డీకోడ్ చేసిన బిట్‌మ్యాప్ నుండి నేరుగా చదవబడతాయి.
2. 2
   Canvas transform వర్తింపజేయబడుతుంది

   ఆఫ్-స్క్రీన్ కాన్వాస్ తిప్పిన bounding boxకు సరిపోయేలా (ప్రతి అక్షానికి width·cos + height·sin) పరిమాణం చేయబడుతుంది. తర్వాత Canvas 2D context మధ్యకు translate చేయబడి, ఎంచుకున్న కోణంతో radiansలో తిప్పబడి, తిప్పడాల కోసం క్షితిజ సమాంతర లేదా నిలువు అక్షంపై -1తో scale చేయబడుతుంది — అన్నీ బాహ్య లైబ్రరీ లేని ప్రామాణిక ctx.rotate / ctx.scale ఆపరేషన్‌లు.
3. 3
   ఆటో-క్రాప్ మూలలను కత్తిరిస్తుంది (ఐచ్ఛికం)

   లంబకోణం కాని భ్రమణాల కోసం, చేతితో రాసిన జ్యామితి ఫంక్షన్ — largestInnerRect — తిప్పిన bounding box లోపల సరిపోయే అసలు aspect ratio యొక్క అతిపెద్ద అక్ష-సమలేఖన దీర్ఘచతురస్రాన్ని లెక్కిస్తుంది, కాబట్టి చిత్రాన్ని వక్రీకరించకుండా త్రిభుజాకార ఖాళీ మూలలు తీసివేయబడతాయి.
4. 4
   బ్రౌజర్ codec ఫలితాన్ని ఎన్‌కోడ్ చేస్తుంది

   canvas.toBlob() పిక్సెల్ డేటాను బ్రౌజర్ అంతర్నిర్మిత ఇమేజ్ ఎన్‌కోడర్‌కు అప్పగిస్తుంది, మీరు నేరుగా డౌన్‌లోడ్ చేసే JPEG (ఎంచుకోగల నాణ్యత మరియు పారదర్శక మూలల కోసం నేపథ్య రంగుతో), PNG, లేదా WebP Blobను ఉత్పత్తి చేస్తుంది.

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