get the file size of an image from url and displayed in an <img>

get width, height: 이거는 상대적으로 간단

<img src='http://...jpg id='bgImg'>
document.getElementById('previewImg').width -> 화면에서 보이는 width
document.getElementById('previewImg').height
document.getElementById('previewImg').naturalWidth -> 이미지 원본크기
document.getElementById('previewImg').naturalHeight
document.getElementById('previewImg').clientWidth -> =width, width와 동일
document.getElementById('previewImg').clientHeigtht

아래처럼 Image 객체를 직접 생성해서 처리할 수도 있음 (<img> element만드는 것과 동일함)

const img = new Image();
img.onload = ()=>{
      alert("Current width=" + img.width + ", " + "Original height=" + img.height);
};
img.src='http://kic-qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=CDP&func_code=PROGRAM_IMAGE&file_path=/cdp/program_image/test/skin/ncaa_back_fhd.jpg';

이미지가 load된 후에야 size정보를 파악할 수 있으므로 onLoad 이벤트 리스너를 붙여줘야함, 안그러면 async한 처리를 하다가 뭔가 틀어질 수 있음

<img onLoad = {(e)=>{e.target.xxxx}}>

 

 

size in byte: 문제는 이거,,,

response헤더에 정보가 담겨오면 헤더를 통해 알수 있음

'Content-Length'

http://kic-qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=CDP&func_code=PROGRAM_IMAGE&file_path=/cdp/program_image/test/skin/ncaa_back_fhd.jpg
요청하면 Content-Length:110,019로 응답이 오며 실제 응답받은 파일사이즈도 110,019 (Byte)

request를 보내고 blob해서 알아낼수도 있음

let img = new Image()
img.crossOrigin = "Anonymous"; // Helps with some cross-origin issues

fetch('foo.png')
.then(response => response.blob())
.then(blob => { img.src = URL.createObjectURL(blob); })

위 방법써도 아래와 같은 CORS 에러발생
Access to fetch at 'http:/..jpg' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

const fileImg = await fetch(URL_TO_IMG).then(r => r.blob());
fileImg.size

 const size=performance.getEntriesByName('http://kic-qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=CDP&func_code=PROGRAM_IMAGE&file_path=/cdp/program_image/test/skin/ncaa_back_fhd.jpg');
 잘은 모르겠으나 이것도 해보니 안됨

 

그런데 문제는.............

header를 통해 알아내거나 blob하려면 request를 직접 보내야 하는데 만약 CORS 이슈가 있다면 직접 응답을 받아내지 못함 -> 이거저거 다 시도해봤으나 안됨, 되게하려면

* 이미지 파일 response해주는 서버의 CORS정책을 바꾸거나

* client가 아니라 서버에서 요청을 대리하도록 만들어야 함