အခမဲ့ နမူနာပုံထုတ်လုပ်စက်
custom dimension, စာသား နှင့် အရောင်ဖြင့် အရောင်ရှိသော placeholder ဓာတ်ပုံ ဖန်တီးပါ။ social media, mockup နှင့် design comp အတွက် standard size 。
ကြိုသတ်မှတ်ထားသောအရွယ်များ
အရောင်ပုံစံများ
💡 HTML mockup များအတွက်: 'data URL အဖြစ် ကူးပါ' ရွေးချယ်မှုကို သုံးပြီး inline placeholder များအတွက် <img src='...'> တွင် ကူးထည့်ပါ။ Figma / Sketch ဒီဇိုင်းများအတွက် PNG ဒေါင်းလုဒ်ပြီး ဆွဲထည့်ပါ။
အသုံးများသော အသုံးပြုမှုများ
- ဒီဇိုင်း Mockup များအတွက် Placeholder ပုံများပုံအစစ်များ မပြင်ဆင်ရသေးမီ Figma၊ Sketch သို့မဟုတ် ဝဘ်ဒီဇိုင်း mockup များတွင် သုံးရန် အရွယ်အစားသတ်မှတ်ထားသော အရောင်ကွက်များ ဖန်တီးပါ။
- HTML Prototype များအတွက် Inline Placeholder များ“Copy as data URL” ကို သုံး၍ placeholder ပုံများကို HTML ထဲတွင် တိုက်ရိုက်ထည့်ကာ prototype များကို အမြန်ပြုလုပ်ပါ။
- CMS Content Slot များအတွက် Placeholder များCMS template ကို သရုပ်ပြသည့်အခါ လျှို့ဝှက်ကြိုတင်ကြည့်ရှုမှုများအတွက် အကြောင်းအရာအစစ်အစား placeholder ပုံများကို သုံးပါ။
- လူမှုမီဒီယာ ပုံ Template များInstagram၊ Facebook၊ Twitter၊ LinkedIn ပို့စ် template များအတွက် အရွယ်အစားမှန်ကန်သော placeholder များ ဖန်တီးပါ။
- CSS Layout စမ်းသပ်ရန် ပုံများresponsive CSS layout များကို ပြင်းထန်စွာ စမ်းသပ်ရန် အလွန်ကွာခြားသော aspect ratio ရှိသည့် ပုံများ ဖန်တီးပါ။
မည်သို့ အလုပ်လုပ်သည်
အားလုံးကို HTML Canvas API နှင့် ကိုယ်တိုင်ရေးထားသော SVG markup ကို သုံး၍ သင့် browser ထဲတွင် ဖြစ်ပျက်ပါသည် — server၊ upload၊ ပြင်ပ ဝန်ဆောင်မှု မပါဝင်ပါ။ Dimension၊ အရောင်နှင့် label စာသားကို သင်သတ်မှတ်ပါက ကိရိယာသည် ပုံကို canvas element ပေါ်တွင် အချိန်နှင့်တပြေးညီ တိုက်ရိုက် ဆွဲပြီး လိုသလို PNG, JPEG, or SVG သို့ serialize လုပ်သည်။
- 1Dimension နှင့် အရောင်များ ချိန်ညှိပါWidth နှင့် height (1–4000 px တစ်ခုစီ) ကို ရိုက်ထည့်ပါ (သို့) ပုံမှန် social media နှင့် design size များကို ဖုံးလွှမ်းသော preset ၁၁ ခုအနက် တစ်ခု ရွေးချယ်ပါ။ Built-in theme များမှ နောက်ခံနှင့် စာသားအရောင်ကို ရွေးချယ် (သို့) hex တန်ဖိုးမည်သည်ကိုမဆို တိုက်ရိုက် ရိုက်ထည့်ပါ; native color picker နှင့် validate လုပ်ထားသော text field သည် sync ဖြစ်နေသည်။
- 2Canvas API သည် ကြိုကြားမှုကို ချက်ချင်း render လုပ်သည်React effect တစ်ခုသည် ပြောင်းလဲမှုတိုင်းတွင် drawPlaceholder() ကို ခေါ်သည်။ ဤ function သည် CanvasRenderingContext2D ကို သုံး၍ rectangle ကို နောက်ခံအရောင်ဖြင့် ဖြည့်ပြီး ရွေးချယ်နိုင်သော opacity 15% ရှိ လက်ညှိုးထောင့်ကနားလိုင်းများကို ဆွဲကာ သင့် label စာသားကို တိုင်းတာ၍ အလယ်ညှိသည် — canvas width ၏ 90% အတွင်း ကိုက်ညီအောင် font ကို အလိုအလျောက် ချုံ့သည်။
- 3PNG, JPEG, သို့မဟုတ် SVG အဖြစ် ထုတ်ယူပါPNG နှင့် JPEG ဒေါင်းလုဒ်များသည် canvas.toDataURL() ကို ခေါ်ပြီး base64 ရလဒ်ကို memory ထဲရှိ Blob တစ်ခုသို့ ပြောင်းကာ ဒေါင်းလုဒ်ကို trigger လုပ်သည် — iOS Safari ၏ download စည်းမျဉ်းများနှင့် ကိုက်ညီစေရန် user gesture အတွင်း synchronously လုပ်ဆောင်သည်။ SVG export သည် ကိုက်ညီသော rect၊ ရွေးချယ်နိုင်သော diagonal line များနှင့် text element ပါသော self-contained SVG string တစ်ခုကို တည်ဆောက်ပြီး .svg ဖိုင်တစ်ခုအဖြစ် သိမ်းသည်။
- 4Batch export နှင့် copy shortcut များ'Download all presets' ခလုတ်သည် JSZip ကို dynamically import လုပ်ပြီး preset size ၁၁ ခုစီကို ဆွဲသည့် function တူတူကို သုံး၍ off-screen canvas တစ်ခုပေါ်တွင် ပြန်ဆွဲကာ PNG များအားလုံးကို ZIP တစ်ခုတည်းအဖြစ် ထုပ်ပိုးသည်။ Copy ခလုတ်များသည် PNG data URL တစ်ခု၊ inline SVG img tag တစ်ခု (သို့) CSS background-image declaration တစ်ခုကို code ထဲသို့ ချက်ချင်း paste လုပ်ရန် ထုတ်ပေးသည်။
ဆက်နွှယ်သော ကိရိယာများ
Lorem Ipsum ထုတ်လုပ်စက်
Lorem Ipsum placeholder စာသား ဖန်တီးပါ။ စကားလုံး၊ ဝါကျ သို့မဟုတ် paragraph ရွေးချယ်ပါ။ တစ်ချက်နှိပ်ကာ copy ပါ。
ပုံ ချုံ့ကိရိယာ
JPG, PNG, WebP, နှင့် AVIF ပုံများ ချုံ့ပါ။ မတိုင်မီ/နောက်ပိုင်း နှိုင်းယှဉ်မှု ကြည့်ပါ။
ပုံအရွယ်အစားပြောင်းကိရိယာ
ပုံများကို အတိုင်းအတာ သို့မဟုတ် ရာခိုင်နှုန်းအလိုက် အရွယ်အစားပြောင်းပါ။ အချိုးအစားကို ထိန်းသိမ်းပါ၊ အထွက်ဖော်မတ်ကို ရွေးချယ်ပါ၊ အရည်အသွေး ဆုံးရှုံးမှုမရှိပါ။