Javascript canvas 캡처이미지 그리기

이번에 프로젝트를 하면서 화면 캡처 기능을 만들어야 하는데 script로 간단하게 해주는 라이브러리가 있어 사용하게 되었어요.

 

js파일은 해당 링크에있어요

 

https://html2canvas.hertzen.com/

html2canvas - Screenshots with JavaScript

 

//사용법은 간단해요
//document.querySelector("#capture") 부분에 화면에서 캡처할 element를 넣어주면되요
html2canvas(document.querySelector("#capture")).then(canvas => {
   
	var dataURL = canvas.toDataURL("image/png");
	//저는 dataURL ajax로 서버로 보내어 서버에서 파일로 저장을 했어요
   
});

혹시 예전 버전을 사용해서 캡처 태그들이 깨지면 최신 버전을 적용해서 다시 해보세요.

제가 하던 프로젝트에서 아이폰에서 "SecurityError: The operation is insecure" 에러가 발생하여 원인을 살펴보니

body {
  background-color: #000;
}

#element {
  background-color: rgba(var(--color), 0.8);
}

이번 프로젝트에서는 variable? 방식으로 css가 되었는데 아이폰에서 저 부분을 컬러 값을 직접 입력했더니 에러 없이 정상작동을 하네요.