Browsershot 未拍摄 Chartjs 的快照

Question

我正在尝试截取 ChartJS 库的屏幕截图，该库通过浏览器截图设置了间隔，并且不会执行 JavaScript 代码。这是我的代码。我得到的只是一张空白图像。

var canvas                               =  $("#statisticsChart");
var values                               =  canvas.data("data");
var snapshotDone                         =  false;

function snapshot() {
    
    snapshotDone                         =  true;
    
    if (canvas.data("snapshot")) {
        
        var url                          =  chart.toBase64Image();
        $("#statisticsChartImage").attr("src", url);
        console.log("snapshot");
    }
    
    return true;
    
}

var config                               =  {
    type                                 :  "line",
    data                                 :  {
        labels                           :  values.labels,
        datasets                         :  [
            {
                label                    :  values.name,
                backgroundColor          :  "rgba(255,99,132,0.2)",
                borderColor              :  "rgba(255,99,132,1)",
                borderWidth              :  2,
                hoverBackgroundColor     :  "rgba(255,99,132,0.4)",
                hoverBorderColor         :  "rgba(255,99,132,1)",
                data                     :  values.values,
            }
        ]
    },
    option                               :  {
        animation                        :  false,
        bezierCurve                      :  false,
        //onAnimationComplete : snapshot,
    }
};

var chart = new Chart(canvas, config);

if (!snapshotDone) {
    setTimeout(snapshot, 1000);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas
    id="statisticsChart"
    data-data="{{ json_encode($patient->getChartData()) }}"
    data-snapshot="{{ $snapshot ?? false }}"
></canvas>
<img id="statisticsChartImage" />

$shot = Browsershot::html(view("partials.charts.patient-treatments-weightloss-chart", ["patient" => $patient, "snapshot" => true])->render())
        ->setScreenshotType('jpeg', 100)
        ->setDelay(3000)
        //->screenshot()
        ->waitForFunction("snapshotDone == true", 1000, 2000)
        ->save($path. "ad.jpeg")
    ;

我添加了延迟，以便图表js 内部的函数完成。我尝试使用

waitForFunction

但我不确定我是否得到了文档。有人可以帮忙吗？

Answer 1

您可以在本地调用您的网站，它将带有图表

protected function getChartImage($html, $imagePath = 'chart.png') {
    Browsershot::url('http://namesite.test/namedetails/adam/')->save($imagePath);
    return $imagePath;
}