இலவச ப்ளேஸ்ஹோல்டர் படம் உருவாக்கி

இது எவ்வாறு செயல்படுகிறது

அனைத்தும் HTML Canvas API மற்றும் கையால் எழுதிய SVG markup மூலம் உங்கள் உலாவியில் நடக்கின்றன — சர்வர் இல்லை, பதிவேற்றம் இல்லை, மூன்றாம் தரப்பு சேவை இல்லை. நீங்கள் பரிமாணங்கள், நிறங்கள், லேபிள் உரையை அமைக்கிறீர்கள்; கருவி படத்தை நேரலையாக canvas உறுப்பில் வரைந்து, தேவைப்படும்போது PNG, JPEG அல்லது SVG ஆக serialize செய்கிறது.

1. 1
   பரிமாணங்களையும் நிறங்களையும் அமைக்கவும்

   அகலம், உயரத்தைத் தட்டச்சு செய்யவும் (ஒவ்வொன்றும் 1–4000 px), அல்லது பொதுவான சமூக ஊடக மற்றும் வடிவமைப்பு அளவுகளை உள்ளடக்கிய பதினொரு முன்னமைவுகளில் ஒன்றைத் தேர்ந்தெடுக்கவும். உள்ளமைந்த themes இலிருந்து பின்னணி, உரை நிறத்தைத் தேர்ந்தெடுக்கவும் அல்லது எந்த hex மதிப்பையும் நேரடியாக உள்ளிடவும்; native color picker உம் சரிபார்க்கப்பட்ட உரைப் புலமும் ஒத்திசைவில் இருக்கும்.
2. 2
   Canvas API முன்னோட்டத்தை உடனே வரைகிறது

   ஒவ்வொரு மாற்றத்திலும் React effect drawPlaceholder() ஐ அழைக்கிறது. இந்த function CanvasRenderingContext2D மூலம் செவ்வகத்தைப் பின்னணி நிறத்தால் நிரப்பி, விருப்பப்படி 15% opacity இல் மங்கலான மூலைவிட்டக் கோடுகளை வரைந்து, பின் உங்கள் லேபிள் உரையை அளந்து மையப்படுத்துகிறது — canvas அகலத்தின் 90% க்குள் பொருந்தும் வரை font ஐத் தானாகச் சுருக்குகிறது.
3. 3
   PNG, JPEG அல்லது SVG ஆக ஏற்றுமதி

   PNG, JPEG பதிவிறக்கங்கள் canvas.toDataURL() ஐ அழைத்து, base64 முடிவை நினைவகத்தில் Blob ஆக மாற்றி, பதிவிறக்கத்தைத் தூண்டுகின்றன — iOS Safari இன் பதிவிறக்க விதிகளைப் பூர்த்திசெய்ய அனைத்தும் பயனர் செயலுக்குள் உடனே. SVG ஏற்றுமதி பொருந்தும் rect, விருப்ப மூலைவிட்டக் கோடுகள், text உறுப்புடன் தன்னிறைவான SVG string ஐ உருவாக்கி .svg கோப்பாகச் சேமிக்கிறது.
4. 4
   மொத்த ஏற்றுமதி மற்றும் நகல் குறுக்குவழிகள்

   'அனைத்து முன்னமைவுகளையும் பதிவிறக்கு' பொத்தான் JSZip ஐ இயக்கமாக இறக்குமதி செய்து, அதே வரைதல் function மூலம் பதினொரு முன்னமைவு அளவுகளையும் திரைக்கு வெளியே உள்ள canvas இல் மீண்டும் வரைந்து, அனைத்து PNGs ஐயும் ஒற்றை ZIP ஆகத் தொகுக்கிறது. நகல் பொத்தான்கள் code இல் உடனே ஒட்ட PNG data URL, inline SVG img tag அல்லது CSS background-image declaration ஐத் தருகின்றன.

தொடர்புடைய கருவிகள்