[JSP] 수정한 canvas를 file 타입의 input태그에 넣기

프로젝트를 진행하다가 차트를 DB에 저장하는 업무를 맡았다.

 

1. Local에 있는 사진을 저장하기

2. Local에 있는 사진을 업로드해서 펜으로 그리고 저장하기(펜차트)

펜차트는 의사선생님들이나 병원 실장님들이 차트를 보고 막 펜으로 특이사항 등등을 적는 그런걸 의미한다.

 

위 두가지 기능을 구현해야 했다.

첫번째 기능은 input을 이용해서 손쉽게 구현했는데 두번째 기능이 문제였다.

 

그래서 차트를 업로드해서 펜으로 표시를하고 저장을 한 후에 DB에 저장해야 했는데 이미지를 업로드하고 펜으로 휙휙 그리는 기능까지는 여차저차해서 쉽게 구현했지만 이 이미지를 다시 저장해서 파일화하여 input 태그에 넣는 작업이 시간이 꽤 걸렸다.

 

처음에는 Blob을 이용하여 구현하였다.

Canvas -> Action(펜으로 노트에 작성) -> Blob화 -> DB 저장

function doAction() {
  var form = $("#form")[0];
  var data = new FormData(form);

  var imgDataUrl = sigCanvas.toDataURL('image/png');
  var binaryData = atob(imgDataUrl.split(',')[1]);
  var array = [];

  for (var i = 0; i < binaryData.length; i++) {
  	array.push(binaryData.charCodeAt(i));
  }

  var blob = new Blob([new Uint8Array(array)], {type: 'image/png'});

  data.set("imageFile", blob);
}

하지만 위와 같이 했을때 파일명이 blob으로 바뀌어버려서 원래의 파일명을 알 수가 없었다. 그도 그럴 것이 Blob은 프로퍼티로 name을 갖고 있지 않기때문이다. 그러다 Blob을 상속 받은 것이 File이라는 것을 공부하다 알게 되었고 애초에 처음부터 File로 만들어서 input태그에 넣으면 되겠다는 생각을 했다.

 

Canvas -> Action(펜으로 노트에 작성) -> File화 -> DB 저장

function doAction() {
  var form = $("#form")[0];
  var data = new FormData(form);

  var fileName = $("#imageFile")[0].files[0].name;

  var imgDataUrl = sigCanvas.toDataURL('image/png');
  var binaryData = atob(imgDataUrl.split(',')[1]);
  var array = [];

  for (var i = 0; i < binaryData.length; i++) {
  	array.push(binaryData.charCodeAt(i));
  }

  var file = new File([new Uint8Array(array)], fileName, {type: 'image/png'});

  data.set("imageFile", file);
}

그래서 위와같이 File 객체를 새로 만들어서 formData에 넣어서 해결하였다.