အခမဲ့ ပုံလှည့်/ပြောင်းပြန်လှန်စက်

မည်သို့ အလုပ်လုပ်သည်

ဤနေရာတွင် rotation၊ flip နှင့် angle ပြင်ဆင်မှုများကို HTML Canvas API ကို သုံး၍ သင့် browser ထဲတွင် လုံးဝ လုပ်ဆောင်ပါသည် — ဖိုင်တစ်ခုမျှ server သို့ ဘယ်တော့မှ မပို့ပါ။ ကိရိယာသည် သင့်ပုံကို ရွေးချယ်ထားသော angle နှင့် scale transform များဖြင့် off-screen canvas ပေါ်တွင် ဆွဲပြီး browser ၏ ကိုယ်ပိုင် codec ကို သုံး၍ ရလဒ်ကို JPEG၊ PNG သို့မဟုတ် WebP သို့ encode လုပ်သည်။

1. 1
   ပုံကို local တွင် decode လုပ်ထားသည်

   သင့် JPEG၊ PNG သို့မဟုတ် WebP ဖိုင်ကို local object URL — သင့်စက်ကို ဘယ်တော့မှ မထွက်သော browser memory reference — မှတစ်ဆင့် HTMLImageElement ထဲသို့ load လုပ်သည်။ Decode လုပ်ထားသော bitmap မှ သဘာဝ pixel အတိုင်းအတာများကို တိုက်ရိုက် ဖတ်ယူသည်။
2. 2
   Canvas transform ကို အသုံးချထားသည်

   Off-screen canvas ကို rotation ပြုလုပ်ထားသော bounding box (axis တစ်ခုစီအတွက် width·cos + height·sin) နှင့် ကိုက်ညီအောင် အရွယ်အစားချသည်။ Canvas 2D context ကို ထို့နောက် အလယ်ဗဟိုသို့ translate လုပ်ပြီး ရွေးချယ်ထားသော angle ကို radian ဖြင့် rotate လုပ်ကာ flip များအတွက် horizontal သို့မဟုတ် vertical axis ပေါ် -1 ဖြင့် scale ချသည် — ပြင်ပ library မပါဘဲ standard ctx.rotate / ctx.scale လုပ်ဆောင်ချက်များအားလုံးပင်။
3. 3
   Auto-crop သည် ထောင့်များကို ဖြတ်တောက်သည် (ရွေးချယ်နိုင်)

   Right-angle မဟုတ်သော rotation များအတွက် ကိုယ်တိုင်ရေးထားသော geometry function — largestInnerRect — သည် rotation ပြုလုပ်ထားသော bounding box အတွင်း ကိုက်ညီသော မူရင်း aspect ratio ၏ အကြီးဆုံး axis-aligned rectangle ကို တွက်ချက်ပေးသည်၊ ထို့ကြောင့် ပုံကို မပျက်စီးစေဘဲ တြိဂံပုံ လွတ်နေသော ထောင့်များကို ဖယ်ရှားနိုင်သည်။
4. 4
   Browser codec သည် ရလဒ်ကို encode လုပ်သည်

   canvas.toBlob() သည် pixel data ကို browser ၏ built-in image encoder သို့ ပေးပို့ပြီး JPEG (ရွေးချယ်နိုင်သော quality နှင့် ပွင့်လင်းသော ထောင့်များအတွက် နောက်ခံဖြည့်အရောင်ပါသော)၊ PNG သို့မဟုတ် WebP Blob တစ်ခု ထုတ်ပေးသည်၊ ၎င်းကို သင် တိုက်ရိုက် ဒေါင်းလုဒ်ဆွဲနိုင်သည်။

ဆက်နွှယ်သော ကိရိယာများ