Question

我有PHPChart生成的多个图表，但是当我使用print选项以pdf打印图表时，以及png in chrome它不适用于条形图类型但适用于折线图，但如果有一个条形图它工作，在Firefox中，它不适用于垂直条形图，但适用于水平条形图。使用数据库数据动态生成所有类型的图表，在html包装器标签的情况下没有区别。当我点击导出按钮浏览器挂断时。

javascript代码：

function getImageData(obj, type, title)
{
    var str;

    imgtype = type;

    if (type == 'jpg-pdf')
    {
        imgtype = 'jpg';
        type = 'pdf';
    }
    var imgCanvas = $('#'+obj).jqplotToImageCanvas();

    if (imgCanvas) {
        str = imgCanvas.toDataURL("image/"+imgtype);
    }
    else {
        str = null;
    }

    $('#pngdata').val(str);
    $('#imgtype').val(type);
    $('#imgtitle').val(title);

    $('#imgform').submit();

}

和jqplot函数

 $.fn.jqplotToImageCanvas = function(options) {

    options = options || {};
    var x_offset = (options.x_offset == null) ? 0 : options.x_offset;
    var y_offset = (options.y_offset == null) ? 0 : options.y_offset;
    var backgroundColor = (options.backgroundColor == null) ? 'rgb(255,255,255)' : options.backgroundColor;

    if ($(this).width() == 0 || $(this).height() == 0) {
        return null;
    }

    // excanvas and hence IE < 9 do not support toDataURL and cannot export images.
    if ($.jqplot.use_excanvas) {
        return null;
    }

    var newCanvas = document.createElement("canvas");
    var h = $(this).outerHeight(true);
    var w = $(this).outerWidth(true);
    var offs = $(this).offset();
    var plotleft = offs.left;
    var plottop = offs.top;
    var transx = 0, transy = 0;

    // have to check if any elements are hanging outside of plot area before rendering,
    // since changing width of canvas will erase canvas.

    var clses = ['jqplot-table-legend', 'jqplot-xaxis-tick', 'jqplot-x2axis-tick', 'jqplot-yaxis-tick', 'jqplot-y2axis-tick', 'jqplot-y3axis-tick',
        'jqplot-y4axis-tick', 'jqplot-y5axis-tick', 'jqplot-y6axis-tick', 'jqplot-y7axis-tick', 'jqplot-y8axis-tick', 'jqplot-y9axis-tick',
        'jqplot-xaxis-label', 'jqplot-x2axis-label', 'jqplot-yaxis-label', 'jqplot-y2axis-label', 'jqplot-y3axis-label', 'jqplot-y4axis-label',
        'jqplot-y5axis-label', 'jqplot-y6axis-label', 'jqplot-y7axis-label', 'jqplot-y8axis-label', 'jqplot-y9axis-label' ];

    var temptop, templeft, tempbottom, tempright;

    for (var i = 0, j = clses.length; i < j; i++) {
        $(this).find('.'+clses[i]).each(function() {
            temptop = $(this).offset().top - plottop;
            templeft = $(this).offset().left - plotleft;
            tempright = templeft + $(this).outerWidth(true) + transx;
            tempbottom = temptop + $(this).outerHeight(true) + transy;
            if (templeft < -transx) {
                w = w - transx - templeft;
                transx = -templeft;
            }
            if (temptop < -transy) {
                h = h - transy - temptop;
                transy = - temptop;
            }
            if (tempright > w) {
                w = tempright;
            }
            if (tempbottom > h) {
                h =  tempbottom;
            }
        });
    }

    newCanvas.width = w + Number(x_offset);
    newCanvas.height = h + Number(y_offset);

    var newContext = newCanvas.getContext("2d");

    newContext.save();
    newContext.fillStyle = backgroundColor;
    newContext.fillRect(0,0, newCanvas.width, newCanvas.height);
    newContext.restore();

    newContext.translate(transx, transy);
    newContext.textAlign = 'left';
    newContext.textBaseline = 'top';

    function getLineheight(el) {
        var lineheight = parseInt($(el).css('line-height'), 10);

        if (isNaN(lineheight)) {
            lineheight = parseInt($(el).css('font-size'), 10) * 1.2;
        }
        return lineheight;
    }

    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);
        }

    }

    function _jqpToImage(el, x_offset, y_offset) {
        var tagname = el.tagName.toLowerCase();
        var p = $(el).position();
        var css = window.getComputedStyle ?  window.getComputedStyle(el, "") : el.currentStyle; // for IE < 9
        var left = x_offset + p.left + parseInt(css.marginLeft, 10) + parseInt(css.borderLeftWidth, 10) + parseInt(css.paddingLeft, 10);
        var top = y_offset + p.top + parseInt(css.marginTop, 10) + parseInt(css.borderTopWidth, 10)+ parseInt(css.paddingTop, 10);
        var w = newCanvas.width;
        // var left = x_offset + p.left + $(el).css('marginLeft') + $(el).css('borderLeftWidth') 

        // somehow in here, for divs within divs, the width of the inner div should be used instead of the canvas.

        if ((tagname == 'div' || tagname == 'span') && !$(el).hasClass('jqplot-highlighter-tooltip')) {
            $(el).children().each(function() {
                _jqpToImage(this, left, top);
            });
            var text = $(el).jqplotChildText();

            if (text) {
                newContext.font = $(el).jqplotGetComputedFontStyle();
                newContext.fillStyle = $(el).css('color');

                writeWrappedText(el, newContext, text, left, top, w);
            }
        }

        // handle the standard table legend

        else if (tagname === 'table' && $(el).hasClass('jqplot-table-legend')) {
            newContext.strokeStyle = $(el).css('border-top-color');
            newContext.fillStyle = $(el).css('background-color');
            newContext.fillRect(left, top, $(el).innerWidth(), $(el).innerHeight());
            if (parseInt($(el).css('border-top-width'), 10) > 0) {
                newContext.strokeRect(left, top, $(el).innerWidth(), $(el).innerHeight());
            }

            // find all the swatches
            $(el).find('div.jqplot-table-legend-swatch-outline').each(function() {
                // get the first div and stroke it
                var elem = $(this);
                newContext.strokeStyle = elem.css('border-top-color');
                var l = left + elem.position().left;
                var t = top + elem.position().top;
                newContext.strokeRect(l, t, elem.innerWidth(), elem.innerHeight());

                // now fill the swatch

                l += parseInt(elem.css('padding-left'), 10);
                t += parseInt(elem.css('padding-top'), 10);
                var h = elem.innerHeight() - 2 * parseInt(elem.css('padding-top'), 10);
                var w = elem.innerWidth() - 2 * parseInt(elem.css('padding-left'), 10);

                var swatch = elem.children('div.jqplot-table-legend-swatch');
                newContext.fillStyle = swatch.css('background-color');
                newContext.fillRect(l, t, w, h);
            });

            // now add text

            $(el).find('td.jqplot-table-legend-label').each(function(){
                var elem = $(this);
                var l = left + elem.position().left;
                var t = top + elem.position().top + parseInt(elem.css('padding-top'), 10);
                newContext.font = elem.jqplotGetComputedFontStyle();
                newContext.fillStyle = elem.css('color');
                writeWrappedText(elem, newContext, elem.text(), l, t, w);
            });

            var elem = null;
        }

        else if (tagname == 'canvas') {
            newContext.drawImage(el, left, top);
        }
    }
    $(this).children().each(function() {
        _jqpToImage(this, x_offset, y_offset);
    });
    return newCanvas;
};

请帮助我。

jqplotToImageCanvas在chrome版本47.0和firefox 41.0.1中不起作用

0 个答案: