Question

我们正尝试将primefaces(jqplot)生成的图表导出到exportAsImage函数：

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显示{{1例外。

这只发生在"Aw, Snap!"中，并且只发生在不同域中的客户端（如果我们在运行应用程序服务器的同一台机器上测试此脚本，则脚本运行正常）。

Chrome组件代码：

barChart

Answer 1

发现问题，显然jqplot函数中存在导致Chrome无限循环的错误。

我不得不重写这个JS函数：jqplotToImageCanvas特别是这个内部方法：

  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中，当“words”为“0”时，这会导致无限循环。

Answer 2

如果您在bean上使用属性setShowPointLabels(true)，请尝试将其删除。这对我有用。

感谢这篇文章的重点： https://forum.primefaces.org/viewtopic.php?t=52739

Primefaces图表在导出为图像时崩溃了chrome

2 个答案: