우리는 웹사이트를 구성하는 마크업의 일부를 캡처(이미지로 변환)하고 캡처된 이미지를 저장하거나 작업을 수행해야 합니다. 따라서 우리는 이 설명된 동작을 달성할 수 있는 방법을 고안해야 합니다.
우리의 문제는 캔버스뿐만 아니라 모든 마크업 요소를 캡처하는 것을 포함하기 때문에 약간 복잡하고 특히 처음부터 수행할 계획이라면 더욱 그렇습니다. 따라서 편의를 위해 타사 라이브러리인 htmltocanvas를 사용합니다. 원하는 마크업을 캔버스로 변환한 다음 캔버스 요소를 이미지로 간단히 다운로드할 수 있습니다.
예시
그렇게 하는 코드는 -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<style>
#capture{
height: 300px;
width: 300px;
display: flex;
flex-direction: column;
background-color: rgb(43, 216, 216);
}
span{
flex: 1;
width: 100%;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
color: #ffffff;
font-size: 20px;
}
#first{ background-color: rgb(15, 168, 15); }
#second{ background-color: rgb(43, 93, 228); }
#third{ background-color: rgb(194, 55, 13); }
</style>
<body>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
const download = () => {
html2canvas(document.querySelector('#capture')).then(canvas => {
document.body.appendChild(canvas);
});
}
</script>
<div id='capture'>
<span id='first'>First Block</span>
<span id='second'>Second Block</span>
<span id='third'>Third Block</span>
</div>
<button onclick="download()">
Download
</button>
</body>
</html> 출력
그리고 다음 코드의 출력은 -
다운로드 버튼 클릭 후
두 번째 이미지에는 "다운로드" 버튼 옆에 캔버스가 포함되어 있습니다. 이 버튼을 마우스 오른쪽 버튼으로 클릭하고 로컬 저장소에 저장할 수 있습니다.