phantomJS 和谷歌图表 getImageURI()答案

【问题标题】：phantomJS and Google Chart getImageURI()phantomJS 和谷歌图表 getImageURI()
【发布时间】：2015-01-16 19:01:55
【问题描述】：

我想使用 phantomJs 获取 Google 图表的 image/png;base64（服务器端）

$base64 = exec('phantomjs myscript.js');
header("Content-type: image/png");
echo base64_decode( $base64 );

myscript.js：

page.onConsoleMessage = function(msg, lineNum, sourceId) {
    console.log( msg );
    phantom.exit();
};
page.open('http://getpngchart.dev/chart.php');

chart.php：

<html>
<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

        google.load("visualization", '1', {packages:['corechart']});

        google.setOnLoadCallback(drawChart);

        function drawChart() {

            var data = google.visualization.arrayToDataTable( [['Task', 'Quantity'], ['Critical', 35], ['Routine', 6], ['Adjust', 2]] );
            var options = {colors: ['#E34036','#F7A500','#FF0097'], legend: { position: "none" }};

            var chart = new google.visualization.PieChart( document.getElementById('chart_div') );

            google.visualization.events.addListener(chart, 'ready', function () {
                console.log( chart.getImageURI() );
            });

            chart.draw(data, options);

        }

    </script>
</head>
<body>
    <div id="chart_div" style="width:250px; height:250px;"></div>
</body>
</html>

当我使用 Chrome 启动 chart.php 时，我得到了预期的 base64 字符串

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAD6CAYAAACI7Fo9AAAgAElEQVR4Xu2dCXwURfbHX889kzshCSHgKuB6gIp4LIgicrgiCyogyCEquq7ihbgerCvoKvtfr9VVBEQ...AiNzE1kBBp19gBWQQAEGXQIjcxNZAQadfYAVkEABBl0CI3MTWQEGnX2AFZBAAQZdAiNzE1mB/wedEj8SPZNwdQAAAABJRU5ErkJggg==

但是当我使用终端 (#phantomjs myscript.js) 时，我得到一个错误的 base64 并带有很多 AAAA...：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAewAAAHkCAYAAAD8eRwNAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAIABJREFUeAEAwYI+fQH/////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

我的目标是使用 Chrome 和 phantomJS 获得相同的 base64

【问题讨论】：

我添加了chart.php的代码
这个问题会给您带来什么问题吗？图像坏了吗？图像生成可能是通过画布完成的，由于 Chrome 和 PhantomJS 1.x（与 Chrome 13 相当）具有不同的引擎，所以这总是不同的。所以我试了一下，我得到了一个大大膨胀的图像。 PhantomJS 好像没有压缩图片数据。
可能相关问题：github.com/ariya/phantomjs/issues/12446
是的，我尝试放置一个 console.log('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAD6CAYAAACI7Fo9AAAgAElEQVR4X...') （带有完整字符串）而不是 console.log(chart.getImageURI( ) ) 并通过终端获取好的字符串，所以问题来自 getImageURI()

标签： phantomjs

【解决方案1】：

这个脚本运行良好。但是需要对数据流进行一些小调整@line2

$base64 = str_replace(' ','+',$base64);
//Remove identifier string from begining of data.
$base64 =  str_replace('data:image/png;base64,', '', $base64);

【讨论】：