ajax 에서 array buffer 를 이미지로 변환하기

 

JAVA

public byte[] getImage(HttpServletRequest request, HttpServletResponse response) throws Exception{
  BufferedImage bi = ImageIO.read(new File("c:\\image\\mypic.jpg"));

  ByteArrayOutputStream baos = new ByteArrayOutputStream();
  ImageIO.write(bi, "jpg", baos);

  return baos.toByteArray();
}

 

 

 

 

javascript

var httpRequest = new XMLHttpRequest();

httpRequest.open('GET', 'http://localhost:8080/image', true);
httpRequest.setRequestHeader('Content-Type', 'application/json');
httpRequest.responseType = "arraybuffer";

httpRequest.onreadystatechange = function(event){
  const { target } = event;

  if(target.readyState === XMLHttpRequest.DONE){
    const { status } = target;

    if(status === 0 || (status >= 200 && status < 400)){
      console.log('Success');
      document.querySelector('#img').src = "data:image/png;base64," + btoa(String.fromCharCode.apply(null, new Uint8Array(target.response)));
    }
    else{
      console.log('Failed');
    }
  }
};
httpRequest.send();

 

JAVA 에서 전송한 byte 배열을 받기 위해 responseType 을 arraybuffer 로 설정하여 요청한다.

 

전달 받은 byte 배열 데이터를 변환한 후 img 태그의 src 에 반영하여 이미지를 확인한다.

 

 

 

 

참고

• https://mkyong.com/java/how-to-convert-bufferedimage-to-byte-in-java/
• https://stackoverflow.com/questions/1645847/ajax-binary-response