Как получить доступ к DOM с помощью Node.js?

У меня есть editor.html, который содержит функцию generatePNG:

  <!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Diagram</title> 

    <script type="text/javascript" src="lib/jquery-1.8.1.js"></script> 
//    <!-- I use many resources -->
<script></script> 

    <script> 

        function generatePNG (oViewer) { 
            var oImageOptions = { 
                includeDecoratorLayers: false, 
                replaceImageURL: true 
            }; 

            var d = new Date(); 
            var h = d.getHours(); 
            var m = d.getMinutes(); 
            var s = d.getSeconds(); 

            var sFileName = "diagram" + h.toString() + m.toString() + s.toString() + ".png"; 

            var sResultBlob = oViewer.generateImageBlob(function(sBlob) { 
                b = 64; 
                var reader = new window.FileReader(); 
                reader.readAsDataURL(sBlob); 
                reader.onloadend = function() { 
                    base64data = reader.result; 
                    var image = document.createElement('img'); 
                    image.setAttribute("id", "GraphImage"); 
                    image.src = base64data; 
                    document.body.appendChild(image); 
                } 

            }, "image/png", oImageOptions); 
            return sResult; 
        } 

    </script> 


</head> 

<body > 
    <div id="diagramContainer"></div> 
</body> 
</html>

Я хочу получить доступ к DOM и получить image.src с помощью Node.js. Я обнаружил, что могу работать с cheerio или jsdom.

Я начинаю с этого:

var cheerio = require('cheerio'),
    $ = cheerio.load('editor.html');

Но я не нахожу, как получить доступ и получить image.src.


node.js javascript jsdom jquery cheerio
person ameni    schedule 16.12.2015    source источник
comment
Image.src, который вы хотите получить, создается внутри editor.html с использованием javascript, который находится на этой странице?   -  person luiso1979    schedule 16.12.2015
comment
@luiso да, image.src представляет собой данные на основе 64, и они генерируются в editor.html, я хочу извлечь их с сервера node.js   -  person ameni    schedule 16.12.2015
comment
Просто чтобы уточнить, вы загружаете editor.html в cheerio на сервере? Значит, в этом нет браузера?   -  person Rogier Spieker    schedule 16.12.2015
comment
@RogierSpieker Я просто хочу получить доступ к edtior.html из node.js и получить image.src   -  person ameni    schedule 16.12.2015
comment
У меня есть две возможности относительно того, о чем вы спрашиваете. Либо вы хотите, чтобы Node.js обращался к изображению, сгенерированному веб-браузером на активной странице, либо вы хотите иметь доступ к данным изображения, хранящимся в html-файле в атрибуте src элемента img. Просьба уточнить.   -  person Jonathan Gray    schedule 16.12.2015
comment
@JonathanGray Я хочу иметь доступ к элементу img src, который создается и хранится в editor.html   -  person ameni    schedule 16.12.2015
comment
@JonathanGray я обновил свой код, у меня нет тега img, у меня просто есть функция, которая генерирует изображение и сохраняет его в image.src   -  person ameni    schedule 16.12.2015
comment
Я только что понял, о чем вы спрашиваете, и ваш последний комментарий никоим образом не помог прояснить ваш вопрос. С другой стороны, ваше редактирование вашего вопроса помогает уточнить. Прочитайте уже предоставленный ответ. Эти данные необходимо отправить с помощью запроса POST. Вы можете включить эти данные в форму для отправки на сервер или использовать AJAX. Поищите в Google, как обрабатывать запросы AJAX на стороне клиента, а затем поищите в Google, как получить данные запроса POST с помощью Node. В качестве альтернативы вы можете использовать WebSockets, однако я думаю, что вам следует сначала изучить основы.   -  person Jonathan Gray    schedule 16.12.2015

Ответы (1)


arrow_upward
9
arrow_downward

Проблема в том, что при загрузке html-файла в cheerio (или любой другой модуль узла) HTML не будет обрабатываться так, как это делает браузер. Активы (такие как таблицы стилей, изображения и javascripts) не будут загружаться и/или обрабатываться, как в браузере.

Хотя и node.js, и современные веб-браузеры имеют одинаковые (или похожие) движки javascript, однако браузер добавляет много дополнительных вещей, таких как window, DOM (document) и т. д. Node.js не имеет этих концепций, поэтому нет ни window.FileReader, ни document.createElement.

Если изображение создается полностью без взаимодействия с пользователем (ваш пример кода «волшебным образом» получает аргумент sBlob, который выглядит как строка, подобная data:<type>;<encoding>,<data>), вы можете использовать так называемый безголовый браузер на сервере, PhantomJS кажется наиболее популярным в наши дни. Опять же, если для создания sBlob не требуется взаимодействия с пользователем, вам, вероятно, лучше использовать чистое решение node.js, например. Как анализировать URL-адрес данных в узле?.

Если для создания sBlob требуется какое-то взаимодействие с пользователем, и вам нужно сохранить его на сервере, вы можете использовать практически то же решение, что и упомянутое, просто отправив sBlob на сервер с помощью Ajax или веб-сокета, обработав sBlob в изображение и (необязательно) возвращая URL-адрес, по которому можно найти изображение.

person Rogier Spieker    schedule 16.12.2015