Highcharts using svg image to create pdf

来自：http://code.google.com/p/phantomjs/issues/detail?id=364

Reported by [e-mail], Jan 26, 2012

Version PhantomJS 1.3.0What steps will reproduce the problem?1. run phantomjs rasterize.js http://localhost/high_test_svg.html phantomjs_test_svg_png.pdf2. I have attached a test html file with source images and output.What is the expected output? chart with no grayed out linesWhat do you see instead?graph lines are being grayed outWhich operating system are you using?Linux version 2.6.18-238.19.1.el5 ([e-mail]) (gcc version 4.1.2 20080704 (Red Hat 4.1.2-50))Did you use binary PhantomJS or did you compile it from source?Compile from sourcePlease provide any additional information below.

phantomjs_test_svg_png.pdf 
87.9 KB   Downloadhigh_test_svg.html 
348 bytes   View   Downloadhighcharts_test.png 
47.2 KB   View   Downloadhighcharts_test.svg 
27.4 KB   View   Download

Jan 28, 2012

Project Member #1 alessandro.portale

I took a closer look at the Highchart svg files and found the source of the thick grey bars. There are actually overlaid paths on the chart. And their job is to track the mouseOver events. This is one of them:<path d="..." fill="none" isTracker="true" stroke-opacity="0.000001" stroke="rgb(192,192,192)" stroke-width="22" visibility="visible" zIndex="1" style=""></path>Anyways, the opacity 0.000001 makes them invisible in the browser but Qt shows them as fully opaque in the PDF. I would like to dig deeper into the issue to find out what causes it. Also for a Qt bugreport, I want to narrow the issue down, and ideally reproduce it with pure Qt, without QtWebKit.But until that issue is fixed in Qt, here is a small&dirty workaround... I changed rasterize.js like this and got rid of everything with very low opacity (i.e. tracker paths and shadows):diff --git a/examples/rasterize.js b/examples/rasterize.jsindex fcd74cd..dcc81d4 100644--- a/examples/rasterize.js+++ b/examples/rasterize.js@@ -19,6 +19,16 @@ if (phantom.args.length < 2 || phantom.args.length > 3) {             console.log('Unable to load the address!');         } else {             window.setTimeout(function () {+                // Remove all low-opacity paths. see PhantomJS  issue #364 +                page.evaluate(function () {+                    var paths = document.getElementsByTagName("path");+                    for (var i = paths.length - 1; i >= 0; i--) {+                        var path = paths[i];+                        var strokeOpacity = path.getAttribute('stroke-opacity');+                        if (strokeOpacity != null && strokeOpacity < 0.2)+                            path.parentNode.removeChild(path);+                    }+                });                 page.render(output);                 phantom.exit();             }, 200);...That's the power of PhantomJS :)The resulting PDF is attached.

HighchartsDemoGallery.pdf 
190 KB   Download

Jan 28, 2012

#2 [e-mail]

Thanks for taking a look at this, the patch will do the trick.  While, researching this issue further, I also thought that tracking might becausing some of the difficulties, so in trying to isolate and simplify there-creation of the issue,  I created an  additional svg file, with all theanimations, tracking, and tooltips turned off, etc  and it looks good.   I also wrote a simple PyQt  script that exports to pdf using the QWebViewand QPrinter functions to try to isolate the issue may be.   I have attachedboth files.  Love phontom.  Thanks. Thanks.

Jul 5, 2012

#3 [e-mail]

Just a note, I wouldn't be surprised if this is due to how certain CSS styles get overridden while printing (I've noticed that opacity gets set to 1.0 in other contexts).

Jan 24, 2013

#4 [e-mail]

This fix is one way to do it. It disables the shadows though. Another way would be to disable mousetracking in the options. The only problem I'm left with now is the shadow opacity. Any ideas?Here's an example http://jsfiddle.net/jvisser/aKJLv/And use this command to rasterize:phantomjs examples/rasterize.js http://fiddle.jshell.net/jvisser/aKJLv/show/light/ output.pdf A4

Mar 15, 2013

Project Member #5 [e-mail]

Closing. This issue has been moved to GitHub: https://github.com/ariya/phantomjs/issues/10364

//

//

generate_pdf(保持页面原始大小).js

// This file is NOT a browser-run javascript but PhantonJS scriptvar system = require('system');var address = system.args[1];var output = system.args[2];var page = require('webpage').create();page.paperSize = {  format: 'A4',  orientation: 'landscape',  border: '1cm'};page.open(address, function (status) {    if (status !== 'success') {        console.log('Unable to load the address!');        phantom.exit();    } else {        window.setTimeout(function () {            // Remove all low-opacity paths. see PhantomJS  issue #364             page.evaluate(function () {                var paths = document.getElementsByTagName("path");                for (var i = paths.length - 1; i >= 0; i--) {                    var path = paths[i];                    var strokeOpacity = path.getAttribute('stroke-opacity');                    if (strokeOpacity != null && strokeOpacity < 0.2)                        path.parentNode.removeChild(path);                }            });            page.render(output);            phantom.exit();        }, 5000);    }});

///

///
generate_pdf(rasterize的重写).jsgenerate_pdf(rasterize的重写).js

var page = require('webpage').create(),    system = require('system'),    address, output, size;if (system.args.length < 3 || system.args.length > 5) {    console.log('Usage: rasterize.js URL filename [paperwidth*paperheight|paperformat] [zoom]');    console.log('  paper (pdf output) examples: "5in*7.5in", "10cm*20cm", "A4", "Letter"');    phantom.exit(1);} else {    address = system.args[1];    output = system.args[2];    page.viewportSize = { width: 1024, height: 768 };    if (system.args.length > 3 && system.args[2].substr(-4) === ".pdf") {        size = system.args[3].split('*');        page.paperSize = size.length === 2 ? { width: size[0], height: size[1], margin: '0px' }                                           : { format: system.args[3], orientation: 'portrait', margin: '1cm' };    }    if (system.args.length > 4) {        page.zoomFactor = system.args[4];    }    page.open(address, function (status) {        if (status !== 'success') {            console.log('Unable to load the address!');            phantom.exit();        } else {            window.setTimeout(function () {                // Remove all low-opacity paths. see PhantomJS  issue #364                 page.evaluate(function () {                    var paths = document.getElementsByTagName("path");                    for (var i = paths.length - 1; i >= 0; i--) {                        var path = paths[i];                        var strokeOpacity = path.getAttribute('stroke-opacity');                        if (strokeOpacity != null && strokeOpacity < 0.2)                            path.parentNode.removeChild(path);                    }                });                page.render(output);                phantom.exit();            }, 5000);        }    });}