ຂ້ອຍຈະສ້າງຮູບ placeholder ຕາມຂະໜາດທີ່ແນ່ນອນໄດ້ແນວໃດ?

ພິມ ຄວາມກວ້າງ (px) ແລະ ຄວາມສູງ (px), ເລືອກສີ ຫຼື ຮູບແບບສີ, ແລ້ວກົດ ດາວໂຫລດ PNG, ດາວໂຫລດ JPG ຫຼື ດາວໂຫລດ SVG. ໂດຍຄ່າເລີ່ມຕົ້ນ ຮູບຈະສະແດງຂະໜາດຂອງມັນ ເຊັ່ນ 800 x 600 ເປັນຂໍ້ຄວາມເທິງຮູບ.

ຂະໜາດຮູບ placeholder ທີ່ໃຫຍ່ທີ່ສຸດທີ່ຂ້ອຍສາມາດສ້າງໄດ້ແມ່ນເທົ່າໃດ?

ຄວາມກວ້າງ ແລະ ຄວາມສູງແຕ່ລະດ້ານຕ້ອງຢູ່ລະຫວ່າງ 1 ຫາ 4000 ພິກເຊວ. ຄ່າທີ່ຢູ່ນອກຊ່ວງດັ່ງກ່າວຈະສະແດງຂໍ້ຜິດພາດ ຄວາມກວ້າງ ແລະ ລະດັບສູງ ຕ້ອງຢູ່ລະຫວ່າງ 1 ກັບ 4000 px.

ຂ້ອຍຈະໃສ່ຮູບ placeholder ລົງໃນ HTML ໂດຍກົງໂດຍບໍ່ຕ້ອງໃຊ້ໄຟລ໌ໄດ້ແນວໃດ?

ກົດ ຄັດລອກເປັນ data URL ແລ້ວນຳໄປວາງໃສ່ໃນແທັກ img ເປັນຄ່າ src. ທ່ານຍັງສາມາດໃຊ້ ສໍາເນົາຕໍ່ HTML ຫຼື ສໍາເນົາ CSS background ໄດ້. ບໍ່ຈຳເປັນຕ້ອງໃຊ້ເວັບໂຮສຕິງຮູບພາບຈາກພາຍນອກເລີຍ.

ຂ້ອຍສາມາດສ້າງຂະໜາດມາດຕະຖານສຳລັບໂຊຊຽວມີເດຍ ຫຼື ເວັບໄຊໄດ້ບໍ່?

ໄດ້. ຂະໜາດກຳນົດໄວ້ ປະກອບມີ ໂພສ Instagram, ເລື່ອງ Instagram, Twitter ບັດ, Open Graph, ຮູບຫຍໍ້ YouTube, ທົ່ວຂ້າມ Facebook ແລະ ສ່ວນຫົວອີເມວ. ປຸ່ມ ດາວໂຫລດ preset ທັງໝົດ (ZIP) ຈະບັນທຶກທັງ 11 ຂະໜາດເປັນໄຟລ໌ PNG.

ຂ້ອຍຈະໃສ່ຂໍ້ຄວາມຂອງຕົນເອງ ຫຼື ເສັ້ນຂວາງເທິງຮູບ placeholder ໄດ້ແນວໃດ?

ພິມຂໍ້ຄວາມໃນຊ່ອງຂໍ້ຄວາມກຳນົດເອງ ເຊັ່ນ ຮູບ Hero, ແທນທີ່ຈະສະແດງຂະໜາດ. ໝາຍຕິກ ສະແດງເສັ້ນຂວາງ (X) ເພື່ອແຕ້ມເສັ້ນຂວາງຈາງໆ. ຂໍ້ຄວາມທີ່ຍາວຈະຖືກປັບຂະໜາດໃຫ້ເລັ່ງນ້ອຍລົງໂດຍອັດຕະໂນມັດເພື່ອໃຫ້ພໍດີກັບຄວາມກວ້າງ.

ຟຣີແທ້ບໍ?

ແມ່ນແລ້ວ. ທຸກເຄື່ອງມືແມ່ນໃຊ້ຟຣີ, ບໍ່ຕ້ອງມີບັນຊີ ແລະ ບໍ່ຕ້ອງໃຊ້ບັດເຄຣດິດ. ການເຮັດວຽກທັງໝົດແມ່ນດຳເນີນຢູ່ໃນອຸປະກອນຂອງທ່ານແທນທີ່ຈະຢູ່ໃນເຊີບເວີຂອງພວກເຮົາ, ເຊິ່ງເຮັດໃຫ້ເຮົາສາມາດໃຫ້ບໍລິການໄດ້ຟຣີ.

