코딩 개발/Javascript

[Javascript] html2canvas 라이브러리 이용하여 스크린샷 찍기

호소세 2024. 4. 1. 10:29
728x90
반응형

https://html2canvas.hertzen.com/

 

html2canvas - Screenshots with JavaScript

Try out html2canvas Test out html2canvas by rendering the viewport from the current page. Capture

html2canvas.hertzen.com

이곳에 가셔서 자신이 원하는 방식으로 다운로드하시면 됩니다.

 

https://github.com/niklasvh/html2canvas/releases

저는 github에서 html2 canvas.min.js를 다운로드하여서 불러왔습니다.

 

다운로드하면

<script src="js/jquery-1.6.2.min.js"></script>

 

html 파일에 이런 식으로 넣어서 사용하면 됩니다.

 

아무튼 저 사이트에 들어가면 다운로드하는 방법이 잘 작성되어 있습니다.

캡처하는 법

1. 캡처하는 버튼 생성

2. 캡처한 사진을 볼 image tag 생성

3. 캡처 함수 생성

4. 캡처 버튼 클릭

 

1. 캡처 버튼 만들기 및 캡처할 부분 id 주기

<body id="capture_area">
<a href="javascript:;" onclick="javascript:capture();">캡쳐</a>
</body>

body 태그를 촬영하고 싶으면 body 태그에 아이디 값을 줍니다.

button 태그를 이용하여 만드셔도 됩니다! 그건 여러분의 자유입니다.

 

2. 캡처한 사진을 볼 image tag 생성

<img id="capture_img" src="" alt="screenshot">

 

3.  캡처 함수 생성

//캡처 기능
function capture() {
	var captureImg = document.getElementById("capture_img");
	
	html2canvas(document.getElementById('capture_area')).then(function(canvas) {
		var captureImgData = canvas.toDataURL('image/png');
		captureImg.src = captureImgData;
	});
}

 

html2 canvas를 이용하여 캡처를 하고

캡처한 이미지를 url로 변경합니다.

변경한 url 데이터를 이미지 태그에 있는 src 속성에 넣으면

 

완성입니다!

 

예시 코드 (cdn 방식으로 해봤어요)

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
//캡처 기능
function capture() {
	var captureImg = document.getElementById("capture_img");
	
	html2canvas(document.getElementById('capture_area')).then(function(canvas) {
		var captureImgData = canvas.toDataURL('image/png');
		captureImg.src = captureImgData;
	});
}
</script>
<meta charset="utf-8">
<title>a</title>
</head>
<body id="capture_area">
	<a href="javascript:;" onclick="javascript:capture();">캡쳐</a>
	<p>hosose</p>
	<div>=======================================================================</div>
	<img id="capture_img" src="" alt="screenshot">
</body>
</html>

직접 코드를 넣어서 실행해 보세요!

 

캡처 전과 후를 확인할 수 있습니다.

캡처 전
캡처 후

이번에는 캡처한 사진을 저장해 봐야겠죠?

 

캡처 사진 저장

사진 저장함수 생성

//캡처 사진 저장
function captureImgSave() {
	// 이미지 다운로드 링크 생성
	var downloadLink = document.createElement('a');
	downloadLink.href = captureImgData;
	downloadLink.download = 'screenshot.png';
	downloadLink.click();
}

1. 새로운 태그 a 생성

2. 이전에 저장해 놓은 imageUrl 값 href 속성에 할당

3. download 할 이름 설정

4. 다운로드 실행

 

2번은 위에서 저장한 이미지 url을 전역변수에 저장해서 사용하시면 될 것 같아요.

 

예시

var captureImgData;

//캡처 기능
function capture() {
	var captureImg = document.getElementById("capture_img");
	
	html2canvas(document.getElementById('capture_area')).then(function(canvas) {
		captureImgData = canvas.toDataURL('image/png');
		captureImg.src = captureImgData;
	});
}

//캡처 사진 저장
function captureImgSave() {
	// 이미지 다운로드 링크 생성
	var downloadLink = document.createElement('a');
	downloadLink.href = captureImgData;
	downloadLink.download = 'screenshot.png';
	downloadLink.click();
}

이런 식으로 말이죠.

 

소감

세상에 살아갈 때 기대를 버리고 살아가면 참 좋은 것 같습니다. 주식투자에서도 사람들의 기대감으로 주가가 움직인다고 생각하는데

기대감이 적은 회사에 대한 주가는 조그마한 뉴스에도 마구마구 오르게 됩니다. 하지만 기대가 많은 회사에 대해서는 좋은 뉴스가 아무리 나와도 주가에 반영이 되지 않습니다.

다른 사람에 대한 기대나 자신에 대한 기대를 조금 낮추고 살면 행복해지는 것 같습니다.

반응형