크롬에서 렌더링 된 그림 요소 이미지 선택

Question

그림 요소의 렌더링 된 이미지를 다시 사용해야합니다. picturefill이 완료 한 논리를 복제하지 않고도 자바 스크립트를 사용하여 chrome/opera에서 렌더링 한 이미지 파일 경로에 직접 액세스 할 수 있습니까? 1200 픽셀의 폭과 망막 데스크톱 브라우저 창에서, 위의 예를 사용하여

는

<picture> 
    <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x"> 
    <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x"> 
    <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" > 
</picture> 

, 사진를 지원하는 브라우저가 머리 2x.jpg 렌더링됩니다. 또는 망막 디스플레이가있는 너비가 450px 미만인 스마트 폰에서 Chrome 브라우저를 사용하는 경우 head-fb-2x.jpg를 사용합니다. 이 동적 렌더링 이미지에 직접 액세스하려면 어떻게해야합니까?

원본 요소를 직접 구문 분석 할 필요없이이 렌더링 된 이미지에 액세스 할 수있는 방법이 있습니까?

Answer 1

후보가로드 된 경우에만 currentSrc proprety가 업데이트됩니다. 함수는 다음과 같이 보일 수 있습니다 :

function getCurrentSrc(element, cb){ 
    var getSrc; 
    if(!window.HTMLPictureElement){ 
     if(window.respimage){ 
      respimage({elements: [element]}); 
     } else if(window.picturefill){ 
      picturefill({elements: [element]}); 
     } 
     cb(element.src); 
     return; 
    } 

    getSrc = function(){ 
     element.removeEventListener('load', getSrc); 
     element.removeEventListener('error', getSrc); 
     cb(element.currentSrc); 
    }; 

    element.addEventListener('load', getSrc); 
    element.addEventListener('error', getSrc); 
    if(element.complete){ 
     getSrc(); 
    } 
} 

참고 : 당신이 img DOM 요소와 콜백 함수를 통과해야합니다.