코드/Trouble Shoot

[JS] IOS 에서 다른 이미지 사이즈

Yeah-Panda 2020. 3. 27. 17:29

케이스 ( 에디터에서 이미지 삽입 )

<input type="file" onchange="onChange">

<script>
function onChange(e:FileList) {
  console.log('파일 사이즈 = ', e.fileList[0].size);
}
</script>

IOS 가 아닌 모든 환경에서 15MB 이미지를 등록해 보면 15MB 라고 (15882755) 잘 찍혀 나온다.

IOS 환경에서 시도해보면 전혀 다른 수치가 나온다. - 약 1.5MB 
심지어 사진보관함에서 검색, 선택후 보여지는 사이즈도 15MB 다.
하지만 실제로 웹 페이지에 삽입되는 이미지의 사이즈는 로그에 찍힌 것처럼
1.5MB
위 페이지를 실제로 등록한후 노출되는 뷰페이지에서 해당 이미지의 url 로
이미지를 다운받아보면 15MB 가 아닌 1.5MB .

유추된 원인은 아이폰에서 큰 이미지(대략 10mb 기준)를 웹페이지에 삽입 할 경우
임의로 파일을 압축해서 웹페이지에 전달한다.

관련링크
https://stackoverflow.com/questions/12556198/mobilesafari-not-returning-the-right-image-size-info-via-javascript

 

MobileSafari not returning the right image size info via JavaScript

I have an HTML test page for this issue here. For some reason MobileSafari is reporting the Image.width/height properties of any image with more than 1700 pixels as half its value. That is, the width

stackoverflow.com

나의 상황과 정확히 일치한다.

하루 반나절을 검색으로 보냈다
처음엔 IOS 11 버전부터 추가된 HEIC 포맷으로 인한 것으로 생각하고
관련 문서를 열심히 찾았다
( 외부 루트를 아이폰으로 전달된 jpeg 파일이 Heic 포맷으로 자동 컨버팅 되는 내용에 대한 공식 문서 )
명확하게 그런 내용을 말하는 페이지는 없었고
대충 추론으로 이슈를 마무리 하려던 차에 발견한 stackoverflow 페이지다.
저 내용이 맞는 듯.

참고로 IOS 로 네이버 카페등에서 글쓰기시
15MB 이미지를 삽입해보면 네이버 에디터는 바로 썸네일과 함께 이미지 사이즈를 표시해 주는데,
거기서 표시되는 사이즈 또한 1.5MB 다.
순수하게 IOS 에서 전처리가 있는 듯하다.

그외 참고 링크

http://www.defusion.org.uk/archives/2010/02/19/shrinking-large-background-image-bug-in-iphone-safari/
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html

 

DEfusion.org.uk » Shrinking large background image bug in iPhone Safari

Updated: 22nd Feb 2010 I experienced a slightly odd bug in the latest version of mobile Safari on iPhone where it was shrinking large background images applied via CSS to fit within the confines of the screen. Not finding anyone else who has written about

www.defusion.org.uk

 

Creating Compatible Web Content

Creating Compatible Web Content This chapter covers best practices in creating web content that is compatible with Safari on the desktop and Safari on iOS. Many of these guidelines simply improve the reliability, performance, look, and user experience of y

developer.apple.com