મફત પ્લેસહોલ્ડર ઇમેજ જનરેટર

આ કેવી રીતે કાર્ય કરે છે

બધું HTML Canvas API અને હાથે લખેલા SVG markup વાપરીને તમારા બ્રાઉઝરમાં થાય છે — કોઈ સર્વર નહીં, કોઈ upload નહીં, કોઈ થર્ડ-પાર્ટી સર્વિસ નહીં. તમે dimensions, colors, અને label text સેટ કરો છો, અને ટૂલ ઇમેજને રિયલ ટાઇમમાં સીધા canvas element પર દોરે છે, પછી માંગ પર PNG, JPEG, કે SVG માં serialize કરે છે.

1. 1
   Dimensions અને colors ગોઠવો

   width અને height (દરેક 1–4000 px) ટાઈપ કરો, અથવા સામાન્ય social media અને design sizes આવરી લેતા અગિયાર presets માંથી એક પસંદ કરો. બિલ્ટ-ઇન themes માંથી background અને text color પસંદ કરો કે સીધો કોઈપણ hex મૂલ્ય દાખલ કરો; નેટિવ color picker અને validated text field synced રહે છે.
2. 2
   Canvas API preview તરત render કરે છે

   React effect દરેક ફેરફાર પર drawPlaceholder() ને કૉલ કરે છે. આ ફંક્શન rectangle ને background color વડે ભરવા CanvasRenderingContext2D વાપરે છે, ઓપ્શનલી 15% opacity પર faint diagonal cross-hair lines દોરે છે, પછી તમારો label text માપે છે અને center-align કરે છે — canvas width ના 90% ની અંદર ફિટ ન થાય ત્યાં સુધી font ને auto-shrink કરીને.
3. 3
   PNG, JPEG, કે SVG તરીકે Export કરો

   PNG અને JPEG downloads canvas.toDataURL() ને કૉલ કરે છે, base64 પરિણામને મેમરીમાં Blob માં રૂપાંતરિત કરે છે, અને download ટ્રિગર કરે છે — બધું synchronously user gesture ની અંદર જેથી iOS Safari ના download નિયમો સંતોષાય. SVG export matching rect, ઓપ્શનલ diagonal lines, અને text element ધરાવતું self-contained SVG string બનાવે છે, પછી તેને .svg ફાઇલ તરીકે save કરે છે.
4. 4
   Batch export અને copy shortcuts

   'Download all presets' બટન dynamically JSZip import કરે છે, એ જ draw function વાપરીને અગિયાર preset sizes દરેકને off-screen canvas પર ફરીથી render કરે છે, અને બધા PNGs ને એક ZIP માં package કરે છે. Copy buttons PNG data URL, inline SVG img tag, કે code માં તાત્કાલિક paste માટે CSS background-image declaration emit કરે છે.

સંબંધિત સાધનો