സൗജന്യ പ്ലേസ്‌ഹോൾഡർ ചിത്ര ജനറേറ്റർ

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

HTML Canvas API, കൈകൊണ്ട് എഴുതിയ SVG മാർക്കപ്പ് എന്നിവ ഉപയോഗിച്ച് എല്ലാം നിങ്ങളുടെ ബ്രൗസറിൽ സംഭവിക്കുന്നു — സെർവർ ഇല്ല, അപ്‌ലോഡ് ഇല്ല, മൂന്നാം കക്ഷി സേവനം ഇല്ല. നിങ്ങൾ അളവുകൾ, നിറങ്ങൾ, ലേബൽ ടെക്സ്റ്റ് എന്നിവ സെറ്റ് ചെയ്യുന്നു, ടൂൾ ഇമേജ് തത്സമയം ഒരു ക്യാൻവാസ് എലമെന്റിലേക്ക് നേരിട്ട് വരയ്ക്കുന്നു, പിന്നെ ആവശ്യാനുസരണം PNG, JPEG, അല്ലെങ്കിൽ SVG ആയി സീരിയലൈസ് ചെയ്യുന്നു.

1. 1
   അളവുകളും നിറങ്ങളും ക്രമീകരിക്കുക

   1–4000 px വരെയുള്ള ഒരു വീതിയും ഉയരവും ടൈപ്പ് ചെയ്യുക, അല്ലെങ്കിൽ സാധാരണ സോഷ്യൽ മീഡിയ, ഡിസൈൻ വലുപ്പങ്ങൾ ഉൾക്കൊള്ളുന്ന പതിനൊന്ന് പ്രീസെറ്റുകളിൽ ഒന്ന് തിരഞ്ഞെടുക്കുക. ബിൽറ്റ്-ഇൻ തീമുകളിൽ നിന്ന് ഒരു ബാക്ക്ഗ്രൗണ്ട്, ടെക്സ്റ്റ് നിറം തിരഞ്ഞെടുക്കുക അല്ലെങ്കിൽ ഏതെങ്കിലും ഹെക്സ് മൂല്യം നേരിട്ട് നൽകുക; ഒരു നേറ്റീവ് കളർ പിക്കറും സാധൂകരിച്ച ടെക്സ്റ്റ് ഫീൽഡും സമന്വയത്തിൽ തുടരുന്നു.
2. 2
   Canvas API പ്രിവ്യൂ ഉടനടി റെൻഡർ ചെയ്യുന്നു

   ഓരോ മാറ്റത്തിലും ഒരു React ഇഫക്ട് drawPlaceholder() വിളിക്കുന്നു. ഈ ഫംഗ്ഷൻ ബാക്ക്ഗ്രൗണ്ട് നിറം കൊണ്ട് ചതുരം പൂരിപ്പിക്കാൻ CanvasRenderingContext2D ഉപയോഗിക്കുന്നു, ഓപ്ഷണലായി 15% ഒപ്പാസിറ്റിയിൽ നേരിയ ഡയഗണൽ ക്രോസ്-ഹെയർ വരകൾ വരയ്ക്കുന്നു, പിന്നെ നിങ്ങളുടെ ലേബൽ ടെക്സ്റ്റ് അളന്ന് സെന്റർ-അലൈൻ ചെയ്യുന്നു — ക്യാൻവാസ് വീതിയുടെ 90%-ത്തിനുള്ളിൽ ഒതുങ്ങുന്നതുവരെ ഫോണ്ട് സ്വയമേവ ചുരുക്കുന്നു.
3. 3
   PNG, JPEG, അല്ലെങ്കിൽ SVG ആയി എക്സ്പോർട്ട് ചെയ്യുക

   PNG, JPEG ഡൗൺലോഡുകൾ canvas.toDataURL() വിളിക്കുന്നു, base64 ഫലം മെമ്മറിയിൽ ഒരു Blob ആയി പരിവർത്തനം ചെയ്യുന്നു, ഡൗൺലോഡ് ട്രിഗർ ചെയ്യുന്നു — iOS Safari-യുടെ ഡൗൺലോഡ് നിയമങ്ങൾ പാലിക്കാൻ ഉപയോക്തൃ ജെസ്ചറിനുള്ളിൽ എല്ലാം സിൻക്രണസ് ആയി. SVG എക്സ്പോർട്ട് ഒരു പൊരുത്തപ്പെടുന്ന rect, ഓപ്ഷണൽ ഡയഗണൽ വരകൾ, ഒരു text എലമെന്റ് എന്നിവയുള്ള ഒരു സ്വയം-സമ്പൂർണ്ണ SVG സ്ട്രിംഗ് നിർമ്മിക്കുന്നു, പിന്നെ ഒരു .svg ഫയലായി സേവ് ചെയ്യുന്നു.
4. 4
   ബാച്ച് എക്സ്പോർട്ടും കോപ്പി ഷോർട്ട്കട്ടുകളും

   'Download all presets' ബട്ടൺ ഡൈനാമിക് ആയി JSZip ഇംപോർട്ട് ചെയ്യുന്നു, ഒരേ ഡ്രോ ഫംഗ്ഷൻ ഉപയോഗിച്ച് പതിനൊന്ന് പ്രീസെറ്റ് വലുപ്പങ്ങൾ ഓരോന്നും ഒരു ഓഫ്-സ്ക്രീൻ ക്യാൻവാസിലേക്ക് വീണ്ടും റെൻഡർ ചെയ്യുന്നു, എല്ലാ PNG-കളും ഒരൊറ്റ ZIP-ലേക്ക് പാക്കേജ് ചെയ്യുന്നു. കോപ്പി ബട്ടണുകൾ കോഡിലേക്ക് ഉടനടി പേസ്റ്റ് ചെയ്യാൻ ഒരു PNG ഡാറ്റ URL, ഒരു ഇൻലൈൻ SVG img ടാഗ്, അല്ലെങ്കിൽ ഒരു CSS background-image ഡിക്ലറേഷൻ പുറപ്പെടുവിക്കുന്നു.

അനുബന്ധ ടൂളുകൾ