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 ........ AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOBnqGIAAZdYcO8AAAAASUVORK5CY

但是HTML显示：

data：image / png; base64，iVBORw0KGgoAAAANSUhEUgAAAlgAAAGQCAYAAAByNR6YAAAgAElEQVR4Xu3dDZQkZX3v8f9TvTPsrjugARE9UY5ywxGMyHb1QPaS ..... AAAIIIkALtlL / H4BE

Answer 1

也许您的期望值很高：

据我所见，ECharts正在使用html canvas对象。画布至少可以使用内置（2d）和基于WebGL的不同后端（上下文）。通常，框架会检查WebGL的可用性，如果WebGL不可用，则会回退到2d。
HtmlUnit不支持WebGL
从2.31版开始，许多绘图功能只是不具有功能的存根（例如，整个路径的东西）。欢迎打补丁。
考虑将getDataURL（）作为某种快照工具。此调用对画布中显示的当前内容进行基于像素的快照（包括灰度或渐变等的转换）。我认为如果您比较不同浏览器的输出，则该像素图像可能已经有所不同。
据我记得，浏览器在生成图像时使用不同的颜色模型和颜色深浅。浏览器结果可能已经不同的另一个原因。
最后，HtmlUnit目前不支持画布（后端）提供的所有精美功能。这个想法是要创建一种类似于真实浏览器的视觉效果。（如果您在这里错过了一些事情，请打开一个问题（包括一个简单的示例），我将尝试添加缺少的展示）

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

通过HtmlUnit使用ECharts访问HTML

1 个答案: