1217 사인 이미지 전송 ajax

@Mapper
public interface DocMapper {
	int insertDoc(Doc doc);
	List<Doc> selectDocList();
}

<mapper namespace="com.example.sign.mapper.DocMapper">
	<insert id="insertDoc" parameterType="com.example.sign.vo.Doc">
		INSERT INTO doc(
			doc_no, doc_sign
		) VALUES(
			#{docNo}, #{docSign}
		)
	</insert>
	
	<select id="selectDocList" resultType="com.example.sign.vo.Doc">
		SELECT
			doc_no docNo
			, doc_sign docSign
		FROM doc
	</select>
</mapper>

@Service
@Transactional
public class DocService {
	@Autowired DocMapper docMapper;
	
	public int addDoc(Integer docNo, String sign){
		// sign 문잦 중 이미지에 해당하는 문자만 분리 후 이미지로 변환
		String filename = UUID.randomUUID().toString().replace("-","");
		FileOutputStream fos = null;
		int row = 0;
		try {
			fos = new FileOutputStream("c:\\upload\\"+filename+".png");
			fos.write(Base64.getDecoder().decode(sign.split(",")[1]));
			
			Doc doc = new Doc();
			doc.setDocNo(docNo);
			doc.setDocSign(filename+".png");
			row = docMapper.insertDoc(doc);
			
		} catch (Exception e) {
			e.printStackTrace();
			throw new RuntimeException();
		} finally {
			try {
				fos.close();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
		return row;
	}
	
	public List<Doc> getDocList() {
		return docMapper.selectDocList();
	}
}

@Controller
public class DocController {
	@Autowired DocService docService;
	// 사인 입력 페이지
	@GetMapping("/addSign")
	public String addSign() {
		return "addSign";
	}
	// 사인 리스트 출력 페이지
	@GetMapping("/signList")
	public String signList(Model model) {
		model.addAttribute("list",docService.getDocList());
		return "signList";
	}
}

@RestController
public class SignRest {
	@Autowired DocService docService;
	@PostMapping("/addSignRest")
	public ResponseEntity<String> addSignRest(@RequestParam Integer docNo
											, @RequestParam String sign){
		System.out.println("docNo: "+docNo);
		System.out.println("sign: "+sign);
		
		docService.addDoc(docNo, sign);
		
		return ResponseEntity.ok("성공");
	}
}

확장자; 파일형식 , 이미지파일이름

-> ,컴마 뒤만 분리 sign.split(",")[1] (Service에서)

 

이미지 저장 주소 지정

SignApplication(프로젝트이름+Application)

@SpringBootApplication
public class SignApplication implements WebMvcConfigurer{

	public static void main(String[] args) {
		SpringApplication.run(SignApplication.class, args);
	}
	
	@Override
	public void addResourceHandlers(ResourceHandlerRegistry registry) {
		// TODO Auto-generated method stub
		// WebMvcConfigurer.super.addResourceHandlers(registry);
		
		// registry.가상주소.실제주소 매핑
		// 윈도우 file:/// ~
		registry.addResourceHandler("/upload/**").addResourceLocations("file:///c:/upload");
		// 리눅스 file:/ ~
		//registry.addResourceHandler("/upload/**").addResourceLocations("file:/home/ubuntu/upload");
		
	}
}

<div id="pad">         
    문서번호 : <input id="docNo" type="number" value="1">
    <br>
    <canvas style="border:1px solid red;"></canvas>        

    <button type="button" id="btnClear">지우기</button>         
    <button type="button" id="btnAdd">저장</button>        
</div>	    

<script>
    // API 소스코드가 canvas배열형태로 접근하도록 되어있음
    // --> $('canvas') 이런식의 직접호출은 error 발생 
    let canvas = $("#pad canvas")[0]; // id="pad"안의 0번째 캔버스

    let sign = new SignaturePad(canvas, {
        minWidth : 5, // 펜굵기
        maxWidth : 5, // 펜굵기
        penColor : '#000000' // 펜색상
    });

    // 지우기 버턴 클릭시
    $('#btnClear').click(function(){
        sign.clear();
    });

    $('#btnAdd').click(function(){
        if(sign.isEmpty()) {
            alert('사인이 없습니다');
        } else {
            $.ajax({
                asyn : true
                , url : '/addSignRest'
                , method : 'POST'
                , data : {docNo: $('#docNo').val(), sign:sign.toDataURL()}
            }).done(function(result){
                alert(result);
                sign.clear();
            }).fail(function(request, status, error){
                alert('실패');
            });
        }
    });
</script>

localhost/addSign

 

<table class="table">
    <tr>
        <td>문서번호</td>
        <td>이미지</td>
    </tr>
    <c:forEach var="d" items="${list}">
        <tr>
            <td>${d.docNo}</td>
            <td><img src="/upload/${d.docSign}"></td>
        </tr>
    </c:forEach>
</table>

localhost/signList