ပုံမှ Base64

1. နိဒါန်း

Image မှ Base64 ပြောင်းလဲပေးသောကိရိယာ သည် အပ်လုဒ်တင်ထားသော ပုံဖိုင်တစ်ခုကို Base64-ကုဒ်ပြောင်းထားသော စာသား (string) အဖြစ် ပြောင်းလဲပေးသော ရိုးရှင်းသည့် အွန်လိုင်းကိရိယာတစ်ခုဖြစ်သည်။ Base64 သည် Binary Data ကို စာသားအခြေပြု ပုံစံဖြင့် ကိုယ်စားပြုသည့် နည်းလမ်းဖြစ်ပြီး HTML၊ CSS၊ JSON သို့မဟုတ် API payload များအတွင်း သီးခြားဖိုင်တောင်းဆိုမှု မလိုအပ်ဘဲ ပုံများကို တိုက်ရိုက် ထည့်သွင်းအသုံးပြုနိုင်စေသည်။

ဤကိရိယာကို Web Developer များ၊ Frontend Engineer များ၊ API Integrator များနှင့် Email Template Designer များက မိမိတို့၏ Code ထဲတွင် ပုံများကို တိုက်ရိုက်ထည့်သွင်းအသုံးပြုရန် လိုအပ်သောအခါ မကြာခဏ အသုံးပြုကြသည်။ ပုံဖိုင်ကို Hosting ပြုလုပ်ပြီး URL ဖြင့် ရည်ညွှန်းခြင်းအစား Base64 String အဖြစ် ပြောင်းလဲကာ data URI အတွင်း ထည့်သွင်းနိုင်သည်။ ၎င်းသည် အထူးသဖြင့် အရွယ်အစားသေးသော Icon များ၊ Logo များ၊ Email Template များ သို့မဟုတ် ပြင်ပဖိုင်တောင်းဆိုမှုများကို ကန့်သတ်ထားသော လုံခြုံရေးစနစ်များတွင် အသုံးဝင်သည်။

သင်သည် Web Application တစ်ခု ဖန်တီးနေသည်ဖြစ်စေ၊ Asset Delivery ကို အကောင်းဆုံးဖြစ်အောင် ပြုလုပ်နေသည်ဖြစ်စေ၊ API Response အတွင်း ပုံများကို ပေါင်းစည်းနေသည်ဖြစ်စေ၊ ဤကိရိယာသည် ပုံဖိုင်များကို Base64 Format သို့ လျင်မြန်စွာနှင့် လုံခြုံစွာ ပြောင်းလဲနိုင်ရန် ကူညီပေးသည်။

2. အလုပ်လုပ်ပုံ

ဤကိရိယာသည် အပ်လုဒ်တင်ထားသော ပုံဖိုင်ကို လက်ခံပြီး ၎င်း၏ Binary Data ကို Base64-ကုဒ်ပြောင်းထားသော String အဖြစ် ပြောင်းလဲပေးသည်။ Base64 Encoding သည် Binary Data ကို ASCII အက္ခရာများအဖြစ် ပြောင်းလဲပေးသည်။ ထို့ကြောင့် JSON၊ HTML သို့မဟုတ် XML ကဲ့သို့သော စာသားအခြေပြု Format များကို အသုံးပြုသည့် စနစ်များအကြား ပုံဒေတာကို လုံခြုံစွာ ပို့ဆောင်နိုင်သည်။

ထည့်သွင်းသည့် Parameter

• ပုံ (ဖိုင်အပ်လုဒ်) – ပြောင်းလဲရန် အသုံးပြုသူ ရွေးချယ်ထားသော ပုံဖိုင်။

ထောက်ပံ့ထားသော ဖိုင်အမျိုးအစားများ

ကိုက်ညီမှုနှင့် လုံခြုံရေးကို သေချာစေရန် အောက်ပါပုံဖိုင် Format များကိုသာ လက်ခံသည်။

• .gif
• .png
• .jpg
• .jpeg
• .svg

အတည်ပြုခြင်း စည်းမျဉ်းများ