ມັນເຮັດວຽກຢູ່ໃນມືຖືບໍ?

ໄດ້. ມັນເຮັດວຽກໃນບຣາວເຊີມືຖືລຸ້ນໃໝ່ເທິງ iOS ແລະ Android ໂດຍບໍ່ຕ້ອງຕິດຕັ້ງຫຍັງ.

🖼️

ຕົວສ້າງຮູບ Placeholder ຟຣີ

ສ້າງຮູບ placeholder ສີ ດ້ວຍ dimension, ຂໍ້ຄວາມ ແລະ ສີ custom. ຂະໜາດມາດຕະຖານ ສຳລັບ social media, mockup ແລະ ຮ່າງ design.

ເຮັດວຽກໃນບຣາວເຊີບໍ່ຕ້ອງລົງທະບຽນ, ບໍ່ມີໜ້າຕ່າງປັອບອັບບໍ່ຈໍາເປັນຕ້ອງເຂົ້າສູ່ລະບົບຟຣີຕະຫຼອດໄປ

ຄວາມກວ້າງ (px)

ຄວາມສູງ (px)

ຂະໜາດກຳນົດໄວ້

ຮູບແບບສີ

ພື້ນຫຼັງ

ຂໍ້ຄວາມ / ເສັ້ນ

ຂໍ້ຄວາມກຳນົດເອງ (ປ່ອຍຫວ່າງສຳລັບຂະໜາດ)

ສະແດງຂະໜາດຖ້າບໍ່ມີຂໍ້ຄວາມກຳນົດເອງສະແດງເສັ້ນຂວາງ (X)

💡 ສຳລັບ HTML mockup: ໃຊ້ 'ຄັດລອກເປັນ data URL' ແລ້ວວາງໃນ <img src='...'> ເພື່ອ placeholder ແບບ inline. ສຳລັບ Figma / Sketch ດາວໂຫລດ PNG ແລ້ວລາກໃສ່.

ການນຳໃຊ້ທົ່ວໄປ

ຮູບພາບພໍ້ສໍາລັບ Designs Mockupsສ້າງກ່ອງສີທີ່ມີຂະໜາດສໍາລັບໃຊ້ໃນ Figma, Sketch ຫຼື mockups ອອກແບບເວບໄຟກ່ອນຮູບພາບທີ່ແທ້ຈິງພ້ອມ.
ພໍ້ສາຍໂລກສໍາລັບ HTML Prototypesໃຊ້ \"Copy as Data URL\" ເພື່ອຝັງຮູບພາບພໍ້ທີ່ຜ້າໃສ່ HTML ສໍາລັບ prototypes ລາຍລະອຽດ.
ພໍ້ສໍາລັບໂປລະວັດ Content CMSເມື່ອສະແດງແບບສະກຸນ CMS, ໃຊ້ຮູບພາບພໍ້ລຸ່ມນ້ອຍໆວັດຖຸຕົ້ນສະບັບສໍາລັບສະແດງລ່ວງຫນ້າທີ່ສອດໄປກັບ.
ສື່ສາມາລະຖົກ ກາຣາໂວາ ຕົວສ້າງພາກສ່ວນທີ່ມີຂະໜາດທີ່ທຳມະຊາດສໍາລັບ Instagram, Facebook, Twitter, LinkedIn ຮູບພາບອອກແບບ.
CSS ເຊ ວ ລ ວ ການ ທົ ດ ສອ ບ ຮູ ບ ພາ ບສ້າງຮູບພາບໃນອັດສະວະພໍ້ສໍາລັບ stress-test CSS layout ທີ່ຕອບສະຫຼອງ.

ມັນເຮັດວຽກແນວໃດ

