Bắt đầu với Node-HTML-to-Image

Cách được khuyến nghị để cài đặt Node-HTML-to-Image là sử dụng NPM. Vui lòng sử dụng lệnh sau để cài đặt suôn sẻ.

npm install node-html-to-image

yarn add node-html-to-image

Tạo hình ảnh từ mã HTML bên trong Node.js

Một trong những điểm mạnh chính của thư viện Node-HTML-to-Image là tính đơn giản cũng như có thể dễ dàng tích hợp với bất kỳ ứng dụng Node.js nào. Chỉ với một vài dòng mã, các nhà phát triển phần mềm có thể bắt đầu tạo hình ảnh từ nội dung HTML bên trong ứng dụng Node.js của riêng họ. Tính dễ sử dụng này giúp các nhà phát triển ở mọi cấp độ kỹ năng đều có thể sử dụng. Trong ví dụ sau, thư viện lấy một chuỗi HTML đơn giản và chuyển đổi thành hình ảnh PNG. Hình ảnh đầu ra, image.png, được lưu trong thư mục gốc.

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

nodeHtmlToImage({
  output: './image.png',
  html: '
Hello, World!
'
})
  .then(() => console.log('Image created successfully!'));

Hỗ trợ HTML và CSS phức tạp

Node-HTML-to-Image nguồn mở không chỉ giới hạn ở xử lý HTML cơ bản. Nó có thể xử lý các tài liệu HTML phức tạp với kiểu dáng CSS mở rộng cũng như JavaScript. Cho dù bạn đang sử dụng các tính năng CSS hiện đại như Flexbox hoặc Grid hay nhúng phông chữ tùy chỉnh, thư viện sẽ hiển thị chính xác nội dung của bạn thành các định dạng tệp hình ảnh như JPEG, PNG, WebP và nhiều định dạng khác. Sau đây là một ví dụ minh họa cách các nhà phát triển có thể tạo hình ảnh từ bố cục HTML phức tạp hơn, bao gồm các kiểu cho Flexbox và màu tùy chỉnh, tạo ra hình ảnh được thiết kế tốt.

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

const htmlContent = `

  
    

      

        
Welcome to My Website
        
Building the web, one pixel at a time.
      
    
  
`;

nodeHtmlToImage({
  output: './welcome-image.png',
  html: htmlContent
})
  .then(() => console.log('Complex layout image created successfully!'));

Định dạng hình ảnh đầu ra có thể tùy chỉnh

Thư viện Node-HTML-to-Image hỗ trợ nhiều định dạng hình ảnh đầu ra, bao gồm PNG, JPEG và WebP. Tính linh hoạt này cho phép bạn chọn định dạng tốt nhất cho trường hợp sử dụng cụ thể của mình, cho dù đó là hiệu suất web hay chất lượng hình ảnh. Sau đây là ví dụ cho thấy cách người dùng có thể chỉ định đầu ra là hình ảnh JPEG, có thể hữu ích cho các tình huống cần giảm thiểu kích thước tệp mà không ảnh hưởng quá nhiều đến chất lượng.

nodeHtmlToImage({
  output: './output-image.jpg',
  html: '
JPEG Image Example
',
  type: 'jpeg'
})
  .then(() => console.log('JPEG image created successfully!'));

Hỗ trợ kết xuất hình ảnh nâng cao trong Node.js

Thư viện Node-HTML-to-Image đã cung cấp hỗ trợ đầy đủ cho việc tùy chỉnh quy trình kết xuất rộng rãi. Các nhà phát triển phần mềm có thể xác định kích thước khung nhìn, hệ số tỷ lệ thiết bị và thậm chí đưa CSS và JavaScript tùy chỉnh vào HTML trước khi kết xuất. Ví dụ sau đây cho thấy cách hình ảnh được kết xuất với kích thước khung nhìn tùy chỉnh là 800x600 pixel và chất lượng được đặt thành 100, đảm bảo chất lượng hình ảnh cao nhất có thể.

nodeHtmlToImage({
  output: './custom-image.png',
  html: '
Custom Viewport
',
  viewport: { width: 800, height: 600 },
  quality: 100
})
  .then(() => console.log('Image with custom viewport created successfully!'));