使用PhantomJS進行DOM操作

Question

我正在網上使用Phantomjs抓取網頁，並用image替換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的操作，以在將畫布元素捕獲為圖像后存儲修改后的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();

    }
});