많은 옵션이 있으며 모두 장단점이 있습니다.

옵션 1 : 사용 가능한 많은 라이브러리 중 하나 사용

• dom-to-image
• wkhtmltoimage (wkhtmltopdf 도구에 포함)
• IMGKit ( 루 비용 및 wkhtmltoimage 기반)
• imgkit (파이썬 용 및 wkhtmltoimage 기반)
• python-webkit2png
• …

찬성

• 대부분의 경우 변환은 매우 빠릅니다.

단점

• 잘못된 렌더링
• 자바 스크립트를 실행하지 않습니다
• 최근 웹 기능 (FlexBox, 고급 선택기, 웹 폰트, 상자 크기 조정, 미디어 쿼리 등)은 지원하지 않습니다.
• 때로는 설치가 쉽지 않은 경우가 있습니다
• 규모가 복잡하다

옵션 2 : PhantomJ 및 랩퍼 라이브러리 사용

• 팬텀
• node-webshot ( PhantomJ 용 자바 스크립트 래퍼 라이브러리)
• …

찬성

• 자바 스크립트 실행
• 꽤 빠른

단점

• 잘못된 렌더링
• 최근 웹 기능 (FlexBox, 고급 선택기, 웹 폰트, 상자 크기 조정, 미디어 쿼리 등)은 지원하지 않습니다.
• 규모가 복잡하다
• 로드 할 이미지가있는 경우 작동하기가 쉽지 않습니다 …

옵션 3 : Chrome 헤드리스 및 랩퍼 라이브러리 사용

• 크롬 헤드리스
• 크롬 -devtools- 프로토콜
• Puppeteer (Chrome 헤드리스 용 자바 스크립트 래퍼 라이브러리)
• …

찬성

• 자바 스크립트 실행
• 거의 완벽한 렌더링

단점

• 다음과 관련하여 원하는 결과를 정확하게 얻는 것은 쉽지 않습니다.
  • 페이지로드 타이밍
  • 뷰포트 치수
• 규모가 복잡하다
• HTML에 외부 링크가 포함되어 있으면 상당히 느리고 느려집니다.

옵션 4 : API 사용

• ApiFlash (크롬 기반)
• EvoPDF (html 옵션)
• 그 라비 짓
• HTML / CSS에서 이미지 API로
• …

찬성

• 자바 스크립트 실행
• 거의 완벽한 렌더링
• 캐싱 옵션을 올바르게 사용할 때 빠름
• 스케일은 API에 의해 처리됩니다
• 정확한 타이밍, 뷰포트, …
• 대부분의 경우 무료 플랜을 제공합니다

단점

• 많이 사용할 계획이라면 무료가 아닙니다.

공개 : 저는 ApiFlash의 창립자입니다. 나는 정직하고 유용한 답변을 제공하기 위해 최선을 다했습니다.

답변

const {body} = document

const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
canvas.width = canvas.height = 100

const tempImg = document.createElement('img')
tempImg.addEventListener('load', onTempImageLoad)
tempImg.src = 'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml"><style>em{color:red;}</style><em>I</em> lick <span>cheese</span></div></foreignObject></svg>')

const targetImg = document.createElement('img')
body.appendChild(targetImg)

function onTempImageLoad(e){
  ctx.drawImage(e.target, 0, 0)
  targetImg.src = canvas.toDataURL()
}