အခမဲ့ ပုံအရွယ်အစားပြောင်းကိရိယာ

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

Resize ကို Chrome၊ Firefox နှင့် Safari တွင် တည်ဆောက်ထားသော rendering engine တူတူဖြစ်သော Canvas API ကို သုံး၍ သင့် browser ထဲတွင် လုံးဝ လုပ်ဆောင်ပါသည်။ သင့်ပုံကို အရွယ်အစားအသစ်ဖြင့် offscreen canvas ပေါ်တွင် ဆွဲပြီး local တွင် ပြန် encode လုပ်သည်၊ သင့်စက်ကို ဘာမှ မထွက်ပါ။

1. 1
   ပုံကို browser က decode လုပ်ထားသည်

   ဖိုင်တစ်ခုကို ချ (သို့) ရွေးလိုက်သောအခါ browser သည် ပုံ (JPEG, PNG, WebP, AVIF, or GIF) ကို HTMLImageElement မှတစ်ဆင့် raw pixel data သို့ decode လုပ်သည်။ မူရင်း pixel အတိုင်းအတာများကို ဖတ်ယူပြီး width နှင့် height field များကို ကြိုတင်ဖြည့်ရန် သုံးသည်။
2. 2
   Canvas သည် အရွယ်အစားအသစ်တွင် ပြန်ဆွဲသည်

   Resize ကို click လုပ်ခြင်းသည် offscreen HTMLCanvasElement တစ်ခုကို သင်ရွေးချယ်ထားသော width နှင့် height သို့ သတ်မှတ်ပြီး pixel တိုင်းကို scale ချ၍ အရွယ်အစားအသစ်သို့ paint လုပ်ရန် ctx.drawImage() ကို ခေါ်သည်။ JPEG output အတွက် ဖောက်ထွင်းမြင်ရသော ဧရိယာများ အမည်းရောင် မဖြစ်စေရန် အဖြူရောင်နောက်ခံဖြည့်မှုကို ဦးစွာ အသုံးချသည်။
3. 3
   canvas.toBlob() သည် output ကို encode လုပ်သည်

   Browser ၏ built-in canvas.toBlob() method သည် pixel data ကို သင်သတ်မှတ်ထားသော quality level ဖြင့် JPEG၊ PNG သို့မဟုတ် WebP သို့ encode လုပ်သည်။ Target ဖိုင်အရွယ်အစား သတ်မှတ်ထားပါက iteration 7 ကြိမ်ပါသော binary search တစ်ခုသည် output သည် ထိုအရွယ်အစားတွင် (သို့ ထိုထက်နည်း) ကျစေရန် quality parameter ကို အလိုအလျောက် ချိန်ညှိသည်။
4. 4
   ရလဒ်ကို local တွင် အစမ်းကြည့်ပြီး ဒေါင်းလုဒ်ဆွဲသည်

   Encode လုပ်ထားသော Blob ကို အစမ်းကြည့် panel အတွက် object URL တစ်ခုအဖြစ် ပြောင်းလဲသည် — server round-trip မပါဝင်ပါ။ Download ကို click လုပ်ခြင်းသည် နောက်ဆုံး pixel အတိုင်းအတာများ ပါဝင်သော ဖိုင်အမည်ဖြင့် local save တစ်ခုကို trigger လုပ်သည်။

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