[javascript] 웹 화면 부분 캡쳐 만들기

관련 지식
javascript, canvas, html2canvas, dimmed

이전에 만들었던 ‘[javascript] html2canvas를 이용한 웹 화면 캡쳐’ 를 개선해서 이번엔 부분 캡쳐가 가능한 기능을 만들어보겠습니다. 여기서 사용할 샘플은 이전 게시물의 최종 샘플을 참고하시면 됩니다.

구현에 대한 방식은 시놀로지 웹 클리퍼의 기능을 참고하였습니다.

먼저 최종 실행 결과부터 보겠습니다.

동작 방식

캡쳐 버튼을 클릭했을때 동작하는 방식을 크게 보면 아래와 같습니다.

1. 화면 전체에 dimmed(반투명 음영) 추가
2. 마우스 이동에 따라 캡쳐 영역 생성
3. mouseup 이벤트 시 화면 전체 캡쳐
4. 캡쳐된 이미지를 캡쳐 영역의 정보대로 crop
5. crop한 이미지 저장

여기서 3번과 5번 절차는 이전에 만들었던 소스를 재활용하면 되기 때문에 어렵지 않습니다.
4번 항목도 canvas 에서 제공하는 api를 이용할 것이기 때문에 크게 어렵지 않지만 1,2의 경우 HTML 퍼블리싱 지식도 조금 필요합니다. 차례대로 살펴보겠습니다.

딤/딤드 추가

‘캡쳐’ 버튼을 클릭했을때 컨텐츠 전체를 감싸는 반투명 음영, 즉 dimmed가 추가 됩니다. 딤 처리를 할때 흔히 사용하는 방법이 있으실텐데 그것과는 조금 다를수 있습니다. 아래와 같이 background-color 속성이 아닌 border 속성으로 처리를 해야 합니다.

#screenshot_mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  display: block;
  opacity: 0.3;
  text-align: center;
  box-sizing: border-box;
  z-index: 2147483647;
  border-color: black;
  border-style: solid;
}

border 속성을 이용했기 때문에 위의 css 만으로는 딤 처리가 되지 않습니다. div를 추가할때 border-width 를 설정해줘야만 합니다.

var height = window.innerHeight;
var $mask = $('<div id="screenshot_mask"></div>').css("border-width", "0 0 " + height + "px 0");
$("body").append($mask);  //dimmed 추가

background-color 속성을 사용했을 때와의 차이는 이전에 올렸던 ‘[css] dimmed 처리 방법 두가지’ 에 설명되어있으니 참고하시기 바랍니다.

마우스 포커스 효과

마우스 커서의 움직임에 따라 화면을 4분할 한것처럼 보이는 효과는 <div> 객체에 css의 가상 요소를 이용합니다.

#screenshot_focus:before,#screenshot_focus:after{
  border:none !important;
  content:"" !important;
  height:100% !important;
  position:absolute !important;
  width:100% !important
}
#screenshot_focus:before{
  border-right:1px solid white !important;
  border-bottom:1px solid white !important;
  left:-100% !important;
  top:-100% !important
}
#screenshot_focus:after{
  border-top:1px solid white !important;
  border-left:1px solid white !important;
  left:0 !important;
  top:0 !important
}
#screenshot_focus{
  height:100% !important;
  position:fixed !important;
  width:100% !important;
  z-index:2147483648 !important
}

이것 또한 단순히 <div> 를 추가한다고 적용되지 않고 커서의 움직임에 따라 해당 엘리먼트의 left, top 값을 변경해주어야 합니다.

var $focus = $('<div id="screenshot_focus"></div>');
$("body").append($focus);  //마우스 커서에 따라 캡쳐 영역을 만들 div
function mousemove(e) {
  var x = e.clientX;
  var y = e.clientY;
  $focus.css("left", x);  //마우스 커서 따라 좌표 포커스 이동
  $focus.css("top", y);
}

캡쳐 영역 선택

