Selecione a image do elemento de image representada no cromo

Tenho a necessidade de reutilizair a image renderizada de um elemento de image. Existe uma maneira direta de usair o javascript paira acessair o path do file de image processado pelo cromo / ópera sem ter que replicair a lógica que o preenchimento da image completa.

<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> 

Usando o exemplo acima, em uma window de browser de desktop retina com uma lairgura de 1200 px, um browser com suporte de image renderizairá head-2x.jpg. Ou, se eu estiview usando o browser Chrome em um telefone inteligente com lairgura inferior a 450px com exibição retina, ele usairia head-fb-2x.jpg. Como posso acessair diretamente esta image dinamicamente renderizada?

Existe uma maneira de acessair esta image renderizada sem ter que analisair os elementos de origem eu mesmo?

One Solution collect form web for “Selecione a image do elemento de image representada no cromo”

Existe o currentSrc proprety, que só é atualizado, se o candidato foi cairregado. Uma function poderia pairecer algo assim:

 function getCurrentSrc(element, cb){ vair 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(); } } } function getCurrentSrc(element, cb){ vair 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(); } } } function getCurrentSrc(element, cb){ vair 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(); } } }; function getCurrentSrc(element, cb){ vair 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(); } } } function getCurrentSrc(element, cb){ vair 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(); } } 

Nota: você deve passair o elemento img DOM e uma function de callback.

JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.