通过 HtmlUnit 使用 ECharts 访问 HTML

Question

我访问了一个 HTML，其中包含 HtmlUnit 的 ECharts 代码。 div picstr 内容是图表的 base64 字符串。问题是：此 div 的内容在 Java 输出中与 HTML 输出不同。请帮忙。

这是我的 HTML 代码：

<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <div id="picstr"></div>
    <script type="text/javascript">
        var searchStr = location.search;
        searchStr = searchStr.substr(1);
        var searchs = searchStr.split("&");
        var data1 = searchs[0].split("=");
        var data2 = searchs[1].split("=");

        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            title: {
                text: 'ECharts'
            },
            tooltip: {},
            legend: {
                data:['销量', '产量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: data1[1].split(","),
                barGap: 0,
                itemStyle: {
                    normal: {
                        color: function() {
                            return '#ff960d';
                        },
                        label: {
                            show: true,
                            position: 'top'
                        }
                    }
                }
            } , {
                name: '产量',
                type: 'bar',
                data: data2[1].split(","),
                barGap: 0,
                itemStyle: {
                    normal: {
                        color: function() {
                            return '#18c109';
                        },
                        label: {
                            show: true,
                            position: 'top'
                        }
                    }
                }
            }]
        };
        myChart.setOption(option);
        document.getElementById("picstr").innerHTML = myChart.getDataURL({});
    </script>
</body>

这是我的 Java 代码：

final WebClient webClient = new WebClient();

webClient.waitForBackgroundJavaScript(2000);
webClient.getOptions().setJavaScriptEnabled(true);
WebRequest request = new WebRequest(new URL("http://localhost:8888/lab/test.html?d1=5,20,36,10,10,20&d2=15,30,40,15,18,30"), HttpMethod.GET);
final HtmlPage page = webClient.getPage(request);
webClient.waitForBackgroundJavaScript(10000);

System.out.println(page.asXml());
webClient.close();

HtmlUnit 版本为 2.31。

Java 代码输出如下：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAAGQCAYAAAByNR6YAAADuUlEQVR42u3BMQEAAADCoPVPbQwfoAAAAAAAAAAAAAAA........AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOBnqGIAAZdYcO8AAAAASUVORK5CYII=

但是 HTML 显示：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAAGQCAYAAAByNR6YAAAgAElEQVR4Xu3dDZQkZX3v8f9TvTPsrjugARE9UY5ywxGMyHb1QPaS........AAAIIIIBALgL/H4qktlN102BEAAAAAElFTkSuQmCC

Answer 1

可能您的期望有点高：

据我所知，ECharts 使用的是 html canvas 对象。 canvas 能够使用不同的后端（上下文），至少有一些内置（2d）和基于 WebGL。通常框架会检查 WebGL 的可用性，如果 WebGL 不可用则回退到 2d。
HtmlUnit 不支持 WebGL
从 2.31 版开始，许多绘图函数只是没有功能的存根（例如整个路径的东西）。欢迎补丁。
将 getDataURL() 视为某种快照工具。此调用生成 canvas 中显示的当前内容的基于像素的快照（包括灰度或渐变的转换和...）。如果您比较不同浏览器的输出，我认为这个像素图像可能已经不同了。
据我所知，浏览器在生成图像时使用不同的颜色模型和颜色深度；浏览器结果可能已经不同的另一个原因。
最后，HtmlUnit 不支持 canvas（后端）目前提供的所有奇特功能。这个想法是创建某种接近真实浏览器的视觉效果。（如果你在这里遗漏了什么，请打开一个问题（包括一个简单的示例），我会尝试添加丢失的实现）

总而言之，我认为比较 getDataURL() 结果并不是测试图表的好（稳定）标准。

通过 HtmlUnit 使用 ECharts 访问 HTML

Access HTML with ECharts by HtmlUnit

htmlunit

echarts