(모바일)웹 화면에서 서명을 받아 서버에 업로드..

일단, 미션이 떨어지고 서명받는 방법을 찾아 보았다.

canvas 라는 html 태그를 사용하여 서명받는 방법은 쉽게 찾았다..

https://szimek.github.io/signature_pad/

그런데, 서명 받은 이미지를 서버에 업로드 해야 하는데,

상기 url 은 로컬에 다운로드 받는 내용..

로컬에 서명한 이미지를 저장하고,

이걸 다시 찾아서 input.type="file" 에 넣는 식이면 불편.

 

그래서, 이리저리 찾아 보다가 서버에 업로드 하는 방법도 찾았다.

http://hacks.mozilla.or.kr/2011/01/html5-이미지-업로더-개발-방법

그런데, multipart/form-data 를 이용한 방법을 고집해서,

form 태그의 input type="file" 에 넣으려고 하니 문제..

FormData() 를 사용하면 되는듯 한데,

도대체가 기존에 줄곧 사용하던 방식에 적용하려고 보니,

해결이 안 됨.

 

상기 URL 의 본문 링크 중 아래 내용을 보니..

http://hacks.mozilla.or.kr/2010/05/firefox-4-formdata를-사용하여-js로-보다-쉽게-폼-다루기

아하.. html 에 form 태그를 사용하지 말고,

FomData() 를 신규로 만들어서 사용하면 되었던 것.

.open() 하고 .send() 할 때 화면이 전환되지 않으므로,

form 태그 사용시 target 을 세팅하는 작업은 불필요.

 

결론..

화면에서 이미지 등의 파일을 첨부할 때는,

아래와 같이 form 에 input.type="file" 을 사용할 수 있지만..

canvas 등에서 이미지를 자동으로 생성해서

서버에 업로드 할 때는 form 태그를 사용할 필요 없다..

<form name="..." method="...">

...

<input type="file" name="...">

...

</form>

 

상기 두번째 링크에서,

canvas.mozGetAsFile("foo.png"); 이 작동하지 않으면,

아래와 같이 사용.

var file = dataURL2File(canvas.toDataURL(),'fileName.png');

// canvas 가 png 인 이유는, 상기 첫번째 링크의 signature_pad.umd.js 에서 png 로 세팅하기 때문

var dataURL2File = (dataUrl, fileName) => {
  var arr = dataUrl.split(',');
  var mime = arr[0].match(/:(.*?);/)[1];
  var bstr = atob(arr[1]);
  var n = bstr.length;
  var u8arr = new Uint8Array(n);
  while(n--){
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr],fileName,{type:mime});
}