javascript - jqPlot to Image - Stack Overflow

admin管理员组

文章数量:1335415

I know this question is aroud here already, but I think it's not properly answered. So far I am using this approach which works 100% fine, for any Plot I had to far.

Please ment on the effieciency etc. of the code, I'd like to know if there are still bugs in it.

Thank you very much.

function jqplotToImg(obj) {
    var newCanvas = document.createElement("canvas");
    newCanvas.width = obj.find("canvas.jqplot-base-canvas").width();
    newCanvas.height = obj.find("canvas.jqplot-base-canvas").height()+10;
    var baseOffset = obj.find("canvas.jqplot-base-canvas").offset();

    // make white background for pasting
    var context = newCanvas.getContext("2d");
    context.fillStyle = "rgba(255,255,255,1)";
    context.fillRect(0, 0, newCanvas.width, newCanvas.height);

    obj.children().each(function () {
    // for the div's with the X and Y axis
        if ($(this)[0].tagName.toLowerCase() == 'div') {
            // X axis is built with canvas
            $(this).children("canvas").each(function() {
                var offset = $(this).offset();
                newCanvas.getContext("2d").drawImage(this,
                    offset.left - baseOffset.left,
                    offset.top - baseOffset.top
                );
            });
            // Y axis got div inside, so we get the text and draw it on the canvas
            $(this).children("div").each(function() {
                var offset = $(this).offset();
                var context = newCanvas.getContext("2d");
                context.font = $(this).css('font-style') + " " + $(this).css('font-size') + " " + $(this).css('font-family');
                context.fillStyle = $(this).css('color');
                context.fillText($(this).text(),
                    offset.left - baseOffset.left,
                    offset.top - baseOffset.top + $(this).height()
                );
            });
        } else if($(this)[0].tagName.toLowerCase() == 'canvas') {
            // all other canvas from the chart
            var offset = $(this).offset();
            newCanvas.getContext("2d").drawImage(this,
                offset.left - baseOffset.left,
                offset.top - baseOffset.top
            );
        }
    });

    // add the point labels
    obj.children(".jqplot-point-label").each(function() {
        var offset = $(this).offset();
        var context = newCanvas.getContext("2d");
        context.font = $(this).css('font-style') + " " + $(this).css('font-size') + " " + $(this).css('font-family');
        context.fillStyle = $(this).css('color');
        context.fillText($(this).text(),
            offset.left - baseOffset.left,
            offset.top - baseOffset.top + $(this).height()*3/4
        );
    });

    // add the title
    obj.children("div.jqplot-title").each(function() {
        var offset = $(this).offset();
        var context = newCanvas.getContext("2d");
        context.font = $(this).css('font-style') + " " + $(this).css('font-size') + " " + $(this).css('font-family');
        context.textAlign = $(this).css('text-align');
        context.fillStyle = $(this).css('color');
        context.fillText($(this).text(),
            newCanvas.width / 2,
            offset.top - baseOffset.top + $(this).height()
        );
    });

    // add the legend
    obj.children("table.jqplot-table-legend").each(function() {
        var offset = $(this).offset();
        var context = newCanvas.getContext("2d");
        context.strokeStyle = $(this).css('border-top-color');
        context.strokeRect(
            offset.left - baseOffset.left,
            offset.top - baseOffset.top,
            $(this).width(),$(this).height()
        );
        context.fillStyle = $(this).css('background-color');
        context.fillRect(
            offset.left - baseOffset.left,
            offset.top - baseOffset.top,
            $(this).width(),$(this).height()
        );
    });

    // add the rectangles
    obj.find("div.jqplot-table-legend-swatch").each(function() {
        var offset = $(this).offset();
        var context = newCanvas.getContext("2d");
        context.fillStyle = $(this).css('background-color');
        context.fillRect(
            offset.left - baseOffset.left,
            offset.top - baseOffset.top,
            $(this).parent().width(),$(this).parent().height()
        );
    });

    obj.find("td.jqplot-table-legend").each(function() {
        var offset = $(this).offset();
        var context = newCanvas.getContext("2d");
        context.font = $(this).css('font-style') + " " + $(this).css('font-size') + " " + $(this).css('font-family');
        context.fillStyle = $(this).css('color');
        context.textAlign = $(this).css('text-align');
        context.textBaseline = $(this).css('vertical-align');
        context.fillText($(this).text(),
            offset.left - baseOffset.left,
            offset.top - baseOffset.top + $(this).height()/2 + parseInt($(this).css('padding-top').replace('px',''))
        );
    });

    // convert the image to base64 format
    return newCanvas.toDataURL("image/png");
}

I know this question is aroud here already, but I think it's not properly answered. So far I am using this approach which works 100% fine, for any Plot I had to far.

Please ment on the effieciency etc. of the code, I'd like to know if there are still bugs in it.

Thank you very much.

