Softonic

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

ขั้นตอน 1 / 3

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

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

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

  1. 1

    วางโค้ด

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

  2. 2

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

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

  3. 3

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

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

  4. 4

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

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

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

เครื่องมือนี้ใช้กลไกจัดวางของเบราว์เซอร์ จึงสามารถแสดง 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 และรูปภาพข้อมูลที่สร้างจะอยู่ในเบราว์เซอร์ปัจจุบัน โหมดแบบเป็นขั้นจะเก็บการตั้งค่าไว้ในที่จัดเก็บเซสชันของแท็บนี้เพื่อไปยังขั้นถัดไป และจะลบเมื่อเริ่มใหม่ เครื่องมือไม่ส่งโค้ดหรือรูปภาพไปยังเซิร์ฟเวอร์ของเรา

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

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

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

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

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

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

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

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

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

ตัวสร้างการตั้งค่า Webpack

สร้าง webpack.config.js สำหรับ webpack 5 ทั้งแบบ JavaScript ล้วน React หรือ Vue พร้อม TypeScript, Babel, CSS หรือ Sass, รูปภาพ, HtmlWebpackPlugin, เซิร์ฟเวอร์สำหรับพัฒนา และคำสั่ง npm install

เครื่องแปลงฐานตัวเลข

แปลงตัวเลขระหว่างฐานสอง ฐานแปด ฐานสิบ ฐานสิบหก และฐานกำหนดเองตั้งแต่ 2 ถึง 36 พร้อมการแยกค่าประจำหลัก

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

เครื่องสุ่มที่อยู่

สร้างระเบียนคล้ายที่อยู่ 1–20 รายการสำหรับแบบจำลองและการทดสอบ ด้วยรูปแบบประเทศแบบย่อ

ตัวแปลง Timestamp

แปลง timestamp ของ Unix ในหน่วยวินาทีหรือมิลลิวินาทีเป็นวันที่ที่อ่านง่ายในเขตเวลา UTC และเขตเวลาหลัก และแปลงวันที่กลับเป็นค่า epoch

ตัวตรวจสอบ OpenAPI

วางเอกสาร OpenAPI หรือ Swagger แบบ JSON หรือ YAML แล้วตรวจโครงสร้างหลัก: ฟิลด์เวอร์ชัน ออบเจกต์ info และ paths พร้อมข้อผิดพลาดและคำเตือนที่ชัดเจน

เครื่องมือนี้มีให้บริการในภาษาอื่น