[JavaScript] html2canvas 사용 할 때, transform 때문에 이미지가 잘린 경우.

2019. 3. 20. 16:46· WEB/JavaScript
반응형

[JavaScript] html2canvas 사용 할 때,  transform 때문에 이미지가 잘린 경우. 해결방법



※ html2canvas사용방법은 이 글을 참고하세요.



아래와 같이 imageDiv(검은 영역)를 canvas에 그린 후 캡쳐할 경우


빨간색 상자가 transform이 되어 있기 때문에 아래와 같은 이미지가 아닌 
오른쪽과 같이 빨간색 상자가 한쪽으로 치우친 형태로 캔버스에 그려진 후 캡쳐된다.


imageDiv 1

초록색 영역만 canvas에 그려진 것이다.

imageDiv2



해결방법은 
imageDiv에 설정되어 있는 transform을 제거 한 후 캡쳐하고 

다시 transform을 설정해 주면 된다.



<JS>
var imageDiv = document.getElementById("imageDiv");

// 캡쳐 후 원래 위치로 복구 하기 위해 transform 값을 저장하는 변수
var _transform = imageDiv.style.transform;  
// transform 제거
imageDiv.style.setProperty("transform", "none");  

// 영상 캡쳐
html2canvas(imageDiv, {
    
}).then(function (_canvas) {
    let base64image = _canvas.toDataURL("image/png");

    // image 위치 정상복구
    imageDiv.style.transform = _transform;

});




반응형
저작자표시 비영리 변경금지 (새창열림)

'WEB > JavaScript' 카테고리의 다른 글

[JavaScript][NeDB] Unique Key 설정 방법  (0) 2019.04.09
[JavaScript] 키보드 이벤트 ( 단축키 ) 생성하는 방법  (0) 2019.04.03
[JavaScript] html2canvas 사용 방법  (0) 2019.02.20
[JavaScript] popper.min.js.map 파일  (0) 2019.02.14
[JavaScript] input 에 enter key 입력 이벤트  (0) 2019.02.08
'WEB/JavaScript' 카테고리의 다른 글
  • [JavaScript][NeDB] Unique Key 설정 방법
  • [JavaScript] 키보드 이벤트 ( 단축키 ) 생성하는 방법
  • [JavaScript] html2canvas 사용 방법
  • [JavaScript] popper.min.js.map 파일
S0PH1A
S0PH1A
반응형
S0PH1A
Web Programmer
S0PH1A
전체
오늘
어제
  • 전체
    • About Me
    • Python
      • Python
      • Django
    • DataBase
      • MySQL
      • MongoDB
    • JAVA
      • JAVA
      • Spring
    • WEB
      • JavaScript
      • HTML
      • CSS
      • Vue.js
      • React
      • Nest.js
      • Node.js
      • Electron
      • PHP
    • Linux
    • Algorithm
    • 기타
    • 생각
    • App
      • ReactNative

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • javascript
  • Python
  • django
  • install
  • electron
  • vue.js
  • vue
  • Error
  • nodejs
  • mysql

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
S0PH1A
[JavaScript] html2canvas 사용 할 때, transform 때문에 이미지가 잘린 경우.
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.