[javascript] 자바스크립트 화면 캡쳐하기 (html2canvas.js)
화면을 캡쳐하기 위해서
javascript를 통하여 캡쳐하도록 해보겠습니다.
html2canvas.js 사용해보기
1. html2canvas.js 코드를 가져옵니다.
공식홈페이지 : https://html2canvas.hertzen.com/
또는 githumb 주소 : https://github.com/niklasvh/html2canvas/releases
2. script를 설정해줍니다. (jquery가 필요없습니다 . 생략이 가능합니다.)
<script src="js/html2canvas.js"></script>
3. body를 표현합니다. (screenshot을 테스트 환경을 위해서)
<!-- 전체 부분-->
<button onclick=bodyShot()>bodyShot</button>
<!-- 일부분 부분-->
<button onclick=partShot()>partShot</button>
<div class="container" id='container'>
<!-- 로컬에서 불러온 파일 -->
<img src="img/1534347627.jpg">
<!-- 웹에서 불러온 파일 -->
<img src="https://www.w3schools.com/html/img_girl.jpg">
<!-- <img src="https://source.unsplash.com/user/erondu/400x400"> -->
</div>
<!-- 결과화면을 그려줄 canvas -->
<canvas id="canvas" width="900" height="600"
style="border:1px solid #d3d3d3;"></canvas>
4. 버튼 2개에 대해서 이벤트를 만들어줍니다.
function bodyShot() {
//전체 스크린 샷하기
html2canvas(document.body)
//document에서 body 부분을 스크린샷을 함.
.then(
function (canvas) {
//canvas 결과값을 drawImg 함수를 통해서
//결과를 canvas 넘어줌.
//png의 결과 값
drawImg(canvas.toDataURL('image/png'));
//appendchild 부분을 주석을 풀게 되면 body
//document.body.appendChild(canvas);
//특별부록 파일 저장하기 위한 부분.
saveAs(canvas.toDataURL(), 'file-name.png');
}).catch(function (err) {
console.log(err);
});
}
function partShot() {
//특정부분 스크린샷
html2canvas(document.getElementById("container"))
//id container 부분만 스크린샷
.then(function (canvas) {
//jpg 결과값
drawImg(canvas.toDataURL('image/jpeg'));
//이미지 저장
saveAs(canvas.toDataURL(), 'file-name.jpg');
}).catch(function (err) {
console.log(err);
});
}
function drawImg(imgData) {
console.log(imgData);
//imgData의 결과값을 console 로그롤 보실 수 있습니다.
return new Promise(function reslove() {
//내가 결과 값을 그릴 canvas 부분 설정
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//canvas의 뿌려진 부분 초기화
ctx.clearRect(0, 0, canvas.width, canvas.height);
var imageObj = new Image();
imageObj.onload = function () {
ctx.drawImage(imageObj, 10, 10);
//canvas img를 그리겠다.
};
imageObj.src = imgData;
//그릴 image데이터를 넣어준다.
}, function reject() { });
}
function saveAs(uri, filename) {
var link = document.createElement('a');
if (typeof link.download === 'string') {
link.href = uri;
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} else {
window.open(uri);
}
}
5. 결과화면
로컬의 이미지들은 캡쳐가 되나 그 외는 캡쳐가 되지를 않는다....
이 부분을 해결하고 싶지만 아직은 해결 하지 못했다.
'[javascript]' 카테고리의 다른 글
| [JavaScript] 자바스크립트 input 자동완성(input autocomplete) (2) | 2019.04.10 |
|---|---|
| [javascript] 특정문자 길이로 자르기 (match함수) (0) | 2018.12.23 |
| overflow 사용시 scrollbar(스크롤바) niceScroll.js로 바꾸기 (0) | 2018.09.27 |
| i'mport(아임포트) 결제 모듈 간편하게 사용해보기 (5) | 2018.07.01 |
| 자바스크립트(javascript)로 pdf 파일 만들기 (0) | 2018.06.19 |
미나미나미