jqPlot to Image

Question

私はこの質問が既にここにあることを知っていますが、それは正しく答えられていないと思います。 これまでは、私が遠くまで持っていたどのプロットに対しても、100％上手く動作するこのアプローチを使用しています。

コードの効率などについてコメントしてください。まだバグがあるかどうか知りたいです。

ありがとうございました。

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

Answer 1

それはバグではないのですが、あなたはPNGとして画像を保存しようとすると、それはイメージのために透明な背景を生成します。背景画像を管理するのはあなた次第です。私のテストに基づいて、共有のためのすべての感謝の

Answer 2

まず、それが欠けているこのスクリプト：

伝説の見本が欠落しているチャート（ドーナツ）のいくつかのタイプの

1. データポイントのラベル。

は今、このオプションがあります： https://bitbucket.org/cleonello/jqplot/src/538695e6a66a/src/jqplot.toImage.js?at=default

は、ここに私のチャートhere