[자바스크립트,js] html2canvas 를 이용한 브라우저(화면) 스크린샷,캡쳐 하기 프로그래밍
2018.09.17 11:24 Edit
원래 엑셀다운로드 기능을 구현할 예정이었으나...
이번 프로젝트는 나름(큰)회사 여서 양식대로
엑셀을 만들어야되는데.. 공수가 커서 일단 이미지로 다운로드받게 구현.
1. https://html2canvas.hertzen.com 가서 js 다운로드
2. 서버에 업로드
3. 스크린샷,캡쳐할 페이지에 코드작성하기
<script src="./html2canvas/html2canvas.min.js"></script>
<script>
// 이미지 다운로드 구현
html2canvas(document.querySelector("#popup_wrap"),{
//allowTaint: true,
//taintTest: false,
useCORS: true,
}).then(function(canvas) {
var imgageData = canvas.toDataURL("image/png");
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
jQuery(".download").attr("download", "다운로드파일명.png").attr("href", newData);
});
</script>
해당코드는 브라우저가 로딩되면 #popup_wrap 엘리먼트를 캡쳐해서 .download a 태그속성에 href 링크를 걸게된다.
하지만 문제가 하나있다.
html 과 css로 이루어진 부분은 canvas에 작성이 잘되겠지만 img태그로 표현된 부분은 캡쳐가 되지 않는다.
그래서 img 부분은 base64 인코딩으로 뿌려주어야만 img태그까지 캡쳐가 된다.
html2canvas 옵션에 대해서는 해당홈페이지 도큐먼트를 참고하자.
4. 이미지부분 base64로 인코딩하기
<img src="<?php echo 'data:jpg;base64,'.base64_encode(file_get_contents('이미지주소.jpg')); ?>" alt="">
// 이미지 base 64로 변환
해결.
- Tag :
- html2canvas , js , 자바스크립트 , 브라우저 화면캡쳐 , 브라우저 화면 스크린샷 , 현재창 스크린샷 , 현재창 canvas