Метка ярлыка скрыта при сохранении графика jqPlot в файл изображения

Question

Редактировать: Я использую jqplotToImageStr ({}), чтобы сохранить изображение диаграммы. Однако результирующее изображение не включает метки оси. Он выводит только сам график. Я узнал, что метки оси находятся за графиком. Я переместил метки оси внутри границы графика и установил z-индекс, чтобы метки были показаны сверху диаграммы. Но когда jqplotToImageStr ({}) называется метками оси, отстает от графика. Как я могу убедиться, что метки оси включены в изображение во время захвата?

вот код для создания изображения.

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

Answer 1

Хорошо, мне удалось разобраться в этом. Я использовал холст и нарисовал метки оси на холсте после рисования диаграммы. Вдохновленный this post.

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