เครื่องมือแปลง HTML เป็นรูปภาพ

วางโค้ด HTML ส่วนที่ต้องการ สคริปต์ แบบฟอร์ม เฟรม และตัวจัดการเหตุการณ์จะถูกนำออกก่อนเรนเดอร์

HTML และรูปภาพที่สร้างจะอยู่ภายในเบราว์เซอร์นี้ รูปภาพ แบบอักษร หรือสไตล์ชีตจากภายนอกจะถูกเรียกจาก URL ต้นทาง หากต้องการเรนเดอร์แบบออฟไลน์ทั้งหมด ให้ฝังข้อมูลไว้ใน HTML

แปลงโค้ด HTML และ CSS เป็น PNG หรือ JPG ขนาดคงที่โดยไม่อัปโหลดซอร์สหรือรูปภาพไปยัง Hyperion กำหนดแต่ละด้านได้ตั้งแต่ 64 ถึง 1,920 px และอัตราขยาย 1x ถึง 3x จากนั้นดูตัวอย่างและดาวน์โหลดภายในเบราว์เซอร์

วิธีเรนเดอร์ HTML เป็นรูปภาพ

  1. 1

    วางโค้ด

    ใส่ส่วนย่อยหรือเอกสาร HTML รองรับ CSS แบบอินไลน์และกฎ `<style>` ส่วนสคริปต์ แบบฟอร์ม เฟรม และตัวจัดการเหตุการณ์จะถูกนำออก

  2. 2

    กำหนดพื้นที่ภาพ

    เลือก PNG หรือ JPG ระบุความกว้าง ความสูง และอัตราขยายตั้งแต่ 1x ถึง 3x

  3. 3

    เรนเดอร์ตัวอย่าง

    เบราว์เซอร์จะจัดวางโค้ดที่ผ่านการทำความสะอาดในเฟรมแยกที่มีขนาดคงที่

  4. 4

    ดาวน์โหลดลงเครื่อง

    บันทึก PNG หรือ JPG โดยตรง ไฟล์ที่สร้างจะไม่ถูกอัปโหลดไปยัง Hyperion

สิ่งที่ตัวเรนเดอร์ของเบราว์เซอร์รองรับ

เครื่องมือนี้ใช้กลไกจัดวางของเบราว์เซอร์ จึงสามารถแสดง HTML ทั่วไป, CSS แบบอินไลน์, กฎ <style>, Flexbox, Grid, การไล่สี, เงา, SVG แบบฝัง และแบบอักษรที่ติดตั้งไว้ในผลลัพธ์ได้ ไฟล์ที่ได้เป็นรูปภาพแรสเตอร์แบบนิ่ง ไม่ใช่สำเนาเว็บเพจที่โต้ตอบได้

กฎของพื้นที่ภาพและผลลัพธ์

การตั้งค่า ช่วงที่รองรับ การทำงาน
ความกว้าง 64 ถึง 1,920 px ความกว้าง CSS ที่แน่นอนของเฟรม
ความสูง 64 ถึง 1,920 px ความสูง CSS ที่แน่นอน เนื้อหาส่วนเกินจะถูกตัด
อัตราขยาย 1x ถึง 3x เพิ่มความละเอียดโดยไม่เปลี่ยนขนาดเลย์เอาต์
PNG แรสเตอร์ขนาดคงที่ คงพื้นที่โปร่งใสไว้
JPG แรสเตอร์ขนาดคงที่ ใช้คุณภาพ 92% และพื้นหลังสีขาว

ผลลัพธ์จำกัดที่ 16 เมกะพิกเซลเพื่อป้องกันการใช้หน่วยความจำมากเกินไป หากขนาดและอัตราขยายเกินขีดจำกัด เครื่องมือจะลดลงเป็นขั้น 0.5x ที่สูงที่สุดและปลอดภัย ซอร์ส HTML ยาวได้ไม่เกิน 100,000 อักขระ

ความเป็นส่วนตัวและทรัพยากรภายนอก

HTML และรูปภาพข้อมูลที่สร้างจะอยู่ในเบราว์เซอร์ปัจจุบัน โหมดแบบเป็นขั้นจะเก็บการตั้งค่าไว้ในที่จัดเก็บเซสชันของแท็บนี้เพื่อไปยังขั้นถัดไป และจะลบเมื่อเริ่มใหม่ เครื่องมือไม่ส่งโค้ดหรือรูปภาพไปยัง Hyperion

