[떡국] 트러블슈팅 _ html2canvas

 

html-to-image를 사용했을때 pc에서는 캡쳐가 정상적으로 이루어지는데 

모바일 웹브라우저에서는 동적컨텐츠가 캡쳐될때 제외되는 현상이 있었다 그래서 

모든 로직이 다 그려지고 나서 캡쳐를 실행하게 했는데도 동일하게 발생됬다.. ㅠㅠ

 

그래서 다시 꺼냈던건 html2canvas

처음에 저 라이브러리를 사용했을때 

 

이런식으로 동적 이미지태그의 안에 이미지가 확대되서 짤려보이는 문제 때문에 다른 라이브러리를 찾았던건데 

모바일에서 동적인걸 나오게 하려고 블로그란 블로그는 다 찾아봤으나 해결되지 않았고 차라리 저 이미지 하나의 문제인거라면 저게 더 

해결하는데에 접근이 쉽겠다고 생각이 들었다. 

[원래 로직]

      <div className="flex-center flex flex-row ">
        <Image
          src={`/images/avatar/${tempData.hostAvatar}.png`}
          width={125}
          height={158}
          alt="hostAvatar"
        />
        <Image
          src={`/images/avatar/${tempData.visitorAvatar}.png`}
          width={125}
          height={158}
          alt="visitorAvatar"
        />
      </div>

원래는 이미지 태그에 가로, 세로길이를 지정해서 했는데 확실한지는 모르겠지만 

넥스트는 이미지 최적화로 크기에 따라 조절되기 때문에 문제가 있는게 아닐까 해서 

      <div className="flex-center flex flex-row ">
        <div className="relative h-158 w-125">
          <Image src={`/images/avatar/${tempData.hostAvatar}.png`} layout="fill" alt="hostAvatar" />
        </div>
        <div className="relative h-158 w-125">
          <Image
            src={`/images/avatar/${tempData.visitorAvatar}.png`}
            layout="fill"
            alt="visitorAvatar"
          />
        </div>
      </div>

div태그로 image태그를 감싸주고 div에 크키를 지정해서 image는 상위 태그 크기에 맞춰지도록 했더니 .. 아니..? 

정상적으로 캡쳐가 되버렸다...

 

 

이제 모바일일때, pc일때 분기로 해서 다운로드를 시킬지 꾹눌러서 이미지 저장을 시킬지 조건을 두려했는데 

모바일일때 이미지가 자꾸 액박이 뜨는 문제가 발생을 했고, 이제 아예 모바일로 만든게 아닌 웹으로 만들어서 하려다보니 생각보다 

안되는점이 너무 많았다. 

 

그래서 생각해낸건 카카오 인앱 브라우저일때만 캡쳐이미지를 띄워서 꾹누르면 이미지 저장이 될 수 있도록 설정했더니.. ㅠㅠ 

거의 이틀동안 머리싸매면서 하던게 해결이됬다 ㅠㅠ 

 

여기서 제일 귀찮았던건 모바일에 정상작동 하는지 확인해야해서 그냥 코드 수정하고 확인하고 하는게 아닌 

코드 수정하고 커밋하고 머지하고 싱크 맞춰서 배포되야지만이 확인이 되다보니 진짜 코드 한줄 수정하고 커밋하는게 제일 힘들었다면 힘들었던 것 같다. 

 

그래도 솔직히 수동으로 캡쳐하라고 안내메세지 띄워줘야하나까지 생각했다가 결국 해결해서 너무 뿌듯하다 !