Node-HTML-to-Image 시작하기

Node-HTML-to-Image를 설치하는 권장 방법은 NPM을 사용하는 것입니다. 원활한 설치를 위해 다음 명령을 사용하세요.

npm install node-html-to-image

yarn add node-html-to-image

Node.js 내부 HTML 코드에서 이미지 생성

Node-HTML-to-Image 라이브러리의 주요 장점 중 하나는 단순성이며 모든 Node.js 애플리케이션과 쉽게 통합할 수 있다는 것입니다. 소프트웨어 개발자는 몇 줄의 코드만 있으면 자체 Node.js 애플리케이션 내부에서 HTML 콘텐츠에서 이미지를 생성할 수 있습니다. 이러한 사용 편의성 덕분에 모든 기술 수준의 개발자가 액세스할 수 있습니다. 다음 예에서 라이브러리는 간단한 HTML 문자열을 가져와 PNG 이미지로 변환합니다. 출력 이미지인 image.png는 루트 디렉토리에 저장됩니다.

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

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

복잡한 HTML 및 CSS 지원

오픈 소스 Node-HTML-to-Image는 기본 HTML 처리에 국한되지 않습니다. 광범위한 CSS 스타일과 JavaScript를 사용하여 복잡한 HTML 문서를 처리할 수 있습니다. Flexbox 또는 Grid와 같은 최신 CSS 기능을 사용하든 사용자 정의 글꼴을 포함하든 라이브러리는 콘텐츠를 JPEG, PNG, WebP 등과 같은 이미지 파일 형식으로 정확하게 렌더링합니다. 개발자가 Flexbox 스타일과 사용자 정의 색상을 포함하여 보다 복잡한 HTML 레이아웃에서 이미지를 생성하여 잘 디자인된 이미지를 만드는 방법을 보여주는 예가 있습니다.

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!'));

사용자 정의 가능한 출력 이미지 형식

Node-HTML-to-Image 라이브러리는 PNG, JPEG, WebP를 포함한 여러 출력 이미지 형식을 지원합니다. 이러한 유연성을 통해 웹 성능이나 이미지 품질에 관계없이 특정 사용 사례에 가장 적합한 형식을 선택할 수 있습니다. 다음은 사용자가 출력을 JPEG 이미지로 지정하는 방법을 보여주는 예입니다. 이는 품질을 너무 많이 손상시키지 않으면서 파일 크기를 최소화해야 하는 시나리오에 유용할 수 있습니다.

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

Node.js의 고급 이미지 렌더링 지원

Node-HTML-to-Image 라이브러리는 렌더링 프로세스를 광범위하게 사용자 정의하기 위한 완벽한 지원을 제공합니다. 소프트웨어 개발자는 뷰포트 크기, 장치 배율 요소를 정의하고 렌더링하기 전에 HTML에 사용자 정의 CSS 및 JavaScript를 삽입할 수도 있습니다. 다음 예는 이미지가 800x600픽셀의 사용자 정의 뷰포트 크기로 렌더링되고 품질이 100으로 설정되어 가능한 가장 높은 이미지 품질을 보장하는 방법을 보여줍니다.

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