Link to home
Start Free TrialLog in
Avatar of matiascx
matiascxFlag for China

asked on

phantomjs renderin issue for utf-8

Hi, experts,
I am trying to use phantomjs to capture my website screenshot, everything works well except the utf-8 not display well.
The OS i am running the phantomjs is Ubuntu 14.04. The phantomjs version is 1.9.8
the script of phantom.js is :
var system = require( 'system' );
var args   = system.args;
var url    = args[ 1 ];
var page   = require( 'webpage' ).create();

/**
 * Proper error handling
 */
phantom.onError = function( msg, trace ) {
  var msgStack = [ 'PHANTOM ERROR: ' + msg ];
  if ( trace && trace.length ) {
    msgStack.push( 'TRACE:' );
    trace.forEach( function( t ) {
      msgStack.push( ' -> ' + ( t.file || t.sourceURL ) + ': ' + t.line + ( t.function ? ' (in function ' + t.function + ')' : '' ) );
    } );
  }
  console.error( msgStack.join('\n') );
  phantom.exit( 1 );
};

if ( args.length === 1 ) {
  throw new Error( 'URL as system argument missing.' );
}

page.viewportSize = {
  height : 1000,
  width  : 1200
};

page.open( url, function( status ) {
  console.log( '********************************************' );
  console.log( 'Opened ' + url + ' with status: ' + status );


  page.render( 'image-1200.png' );
  console.log( 'Rendered ' + url + ' with width of 1200px' );

  page.viewportSize = {
    height : 1000,
    width  : 800
  };

  page.render( 'image-800.png' );
  console.log( 'Rendered ' + url + ' with width of 800px' );

  page.viewportSize = {
    height : 1000,
    width  : 500
  };


  page.render( 'image-500.png' );
  console.log( 'Rendered ' + url + ' with width of 500px' );

  page.clipRect = {
    top: 0, left: 0, width: 500, height: 300
  };

  page.render( 'image-header-500.png' );
  console.log( 'Rendered header of ' + url + ' with width of 500px' );

  phantom.exit();
} );

Open in new window

the command I run is:
phantomjs phantom.js http://dwz6.cn
cabox@box-codeanywhere:~/workspace$ phantomjs phantom.js http://dwz6.cn                                                                                                    
********************************************                                                                                                                               
Opened http://dwz6.cn with status: success                                                                                                                                 
Rendered http://dwz6.cn with width of 1200px                                                                                                                               
Rendered http://dwz6.cn with width of 800px                                                                                                                                
Rendered http://dwz6.cn with width of 500px                                                                                                                                
Rendered header of http://dwz6.cn with width of 500px  

Open in new window

How to solve that?
Thanks~!
Avatar of Mark Bullock
Mark Bullock
Flag of United States of America image

You can specify utf8 in the settings parameter of the open method.
http://phantomjs.org/api/webpage/method/open.html

I suppose it could also be a font issue.
Avatar of matiascx

ASKER

Hi, Mark,
Thanks for your quick response.
Unfortunately, no luck according to the phantomjs utf8 setting.
The code is following:
var settings = {
  operation: "GET",
  encoding: "utf8"};
page.open( url,settings, function( status ) {
  console.log( '********************************************' );
  console.log( 'Opened ' + url + ' with status: ' + status );
  page.render( 'image-1200.png' );
  console.log( 'Rendered ' + url + ' with width of 1200px' );
  phantom.exit();
} );

Open in new window

Is there something else wrong? It is very strange. Thanks!
What about fonts? Are you using a font on the web page which doesn't exist where you run your test?
Hi,Mark,
The font is arial, i am not sure how to check the font where i run my test.
The http://dwz6.cn which i am trying to catch is in chinese, while the test environment is on a urbun linux console.
Supposing the font is different, how to check and solve that?
Thanks a lot!
Can you post a screenshot?
Please see the image i caught here:
User generated image
If you're on Windows 7 you can try this:
Start> Type Fonts in search box and press enter> When fonts folder opens, click on Font Settings on left navigation pane> Untick Hide fonts based on language settings> Ok your way out.
Do you have phantomjs v2?
ASKER CERTIFIED SOLUTION
Avatar of Mark Bullock
Mark Bullock
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Sorry for late response.
I am running the test environment on a codeanywhere vps via chrombrowser.
My OS which runs the chrom is winxp.
I will try your proposer soon and give feedback
Thanks~!
Hi, Mark,
Sorry, I have followed everything in the http://wwwy3y3.ghost.io/pageres-phantomjs-capture-sreenshot-chinese-fonts-not-render-correctly/ and installed some fonts, but with no luck.
Really frustrating.
Thanks~!
Is your site developed in PHP? I saw an article recommending ISO-8859-1 encoding for PHP-based web sites which display chinese characters.
http://www.sitepoint.com/do-you-know-your-character-encodings/
Yes, my site is written in PHP and has a utf-8 encoding.
I will try your proposal.
Thanks~
Mark I will accept font settings as solution although i have not make that work.
Thanks for your help~!
thanks for reply and valuable information