Как да създам изображение за запълване с точен размер?

Въведете Ширина (px) и Височина (px), изберете цветове или цветова тема, след което натиснете Изтегли PNG, Изтегли JPG или Изтегляне на SVG. По подразбиране изображението показва размерите си, например 800 x 600, като надпис.

Какво е най-голямото изображение за запълване, което мога да генерирам?

Ширината и височината трябва да бъдат между 1 и 4000 пиксела. Стойности извън този диапазон показват грешката Ширината и височината трябва да бъдат между 1 и 4000 px.

Как да поставя изображение за запълване директно в HTML без файл?

Натиснете Копирай като data URL и го поставете в img таг като стойност на src. Можете също да използвате Копиране на HTML фрагмент или Копиране на CSS фон. Не е необходим външен хостинг на изображения.

Мога ли да генерирам стандартни размери за социални медии или уеб?

Да. Предварителните размери включват Instagram публикация, Instagram история, Twitter карта, Open Graph, YouTube миниатюра, Facebook корица и Заглавие на имейл. Изтегляне на всички предустановки (ZIP) запазва всичките единадесет като PNG файлове.

Как да поставя собствен текст или диагонални линии върху изображението за запълване?

Въведете надпис в полето за персонализиран текст, например Hero image, вместо да показвате размерите. Отметнете Показвай диагонални линии (X), за да се начертаят бледи диагонали. Дългият текст се смалява автоматично, за да се побере в ширината.

Наистина ли е безплатно?

Да. Всеки инструмент е безплатен, без акаунт и кредитна карта. Работата се извършва на вашето устройство, а не на наши сървъри, което позволява да бъде безплатна.

Работи ли на мобилни устройства?

Да. Работи в съвременните мобилни браузъри на iOS и Android, без да инсталирате нищо.

🖼️

Генератор на изображения за запълване — безплатно

Генерирайте цветни изображения за запълване с персонализирани размери, текст и цветове. Стандартни размери за социални мрежи, макети и дизайн.

Работи в браузъраБез регистрация, без изскачащи прозорциНе се изисква входБезплатно завинаги

Ширина (px)

Височина (px)

Предварителни размери

Цветови теми

Фон

Текст / линии

Персонализиран текст (оставете празно за размери)

Показвай размери при липса на персонализиран текстПоказвай диагонални линии (X)

💡 За HTML макети: използвайте опцията „Копирай като data URL" и поставете в <img src=\"...\"> за вградени заместители. За Figma / Sketch дизайни изтеглете PNG и го плъзнете вътре.

Често срещани употреби

Заместител на изображение за макетирането на дизайнГенерирайте оразмерени цветни кутии за използване в Figma, Sketch или макетирането на уеб дизайн, преди истинските изображения да бъдат готови.
Вградени запълвачи за HTML макетиранетоИзползвайте 'Копирайте като URL на данни', за да вградите заместител изображения директно в HTML за бързи макетирането.
Запълвачи за CMS слотове за съдържаниеПри демонстриране на CMS шаблони използвайте заместител изображения вместо реално съдържание за чувствителни преглеждане.
Шаблони на изображения в социалните медииГенерирайте правилно оразмерени запълвачи за Instagram, Facebook, Twitter, LinkedIn шаблони на постовете.
CSS сни за тестване на макетаГенерирайте изображения при екстремни съотношения на аспекта, за да нагрижете отзивчивото CSS размещане.

Как работи

Всичко се случва във вашия браузър чрез HTML Canvas API и ръчно написано SVG маркиране — без сървър, без качване, без услуга на трета страна. Задавате размери, цветове и текст на етикет, а инструментът рисува изображението директно върху елемент canvas в реално време, след което го сериализира в PNG, JPEG или SVG при поискване.

1
Конфигурирайте размери и цветове
Въведете ширина и височина (по 1–4000 px всяка) или изберете една от единадесетте готови настройки, покриващи обичайни размери за социални медии и дизайн. Изберете цвят на фона и текста от вградените теми или въведете произволна шестнадесетична стойност директно; нативен избор на цвят и валидирано текстово поле остават синхронизирани.
2
Canvas API рендерира прегледа мигновено
React ефект извиква drawPlaceholder() при всяка промяна. Тази функция използва CanvasRenderingContext2D, за да запълни правоъгълника с цвета на фона, по избор да изчертае бледи диагонални кръстосани линии при 15% непрозрачност, след което измерва и центрира вашия текст на етикета — автоматично свивайки шрифта, докато се побере в 90% от ширината на платното.
3
Експорт като PNG, JPEG или SVG
Изтеглянията на PNG и JPEG извикват canvas.toDataURL(), преобразуват резултата в base64 в Blob в паметта и задействат изтеглянето — всичко синхронно вътре в жеста на потребителя, така че правилата за изтегляне на iOS Safari са удовлетворени. Експортът на SVG изгражда самостоятелен SVG низ със съответстващ rect, незадължителни диагонални линии и текстов елемент, след което го запазва като .svg файл.
4
Групов експорт и преки пътища за копиране
Бутонът „Изтегли всички готови настройки“ динамично импортира JSZip, преизчертава всеки от единадесетте готови размера върху скрито платно, използвайки същата функция за рисуване, и пакетира всички PNG файлове в единичен ZIP. Бутоните за копиране произвеждат PNG data URL, вграден SVG img таг или CSS декларация background-image за незабавно поставяне в код.