canvas blob을 spring에서 받아 mybatis를 통해 mysql db저장 및 출력

*도움이 되셨다면 광고 한번 클릭 부탁드립니다! 제게 큰 힘이됩니다!

 

 

1.xhr 및 ajax

document.getElementById('paint-layer').toBlob(function(blob){
    		datas.paintblob = blob
    	    getLoadData(url,datas,this.setTempStoreSuccess.bind(this))
    	}.bind(this))

paint-layer라는 캔버스에서 이미지를 뽑아서 blob형태로 만든훈

Formdata의 paintblob 이름으로 blob을 저장한다.

그후 getLoadData 함수를 통해 xhr를 전송한다.

 

function getLoadData(url,datas,callback){
	const formdata = new FormData();
	formdata.enctype='multipart/form-data';
    formdata.method='post';
	
    Object.entries(datas).forEach((data)=>{
    	formdata.append(data[0],data[1]);
    })
   
    const xhr = new XMLHttpRequest();
    xhr.open("post", url, true);
	xhr.onreadystatechange = function() { // 폴백
		if (xhr.readyState == 4) {
			if (xhr.status == 200) { // 200은 잘넘어왔단 것이다.
				const data = JSON.parse(xhr.response);
				callback(data);

			} else {
				alert("요청오류 : " + xhr.status);
			}
		}
	}
	// post방식은 xhr객체에 데이터를 붙여서 전송
	xhr.send(formdata); 
}

 

2.Spring Set mysql

@RequestMapping("/draw/data/temporaryStorageInfoBookData.do")
	public ModelAndView temporaryStorageInfoBookData(HttpServletRequest request, HttpServletResponse response, ModelMap model,
			@RequestParam Map<?, ?> commandMap,@RequestParam("paintblob") MultipartFile mfile) throws Exception {

		

MultipartFile을 통해 mfile 변수명을 선언해준다 

 

 

HashMap<String,Object> InfoMap = new HashMap<String, Object>();

byte[] bytes;
		
		try {
			bytes = mfile.getBytes();
			try {
				java.sql.Blob blob = new javax.sql.rowset.serial.SerialBlob(bytes);
				InfoMap.put("paintImage", blob);
			}catch (SerialException e1) {
				e1.printStackTrace();
			}
		}catch (java.io.IOException e3) {
			e3.printStackTrace();
		}

 

위와같이 mfile에서 받은 데이터를 Byte형태로 바꾼뒤 javax.sql.rowset.serial.SeraiBlob() 를 통해

blob 형태로 만든뒤

 

미리 정의한 InfoMap에 정의하여 serviceImpl로 보내준다.

 

 

3.Spring get mysql blob (mybatis)

 

<resultMap id="DrawFileresult" type="x.x.x.service.DrawFileVO">
	    ...
	    ...
	    <result column="object_imageBlob" property="objectImageBlob" jdbcType="BLOB" javaType="_byte[]"></result>
	</resultMap>

 

sql.xml mapper의 resultMap을 생성한후 

 

 

	// draw
	private byte[] objectImageBlob;
	
	
	public byte[] getObjectImageBlob() {
		return objectImageBlob;
	}
	public void setObjectImageBlob(byte[] objectImageBlob) {
		this.objectImageBlob = objectImageBlob;
	}

위와 같은 DrawFileVO를 생성해준다.

 

List<Map<String,DrawFileVO>> tempObjectData = drawFigureService.selectBookTemporaryObjectInfo(paramMap);
		
		byte[] encoded = null;
		
		for(int i=0;i<tempObjectData.size();i++) {
			DrawFileVO data= (DrawFileVO) tempObjectData.get(i);
			System.out.println(data);
			
			if(data.getObjectIsbackground().equals("PAINT")) {	
				encoded = org.apache.commons.codec.binary.Base64.encodeBase64(data.getObjectImageBlob());
				
			}
			
		}
		String encodedString = new String(encoded);

		
		
		
		...
		modelAndView.addObject("tempObjectPaint",encodedString);

그후에 리스트 및 MAP<String,DrawFileVO> 형식으로된 데이터들을 받아온후

리스트에서 하나씩 뽑아서  byte로 된 blob데이터를

org.apache.commons.codec.binary.Base64.encodeBase64(data.getObjectImageBlob());

를 통해서 base64로 변환시킨후

addObject를 통하여 View단으로 넘긴다

 

4.Base 64 View 출력

const base64 = `data:image/png;base64,${tempPaintData}`
    	
 const paintImage = new Image();
  paintImage.src = base64;

 

마지막으로 컨트롤러에서 전달받은 base64데이터를 "data:image/png;base64" 와 혼합하여

 

이미지를 생성한뒤 출력하면된다.