[React.js] objectFit 속성 html2canvas 에서 다르게 캡쳐되는 문제

아래와 같이 동그란 배경에 이미지를 올리는 작업을 하고, 스크린샷을 찍는 기능을 구현을 했습니다. 

스크린샷은 html2canvas를 사용해서 찍었고, 코드는 아래와같이 구현을 하였는데,

스크린샷 이미지에서는 묘하게 이미지 비율이 바뀌는 문제가 있었습니다.

     <div style={styles.circle}>
      	<img src={item.profileImage} alt={item.profileImage} style={styles.circleImg} />
     </div>

      circle: {
        width: '85px',
        height: '85px',
        borderRadius: '50%',
        overflow: 'hidden',
      },
      circleImg: {
        width: '100%',
        height: '100%',
        backgroundColor: '#3a3a3a',
        objectFit: 'cover',
      },

 

결과만 말하자면, "objectFit : cover" 속성이 html2canvas에서 제대로 동작하지 않는다는 것이 문제였습니다. 

비교적 최근에 나온 속성이라, 이부분을 수정하여 다른방식으로 변경해보았고 수정되었음을 확인하였습니다.

 

objectFit : cover 는 이미지를 부모요소에 완전히 맞추면서 원본 이미지의 비율을 유지하는 것 입니다. 

따라서 이미지의 가로-세로 비율이 부모요소의 가로-세로 비율과 다른 경우, 콘텐츠의 일부가 잘릴 수 있습니다. 

 

      circle: {
        width: '85px',
        height: '85px',
        borderRadius: '50%',
        overflow: 'hidden',
        display: 'flex',
        alignItems: 'center'  
      },
      circleImg: {
        width: '100%',
        //height: '100%',
        backgroundColor: '#3a3a3a',
        //objectFit: 'cover',
        backgroundSize: 'cover',
      },

objectFit : cover 대신 backgroundSize: 'cover'를 추가해줍니다.

 

여기까지만 하면 html2canvas의 결과로 나온 이미지와 동일하게 약간 찌그러져 표시되는것을 확인 할 수 있습니다. 

이 상태에서 width, height 속성중 하나를 제거해주면 제대로된 비율로 수정됩니다.

 

이때 세로가 긴 이미지의 경우, 중앙이 아닌 상단이 표시될 수 있는데

display : flex와 alignItems: center를 추가하여 수정가능합니다.