[JavaScript] html2canvas를 이용하여 웹 내 이미지 인쇄하기

이미지 인쇄기능을 만들어야 하는데 마스킹 기능을 포함하여 구현해야 함.

※ 마스킹: 이미지, 텍스트 등 원하는 부분을 가림.

 

일단 마스킹 기능은 이미지 뷰어 내에서 마스킹 추가 버튼을  누르면,

회색 배경의 조그만 박스 div가 생기고, 이것을 드래그 하여 가리고 싶은 부분에 드래그하여 올려놓을 수 있음.

 

이제 특정 부분이 가려진 채로 인쇄를 어떻게 해야할까 찾아보다가

이 상황에 딱 맞는 라이브러리인 html2canvas 라이브러리를 알게 됨

 

 

1. html2canvas

• JavaScript의 캡쳐 라이브러리.
• QuerySelector, jQuery 등으로 캡쳐하고 싶은 DOM 영역을 가져와서 해당 영역의 자식 영역까지 캡쳐가 가능함.
• 예를 들어, mainImageBox라는 ID값을 가진 박스에 이미지태그와 마스킹 박스가 존재하면 두 요소 모두 캡쳐가 가능.
• 결론적으로, 마스킹이 적용된 이미지 캡쳐가 가능하다는 얘기.
• 비동기 처리 방식이기 때문에 캡쳐 후, 다운로드 및 인쇄 기능을 구현할 때에 주의하며 코드를 작성해야 함.

 

 

본격적으로 코드를 작성해보자.

	html2canvas(document.getElementById('mainImageBox'), {scale: 4, dpi: 300,}).then(canvas => {
		const image = new Image();
		image.src = canvas.toDataURL('image/png');

		printWindow = window.open('', '_blank');
		printWindow.document.open();

		printWindow.document.write('<img src="' + image.src + '" alt="" style="height: 100%;"><br>');
		printWindow.document.body.style.display = 'flex';
		printWindow.document.body.style.justifyContent = 'center';
		
	}).then(() => {
		printWindow.onafterprint = function() {
			printWindow.close();
		};
		printWindow.print();
	});

 

 

 

html2canvas(document.getElementById('mainImageBox'), {scale: 4, dpi: 300}):

• 캡쳐가 이루어지고 있는 코드임. mainImageBox 라는 아이디 값의 DOM 요소의 캡쳐를 진행함.
• 두 번째 인자로 이미지에 대한 옵션을 지정해줄 수가 있음. scale은 이미지의 줌 배율이고 dpi는 해상도에 대한 옵션.

 

 

 

.then(canvas => {
const image = new Image();
image.src = canvas.toDataURL('image/png');

printWindow = window.open('', '_blank');
printWindow.document.open();

printWindow.document.write('<img src="' + image.src + '" alt="" style="height: 100%;"><br>');
printWindow.document.body.style.display = 'flex';
printWindow.document.body.style.justifyContent = 'center';

})

• 앞서 말했듯이 html2canvas는 비동기 방식, 즉 promise를 리턴하기 때문에 캡쳐가 완료된 canvas를 then으로 체인.
• Image 태그를 하나 생성해서 캡쳐가 진행된 canvas를 완전한 이미지로 변환.
• 프린트 방식은 새창을 열어서 인쇄될 이미지를 넣어주는 방식.

 

.then(() => {
printWindow.onafterprint = function() {
printWindow.close();
};
printWindow.print();
});

 

• 좀 더 안정적인 동기적 흐름을 위해 인쇄하는 코드 부분을 한번 더 then으로 체인.