로드 된 img의 Javascript 추출 응답 헤더

Question

응답 헤더의 일부 JSON 데이터와 함께 이미지를 반환하는 서버 측 앱이 있습니다.

클라이언트 측에서 간단한 html 페이지가 있습니다. 다음과 같이 내가 이미지를로드 상상 : 같은 페이지에서

<img src="http://www.myserverapp.com/image1" />

를, 그것은 페이지를로드하는 동안 브라우저가 해당 이미지를 요청시 반환 된 응답 헤더를 추출하는 몇 가지 자바 스크립트를 사용할 수 있습니까? 그렇다면 어떻게 할 수 있습니까?

대체 방법은 이미지와 JSON 데이터를 두 개의 개별 리소스로 분할하여 자바 스크립트에서 데이터를 별도로 요청하는 것입니다. 그러나 이미지와 JSON 데이터를 둘 다 반환 할 수 있다면 생각하고있었습니다. 이는 브라우저의 이미지 요청의 일부로 성능이 향상 될 수 있고 좀 더 간소화 될 수 있습니다.

감사합니다!

---

편집 : 동적 자바 스크립트를 사용하여 이미지를로드하고자하고 있지 않다는 - 내가 그렇게 한 다음 헤더 정보를 그런 식으로 추출 할 수 있다는 것을 알고 있지만 브라우저가로드 어디 솔루션을 찾고 있어요 이미지를 정상적으로 만든 다음 일부 자바 스크립트 코드가 소급하여 브라우저가 만든 이미지 요청에 대한 응답 헤더를 찾습니다.

Answer 1

XHR을 통해 이미지를 가져 와서 원하는 응답 헤더 (like this)를 가져올 수 있습니다.

내가 인해 CORS 문제로이 예에서는 프록시를 추가 한 주

var url = 'https://placehold.it/400x400'; 
 
var proxy = 'https://jsonp.afeld.me/?url='; 
 
var client = new XMLHttpRequest(); 
 

 
client.open('GET', proxy + url, true); 
 
client.send(); 
 
client.onreadystatechange = function() { 
 
    if (this.readyState === this.HEADERS_RECEIVED) { 
 
     console.log(client.getResponseHeader('Content-Type')); 
 
    } 
 
};

,하지만 당신은 당신의 코드이를 남길 수 있습니다.