Орын толтырғыш кескін генераторы — тегін
Реттелетін өлшемдер, мәтін және түстермен боялған орын толтырғыш кескіндер жасаңыз. Әлеуметтік медиа, макеттер және дизайн эскиздері үшін стандартты өлшемдер.
Алдын ала орнатылған өлшемдер
Түс тақырыптары
💡 HTML макеттері үшін: «Data URL ретінде көшіру» параметрін пайдаланыңыз және кірістірілген орын ұстаушылар үшін <img src="..."> ішіне қойыңыз. Figma / Sketch дизайндары үшін PNG жүктеп алып, сүйреп апарыңыз.
Жиі қолданылуы
- Дизайн Мокап-ты үшін Орын Ұстап СуретFigma, Sketch немесе веб сайт дизайн мокап-та пайдалану үшін Нақты суреттер дайын емес ісінде өлшеген түсті қорапты құрастырыңыз.
- HTML прототиптері үшін Іштей Орын ҰстапТез прототиптері үшін HTML-де тікелей орын ұстап сурет ұстау үшін 'Деректері URL ретінде көшіру' пайдаланыңыз.
- CMS мазмұны Бос Орындарына Орын ҰстапCMS үлгісін нақты мазмұн орнына сезімтал алдын ала қарау үшін орын ұстап суретті пайдаланыңыз.
- Әлеуметтік Медиа Сурет ҮлгісіInstagram, Facebook, Twitter, LinkedIn пост үлгілері үшін дұрыс өлшеген орын ұстап құрастырыңыз.
- CSS Күйтеу Сыну СуреттерЫнамдылық CSS күйтеуді әзір-қысқа ету үшін экстремдық өрс қатынасы суреттер құрастырыңыз.
Қалай жұмыс істейді
Барлығы HTML Canvas API мен қолмен жазылған SVG белгілеуін пайдаланып браузеріңізде жүреді — сервер жоқ, жүктеу жоқ, үшінші тарап қызметі жоқ. Өлшемдер, түстер мен белгі мәтінін орнатасыз, құрал кескінді нақты уақытта canvas элементіне тікелей салады, содан кейін оны сұраныс бойынша PNG, JPEG немесе SVG-ке сериаландырады.
- 1Өлшемдер мен түстерді баптауЕні мен биіктігін теріңіз (әрқайсысы 1–4000px), немесе жалпы әлеуметтік желі мен дизайн өлшемдерін қамтитын он бір дайын баптаудың бірін таңдаңыз. Кірістірілген тақырыптардан фон мен мәтін түсін таңдаңыз немесе кез келген он алтылық мәнді тікелей енгізіңіз; нативті түс таңдағышы мен тексерілген мәтін өрісі синхронда қалады.
- 2Canvas API алдын ала қарауды лезде өңдейдіReact әсері әр өзгеріс сайын drawPlaceholder()-ты шақырады. Бұл функция CanvasRenderingContext2D пайдаланып тіктөртбұрышты фон түсімен толтырады, қалау бойынша 15% мөлдірлікте әлсіз диагональды крест-сызықтарды сызады, содан кейін белгі мәтініңізді өлшейді және ортаға туралайды — canvas енінің 90%-іне сыймай тұрғанша қаріпті автоматты кішірейтеді.
- 3PNG, JPEG немесе SVG ретінде экспорттауPNG мен JPEG жүктеп алулары canvas.toDataURL()-ты шақырады, base64 нәтижесін жадта Blob-қа түрлендіреді және жүктеп алуды іске қосады — барлығы синхронды түрде пайдаланушы қимылы ішінде, iOS Safari-дің жүктеп алу ережелерін қанағаттандыру үшін. SVG экспорты сәйкес тіктөртбұрышы, қосымша диагональды сызықтары және мәтін элементі бар өз алдына жеткілікті SVG жолын құрастырады, содан кейін оны .svg файлы ретінде сақтайды.
- 4Топтық экспорт және көшіру таңбашалары"Барлық дайын баптауларды жүктеп алу" түймесі JSZip-ті динамикалық түрде импорттайды, он бір дайын баптау өлшемінің әрқайсысын дәл сол сызу функциясын пайдаланып экраннан тыс canvas-қа қайта өңдейді және барлық PNG-терді бір ZIP-ке орайды. Көшіру түймелері кодқа лезде қоюға PNG деректер URL-ін, инлайн SVG img тегін немесе CSS background-image декларациясын шығарады.
Байланысты құралдар
Lorem Ipsum генераторы
Lorem Ipsum орын толтырғыш мәтін жасаңыз. Сөздерді, сөйлемдерді немесе абзацтарды таңдаңыз. Бір рет басу арқылы көшіріңіз.
Сурет Қысқышы
JPG, PNG, WebP және AVIF суреттерді қысу. Бұрын/кейін салыстырмасын қараңыз.
Кескін өлшемін өзгерту құралы
Суреттерді өлшемдер немесе пайыздар бойынша өзгерту. Пропорцияны сақтаңыз, шығару пішімін таңдаңыз, сапа жоғалмайды.