shininghyunho/view-image.html

## view-image.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TEST IMAGE</title>
</head>
<body>
<input id="userId"/>
<button id="enter">enter</button>
<br><img id="user-image">
<script>
    /*
    * 이미지 받아오기 sample
    * response -> reader -> chunks -> blob -> image
    * */
    function requestUserImage(userId) {
        const url='/api/v1/users/'+userId+'/image'
        console.log('request '+url)
        fetch(url, {
            method: 'GET'
            ,}).then(response => {
                console.log("response");console.log(response);
                sync_process(response);
            });
    }
    async function sync_process(response) {
        const reader= response.body.getReader();
        const chunks=await readAllChunks(reader);
        const blob= new Blob(chunks);
        document.getElementById('user-image').src=URL.createObjectURL(blob);
    };
    function readAllChunks(reader) {
        const chunks=[];
        return pump()
        function pump() {
            return reader.read().then(({ value, done }) => {
                if (done){
                    return chunks;
                }
                chunks.push(value);
                return pump();
            });
        }
    }
    document.querySelector("#enter").addEventListener("click",()=>{
        const userId=document.querySelector("#userId").value;
        console.log('request image, userId:'+userId);
        requestUserImage(userId)
    })
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>TEST IMAGE</title>
	</head>
	<body>
	<input id="userId"/>
	<button id="enter">enter</button>
	<br><img id="user-image">
	<script>
	/*
	* 이미지 받아오기 sample
	* response -> reader -> chunks -> blob -> image
	* */
	function requestUserImage(userId) {
	const url='/api/v1/users/'+userId+'/image'
	console.log('request '+url)
	fetch(url, {
	method: 'GET'
	,}).then(response => {
	console.log("response");console.log(response);
	sync_process(response);
	});
	}
	async function sync_process(response) {
	const reader= response.body.getReader();
	const chunks=await readAllChunks(reader);
	const blob= new Blob(chunks);
	document.getElementById('user-image').src=URL.createObjectURL(blob);
	};
	function readAllChunks(reader) {
	const chunks=[];
	return pump()
	function pump() {
	return reader.read().then(({ value, done }) => {
	if (done){
	return chunks;
	}
	chunks.push(value);
	return pump();
	});
	}
	}
	document.querySelector("#enter").addEventListener("click",()=>{
	const userId=document.querySelector("#userId").value;
	console.log('request image, userId:'+userId);
	requestUserImage(userId)
	})
	</script>
	</body>
	</html>