[React] Canvas 사이즈에 맞춰 이미지의 원본 비율로 출력하기

const imgOnCanvas = (imageSrc) => {
    if (!canvasRef) return;
    const canvas = canvasRef.current;
    const ctx = canvasRef.current.getContext("2d");
    setCanvas(canvas)
    setCtx(ctx);

    const image = new Image();
    image.src =imageSrc

    image.onload = function() {
        console.log("-------------------------");
        //입력 파일의 크기를 알아냄
        let inW = image.width;
        let inH = image.height;
        console.log("[1]image 원본 - size",inW,inH);
  
        //--------------------------------------------1
        // 캔버스 기본 크기
        let canW = canvas.width     //300
        let canH = canvas.height    //150
        // console.log("[2]canvas 기본 - size1",canW,canH);
  
        //캔버스 크기를 결정
        let reCanW = imgBoxRef.current.clientWidth;
        let reCanH = imgBoxRef.current.clientHeight;
        canvas.width = reCanW
        canvas.height = reCanH
        console.log("[3]canvas leftBox - size2",reCanW,reCanH);
    
        //이미지 크기 조정
        let imgW ;
        let imgH ;
        let ratioW = reCanW/inW
        let ratioH = reCanH/inH
        console.log("비율" ,ratioW, ratioH);
        
        if( reCanW >= inW ){
          console.log("캔버스 넓이 > 이미지 원본 넓이");
          if( reCanH >= inH ){
            console.log("캔버스 높이 > 이미지 원본 높이");
            imgW= inW
            imgH= inH
          }else{
            console.log("캔버스 높이 < 이미지 원본 높이");
            imgW= inW * ratioH
            imgH= reCanH
          }
        }else{
          console.log("캔버스 넓이 < 이미지 원본 넓이");
          if( reCanH >= inH ){
            console.log("캔버스 높이 > 이미지 원본 높이");
            imgW= reCanW
            imgH= inH * ratioW
          }else{
            console.log("캔버스 높이 < 이미지 원본 높이");
            if(ratioW > ratioH){
              imgW= inW * ratioH
              imgH= inH * ratioH
            }else{
              imgW= inW * ratioW
              imgH= inH * ratioW
            }
          }
        }

        console.log("[4]최종 출력될 이미지 사이즈",imgW,imgH);
        setImageW(imgW)
        setImageH(imgH)
        
        //(0,0)을 중심으로 n*m 의 사이즈로 이미지를 그림
        ctx.drawImage(image, 0, 0,imgW,imgH);
        
        console.log("-------------------------");
    };
  }

 

캔버스 크기와 출력이미지 크기엔 4가지 경우의 수가 있습니다.

 

 

(캔버스 크기와 이미지 크기 넓이 높이 중  크기가 큰 경우 작성)

1. 캔버스 넓이 + 캔버스 높이

2. 캔버스 넓이  + 원본이미지 높이

3. 원본이미지 넓이 + 캔버스 높이

4. 원본이미지 넓이 + 원본이미지 높이

 

 

4번의 경우 넓이/높이 비율로 한번 더 계산 해줘야합니다.

 

이해하지 어렵지만

위 코드 잘 뜯어보면^^ check 가능합니다.

 

 

(간단한 계산이지만 구글링 실패했고 직접 작성했습니다;;)