자바스크립트 SignaturePad를 이용하여 캔버스에 싸인을 하고 서버에 이미지 저장하기

간소하게나마 앵귤러 문법이 포함되어 있으니 감안하여 참고하세요

HTML

	<div style="background-color: #ffffff">
	<div>
	<canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
	</div>
	<div>
	<button ng-click="save()">Save</button>
	<button ng-click="clear()">Clear</button>
	</div>
	</div>

view raw 코드 복사하기 hosted with ❤ by GitHub

Javascript

	var signaturePad;
	//dom 초기화가 완료 된 후 signaturePad를 초기화 한다.
	angular.element($document).ready(function(){
	//new SignaturePad('Canvas', 'Style속성')
	signaturePad = new SignaturePad(document.getElementById('signature-pad'),
	{backgroundColor: 'rgb(255, 255, 255, 0)', penColor: 'rgb(0, 0, 0)'});
	});
	$scope.save = function() {
	//toDataUrl로 이미지를 Base64로 인코딩 된 문자열로 가져온다.
	//data:image/png;base64,ewVBORwaaGzzzoAAAANQsietgAAArwAAAH0.....
	//위 문자열을 img src속성에 넣어주면 이미지 출력함
	var data = atob(signaturePad.toDataURL('image/png').split(",")[1]);
	var array = [];
	for(var i=0 ; i<data.length ; i++){
	//문자열을 아스키코드로 변환하여 array배열에 저장
	array.push(data.charCodeAt(i));
	}
	//Blop를 image/png Type으로 생성.
	//Blop은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰때 사용
	var file = new Blob([new Uint8Array(array)], {type: 'image/png'});
	//서버로 보낼 파라미터에 Blop으로 생성한 file 추가
	var params = {
	'signImage' : file
	}
	//request header 설정
	var request_header = {
	'header' : 'header'
	}
	//자신의 요청 server의 url 작성
	var serverUrl = "서버URL";
	//앵귤러의 Upload 지시자를 사용하여 서버통신
	//앵귤러가 아닐 시 ajax와 같은 것으로 통신
	Upload.upload({
	url: serverUrl,
	headers : request_header,
	data: params
	}).then(function (result) {
	}, function (result) {
	}, function (evt) {
	});
	}
	$scope.clear = function() {
	//Canvas 초기화
	signaturePad.clear();
	}
	}

view raw 코드 복사하기 hosted with ❤ by GitHub

Server(Java)

	InputStream stream;
	String filePath = "파일경로"
	MultipartHttpServletRequest mpRequest = (MultipartHttpServletRequest) request;
	Iterator<String> fileNameIterator = mpRequest.getFileNames();
	MultipartFile multiFile = null;
	while (fileNameIterator.hasNext()) {
	multiFile = mpRequest.getFile((String) fileNameIterator.next());
	}
	String tempFileName = "파일명";
	String fullFileName = String.format("%s%s", filePath, tempFileName);
	try {
	stream = multiFile.getInputStream();
	OutputStream bos = new FileOutputStream(fullFileName);
	int bytesRead = 0;
	byte[] buffer = new byte[8192];
	while ((bytesRead = stream.read(buffer, 0, 8192)) != -1) {
	bos.write(buffer, 0, bytesRead);
	}
	bos.close();
	stream.close();
	if (logger.isDebugEnabled()) {
	logger.debug("The file has been written to \"" + fullFileName);
	}
	} catch (FileNotFoundException e) {
	logger.error(e);
	} catch (IOException e) {
	logger.error(e);
	}

view raw 코드 복사하기 hosted with ❤ by GitHub