Как определить источник изображения из содержимого HTML страницы - PullRequest
Новая
       9

Как определить источник изображения из содержимого HTML страницы

0 голосов
/ 28 марта 2020

У меня есть html ссылка «localurl», указывающая на URL-адрес изображения (например, текущая обложка альбома musi c, играющего на моих соносах), так что когда я даю «localurl» в своем браузере , он не отображает изображение напрямую, а путь, как 'http://image.png'. Этот последний путь связан с изображением.

Я хотел бы отобразить это изображение в файле HTML, используя localurl. Я думаю, это должно выглядеть примерно так: 

<!DOCTYPE html>
<html>
<body > 

    <img src=getUrlFromHTML('localurl') >

    <script type="text/javascript">

        function getUrlFromHTML(url)
        {
            ...
        }

    </script>

</body>
</html>

РЕДАКТИРОВАТЬ: ссылка 'http://image.png' не всегда одинакова, я не знаю заранее, это почему нужно go с 'localurl'. Концепция заключается в следующем: у меня есть установка openHAB с Sonos Binding, у меня есть строковый элемент с именем Sonos_CurrentAlbumArtUrl и через API openHAB, я получаю ссылку http://openhab.local: 8080 / rest / items / Sonos_CurrentAlbumArtUrl / state (это мой 'localurl', и он указывает на 'http://image.png', который зависит от музыки c, играемой на Sonos (используя Spotify). Я надеюсь, что это немного более ясно.

Ответы [ 2 ]

0 голосов
/ 08 апреля 2020

Я нашел время, чтобы выучить немного javascript, и нашел ответ, который соответствует моим потребностям. Здесь я делюсь содержанием HTML -го тела, так как думаю, что оно может помочь другим. 

    <body>
        <img id="SonosAlbumArt">

        <script type="text/javascript">

            var link = 'http://openhab.local:8080/rest/items/Sonos_CurrentAlbumArtUrl/state';
            var img = document.getElementById('SonosAlbumArt');
            var xhr = new XMLHttpRequest();
            xhr.addEventListener('readystatechange', function () { refreshAlbumArt()} );

            function sendAlbumArtRequest() {
                xhr.open('GET', link);
                xhr.send(null);
            }

            function refreshAlbumArt() {
                if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                    img.src = xhr.responseText;
                }
            }

            setInterval(sendAlbumArtRequest, 1000);

         </script>
    </body>

Я не совсем уверен, что setInterval - лучший способ сделать это. Я пропускаю что-то похожее на событие, запускаемое при изменении обложки альбома, чтобы не отправлять запросы каждую секунду. Любые предложения приветствуются.

0 голосов
/ 28 марта 2020

, если вы не хотите ссылаться на выбранные файлы из <input type=file, вам не нужно использовать javascript. Вы можете просто написать местоположение. Для местоположений вы можете перетащить изображение в браузер, скопировать из адресной строки. 

<img src="file:///C:/Users/nerkn/Documents/cobokin.jpg"
...