Javascript) Html2Canvas를 이용해 안보이게 html 캡쳐하기

1. 이미지 캡쳐할 영역 지정

 첫 번째 인자로는 캡쳐할 영역의 element를, 두번째 인자로는 옵션을 전달할 수 있다. 아래와 같이 제이쿼리 선택자를 이용할 경우에는 '[0]'을 붙여주어야 한다. 또한, 캡쳐되는 영역에서 일부 요소들은 제외하고 싶다면 ignoreElements 옵션을 사용하여 특정 조건에 맞으면 return true(참이면 제외) 하여 제외시킬 수 있다.

html2canvas($("#imgDiv")[0], {
  ignoreElements: (element) => {
    if (element.className === "ignoreElemId") {
    	return true;      
    }    
  },  
}).then(function (canvas) {
	var img = canvas.toDataURL("image/png");    
});

 

2. 화면에 안보이게 캡쳐하기(html2canvas 이용)

 특정 영역의 element에서 일부 요소를 제외하는 것은 가능하지만 특정 요소를 포함시키는 것은 불가능하다. 또한 서비스를 이용하는 고객이 캡쳐를 시도할 때 고객에게는 보여주지 않고자 하는 정보를 함께 캡쳐해야할 때가 있을 수 있다. 이럴 때는 약간의 꼼수를 사용해서 해결할 수 있다.

html2canvas($("#imgDiv")[0], {
  ignoreElements: (element) => {
    if (element.className === "ignoreElemId") {
    	return true;      
    }    
  },  
}).then(function (canvas) {
	var img = canvas.toDataURL("image/png");    
	document.getElementById("imgDiv").appendChild(canvas);
});

 

 함수 내부에서 생성된 이미지를 보이지 않는 div에 append한다. 이 때 유의할 점은, 해당 div가 이미지(를 캡쳐한 div)와 동일한 width, height를 갖게 해주어야 한다는 것이다. 보이지 않게 하기 위해서는 opacity(불투명도)를 0으로 주거나 z-index를 보여지는 화면보다 낮게 설정하여 사용자의 눈에 직접적으로 보이지 않게 하는 것이다.(opacity를 인식하지 못하는 오류가 존재한다. 때문에 불투명도를 0으로 만들어 투명하게 만들어도 그 영역 내부를 캡쳐해낸다.) 혹은 (+float시켜 다른 공간을 잡아먹지 않게 할 수도 있다.)

 

cf. 캡쳐한 이미지 위에 특정 요소들을 추가적으로 렌더링하여 캡쳐하고 싶다면 위의 숨겨진 div에 추가하여 이를 다시 캡쳐할 수도 있다.