จะสร้างรูปภาพตัวอย่างขนาดที่แน่นอนได้อย่างไร

พิมพ์ ความกว้าง (px) และ ความสูง (px) เลือกสีหรือธีมสี จากนั้นคลิก ดาวน์โหลด PNG, ดาวน์โหลด JPG หรือ ดาวน์โหลด SVG โดยค่าเริ่มต้นรูปภาพจะแสดงขนาดของมัน เช่น 800 x 600 เป็นป้ายกำกับ

รูปภาพตัวอย่างขนาดใหญ่ที่สุดที่ฉันสร้างได้คือเท่าไร

ความกว้างและความสูงต้องอยู่ระหว่าง 1 ถึง 4000 พิกเซล ค่าที่อยู่นอกช่วงนี้จะแสดงข้อผิดพลาด ความกว้างและความสูงต้องอยู่ระหว่าง 1 ถึง 4000 px

จะใส่รูปภาพตัวอย่างลงใน HTML โดยตรงโดยไม่ใช้ไฟล์ได้อย่างไร

คลิก คัดลอกเป็น data URL และวางลงในแท็ก img เป็นค่า src คุณยังสามารถใช้ คัดลอกโค้ด HTML หรือ คัดลอกพื้นหลัง CSS ได้ ไม่จำเป็นต้องมีโฮสต์รูปภาพภายนอก

ฉันสามารถสร้างขนาดมาตรฐานสำหรับโซเชียลมีเดียหรือเว็บได้หรือไม่

ได้ ขนาดที่กำหนดไว้ล่วงหน้า รวมถึง โพสต์อินสตาแกรม, สตอรี่ Instagram, การ์ด Twitter, Open Graph, ภาพขนาดย่อ YouTube, ปกเฟสบุ๊ก และ ส่วนหัวอีเมล ดาวน์โหลดพรีเซ็ตทั้งหมด (ZIP) จะบันทึกทั้งสิบเอ็ดขนาดเป็นไฟล์ PNG

จะใส่ข้อความของตัวเองหรือเส้นทแยงมุมลงบนรูปภาพตัวอย่างได้อย่างไร

พิมพ์ป้ายกำกับในช่องข้อความกำหนดเอง เช่น Hero image แทนการแสดงขนาด ติ๊ก แสดงเส้นทแยงมุม (X) เพื่อวาดเส้นทแยงมุมจางๆ ข้อความยาวจะย่อขนาดอัตโนมัติเพื่อให้พอดีกับความกว้าง

ฟรีจริงหรือ

ใช่ ทุกเครื่องมือใช้งานได้ฟรี ไม่ต้องมีบัญชีและไม่ต้องใช้บัตรเครดิต การทำงานเกิดขึ้นบนอุปกรณ์ของคุณแทนที่จะเป็นเซิร์ฟเวอร์ของเรา ซึ่งเป็นสิ่งที่ทำให้ใช้งานได้ฟรี

ใช้งานได้บนมือถือหรือไม่?

ได้ ใช้งานได้บนเบราว์เซอร์มือถือรุ่นปัจจุบันทั้ง iOS และ Android โดยไม่ต้องติดตั้งอะไร

🖼️

สร้างรูปภาพตัวอย่าง ฟรี

สร้างรูปภาพตัวอย่างสีพร้อมขนาดกำหนดเอง ข้อความ และสี ขนาดมาตรฐานสำหรับโซเชียลมีเดีย mockup และ design comp

ทำงานในเบราว์เซอร์ไม่ต้องสมัคร ไม่มีป๊อปอัปไม่ต้องเข้าสู่ระบบฟรีตลอดไป

ความกว้าง (px)

ความสูง (px)

ขนาดที่กำหนดไว้ล่วงหน้า

ธีมสี

พื้นหลัง

ข้อความ / เส้น

ข้อความกำหนดเอง (เว้นว่างเพื่อแสดงขนาด)

แสดงขนาดถ้าไม่มีข้อความแสดงเส้นทแยงมุม (X)

💡 สำหรับ HTML mockup: ใช้ตัวเลือก 'คัดลอกเป็น data URL' และวางใน <img src="..."> เป็น placeholder แบบ inline สำหรับงานออกแบบ Figma / Sketch ให้ดาวน์โหลด PNG แล้วลากเข้า

การใช้งานทั่วไป

รูปภาพตัวยึดตำแหน่งสำหรับ Mockups ออกแบบสร้างกล่องสีขนาดสำหรับใช้ใน Figma Sketch หรือ Mockups ออกแบบเว็บก่อนที่ภาพจริงจะพร้อม
ตัวยึดตำแหน่งแบบอินไลน์สำหรับต้นแบบ 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% (ไม่บังคับ) แล้ววัดและจัดข้อความป้ายไว้กึ่งกลาง — ย่อฟอนต์อัตโนมัติจนพอดีภายใน 90% ของความกว้าง canvas
3
ส่งออกเป็น PNG, JPEG หรือ SVG
การดาวน์โหลด PNG และ JPEG เรียก canvas.toDataURL() แปลงผลลัพธ์ base64 เป็น Blob ในหน่วยความจำ และเริ่มดาวน์โหลด — ทั้งหมดแบบซิงโครนัสภายในการกระทำของผู้ใช้ เพื่อให้เป็นไปตามกฎการดาวน์โหลดของ iOS Safari การส่งออก SVG สร้างสตริง SVG ที่สมบูรณ์ในตัวพร้อม rect ที่ตรงกัน เส้นทแยงแบบเลือกได้ และองค์ประกอบ text แล้วบันทึกเป็นไฟล์ .svg
4
ส่งออกเป็นชุดและทางลัดการคัดลอก
ปุ่ม 'ดาวน์โหลดค่าสำเร็จรูปทั้งหมด' นำเข้า JSZip แบบไดนามิก เรนเดอร์แต่ละขนาดสำเร็จรูปทั้งสิบเอ็ดลงบน canvas นอกจอด้วยฟังก์ชันวาดเดียวกัน และรวม PNG ทั้งหมดเป็น ZIP เดียว ปุ่มคัดลอกสร้าง PNG data URL แท็ก img แบบ SVG ในบรรทัด หรือการประกาศ CSS background-image สำหรับวางลงในโค้ดทันที