JavaScript에서 HTML을 이미지로 변환
이 기사에서는 HTML을 이미지로 렌더링하는 방법을 배웁니다. HTML이 포함된 웹 페이지의 2D 스냅샷을 찍어 웹 페이지에 표시하거나 이미지를 다운로드한다는 의미입니다.
우리는 외부 JavaScript 라이브러리를 사용하여 아래 방법으로 HTML을 이미지로 렌더링했습니다.
html2canvas JavaScript 라이브러리를 사용하여 HTML을 이미지로 변환
아래 예제에서 html2canvas 라이브러리를 사용하여 HTML을 이미지로 변환하고 웹 페이지에 렌더링했습니다.
예를 들어 my-div와 ShowImage라는 서로 다른 ID를 가진 두 개의 div 요소를 만들었습니다. my-div id가 있는 div 요소의 스냅샷을 만들고 ShowImage id가 있는 div 요소 내부에 스냅샷을 표시합니다.
또한 <button> 요소를 생성하고 이에 대한 onclick 이벤트를 추가했습니다. 사용자가 버튼을 클릭하면 convertToImage() 함수가 호출되어 HTML을 이미지로 변환합니다.
<body>
<div id="my-div">This is sample div element.</div>
<div id="ShowImage"></div>
<button onclick="convertToImage()">Convert</button>
</body>
아래 CSS의 div 요소에 일부 스타일을 적용했습니다. CSS 속성을 사용하여 div 요소에 대한 높이, 폭 및 배경 색상을 설정했습니다.
또한 모든 div 요소의 여백을 설정하여 주변에 약간의 공간을 남겨둡니다.
div {
display: block;
margin: 20px;
}
#my-div {
height: 300px;
width: 300px;
background-color: red;
}
html2canvas 라이브러리를 사용하려면 사용자는 (https://html2canvas.hertzen.com/)에서 로컬 컴퓨터로 다운로드해야 합니다. 그런 다음 사용자는 <script> 태그의 src 특성에 라이브러리 파일의 올바른 경로를 할당하여 <script> 태그를 통해 라이브러리를 HTML 코드에 추가할 수 있습니다.
<script src="html2canvas.js" type="text/javascript"></script>
convertToImage() 함수에는 HTML을 이미지로 변환하는 JavaScript 코드가 포함되어 있습니다.
아래 예제 코드에서는 JavaScript에서 id를 사용하여 id가 my-div인 div 요소에 액세스하고 html2canvas 기능을 적용하여 특정 HTML 요소의 이미지를 캡처했습니다. canvas는 이미지를 저장하고 해당 이미지를 ShowImage ID로 div 요소에 추가했습니다.
<script>
function convertToImage() {
html2canvas(document.getElementById("my-div")).then(function (canvas) {
document.getElementById("ShowImage").appendChild(canvas);
});
}
</script>
출력:
위의 출력 애니메이션에서 사용자는 변환 버튼을 클릭할 때 문서 본문 내 <div> 요소의 새 이미지를 렌더링하는 것을 볼 수 있습니다.
또한 캡처된 이미지를 로컬에 다운로드하고 저장하기 위한 HTML 링크를 생성할 수 있습니다.
여기에서 document.createElement("a")를 사용하여 새 <a> 요소를 만들고 anchor 변수에 저장했습니다. 또한 document.body.appendChild(anchor)를 사용하여 <a> 요소를 문서 본문에 추가했습니다.
다음으로 anchor.download = "sample.jpg"를 사용하여 다운로드 가능한 이미지 파일에 이름을 지정하고 canvas 변수의 toDataURL 속성을 사용하여 anchor에 대한 href 속성을 설정합니다. 또한 anchor의 target 속성에 _blank 값을 설정하여 이미지를 다운로드할 수 있도록 했습니다.
출력은 또한 convert 버튼을 클릭할 때 div 요소의 이미지를 웹 페이지에 추가하고 동일한 이미지 파일을 로컬 컴퓨터에 다운로드함을 보여줍니다.
<script>
function convertToImage() {
html2canvas(document.getElementById("my-div")).then(function (canvas) {
var anchor = document.createElement("a");
document.body.appendChild(anchor);
document.getElementById("ShowImage").appendChild(canvas);
anchor.download = "sample.jpg";
anchor.href = canvas.toDataURL();
anchor.target = "_blank";
anchor.click();
});
}
</script>
출력:
dom-to-image JavaScript 라이브러리를 사용하여 HTML을 이미지로 변환
아래의 HTML 코드는 위의 예에서 사용된 것과 거의 동일하며, id 속성 값이 다른 두 개의 div 요소가 포함되어 있습니다.
<div id="my-div">Demo texts.</div>
<div id="ShowImage"></div>
<button onclick="convertToImage()">Convert to image</button>
아래의 CSS 코드에는 HTML 코드의 스타일이 포함되어 있으며 위의 예제 코드에서 사용한 것과 거의 동일합니다.
div {
display: block;
margin: 20px;
}
#my-div {
height: 100px;
width: 100px;
background-color: blue;
}
domtoimage 라이브러리를 사용하려면 로컬에서 다운로드하거나 CDN을 사용할 수 있습니다. 여기서 사용자는 HTML 코드의 <head> 섹션에 domtoimage 라이브러리의 아래 CDN을 삽입해야 합니다.
<script
src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"
integrity="sha512-01CJ9/g7e8cUmY0DFTMcUw/ikS799FHiOA0eyHsUWfOetgbx/t6oV4otQ5zXKQyIrQGTHSmRVPIgrgLcZi/WMA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
아래 JavaScript 코드에서 id를 사용하여 div 요소에 액세스하고 element 변수에 저장했습니다.
다음으로 domtoimage 라이브러리를 사용하여 HTML을 png 이미지로 변환했습니다. new Image() 생성자를 사용하여 비어 있는 새 이미지를 만들고 newImage 변수에 저장했습니다.
또한 newImage 변수의 src 속성에 URL 값을 할당합니다. 그런 다음 newImage를 웹 페이지에 추가합니다.
또한 catch 블록을 사용하여 오류를 처리했습니다.
<script>
function convertToImage(){
var element = document.getElementById("my-div");
domtoimage
.toPng(element)
.then(function (URL) {
var newImg = new Image();
newImg.src = URL;
document.getElementById('ShowImage').appendChild(newImg);
})
.catch(function (error) {
console.error("error");
});
}
</script>
출력:
사용자는 파란색 div의 스냅샷을 찍는 것을 볼 수 있습니다. 버튼을 클릭할 때마다 코드는 파란색 div의 새 스냅샷을 문서 본문에 추가합니다.