이젠 마우스 클릭->이동에 따라 캡쳐가 될 영역을 만들어주어야 합니다. 정확히 말하면 캡쳐가 되는 영역인것 처럼 공간을 열어줘야 합니다.

현재 상태)

마우스 영역 선택에 따른 border 값 변화)

위의 그림은 시작점으로 부터 큰쪽으로 드래그 했을때의 border 값 변화를 보여주고 있습니다. 물론 실제로 만들때는 드래그 방향에 따른 좌표 처리를 해주어야 합니다.
우리가 흔히 border:1px solid black 처럼 단순히 써오던 것을 테두리의 두께를 조절하고 opacity를 적용함으로써 화면의 일부 영역을 강조하는 것처럼 만들수 있습니다.

if(selectArea) {  //캡쳐 영역 선택 그림
  var top = Math.min(y, startY);
  var right = width - Math.max(x, startX);
  var bottom = height - Math.max(y, startY);
  var left = Math.min(x, startX);
  $mask.css("border-width", [top + 'px', right + 'px', bottom + 'px', left + 'px'].join(' '));
}

부분 화면 캡쳐

화면의 일부를 캡쳐하는 것은 이전 글 ‘[javascript] html2canvas를 이용한 웹 화면 캡쳐’ 에서도 다뤘지만 그것과는 방식이 다릅니다.

• 이전 방식 : document의 특정 DOM을 기준으로 캡쳐
• 개선 방식 : document 전체를 캡쳐하고 선택 영역만큼을 crop

따라서 먼저 document를 캡쳐해야 합니다.

html2canvas(document.body).then(function(canvas) {  //전체 화면 캡쳐
});

콜백함수로 전달된 canvas에는 화면 전체에 대한 이미지 정보가 있습니다. 이번엔 그 값에서 원하는 영역만 추출하면 됩니다. getImageData() 로 원하는 영역에 대한 이미지를 추출후 새로운 캔버스에 넣어줍니다.

var img = canvas.getContext('2d').getImageData(left, top, width, height);  //선택 영역만큼 crop
var c = document.createElement("canvas");
c.width = width;
c.height = height;
c.getContext('2d').putImageData(img, 0, 0);
save(c);  //crop한 이미지 저장

이제 남은 것은 파일로 저장하는 일 뿐입니다. 이전 글에서 썼던 로직을 함수화 시켜서 호출하면 끝입니다.

정리

이 글에서는 부분 캡쳐에 대한 원리를 쉽게 보이기 위해 세세한 처리가 빠져있습니다. 따라서 실제 서비스에 적용할때는 스크롤에 대한 처리를 추가하고 디테일한 좌표 계산을 해야합니다.

이미지 부분 캡쳐를 위해 특정 브라우저 요소만을 위한것은 아무것도 사용하지 않았습니다. css 속성을 복제해서 이미지화 하는 html2canvas의 기능상 브라우저와 조금 달라보일수 있는 부분은 아쉽지만 IE10 이상이면 동작한다는 것이 장점일듯 합니다.

만약 화면에 보이는것과 완전히 동일한 이미지 캡쳐를 하고 싶다면 확장 플러그인에서 사용 가능한 captureVisibleTab() 함수를 사용하시기 바랍니다.

tabs.captureVisibleTab() : https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/captureVisibleTab

최종 샘플

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script> 
<style>
* {
  box-sizing: border-box;
}
body {
  font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */
header {
  background-color: #666;
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: white;
}
/* Create two columns/boxes that floats next to each other */
nav {
  float: left;
  width: 30%;
  height: 300px; /* only for demonstration, should be removed */
  background: #ccc;
  padding: 20px;
}
/* Style the list inside the menu */
nav ul {
  list-style-type: none;
  padding: 0;
}
article {
  float: left;
  padding: 20px;
  width: 70%;
  background-color: #f1f1f1;
  height: 300px; /* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section:after {
  content: "";
  display: table;
  clear: both;
}
/* Style the footer */
footer {
  background-color: #777;
  padding: 10px;
  text-align: center;
  color: white;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;
  }
}
</style>
</head>
<body>
<input type="button" value="캡쳐" />
<h2>CSS Layout Float</h2>
<p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)</p>
<header>
  <h2>Cities</h2>