ທຸກຢ່າງເກີດຂຶ້ນຢູ່ໃນບຣາວເຊີຂອງທ່ານໂດຍໃຊ້ HTML Canvas API ແລະ SVG markup ທີ່ຂຽນຂຶ້ນເອງ — ບໍ່ມີເຊີເວີ, ບໍ່ມີການອັບໂຫຼດ, ບໍ່ມີບໍລິການພາຍນອກ. ທ່ານຕັ້ງຂະໜາດ, ສີ, ແລະ ຂໍ້ຄວາມປ້າຍຊື່, ແລະ ເຄື່ອງມືຈະແຕ້ມຮູບພາບໂດຍກົງລົງໃນ canvas element ແບບສົດ, ແລ້ວແປງເປັນ PNG, JPEG, ຫຼື SVG ຕາມຄວາມຕ້ອງການ.

1
ຕັ້ງຄ່າຂະໜາດ ແລະ ສີ
ພິມຄວາມກວ້າງ ແລະ ຄວາມສູງ (1–4000 px ແຕ່ລະອັນ), ຫຼື ເລືອກໜຶ່ງໃນ 11 ຮູບແບບທີ່ຕັ້ງໄວ້ລ່ວງໜ້າສຳລັບໂຊຊຽວມີເດຍ ແລະ ຂະໜາດອອກແບບທົ່ວໄປ. ເລືອກສີພື້ນຫຼັງ ແລະ ສີຂໍ້ຄວາມຈາກທີມທີ່ມີໃນຕົວ ຫຼື ພິມຄ່າ hex ໂດຍກົງ; ຕົວເລືອກສີແບບ native ແລະ ຊ່ອງຂໍ້ຄວາມທີ່ກວດສອບແລ້ວຈະສະໝໍ່າສະເໝີກັນ.
2
Canvas API ສະແດງຕົວຢ່າງທັນທີ
React effect ຈະເອີ້ນ drawPlaceholder() ທຸກຄັ້ງທີ່ມີການປ່ຽນແປງ. ຟັງຊັນນີ້ໃຊ້ CanvasRenderingContext2D ເພື່ອຕື່ມສີພື້ນຫຼັງລົງໃນສີ່ຫຼ່ຽມ, ແຕ້ມເສັ້ນຂວາງແບບຈາງໆທີ່ 15% ຄວາມເຂັ້ມແບບເລືອກໄດ້, ແລ້ວວັດແທກ ແລະ ຈັດຂໍ້ຄວາມປ້າຍໃຫ້ຢູ່ກາງ — ຫຼຸດຂະໜາດຟອນອັດຕະໂນມັດຈົນມັນພໍດີພາຍໃນ 90% ຂອງຄວາມກວ້າງ canvas.
3
ສົ່ງອອກເປັນ PNG, JPEG, ຫຼື SVG
ການດາວໂຫຼດ PNG ແລະ JPEG ຈະເອີ້ນ canvas.toDataURL(), ແປງຜົນລັບ base64 ເປັນ Blob ໃນໜ່ວຍຄວາມຈຳ, ແລະ ເລີ່ມການດາວໂຫຼດ — ທັງໝົດແບບ synchronous ພາຍໃນການກະທຳຂອງຜູ້ໃຊ້ ເພື່ອໃຫ້ຕົງກັບກົດການດາວໂຫຼດຂອງ iOS Safari. ການສົ່ງອອກ SVG ຈະສ້າງ SVG string ທີ່ຄົບຖ້ວນພ້ອມ rect ທີ່ຕົງກັນ, ເສັ້ນຂວາງແບບເລືອກໄດ້, ແລະ text element, ແລ້ວບັນທຶກເປັນໄຟລ໌ .svg.
4
ທາງລັດການສົ່ງອອກເປັນຊຸດ ແລະ ການສຳເນົາ
ປຸ່ມ 'ດາວໂຫຼດທຸກຮູບແບບທີ່ຕັ້ງໄວ້' ຈະ import JSZip ແບບ dynamic, ສະແດງແຕ່ລະຂະໜາດໃນ 11 ຮູບແບບທີ່ຕັ້ງໄວ້ຄືນໃໝ່ລົງໃນ canvas ນອກໜ້າຈໍໂດຍໃຊ້ຟັງຊັນແຕ້ມດຽວກັນ, ແລະ ຫໍ່ PNG ທັງໝົດເຂົ້າໄປໃນ ZIP ດຽວ. ປຸ່ມສຳເນົາຈະສ້າງ PNG data URL, ແທັກ SVG img ໃນຕົວ, ຫຼື ຄຳສັ່ງ CSS background-image ສຳລັບການວາງໃສ່ໂຄ້ດໄດ້ທັນທີ.