PhantomJS 渲染空图像

Question

我在使用 PhantomJS 时遇到了一些奇怪的错误。

我有 chart.js 折线图，修改了线条颜色： codepen

Chart.defaults.multicolorLine = Chart.defaults.line;
Chart.controllers.multicolorLine = Chart.controllers.line.extend({
    draw: function(ease) {
        var startIndex = 0;
        var meta = this.getMeta();
        var points = meta.data || [];
        var colors = this.getDataset().colors;
        var area = this.chart.chartArea;
        var originalDatasets = meta.dataset._children.filter(function(data) {
            return !isNaN(data._view.y);
        });

    function _setColor(newColor, meta) {
        meta.dataset._view.borderColor = newColor;
    }

    if (!colors) {
        Chart.controllers.line.prototype.draw.call(this, ease);
        return;
    }

    for (var i = 2; i <= colors.length; i++) {
        if (colors[i-1] !== colors[i]) {
            _setColor(colors[i-1], meta);
            meta.dataset._children = originalDatasets.slice(startIndex, i);
            meta.dataset.draw();
            startIndex = i - 1;
        }
    }

    meta.dataset._children = originalDatasets.slice(startIndex);
    meta.dataset.draw();
    meta.dataset._children = originalDatasets;

    points.forEach(function(point) {
        point.draw(area);
    });
  }
});

在普通浏览器中看起来正常

但是当我尝试使用 PhantomJS 在 PHP 服务器 (Yii2) 上渲染它时：

var webPage = require('webpage');

var page          = webPage.create();
page.viewportSize = {width: 1920, height: 1080};

var url = '%url%';

page.open(url, function (status) {
    if (status === 'success') {
        window.setTimeout(function () {

            page.render('%path%', {format: 'jpeg', quality: '90'});
            phantom.exit();

        }, 3000);
    }
});

返回空图像

有什么想法吗？

Answer 1

解决方案：将 PhantomJS 替换为 puppeteer

PhantomJS 渲染空图像

PhantomJS rendering empty image

javascript

phantomjs

chart.js