• Request သည် CSRF လုံခြုံရေး စစ်ဆေးမှုကို အောင်မြင်ရမည်။
• အပ်လုဒ်တင်ထားသော ဖိုင်သည် Server ၏ အများဆုံး Upload Size ကန့်သတ်ချက်ကို မကျော်လွန်ရ။
• ဖိုင်တွင် Upload Error မရှိရ။
• ဖိုင် Extension သည် ခွင့်ပြုထားသော ပုံဖိုင် Format များထဲမှ တစ်ခုနှင့် ကိုက်ညီရမည်။

လုပ်ဆောင်မှု အဆင့်များ

အပ်လုဒ်တင်ထားသော ဖိုင်သည် အတည်ပြုခြင်းကို အောင်မြင်ပြီးနောက်-

1. ပုံဖိုင်ကို Server ပေါ်တွင် ယာယီသိမ်းဆည်းထားသည်။
2. ဖိုင်၏ Binary Data ကို ဖတ်သည်။
3. Binary Data ကို Base64 Encoding ဖြင့် Encode ပြုလုပ်သည်။
4. Encode လုပ်ထားသော String ကို ရလဒ်အဖြစ် ပြန်လည်ပေးပို့သည်။

ရလဒ် Format

ဤကိရိယာသည် ပုံဖိုင်ကို ကိုယ်စားပြုသော Base64 String ကို ထုတ်ပေးသည်။ Output တွင် data:image/...;base64, Prefix ကို အလိုအလျောက် မထည့်ထားသောကြောင့် HTML သို့မဟုတ် CSS တွင် အသုံးပြုလိုပါက သင့်လျော်သော MIME Type Prefix ကို သင်ကိုယ်တိုင် ထည့်ရနိုင်သည်။

ကန့်သတ်ချက်များ

• အရွယ်အစားကြီးသော ပုံများသည် Server Upload Limit ကို ကျော်လွန်နိုင်သည်။
• Base64 Encoding သည် ဖိုင်အရွယ်အစားကို ခန့်မှန်းခြေအားဖြင့် 33% တိုးစေသည်။
• Performance အပေါ် သက်ရောက်မှုရှိသောကြောင့် Production Asset အကြီးများအတွက် မသင့်တော်ပါ။

3. ဤကိရိယာကို အသုံးပြုနည်း

1. Upload Button ကို နှိပ်ပါ။
2. ထောက်ပံ့ထားသော ပုံဖိုင်တစ်ခု (GIF, PNG, JPG, JPEG သို့မဟုတ် SVG) ကို ရွေးချယ်ပါ။
3. Form ကို Submit လုပ်ပါ။
4. ကိရိယာက ပုံကို လုပ်ဆောင်ပြီးစီးသည်အထိ စောင့်ပါ။
5. ဖန်တီးထားသော Base64 String ကို Copy လုပ်ပါ။
6. ထို String ကို HTML၊ CSS၊ JSON သို့မဟုတ် API Payload တွင် အသုံးပြုပါ။

4. လက်တွေ့အသုံးပြုမှု ဥပမာများ

ဥပမာ 1: HTML တွင် Logo ကို ထည့်သွင်းအသုံးပြုခြင်း

ထည့်သွင်းမှု: logo.png (5 KB)

ရလဒ် (အတိုချုံး):

iVBORw0KGgoAAAANSUhEUgAA...

HTML တွင် အသုံးပြုရန်-

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." />

ဤနည်းလမ်းသည် သီးခြားပုံဖိုင်ကို တောင်းဆိုရန် မလိုအပ်တော့ပါ။

ဥပမာ 2: JSON API တွင် ပုံဒေတာပေးပို့ခြင်း

ထည့်သွင်းမှု: avatar.jpg

ရလဒ် (အတိုချုံး):

/9j/4AAQSkZJRgABAQAAAQABAAD...

JSON Payload ဥပမာ-

{
  "username": "john_doe",
  "avatar": "/9j/4AAQSkZJRgABAQAAAQABAAD..."
}

စာသားအခြေပြု Payload များကိုသာ လက်ခံသော API များမှတစ်ဆင့် ပုံများကို Upload လုပ်ရာတွင် အသုံးဝင်သည်။

5. Developer များအတွက် အသုံးပြုမှုများ

- Web Application များတွင် Inline Asset များ

