반응형

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

 

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

 

https://html2canvas.hertzen.com/

 

html2canvas - Screenshots with JavaScript

Try out html2canvas Test out html2canvas by rendering the viewport from the current page. Capture

html2canvas.hertzen.com

 

//사용법은 간단해요
//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가 되었는데 아이폰에서 저 부분을 컬러 값을 직접 입력했더니 에러 없이 정상작동을 하네요.

반응형

'개발 > Javascript' 카테고리의 다른 글

모바일 주소창때문에 scrollTop이 동작이 안될경우  (0) 2022.04.02
IE opener가 undefined  (0) 2021.03.25
Jquery Datepicker 동적생성  (0) 2021.03.03
Jquery each break,continue  (0) 2021.02.17
Jquery sort 사용하기  (0) 2021.02.15

+ Recent posts