Яг тодорхой хэмжээтэй орлуулах зургийг хэрхэн үүсгэх вэ?

Өргөн (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 тус бүр), эсвэл нийтлэг нийгмийн мэдээллийн хэрэгсэл, дизайны хэмжээс хамарсан арван нэгийн урьдчилан тохиргооны нэгийг сонго. Байгуулагдмал загвараас дэвсгэр, текстийн өнгийг сонго, эсвэл ямар ч hex утгыг шууд оруул; уугуул өнгө сонгогч, баталгаажсан текст талбар синхронд байна.
2
Canvas API урьдчилан харахыг шууд зурдаг
React effect өөрчлөлт бүрт drawPlaceholder()-г дуудна. Энэ функц CanvasRenderingContext2D-г дэвсгэр өнгөөр тэгш өнцөгтийг дүүргэхэд, сонголтоор 15% тунгалагтай бүдэг диагональ огтлолцлын шугам зурахад, дараа нь таны шошгын текстийг хэмжиж төвлөрсөн эгнэлтэнд байрлуулахад ашигладаг — фонтыг canvas өргөний 90%-д багтах хүртэл автоматаар багасгадаг.
3
PNG, JPEG эсвэл SVG болгон экспортлох
PNG, JPEG татах canvas.toDataURL()-г дуудаж, base64 үр дүнг санах ойд Blob болгож, iOS Safari-ийн татах дүрмийг хангахын тулд бүгдийг хэрэглэгчийн зангаа дотор синхронаар татахыг идэвхжүүлдэг. SVG экспорт тохирох rect, сонголт диагональ шугам, текст элементтэй бие даасан SVG мөр бүтээгээд .svg файл болгон хадгалдаг.
4
Багц экспорт, хуулбарлах товчлол
'Бүх урьдчилсан хэмжээг татах' товч JSZip-ийг динамикаар импортолж, ижил зурах функцээр арван нэгэн урьдчилсан хэмжээг дэлгэцийн-гадуурх canvas дээр дахин зурж, бүх PNG-ийг нэг ZIP болгон боолдог. Хуулах товчнууд PNG data URL, inline SVG img tag эсвэл CSS background-image declaration гаргаж кодонд шууд наахад бэлэн болгодог.