HTML မွာ ပံုေတြထည့္ရင္ ပံုမွန္အားျဖင့္ img tag ထဲမွာ src ဆိုၿပီး ပံုရဲ႕ တည္ေနရာကို ညႊန္းၾကပါတယ္။ ဥပမာအားျဖင့္
<img src="images/logo.png"/>
အဲဒီနည္းလမ္းအစား နည္းနည္းေလးပိုၿပီးထူးတဲ့ နည္းလမ္းတစ္ခုနဲ႔ ပံုေတြကို HTML စာမ်က္ႏွာထဲမွာ တစ္ပါတည္း ေပါင္းထည့္လို႔ ရပါတယ္။ သေဘာတရားကေတာ့ Base64 Encoding ကိုအသံုးခ်ၿပီး ပံုကို စာသားအျဖစ္ Encode လုပ္ၿပီး ေျပာင္းလဲပါ့မယ္။ ရရွိလာတဲ့ စာသား(String)ဟာ ပံုကို အေျခခံၿပီး ျဖစ္ေပၚလာတဲ့ စာသားေတြ ျဖစ္ပါတယ္။ အဲဒီစာသားကို Decode ျပန္လုပ္လိုက္ရင္ မူလပံုအတိုင္း ျပန္ရမွာျဖစ္ပါတယ္။ ကၽြန္ေတာ္တို႔ရဲ႕ HTML စာမ်က္ႏွာထဲမွာ အရင္လို ပံုရဲ႕ တည္ေနရာကို မညႊန္းေတာ့ပဲ အဲဒီစာသားေတြကို တစ္ခါတည္း ေပါင္းထည့္မွာျဖစ္ပါတယ္။ ပံုဆိုတာ မရွိေတာ့ဘူးေပါ့။ Webpage မွာ ပံုကေနေျပာင္းထားတဲ့ စာသားေတြပဲ ပါပါတယ္။ အဲဒီစာသားေတြကို ပံုအျဖစ္ ျပန္ေျပာင္းၿပီး ျပသမွာပါ။
ႏွစ္သက္ရာပံုကို Base64 Encoding နဲ႔ Encode လုပ္ႏိုင္ဖို႔အတြက္ http://www.opinionatedgeek.com/dotnet/tools/base64encode/ ကိုသြားပါ။ ႏွစ္သက္ရာပံုကို Upload လုပ္ပါ။ အဲဒီအခါ အဲဒီပံုကို Encode လုပ္လို႔ ရရွိလာတဲ့ စာသားေတြကို သူက ထုတ္ေပးပါလိမ့္မယ္။ အဲဒီစာသားေတြကို Copy ကူးထားပါ။ ကၽြန္ေတာ္ကေတာ့ ျမန္မာႏိုင္ငံအလံပံုကို Upload လုပ္ၾကည့္ပါတယ္။ အဲဒီအခါ သူက ေအာက္ပါ စာသားေတြ ထုတ္ေပးပါတယ္။
ရပါၿပီ။ Notepad ကိုဖြင့္ၿပီး ေအာက္ပါအတိုင္း ရိုက္ထည့္လိုက္ပါ။
<html>
<body>
<img src="data:image/jpeg;base64,Insert Your Code Here"
</body>
</html>
<body>
<img src="data:image/jpeg;base64,Insert Your Code Here"
</body>
</html>
Insert Your Code Here ဆိုတဲ့ေနရာမွာ အေစာက Encode လုပ္လို႔ရလာတဲ့ String ေတြကို ထည့္ေပးလိုက္ပါ။ ၿပီးရင္ HTML ဖိုင္အေနနဲ႔ သိမ္းလိုက္ပါ။
Browser တစ္ခုခုနဲ႔ အဲဒီ HTML ဖိုင္ကို ဖြင့္ၾကည့္လိုက္ပါ။ ျမန္မာႏိုင္ငံအလံပံု ေပၚေနေတာေတြ႕ရပါလိမ့္မယ္။ လံုၿခံဳေရးပိုင္း ဆိုင္ရာ လိုအပ္တဲ့ပံုေတြအတြက္လည္း အခုလိုနည္းလမ္းနဲ႔ ကြန္ပ်ဴတာထဲမွာ သိမ္းလို႔ရပါတယ္။ ပံုေတြမသိမ္းဘဲ အခုလို string ေတြခ်ည္းပဲ သိမ္းထားမယ္ေပါ့။ လိုအပ္မွာ Decode ျပန္လုပ္ၿပီး ပံုကို ျပန္ေဖာ္ၾကည့္တာမ်ိဳးေတြ စသည္ျဖင့္ ဥာဏ္ ရွိသလို အသံုးခ်ႏိုင္ပါလိမ့္မယ္။
အဆင္ေျပၾကပါေစ။
What's the point? I don't get it at all....
ReplyDeleteAdvantages?
မဆိုးပါဘူး code ေတြေတာ႕ အမ်ားၾကီးေနာ္
ReplyDelete