본문 바로가기
Front-end/JavaScript

[JAVASCRIPT] 이미지 클릭시 새창띄우기 (base64 이미지)

by 꼬바리 2021. 11. 9.

JS 코드

 : window.open 사용

 : 이미지가 경로가 아닌 Base64 인코딩된 값

 : width, height 이미지사이즈에 맞게 지정가능하다.

나의 경우 base64 인코딩 값이 이미지 src 여서 600px 로 지정해줌

    const clickImg = (imgsrc,pageName) =>{
        // alert(imgsrc);
        var imageWin = new Image();
        imageWin = window.open("", "", "width=600px, height=600px"); 
        imageWin.document.write("<html><body style='margin:0'>"); 
        imageWin.document.write("<img src='" + imgsrc + "' border=0>"); 
        imageWin.document.write("</body><html>"); 
        imageWin.document.title = pageName;
        
    }

HTML 코드

 : 리액트 사용

 : onClik 시 clickImg funtion 

 : clickImg (이미지src , 새창 타이틀 )

<img src={resultMap.picture} 
	width="100%" height="100%"  
    onClick={() => clickImg(resultMap.picture,resultMap.pictureId)} 
    style={{cursor:"pointer"}} />  : ''}

 

728x90
반응형

댓글