CODEWITHSUNDEEP
javascriptphantomjs
lars.schwarz
lars.schwarz

Reputation: 1274

Add/inject image to DOM via PhantomJS

I'm trying to dynamically add an image to the DOM of a loaded page, but it's not showing up when rendering the page.

In page.evaluate in modify the DOM like this (excerpt):

page.open(url, function(status) {
    ...
    window.setTimeout(function () {     
        ...
        page.evaluate(function() {  
            ...
                var myimg = document.createElement("img");
                myimg.setAttribute('src', 'http://www.foobar.com/fooimage.png');                                
                myimg.setAttribute('height', '41px');
                myimg.setAttribute('width', '80px');
                outerdiv.appendChild(myimg); // outerdiv is visible in the rendered output
                document.body.appendChild(outerdiv);
            ...
        }   
        page.render

Debugging page.content shows that it's successfully added, but page.render does not show it (only the outerdiv it's appended to). Instead of using an external URL src I also tried a base64 encoded string with no luck. I also omitted the path and stored the file inside PhantomJS' include path. None of this 3 seems to work.

I also have a window.timeout of 2000 so I don't think it's an issue of rendering the page before the PNG is loaded.

What would be the proper way to add the src? External URL, local file? Why isn't even adding a base64 encoded image working? Are any security limitations blocking what I'm trying to do? I'm running PhantomJS 1.9.0 btw.

Upvotes: 0

Views: 1457

Answers (2)

raviteja yakkaladevi
raviteja yakkaladevi

Reputation: 306

I came across the same problem. When I am using page.evaluate() to add images, they are not getting loaded, but content is getting changed.

If I do the same with page.content, images are getting loaded and working as expected.

var page = require('webpage').create();

page.onLoadFinished = function() {
    console.log('');
    console.log('load finished');
    var render = page.render('evaluateTesting.png');
}

page.open('about:blank', function(status) {
    console.log('');
    console.log('open callback');

    //page reloading after this line
    page.content = '<!DOCTYPE html><head></head><body><img src="image path"></img></body>';


    /*
     * this is not causing page reload
     * but content is changing  
        page.evaluate(function() {
        console.log('');
        console.log('evaluating');
        var body = document.getElementsByTagName('body');
        body = body[0];
        body.innerHTML = '<img src="file:///home/ravitejay/projects/testappDup/sample.png"></img><br>';
    })*/
    console.log('content : '+page.content);
})

Upvotes: 0

Artjom B.
Artjom B.

Reputation: 61892

I cannot reproduce your problem with this complete script.

var page = require('webpage').create();
var url = "http://phantomjs.org/img/phantomjs-logo.png";

page.open("http://example.com", function (status) {
    if (status !== 'success') {
        console.log('Unable to access network');
        phantom.exit();
    } else {
        page.render("without.png");
        page.evaluate(function(url){
            var myimg = document.createElement("img");
            myimg.setAttribute('src', url);
            document.body.appendChild(myimg);
        }, url);
        setTimeout(function(){
            page.render("with.png");
            phantom.exit();
        }, 5000);
    }
});

I tried it with PhantomJS 1.9.0 and 1.9.8 with exactly the same result.

Upvotes: 0

Related Questions