[JavaScript] hex 문자열로 받은 데이터를 이미지로 띄우기

 

페이지가 로드 된다.
이후에 사용자마다 다르게 사용하는 이미지를 서버로부터 받아온다.
서버에서는 hex 코드 문자열로 던져준다.
이 hex 문자열을 이미지 파일로 바꿔서 화면에 보여줘야 한다.
이 기능을 구현하는 JavaScript 코드이다.
직접 짠 코드는 아니고 stackoverflow 를 참고했다. 

// 출처 stackoverflow
function decodeHex(param){
    let hexStr = param.replace(/[^A-Fa-f0-9]/g,"");
    if(hexStr.length % 2) {
        console.error("InvalidArguments: Hex String length is odd");
        return;
    }

    let binary = new Array();
    for(let i=0; i<hexStr.length/2;i++) {
        let h = hexStr.substr(i*2, 2);
        binary[i] = parseInt(h, 16);
    }

    let byteArray = new Uint8Array(binary);
    const srcUrl = window.URL.createObjectURL(new Blob([byteArray], {type: "application/octet-stream"}));
    const targetImg = document.querySelector("img#result");
    targetImg.setAttribute("src", srcUrl);
}

// 출처 stackoverflow

 

- 250114