nuxt의 Custom API EndPoint 를 이용해 화면을 이미지로 캡쳐한다.
- 이미지로 변환하고 싶은 html을 API로 전달
- chromium을 headless로 구동하여 html을 렌더링
- puppeteer를 이용하여 크롬의 화면을 캡쳐
create nuxt-app을 사용해서 프로젝트 생성
yarn create nuxt-app <project-name>{
"html": "<html></html>",//변환하고싶은 HTML 전체
"scrollWidth": 100,//캡쳐할 영역의 가로길이
"scrollHeight": 200,//캡쳐할 영역의 세로길이
"selector": ".wrapper",//HTML에서 이미지로 캡쳐할 dom의 selector
}const rawResponse = await fetch("/api/toimage", {
method: "POST",
headers: {
"Accept": "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({
html: cloneDoc.outerHTML,
scrollWidth,
scrollHeight,
selector
}),
});
const blob = await rawResponse.blob();