DOM 使用 PhantomJS 进行操作

Question

我正在使用 Phantomjs 抓取网页并将 canvas 元素替换为图像，如下所示。但是当我尝试修改某些元素的内部 HTML 以显示它不起作用时。谁能告诉我怎么了？

var page = require('webpage').create();
var fs = require('fs');
var URL = 'some web url';

page.open(URL, function(status) {

    if (status !== 'success') {    
        console.log('Unable to access network');
    } else {

        var clipRect = page.evaluate(function() {
            return document.getElementById("some-id").getBoundingClientRect();
        });

        page.clipRect = {
            top : clipRect.top,
            left : clipRect.left,
            width : clipRect.width,
            height : clipRect.height
        };
        page.render('canvas.png');

        // modify one element's inner html before writing into file
        // document.getElementById("some-id").innerHTML = '<img src="capture.png">';

        fs.write('email.html', page.content, 'w');

        phantom.exit();

    }

});

PS: nodejs 和 phantomjs 的新手

Answer 1

我已经使用另一个 page.evaluate 来存储在 canvas 元素捕获为图像后修改的 html，如下所示

var page = require('webpage').create();
var fs = require('fs');
var URL = 'some web url';

page.open(URL, function(status) {

    if (status !== 'success') {    
        console.log('Unable to access network');
    } else {

        var clipRect = page.evaluate(function() {
            return document.getElementById("some-id").getBoundingClientRect();
        });

        page.clipRect = {
            top : clipRect.top,
            left : clipRect.left,
            width : clipRect.width,
            height : clipRect.height
        };
        page.render('canvas.png');

        var newHTML = page.evaluate(function() {

            var canvas = document.getElementById("some-id");

            var newCanvas = document.createElement('img');
            newCanvas.setAttribute('src', 'canvas.png');
            newCanvas.setAttribute('alt', 'canvas');

            canvas.innerHTML = newCanvas.outerHTML;

            return document.documentElement.outerHTML;

        });

        fs.write('email.html', newHTML, 'w');

        phantom.exit();

    }
});

DOM 使用 PhantomJS 进行操作

DOM manipulation using PhantomJS

javascript

phantomjs