အခမဲ့ ပုံဖြတ်တောက်စက်

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

Cropping ကို HTML5 Canvas API ကို သုံး၍ သင့် browser ထဲတွင် လုံးဝ လုပ်ဆောင်ပါသည် — upload၊ server မပါဝင်ပါ။ Canvas element တစ်ခုပေါ်တွင် ရွေးချယ်ဧရိယာတစ်ခုကို တိုက်ရိုက် ဆွဲပြီး crop ကို အသုံးချသောအခါ browser ၏ built-in 2D rendering engine သည် ရွေးချယ်ထားသော pixel များကိုသာ ဖတ်ပြီး JPEG၊ PNG သို့မဟုတ် WebP သို့ ပြန် encode လုပ်သည်။

1. 1
   ပုံကို memory ထဲသို့ load လုပ်ထားသည်

   သင့်ဖိုင်ကို URL.createObjectURL() ဖြင့် ဖတ်သည်၊ ၎င်းသည် local blob URL တစ်ခုကို browser သို့ ပေးသည်။ HTMLImageElement တစ်ခုသည် ဖိုင်ကို browser tab ထဲတွင် လုံးဝ decode လုပ်သည် — ပုံ byte များသည် သင့်စက်ကို ဘယ်တော့မှ မထွက်ပါ။
2. 2
   Pointer Events သည် crop ရွေးချယ်မှုကို မောင်းနှင်သည်

   Browser ၏ Pointer Events API (mouse, touch, နှင့် pen input ကို ပေါင်းစည်းသည်) သည် canvas overlay ပေါ်ရှိ drag များကို track လုပ်သည်။ ရွေးချယ်မှုပြင်ပ press လုပ်ခြင်းသည် rectangle အသစ်တစ်ခုကို စတင်သည်၊ အတွင်း press လုပ်ခြင်းသည် ၎င်းကို ရွှေ့သည်၊ ညာဘက်အောက်ထောင့်နီးတွင် press လုပ်ခြင်းသည် အရွယ်အစား ပြောင်းသည်။ ရွေးချယ်နိုင်သော aspect-ratio preset များ (1:1, 16:9, 4:3, etc.) သည် drag လုပ်နေစဉ် geometry ကို ကန့်သတ်သည်။
3. 3
   Canvas သည် live ကြိုကြားမှုကို ဆွဲသည်

   Crop ပြောင်းလဲတိုင်း Canvas 2D context သည် ပုံကို ပြန်ဆွဲပြီး ရွေးချယ်မှုပြင်ပတွင် အမှောင်ထပ်ပိုးမှု တစ်ခု အသုံးချကာ crop ဧရိယာကို ရှင်းလင်းလိုက်ခြင်းဖြင့် မူရင်းပုံကို အပြည့်အစုံ ပြသပြီး rule-of-thirds grid နှင့် teal ရင့်သော resize handle တစ်ခုကို ထပ်ဖွဲ့သည်။
4. 4
   toBlob() သည် ရလဒ်ကို encode လုပ်ပြီး ပေးပို့သည်

   Crop ကို click လုပ်လိုက်သောအခါ crop အတိုင်းအတာအတိအကျဖြင့် off-screen canvas အသစ်တစ်ခု ဖန်တီးသည်။ ctx.drawImage() သည် ရွေးချယ်ထားသော rectangle ကိုသာ ကူးယူပြီး canvas.toBlob() သည် သင်ရွေးချယ်ထားသော quality setting ဖြင့် browser ၏ native JPEG, PNG, or WebP encoder ကို သုံး၍ ရလဒ်ကို encode လုပ်သည်။ Output ကို ဒေါင်းလုဒ်ဆွဲရန် local blob URL တစ်ခုအဖြစ် ပြန်ပေးသည်။

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