vue.js - jsp에서 html2canvas 사용하여 이미지파일로 서버 업로드

html2canvas는 밑에 홈페이지에서 .js에서 받을 수 있다.

html2canvas.hertzen.com/

html2canvas - Screenshots with JavaScript

위의 라이브러리를 이용하여 이미지 서버에 업로드하기 편리하다.

 

먼저 canvas에 ref를 정의하여 준다.

그리고 canvas에 그려진 그림을 @click 한다.(클릭 함수 구현)

 

- 위의 함수를 통하여 this.$refs.canvas1 html정보를 가져온다.

      - document.getElementById( 'canvas1' )를 사용하여도 된다.

 

canvas.toDataURL(type, encorderOptions) 

- 기본적으로 format type은 image/png를 가진다.

- encorderOptions은 이미지 품질을 나타내는 0에서 1 사이의 숫자이다.

 

Binary File로 읽기 위하여 앞에 데이터 관련 내용을 제외 하여 서버로 전송한다.

 

BinaryData를 FileOutputStream으로 파일데이터로 만든다.

만들어진 파일을 경로에 맞게 저장하고  DB에 파일관련 정보를 저장한다.(나중에 불러올 수 있다.)