jquery - 将 jqPlot 图保存到图像文件时隐藏轴标签

Question

编辑：我正在使用 jqplotToImageStr({}) 来保存图表图像。但是，生成的图像不包括轴标签。它只输出图表本身。我发现轴标签实际上在图表后面。我已将轴标签移动到图表边界内并设置 z-index 以便标签显示在图表顶部。但是当 jqplotToImageStr({}) 被调用时，轴标签落在图表后面。如何确保拍摄时图像中包含轴标签？

这是创建图像的代码。

var imageData = $('#chart_div').jqplotToImageStr({});
var copyImage = $('<img/>').attr('src', imageData);
$('#copy-container').html(copyImage);   

Answer 1

好的，我设法解决了这个问题。绘制图表后，我使用了画布并在画布上绘制了轴标签。受这篇文章的启发。

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();
    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 () {

        if ($(this)[0].tagName.toLowerCase() == 'canvas') {
            // all canvas from the chart
            var offset = $(this).offset();
            newCanvas.getContext("2d").drawImage(this,
                        offset.left - baseOffset.left,
                        offset.top - baseOffset.top
                    );
        } // for the div's with the X and Y axis
    });

    obj.children().each(function () {
        if ($(this)[0].tagName.toLowerCase() == 'div') {
            if ($(this).attr('class') == "jqplot-axis jqplot-yaxis") {

                $(this).children("canvas").each(function () {
                    var offset = $(this).offset();
                    newCanvas.getContext("2d").drawImage(this,
                                offset.left - baseOffset.left,
                                offset.top - baseOffset.top
                            );
                });
            }
            else if ($(this).attr('class') == "jqplot-axis jqplot-xaxis") {

                $(this).children("canvas").each(function () {
                    var offset = $(this).offset();
                    newCanvas.getContext("2d").drawImage(this,
                                offset.left - baseOffset.left,
                                offset.top - baseOffset.top
                            );
                });
            }
        }
    });