pupperteer를 이용한 화면 캡처 기능 개발
이번에 개발하는 기능중에 화면을 캡처해서 다운로드를 제공해야 하는 기능이 있다.
처음 시도한 방법은 html2canvas을 이용한 방법 이었는데… 실패 했다.
화면에 보여주는 부분은 잘 캡쳐가 되지만, 스크롤에 숨겨진 부분이 캡쳐가 되지 않았다.
하루를 날리고, 다음으로 시도한 방법은 pupperteer를 이용해서 요청이 오면 내부에서 새로운 페이지를 띄우고 해당 페이지를 로딩해서 캡쳐 하는 방식이다.
만든 코드는 다음과 같다.
router.post('/capture', async (req, res, next) => {
const file_name = `${shortid.generate()}.png`;
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setViewport({ width: 1366, height: 768, });
await page.goto(CAPTURE_URL+Buffer.from(JSON.stringify(req.body)).toString('base64'), {waitUntil: 'domcontentloaded'});
await page.waitFor(1000);
await page.waitForSelector('#endarea');
await page.screenshot({fullPage: true, path: `public/images/${file_name}`});
await browser.close();
res.json({image_url:`/images/${file_name}`})
});
요청이 들어오면 해당 페이지로 넘어온 파라메터를 다시 전달해서 화면을 캡쳐 한다.
await page.screenshot({fullPage: true, path: public/images/${file_name}});이 부분에 보이는 부분을 전체 화면으로 캡쳐를 해서 저장을 하는 기능을 수행한다.
저장된 이미지를 웹에서 다운로드를 하는 코드는 다음과 같다.
function forceDownload(url, fileName){
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "blob";
xhr.onload = function(){
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL(this.response);
var tag = document.createElement('a');
tag.href = imageUrl;
tag.download = fileName;
document.body.appendChild(tag);
tag.click();
document.body.removeChild(tag);
}
xhr.send();
}
이와 같이 실행하면 fileName으로 다운로드가 진행된다.