function jqplotToImg(obj) {
    var newCanvas = document.createElement("canvas");
    newCanvas.width = obj.find("canvas.jqplot-base-canvas").width();
    newCanvas.height = obj.find("canvas.jqplot-base-canvas").height()+10;
    var baseOffset = obj.find("canvas.jqplot-base-canvas").offset();

    // make white background for pasting
    var context = newCanvas.getContext("2d");
    context.fillStyle = "rgba(255,255,255,1)";
    context.fillRect(0, 0, newCanvas.width, newCanvas.height);

    obj.children().each(function () {
    // for the div's with the X and Y axis
        if ($(this)[0].tagName.toLowerCase() == 'div') {
            // X axis is built with canvas
            $(this).children("canvas").each(function() {
                var offset = $(this).offset();
                newCanvas.getContext("2d").drawImage(this,
                    offset.left - baseOffset.left,
                    offset.top - baseOffset.top
                );
            });
            // Y axis got div inside, so we get the text and draw it on the canvas
            $(this).children("div").each(function() {
                var offset = $(this).offset();
                var context = newCanvas.getContext("2d");
                context.font = $(this).css('font-style') + " " + $(this).css('font-size') + " " + $(this).css('font-family');
                context.fillStyle = $(this).css('color');
                context.fillText($(this).text(),
                    offset.left - baseOffset.left,
                    offset.top - baseOffset.top + $(this).height()
                );
            });
        } else if($(this)[0].tagName.toLowerCase() == 'canvas') {
            // all other canvas from the chart
            var offset = $(this).offset();
            newCanvas.getContext("2d").drawImage(this,
                offset.left - baseOffset.left,
                offset.top - baseOffset.top
            );
        }
    });

    // add the point labels
    obj.children(".jqplot-point-label").each(function() {
        var offset = $(this).offset();
        var context = newCanvas.getContext("2d");
        context.font = $(this).css('font-style') + " " + $(this).css('font-size') + " " + $(this).css('font-family');
        context.fillStyle = $(this).css('color');
        context.fillText($(this).text(),
            offset.left - baseOffset.left,
            offset.top - baseOffset.top + $(this).height()*3/4
        );
    });

    // add the title
    obj.children("div.jqplot-title").each(function() {
        var offset = $(this).offset();
        var context = newCanvas.getContext("2d");
        context.font = $(this).css('font-style') + " " + $(this).css('font-size') + " " + $(this).css('font-family');
        context.textAlign = $(this).css('text-align');
        context.fillStyle = $(this).css('color');
        context.fillText($(this).text(),
            newCanvas.width / 2,
            offset.top - baseOffset.top + $(this).height()
        );
    });

    // add the legend
    obj.children("table.jqplot-table-legend").each(function() {
        var offset = $(this).offset();
        var context = newCanvas.getContext("2d");
        context.strokeStyle = $(this).css('border-top-color');
        context.strokeRect(
            offset.left - baseOffset.left,
            offset.top - baseOffset.top,
            $(this).width(),$(this).height()
        );
        context.fillStyle = $(this).css('background-color');
        context.fillRect(
            offset.left - baseOffset.left,
            offset.top - baseOffset.top,
            $(this).width(),$(this).height()
        );
    });

    // add the rectangles
    obj.find("div.jqplot-table-legend-swatch").each(function() {
        var offset = $(this).offset();
        var context = newCanvas.getContext("2d");
        context.fillStyle = $(this).css('background-color');
        context.fillRect(
            offset.left - baseOffset.left,
            offset.top - baseOffset.top,
            $(this).parent().width(),$(this).parent().height()
        );
    });

    obj.find("td.jqplot-table-legend").each(function() {
        var offset = $(this).offset();
        var context = newCanvas.getContext("2d");
        context.font = $(this).css('font-style') + " " + $(this).css('font-size') + " " + $(this).css('font-family');
        context.fillStyle = $(this).css('color');
        context.textAlign = $(this).css('text-align');
        context.textBaseline = $(this).css('vertical-align');
        context.fillText($(this).text(),
            offset.left - baseOffset.left,
            offset.top - baseOffset.top + $(this).height()/2 + parseInt($(this).css('padding-top').replace('px',''))
        );
    });

    // convert the image to base64 format
    return newCanvas.toDataURL("image/png");
}

• javascript
• jquery
• html
• jqplot

Share Improve this question Follow asked Apr 20, 2012 at 9:12 Julius FJulius F 3,44444 gold badges3131 silver badges4545 bronze badges 1

• Here is probably a better alternative - a little jqplotToImage extension by Larry Siden: github./lsiden/export-jqplot-to-png/blob/master/… – Stefan Commented Oct 10, 2012 at 12:49

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

It's not a bug but if you try to save the image as a png, it generates a transparent background for the image. It's up to you to take care of the background image.

First of all thanks for sharing, based on my tests, this script it's missing:

1. Data point labels for some types of charts (donuts)
2. Legends swatch is missing.

Now there's this option: https://bitbucket/cleonello/jqplot/src/538695e6a66a/src/jqplot.toImage.js?at=default

See the test using my charts here

本文标签： javascriptjqPlot to ImageStack Overflow