*이 글은 문제를 파고자 하는 과정이 작성되어 있으므로 아래만 읽음 됩니당.
IOS 환경에서 html-to-image 라이브러리로 png 이미지 다운로드 시 정상적으로 되지 않는 문제
사이드 프로젝트로 특정 엘리먼트를 이미지로 다운로드 받아야 했는데, 안드로이드, 크롬 등의 브라우저에서는 정상적으로 동작하지만 IOS 환경에서만 제대로 못그리는 문제가 발생했다.
| 아이폰 | 갤럭시 |
|---|---|
|
|
ㅎㅎ...
사파리를 안쓰는 맥북 유저는 크롬에서 확인했을 때에도 정상적으로 다운로드되니 잠시 사파리를 잊었다.
먼저 다음과 같은 오류를 확인해야 했다.
1. 배경 이미지 & 각종 이미지 다 날라감
2. 폰트 날라감 (이는 콘솔에서 에러로 표시되어 확인하였다)
2번은 참고글 을 확인해 link 요소에 crossOrigin='anonymous' 를 넣었더니 보인다...?
문젠 1번이었다.
배경이미지는 어디갔고.. 이미지는 어디갔단 말인가?
그런데 신기하게 계속 다운로드를 받아봤더니 갑자기 배경화면이 짜잔했다
근데 qrcode 이미지가 안보였다. 분명 다 그려진 화면에서 그저 여러 번 이미지 다운로드를 했을 뿐인데 보이고 안보이고 하다니.. 핳..
요걸 어떻게 하지 하고 npm 페이지를 계속 읽어보다가 여기엔 원하는 답이 없는 듯하여, 다시 또 검색을 시작했다. (사실 사파리 지원 안한다는 말을 원했..)
그러다..
Convert SVG with image not working in safari
이 글을 발견하였다.
나와 완전히 같은 문제를 겪고 있었다.
여기에 답변을 해준 사람이 왜 이 지경이 나는지 알려줬다.
답변자가 알려준 svg 에서 이미지로의 변환 프로세스
1. Blob/Blob URL 생성
2. 캔버스에 렌더링
3. dataURL 반환
그리고 사파리에서 문제가 되는 점
어떤 이유로(적어도 일부) 사파리 버전에서는 캔버스를 제대로 렌더링하기 위해 약간의 지연이 필요한 것 같습니다.
html-to-image 소스에 toPng 함수는
먼저 html 요소를 svg로 변환하고 -> 그 결과를 캔버스에 그려 -> dataURL를 반환해준다.
최종적인 목표는 png 파일을 만드는 것이지만 우선 svg로 했을 때엔 제대로 보이는지 확인을 해보고 싶었다.
응~ 바로 돼~ 여러 번 해도 잘돼
ㅎㅎ.. 바로 잘 보이다니...? 이 배신감
SVG로 우선 변환하고 지연 처리를 해주어 처리해주면 될 것 같다.
근데 여기서 끝이 아니라고 말해주듯 스타일이 적용이 가볍게 안되는 현상이 나타났다.
변환 과정 중 html을 뽑아보니 align-items: flex-end는 귀엽게 사라졌다.
옆집 크롬은 잘 되는데 왜 넌
요것도 또 찾아보자...
