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~!
matiascxAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Mark BullockQA EngineerCommented:
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.
matiascxAuthor Commented:
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!
Mark BullockQA EngineerCommented:
What about fonts? Are you using a font on the web page which doesn't exist where you run your test?
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

matiascxAuthor Commented:
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!
Mark BullockQA EngineerCommented:
Can you post a screenshot?
matiascxAuthor Commented:
Please see the image i caught here:
image-1200.png
Mark BullockQA EngineerCommented:
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.
Mark BullockQA EngineerCommented:
Do you have phantomjs v2?
Mark BullockQA EngineerCommented:

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
matiascxAuthor Commented:
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~!
matiascxAuthor Commented:
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~!
Mark BullockQA EngineerCommented:
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/
matiascxAuthor Commented:
Yes, my site is written in PHP and has a utf-8 encoding.
I will try your proposal.
Thanks~
matiascxAuthor Commented:
Mark I will accept font settings as solution although i have not make that work.
Thanks for your help~!
matiascxAuthor Commented:
thanks for reply and valuable information
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.