Выберите изображение элемента изображения в Chrome

Question

У меня есть необходимость повторно использовать визуализированное изображение элемента изображения. Существует ли прямой способ использования javascript для доступа к пути к файлу изображения, отображаемому chrome / opera, без необходимости повторять логику, которую завершает picturefill.

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

Используя приведенный выше пример, в окне браузера настольного компьютера Retina шириной 1200 пикселей браузер с поддержкой изображений отобразит head-2x.jpg. Или, если я использую браузер Chrome на смартфоне с шириной менее 450 пикселей с дисплеем Retina, он будет использовать 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 и функция обратного вызова.