1. สินค้า
  2.   HTML
  3.   Node.js
  4.   Node-HTML-to-Image
 
  

ฟรี Node.js ไลบรารีสำหรับสร้างภาพจาก HTML

ไลบรารีการประมวลผลภาพ Node.js แบบโอเพนซอร์สขั้นสูงช่วยให้นักพัฒนาซอฟต์แวร์สามารถสร้างภาพ JPEG หรือ PNG จากเนื้อหา HTML พร้อมการสนับสนุน CSS และการสร้างภาพแบบแบตช์ผ่าน API JS ฟรี.

Node-HTML-to-Image เป็นโครงการโอเพนซอร์สสำหรับนักพัฒนาซอฟต์แวร์ที่มองหาวิธีการที่ง่ายและทรงพลังในการแปลงเนื้อหา HTML เป็นภาพ สร้างขึ้นบน Puppeteer ซึ่งเป็นไลบรารี Node.js ที่ได้รับความนิยมซึ่งให้ API ระดับสูงในการควบคุมเบราว์เซอร์ Chrome แบบไม่มีหัว เครื่องมือนี้ช่วยให้นักพัฒนาสามารถสร้างภาพจากเทมเพลต HTML ได้อย่างง่ายดายและมีต้นทุนต่ำ มีฟีเจอร์ที่สำคัญหลายอย่างในไลบรารีที่ช่วยให้นักพัฒนาซอฟต์แวร์สะดวกสบายในกระบวนการพัฒนา เช่น การแปลง HTML ดิบหรือเทมเพลตที่ออกแบบไว้ล่วงหน้า การสร้างภาพที่ปรับแต่งได้หรือขับเคลื่อนด้วยข้อมูล การสนับสนุนการจัดรูปแบบ CSS การสนับสนุนหลายรูปแบบภาพ การสร้างภาพแบบกลุ่ม การปรับแต่งตัวเลือกการเรนเดอร์ของ Puppeteer และอีกมากมาย

ไลบรารี Node-HTML-to-Image เป็นโมดูล Node.js ที่ใช้เทมเพลต HTML และแปลงเป็นไฟล์ภาพนิ่ง ไลบรารีนี้มีประโยชน์มากในการสร้างแบนเนอร์, ภาพคำคม, หรือเนื้อหาส่งเสริมการขายแบบไดนามิกตามข้อมูลของผู้ใช้หรือเทมเพลตที่กำหนดไว้ล่วงหน้า นอกจากนี้ยังมีประโยชน์มากสำหรับการส่งออกการแสดงข้อมูลที่ซับซ้อน, แผนภูมิ, หรือ ตารางเป็นภาพนิ่งเพื่อรวมไว้ในงานนำเสนอหรือรายงาน นักพัฒนาซอฟต์แวร์สามารถฝังภาพที่เรนเดอร์ของเนื้อหาส่งเสริมการขายในอีเมลเพื่อให้แน่ใจว่าสามารถใช้งานได้กับไคลเอนต์อีเมลที่บล็อก HTML หรือ CSS ด้วย API ที่มีน้ำหนักเบาและความต้องการขั้นต่ำ จึงเหมาะสำหรับแอปพลิเคชันที่ต้องการสร้างภาพแบบไดนามิก โดยการสำรวจไลบรารีนี้และรวมเข้ากับโปรเจกต์ของคุณ คุณสามารถปลดล็อกระดับใหม่ของประสิทธิภาพและความคิดสร้างสรรค์

Previous Next

เริ่มต้นใช้งาน Node-HTML-to-Image

วิธีที่แนะนำในการติดตั้ง Node-HTML-to-Image Library คือการใช้ NPM กรุณาใช้คำสั่งต่อไปนี้เพื่อการติดตั้งที่ราบรื่น.

ติดตั้งไลบรารี Node-HTML-to-Image ผ่าน NPM


npm install node-html-to-image 

ติดตั้งไลบรารี Node-HTML-to-Image ผ่าน Yarn


yarn add node-html-to-image 

คุณยังสามารถติดตั้งด้วยตนเองได้; ดาวน์โหลดไฟล์เวอร์ชันล่าสุดโดยตรงจาก GitHub รีโพซิทอรี

สร้างภาพจาก HTML ใน Node.js

