当导出为图像时，Primefaces图表崩溃了chrome [英] Primefaces charts crashing chrome when exporting as image

问题描述

我们正在尝试通过exportAsImage函数导出由primefaces(jqplot)生成的图表:

We are trying to export charts generated by primefaces(jqplot) through exportAsImage function:

function exportChart() {

    try {
        imgPie = PF('graphicPie').exportAsImage(); // this is an instance of p:pieChart
        document.getElementById('frmReports:b64_gr0').value = imgPie.src;
    }catch(err){  
    }
    try {
        imgBar = PF('graphicBarEvent').exportAsImage(); // this is an instance of p:barChart, here is where the script crashes 
        document.getElementById('frmReports:b64_gr1').value = imgBar.src;
    }catch(err){
    }

 }

第一个图表(pieChart)导出没有问题，但是当脚本尝试导出第二个图表(barChart)时，网页冻结，并且Chrome显示"Aw, Snap!"异常.

The first chart (pieChart) exports with no problem, but when the script tries to export the second chart (barChart), the web page freezes and Chrome shows "Aw, Snap!" exception.

这仅在Chrome中发生，并且仅在不同域中的客户端上发生(如果我们在运行应用程序服务器的同一台计算机上测试此脚本，则该脚本可以正常工作).

This only happens in Chrome and only with clients in a different domain (if we test this script in the same machine where the application server is running, the script works fine).

barChart组件代码:

<p:barChart id="graphicBarEvent" widgetVar="graphicBarEvent"
    showDatatip="false" value="#{reportsMB.barEventModel}"
    legendPosition="n" style="height:170px; width: 100%;"
    seriesColors="#{reportsMB.factBarChartSeriesColors}"
    legendCols="3" extender="bar_ext" >
    <p:ajax event="itemSelect" listener="#{reportsMB.itemSelectFactBars}" /> 
</p:barChart>

推荐答案

发现了问题，显然jqplot函数中存在一个错误，该错误在Chrome中导致了无限循环.

Found the issue, apparently there is a bug in jqplot function that was causing infinite loop in Chrome.

我必须重写此JS函数:jqplotToImageCanvas特别是此内部方法:

i had to override this JS function: jqplotToImageCanvas specifically this inner method:

  function writeWrappedText (el, context, text, left, top, canvasWidth) {
             var lineheight = getLineheight(el);
             var tagwidth = $(el).innerWidth();
             var tagheight = $(el).innerHeight();
             var words = text.split(/\s+/);
             var wl = words.length;
             var w = '';
             var breaks = [];
             var temptop = top;
             var templeft = left;

             for (var i=0; i<wl; i++) {
                 w += words[i];
               if (context.measureText(w).width > tagwidth && w.length > words[i].length) {
                     breaks.push(i);
                     w = '';
                     i--;
                 }   
             }
             if (breaks.length === 0) {
                 // center text if necessary
                 if ($(el).css('textAlign') === 'center') {
                     templeft = left + (canvasWidth - context.measureText(w).width)/2  - transx;
                 }
                 context.fillText(text, templeft, top);
             }
             else {
                 w = words.slice(0, breaks[0]).join(' ');
                 // center text if necessary
                 if ($(el).css('textAlign') === 'center') {
                     templeft = left + (canvasWidth - context.measureText(w).width)/2  - transx;
                 }
                 context.fillText(w, templeft, temptop);
                 temptop += lineheight;
                 for (var i=1, l=breaks.length; i<l; i++) {
                     w = words.slice(breaks[i-1], breaks[i]).join(' ');
                     // center text if necessary
                     if ($(el).css('textAlign') === 'center') {
                         templeft = left + (canvasWidth - context.measureText(w).width)/2  - transx;
                     }
                     context.fillText(w, templeft, temptop);
                     temptop += lineheight;
                 }
                 w = words.slice(breaks[i-1], words.length).join(' ');
                 // center text if necessary
                 if ($(el).css('textAlign') === 'center') {
                     templeft = left + (canvasWidth - context.measureText(w).width)/2  - transx;
                 }
                 context.fillText(w, templeft, temptop);
             }

         } 

在Chrome中，当单词"为"0"时，这将导致无限循环.

In chrome when "words" is "0" this results in an infinite loop.

这篇关于当导出为图像时，Primefaces图表崩溃了chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！