Developer များသည် HTTP Request အရေအတွက်ကို လျှော့ချရန် Base64 ကို အသုံးပြု၍ Icon အသေးများ သို့မဟုတ် UI Element များကို CSS ဖိုင်အတွင်း တိုက်ရိုက် ထည့်သွင်းနိုင်သည်။

- Email Template ဖန်တီးခြင်း

Email Client များစွာသည် ပြင်ပပုံများကို ပိတ်ထားသည်။ ပုံများကို Base64 သို့ ပြောင်းလဲခြင်းဖြင့် HTML Email များတွင် တိုက်ရိုက် ထည့်သွင်းနိုင်သည်။

- API အခြေပြု Image Upload စနစ်များ

Mobile App များ သို့မဟုတ် Frontend Application များသည် Backend API များသို့ မပို့မီ ပုံများကို Base64 သို့ ပြောင်းလဲနိုင်သည်။

- လုံခြုံသော သို့မဟုတ် Offline Application များ

ကန့်သတ်ထားသော ပတ်ဝန်းကျင်များတွင် လုပ်ဆောင်နေသော Application များသည် File Hosting ကို မမှီခိုဘဲ ပုံများကို တိုက်ရိုက် ထည့်သွင်းနိုင်သည်။

PHP ဥပမာ

$imageData = file_get_contents('logo.png');
$base64 = base64_encode($imageData);
echo $base64;

JavaScript ဥပမာ

const reader = new FileReader();
reader.onload = function() {
  const base64String = reader.result.split(',')[1];
  console.log(base64String);
};
reader.readAsDataURL(fileInput.files[0]);

လုံခြုံရေးဆိုင်ရာ ထည့်သွင်းစဉ်းစားရမည့်အချက်များ

• Server တွင် ဖိုင်အမျိုးအစားများကို အမြဲစစ်ဆေးပါ။
• Upload Size Limit များကို သတ်မှတ်ထားပါ။
• Form များတွင် CSRF Protection ကို အသုံးပြုပါ။
• ဖိုင် Extension များကို သန့်စင်ပြီး အတည်ပြုပါ။

6. မေးလေ့ရှိသော မေးခွန်းများ

ပုံများအတွက် Base64 Encoding ဆိုသည်မှာ ဘာလဲ?

Base64 Encoding သည် ပုံ၏ Binary Data ကို HTML၊ CSS သို့မဟုတ် JSON တွင် ထည့်သွင်းနိုင်ရန် စာသား String အဖြစ် ပြောင်းလဲပေးသည်။

ပုံကို Base64 သို့ ဘာကြောင့် ပြောင်းလဲသင့်သလဲ?

၎င်းသည် ပုံများကို Code အတွင်း တိုက်ရိုက်ထည့်သွင်းနိုင်စေပြီး ပြင်ပဖိုင်တောင်းဆိုမှုများကို ဖယ်ရှားပေးသည်။

Base64 သည် ဖိုင်အရွယ်အစားကို တိုးစေသလား?

ဟုတ်ပါသည်။ Base64 Encoding သည် မူရင်း Binary ဖိုင်နှင့် နှိုင်းယှဉ်ပါက ဖိုင်အရွယ်အစားကို 33% ခန့် တိုးစေသည်။

SVG ကို Base64 သို့ ပြောင်းလဲနိုင်ပါသလား?

ဟုတ်ပါသည်။ SVG ဖိုင်များကို ထောက်ပံ့ထားပြီး အခြားပုံ Format များကဲ့သို့ Encode လုပ်နိုင်သည်။

Base64 သည် အရွယ်အစားကြီးသော ပုံများအတွက် သင့်တော်ပါသလား?

မသင့်တော်ပါ။ Base64 String အကြီးများသည် Performance ကို ထိခိုက်စေပြီး Page Load Time ကို တိုးစေနိုင်သည်။

ဤကိရိယာသည် လုံခြုံပါသလား?

ဤကိရိယာသည် ဖိုင်အမျိုးအစားကို စစ်ဆေးခြင်း၊ Upload Limit များကို လိုက်နာစေခြင်းနှင့် လုံခြုံသော လုပ်ဆောင်မှုအတွက် CSRF Protection ကို ထည့်သွင်းထားပါသည်။