Highcharts using svg image to create pdf

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

Reported by   [email protected],   Jan 26, 2012

Version PhantomJS 1.3.0

What steps will reproduce the problem?
1. run phantomjs rasterize.js http://localhost/high_test_svg.html phantomjs_test_svg_png.pdf

2. I have attached a test html file with source images and output.

What is the expected output? 
chart with no grayed out lines

What do you see instead?
graph lines are being grayed out

Which operating system are you using?
Linux version 2.6.18-238.19.1.el5 ([email protected]) (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 source
Please provide any additional information below.

phantomjs_test_svg_png.pdf  87.9 KB   Download

high_test_svg.html  348 bytes   View   Download

	highcharts_test.png  47.2 KB   View   Download

highcharts_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.js
index 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 [email protected]

Thanks for taking a look at this, the patch will do the trick.  

While, researching this issue further, I also thought that tracking might be
causing some of the difficulties, so in trying to isolate and simplify the
re-creation of the issue,  I created an  additional svg file, with all the
animations, tracking, and tooltips turned off, etc  and it looks good.  

 I also wrote a simple PyQt  script that exports to pdf using the QWebView
and QPrinter functions to try to isolate the issue may be.   I have attached
both files.  

Love phontom.  Thanks.
 

Thanks.

Jul 5, 2012

#3 [email protected]

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 [email protected]

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 [email protected]

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 script
var 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);
        }
    });
}