URL ภายนอกเป็นข้อยกเว้น รูปภาพ แบบอักษรเว็บ และสไตล์ชีตจะถูกเรียกจากเซิร์ฟเวอร์ต้นทาง ซึ่งมองเห็นคำขอนั้นได้ CORS หรือข้อจำกัดการเข้าถึงอาจทำให้โหลดไม่สำเร็จ หากต้องการทำงานแบบออฟไลน์ทั้งหมด ให้ฝังรูปภาพและแบบอักษรเป็น URL ข้อมูล และใช้ CSS แบบอินไลน์

ข้อจำกัดด้านความปลอดภัยและความเหมือนจริง

สคริปต์ แบบฟอร์ม เฟรมซ้อน วัตถุฝัง และแอตทริบิวต์เหตุการณ์จะถูกนำออกก่อนจับภาพ ตัวอย่างจึงไม่มีการโต้ตอบ แต่ไม่ใช่ตัวทำความสะอาด HTML ทั่วไปสำหรับเนื้อหาที่จะนำไปเผยแพร่ที่อื่น วิดเจ็ต JavaScript จะไม่ทำงาน ไม่รับประกันสถานะของวิดีโอและ canvas ภาพเคลื่อนไหวจะกลายเป็นภาพนิ่งหนึ่งเฟรม และ CSS เฉพาะเบราว์เซอร์อาจต่างกันในกลไกอื่น

คำถามที่พบบ่อย

ได้ ตัวเรนเดอร์จะนำกฎ <style> และลิงก์สไตล์ชีตที่รองรับจาก head มาใช้ แล้วจับเนื้อหาใน body สคริปต์ เมทาดาทา แบบฟอร์ม เฟรม และตัวจัดการที่ทำงานได้จะถูกนำออก ผลลัพธ์จึงไม่ใช่หน้าเว็บที่ใช้เปิดลิงก์ได้

เซิร์ฟเวอร์ต้นทางอาจปิดกั้นการใช้ข้ามโดเมน ต้องลงชื่อเข้าใช้ หรือตอบสนองช้าเกินไป ใช้ URL ที่เข้าถึงได้และอนุญาต CORS หรือฝังทรัพยากรเป็น URL ข้อมูล

PNG คงพิกเซลโปร่งใสไว้ ส่วน JPG ใช้พื้นหลังสีขาวและคุณภาพคงที่ 92% ซึ่งมักมีขนาดเล็กกว่าสำหรับภาพถ่าย เครื่องมือนี้ไม่ส่งออก WebP และไม่มีตัวปรับคุณภาพแยก

เครื่องมือจำกัดผลลัพธ์ที่ 16 เมกะพิกเซล เมื่อพื้นที่ภาพใหญ่ ระบบจะเลือกขั้น 0.5x ที่สูงที่สุดและปลอดภัยโดยอัตโนมัติเพื่อไม่ให้หน่วยความจำเบราว์เซอร์หมด

เครื่องมือที่เกี่ยวข้อง

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

ตัวลดรูปพีชคณิตบูลีน

ลดรูปนิพจน์บูลีนด้วยแผนผัง Karnaugh และอัลกอริทึม Quine-McCluskey แสดงทุกขั้นตอนการลดรูปและผลลัพธ์สุดท้ายในรูป SOP/POS

เลขฐานสองเป็นฐานสิบ

แปลงเลขฐานสองเป็นฐานสิบได้ทันที แสดงการกระจายตามตำแหน่งเพื่อให้เห็นว่าแต่ละบิตมีส่วนอย่างไร

เครื่องสร้างตัวอักษรสุ่ม

สร้างตัวอักษร A-Z แบบสุ่ม เลือกจำนวน ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือแบบผสม แล้วใช้กับเกม โจทย์ หรือกิจกรรมในห้องเรียน

เครื่องกำเนิดจานสี

สร้างพาเลตสีแบบเอกรงค์ ใกล้เคียง คู่ตรงข้าม ไตรแอดิก หรือเตตราดิกจากสี HEX หลัก พร้อมส่งออกตัวแปร CSS ที่คัดลอกได้ทันที

เครื่องมือเลือกสี HEX

เลือกหรือป้อนสี HEX แล้วดูค่า RGB, HSL, CMYK โดยประมาณ ค่าความสว่างสัมพัทธ์ และคอนทราสต์กับสีขาวและสีดำ