การสร้างภาพจากเทมเพลต HTML ได้กลายเป็นวิธีที่ได้รับความนิยมในแอปพลิเคชันสมัยใหม่ ไลบรารี Node-HTML-to-Image แบบโอเพ่นซอร์สทำให้การแปลง HTML ดิบหรือเทมเพลตที่ออกแบบไว้ล่วงหน้าเป็นไฟล์ภาพนิ่งทำได้ง่ายสำหรับนักพัฒนาซอฟต์แวร์ด้วยโค้ดเพียงไม่กี่บรรทัด ฟีเจอร์นี้ช่วยขจัดความจำเป็นในการใช้ไลบรารีการจัดการกราฟิกที่ซับซ้อนและให้ส่วนติดต่อที่เรียบง่ายในการผลิตผลลัพธ์ทางภาพ นี่คือตัวอย่างที่แสดงให้เห็นว่านักพัฒนาซอฟต์แวร์สามารถแปลงสตริง HTML ที่เรียบง่ายเป็นภาพ PNG ภายในแอปพลิเคชัน node.js ได้อย่างไร

วิธีแปลงสตริง HTML เป็นภาพ PNG ภายในแอป Node.js อย่างไร?

const nodeHtmlToImage = require('node-html-to-image');

nodeHtmlToImage({
  output: './output.png',
  html: '

Hello, World!

', }) .then(() => console.log('Image successfully created!'));

การเรนเดอร์เนื้อหาที่เปลี่ยนแปลงได้ผ่านไลบรารี Node.js

ไลบรารี Node-HTML-to-Image ช่วยให้นักพัฒนาซอฟต์แวร์สามารถส่งตัวแปรเข้าไปในเทมเพลต ทำให้สามารถสร้างภาพที่ปรับแต่งได้หรือขับเคลื่อนด้วยข้อมูลภายในแอปพลิเคชัน Node.js ฟีเจอร์นี้มีประโยชน์โดยเฉพาะสำหรับแอปพลิเคชัน เช่น ใบรับรอง รายงานที่ปรับแต่งได้ หรือโพสต์ในโซเชียลมีเดีย ตัวอย่างด้านล่างแสดงให้เห็นว่าตัวแปร {{name}} ถูกแทนที่ด้วย "Alice" อย่างไดนามิกก่อนที่จะเรนเดอร์ภาพภายในแอปพลิเคชัน Node.js.

วิธีการส่งตัวแปรแบบไดนามิกเข้าสู่เทมเพลตและเรนเดอร์เป็นภาพผ่านไลบรารี Node.js?

const nodeHtmlToImage = require('node-html-to-image');

nodeHtmlToImage({
  output: './personalized.png',
  html: `
    
      
        

Hello, {{name}}!

`, content: { name: 'Alice' }, }) .then(() => console.log('Personalized image created!'));

การสร้างภาพแบบชุดใน Node.js

การสร้างภาพหลายภาพพร้อมกันนั้นง่ายดายด้วยไลบรารี Node-HTML-to-Image แบบโอเพ่นซอร์ส เพียงแค่ไม่กี่บรรทัดของโค้ด นักพัฒนาซอฟต์แวร์สามารถสร้างภาพหลายภาพตามความต้องการของพวกเขา ฟีเจอร์นี้เหมาะสำหรับงานจำนวนมาก เช่น การสร้างชุดภาพที่ปรับแต่งเฉพาะสำหรับแคมเปญการตลาด ตัวอย่างต่อไปนี้แสดงวิธีการสร้างภาพหลายภาพด้วยการเปลี่ยนแปลงเล็กน้อยภายในเนื้อหา ที่นี่แต่ละรายการในอาร์เรย์เนื้อหาจะสร้างภาพแยกต่างหากพร้อมกับข้อมูลที่เกี่ยวข้อง

วิธีสร้างภาพหลายภาพจากเนื้อหา HTML ภายในแอป Node.js?

const nodeHtmlToImage = require('node-html-to-image');

nodeHtmlToImage({
  html: `

Hello, {{name}}!

`, content: [ { name: 'Alice' }, { name: 'Bob' }, { name: 'Charlie' }, ], }) .then(() => console.log('Batch images created!'));
 ไทย