matiascx
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 :
phantomjs phantom.js http://dwz6.cn
Thanks~!
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();
} );
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
How to solve that?Thanks~!
ASKER
Hi, Mark,
Thanks for your quick response.
Unfortunately, no luck according to the phantomjs utf8 setting.
The code is following:
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();
} );
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?
ASKER
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!
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?
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.
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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~!
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~!
ASKER
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~!
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/
http://www.sitepoint.com/do-you-know-your-character-encodings/
ASKER
Yes, my site is written in PHP and has a utf-8 encoding.
I will try your proposal.
Thanks~
I will try your proposal.
Thanks~
ASKER
Mark I will accept font settings as solution although i have not make that work.
Thanks for your help~!
Thanks for your help~!
ASKER
thanks for reply and valuable information
http://phantomjs.org/api/webpage/method/open.html
I suppose it could also be a font issue.