ਮੁਫ਼ਤ ਪਲੇਸਹੋਲਡਰ ਚਿੱਤਰ ਜਨਰੇਟਰ

ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ

ਸਭ ਕੁਝ HTML Canvas API ਅਤੇ ਹੱਥ ਨਾਲ ਲਿਖੇ SVG markup ਨਾਲ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਹੁੰਦਾ ਹੈ — ਕੋਈ ਸਰਵਰ, ਅੱਪਲੋਡ ਜਾਂ ਤੀਜੀ-ਧਿਰ ਸੇਵਾ ਨਹੀਂ। ਤੁਸੀਂ ਮਾਪ, ਰੰਗ ਅਤੇ ਲੇਬਲ ਟੈਕਸਟ ਸੈੱਟ ਕਰਦੇ ਹੋ, ਅਤੇ ਟੂਲ ਰੀਅਲ ਟਾਈਮ ਵਿੱਚ ਚਿੱਤਰ ਸਿੱਧਾ canvas element 'ਤੇ ਬਣਾਉਂਦਾ ਹੈ, ਫਿਰ ਮੰਗਣ 'ਤੇ ਇਸਨੂੰ PNG, JPEG ਜਾਂ SVG ਵਿੱਚ ਸੀਰੀਅਲਾਈਜ਼ ਕਰਦਾ ਹੈ।

1. 1
   ਮਾਪ ਅਤੇ ਰੰਗ ਸੈੱਟ ਕਰੋ

   ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਟਾਈਪ ਕਰੋ (ਹਰ ਇੱਕ 1–4000 px), ਜਾਂ ਆਮ ਸੋਸ਼ਲ ਮੀਡੀਆ ਅਤੇ ਡਿਜ਼ਾਈਨ ਆਕਾਰਾਂ ਵਾਲੇ ਗਿਆਰਾਂ ਪ੍ਰੀਸੈੱਟਾਂ ਵਿੱਚੋਂ ਇੱਕ ਚੁਣੋ। ਬਿਲਟ-ਇਨ ਥੀਮਾਂ ਵਿੱਚੋਂ ਪਿਛੋਕੜ ਅਤੇ ਟੈਕਸਟ ਰੰਗ ਚੁਣੋ ਜਾਂ ਕੋਈ ਵੀ hex ਮੁੱਲ ਸਿੱਧਾ ਦਰਜ ਕਰੋ; ਮੂਲ color picker ਅਤੇ ਜਾਂਚਿਆ ਟੈਕਸਟ ਖੇਤਰ ਆਪਸ ਵਿੱਚ ਸਿੰਕ ਰਹਿੰਦੇ ਹਨ।
2. 2
   Canvas API ਝਲਕ ਤੁਰੰਤ ਬਣਾਉਂਦੀ ਹੈ

   ਇੱਕ React effect ਹਰ ਬਦਲਾਅ 'ਤੇ drawPlaceholder() ਕਾਲ ਕਰਦਾ ਹੈ। ਇਹ function CanvasRenderingContext2D ਵਰਤ ਕੇ ਆਇਤ ਨੂੰ ਪਿਛੋਕੜ ਰੰਗ ਨਾਲ ਭਰਦਾ ਹੈ, ਵਿਕਲਪਿਕ ਤੌਰ 'ਤੇ 15% opacity 'ਤੇ ਹਲਕੀਆਂ ਤਿਰਛੀਆਂ ਕਰਾਸ ਲਕੀਰਾਂ ਬਣਾਉਂਦਾ ਹੈ, ਫਿਰ ਤੁਹਾਡਾ ਲੇਬਲ ਟੈਕਸਟ ਮਾਪ ਕੇ ਵਿਚਕਾਰ ਰੱਖਦਾ ਹੈ — font ਨੂੰ ਉਦੋਂ ਤੱਕ ਆਪਣੇ-ਆਪ ਛੋਟਾ ਕਰਦੇ ਹੋਏ ਜਦੋਂ ਤੱਕ ਇਹ canvas ਚੌੜਾਈ ਦੇ 90% ਵਿੱਚ ਨਾ ਆ ਜਾਵੇ।
3. 3
   PNG, JPEG ਜਾਂ SVG ਵਜੋਂ ਐਕਸਪੋਰਟ

   PNG ਅਤੇ JPEG ਡਾਊਨਲੋਡ canvas.toDataURL() ਕਾਲ ਕਰਦੇ ਹਨ, base64 ਨਤੀਜੇ ਨੂੰ ਮੈਮਰੀ ਵਿੱਚ Blob ਵਿੱਚ ਬਦਲਦੇ ਹਨ, ਅਤੇ ਡਾਊਨਲੋਡ ਸ਼ੁਰੂ ਕਰਦੇ ਹਨ — ਸਭ user gesture ਅੰਦਰ ਤੁਰੰਤ ਤਾਂ ਜੋ iOS Safari ਦੇ ਡਾਊਨਲੋਡ ਨਿਯਮ ਪੂਰੇ ਹੋਣ। SVG ਐਕਸਪੋਰਟ ਮੇਲ ਖਾਂਦੇ rect, ਵਿਕਲਪਿਕ ਤਿਰਛੀਆਂ ਲਕੀਰਾਂ, ਅਤੇ text element ਨਾਲ ਸਵੈ-ਨਿਰਭਰ SVG string ਬਣਾਉਂਦਾ ਹੈ, ਫਿਰ ਇਸਨੂੰ .svg ਫ਼ਾਈਲ ਵਜੋਂ ਸੇਵ ਕਰਦਾ ਹੈ।
4. 4
   ਥੋਕ ਐਕਸਪੋਰਟ ਅਤੇ ਕਾਪੀ shortcuts

   'ਸਾਰੇ ਪ੍ਰੀਸੈੱਟ ਡਾਊਨਲੋਡ ਕਰੋ' ਬਟਨ JSZip ਨੂੰ dynamically import ਕਰਦਾ ਹੈ, ਉਸੇ draw function ਨਾਲ ਗਿਆਰਾਂ ਪ੍ਰੀਸੈੱਟ ਆਕਾਰਾਂ ਵਿੱਚੋਂ ਹਰ ਇੱਕ ਨੂੰ off-screen canvas 'ਤੇ ਮੁੜ ਬਣਾਉਂਦਾ ਹੈ, ਅਤੇ ਸਾਰੇ PNGs ਇੱਕ ZIP ਵਿੱਚ ਪੈਕ ਕਰਦਾ ਹੈ। ਕਾਪੀ ਬਟਨ ਕੋਡ ਵਿੱਚ ਤੁਰੰਤ ਪੇਸਟ ਲਈ PNG data URL, inline SVG img tag, ਜਾਂ CSS background-image declaration ਦਿੰਦੇ ਹਨ।

ਸੰਬੰਧਿਤ ਟੂਲ