</header>
<section>
  <nav>
    <ul>
      <li><a href="#">London</a></li>
      <li><a href="#">Paris</a></li>
      <li><a href="#">Tokyo</a></li>
    </ul>
  </nav>
  <article>
    <h1>London</h1>
    <p>London is the capital city of England. It is the most populous city in the  United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
  </article>
</section>
<footer>
  <p>Footer</p>
</footer>
<a id="target" style="display: none"></a>
<style>
#screenshot_mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  display: block;
  opacity: 0.3;
  text-align: center;
  box-sizing: border-box;
  z-index: 2147483647;
  border-color: black;
  border-style: solid;
}
#screenshot_focus:before,#screenshot_focus:after{
  border:none !important;
  content:"" !important;
  height:100% !important;
  position:absolute !important;
  width:100% !important
}
#screenshot_focus:before{
  border-right:1px solid white !important;
  border-bottom:1px solid white !important;
  left:-100% !important;
  top:-100% !important
}
#screenshot_focus:after{
  border-top:1px solid white !important;
  border-left:1px solid white !important;
  left:0 !important;
  top:0 !important
}
#screenshot_focus{
  height:100% !important;
  position:fixed !important;
  width:100% !important;
  z-index:2147483648 !important
}
</style>
<script>
$(":button").on('click', function(e) {  //캡쳐 기능 활성화
  var height = window.innerHeight;
  var width = $(document).width();
  var $mask = $('<div id="screenshot_mask"></div>').css("border-width", "0 0 " + height + "px 0");
  var $focus = $('<div id="screenshot_focus"></div>');
  $("body").append($mask);  //dimmed 추가
  $("body").append($focus);  //마우스 커서에 따라 캡쳐 영역을 만들 div
  var selectArea = false;
  $("body").one("mousedown", function(e) {  //캡쳐 영역 선택 시작
    e.preventDefault();
    selectArea = true;
    startX = e.clientX;
    startY = e.clientY;
  }).one('mouseup', function(e) {  //캡쳐 시작
    selectArea = false;
    $("body").off('mousemove', mousemove);  //이벤트 삭제
    $("#screenshot_focus").remove();  //마우스 포커스 삭제
    $("#screenshot_mask").remove();  //딤 삭제
    var x = e.clientX;
    var y = e.clientY;
    var top = Math.min(y, startY);
    var left = Math.min(x, startX);
    var width = Math.max(x, startX) - left;
    var height = Math.max(y, startY) - top;
    html2canvas(document.body).then(function(canvas) {  //전체 화면 캡쳐
      var img = canvas.getContext('2d').getImageData(left, top, width, height);  //선택 영역만큼 crop
      var c = document.createElement("canvas");
      c.width = width;
      c.height = height;
      c.getContext('2d').putImageData(img, 0, 0);
      save(c);  //crop한 이미지 저장
    });
  }).on("mousemove", mousemove);  //캡쳐 영역 크기 변경
  function mousemove(e) {
    var x = e.clientX;
    var y = e.clientY;
    $focus.css("left", x);  //마우스 커서 따라 좌표 포커스 이동
    $focus.css("top", y);
    if(selectArea) {  //캡쳐 영역 선택 그림
      var top = Math.min(y, startY);
      var right = width - Math.max(x, startX);
      var bottom = height - Math.max(y, startY);
      var left = Math.min(x, startX);
      $mask.css("border-width", [top + 'px', right + 'px', bottom + 'px', left + 'px'].join(' '));
    }
  }
  function save(canvas) {  //파일로 저장
    if (navigator.msSaveBlob) {
      var blob = canvas.msToBlob(); 
      return navigator.msSaveBlob(blob, '파일명.jpg'); 
    } else { 
      var el = document.getElementById("target");
      el.href = canvas.toDataURL("image/jpeg");
      el.download = '파일명.jpg';
      el.click();
    }
  }
});
</script>
</body>
</html>