トリガーjqueryを使用して自動的にすべてのグラフを画像としてエクスポートする

Question

1つのhtmlページに複数のグラフがあります。そのページのすべてのグラフを完全に読み込んだ後、すべてのグラフをエクスポートしようとしています。 私はクリックイベントをトリガーするスクリプトを持っていますが、私が望むように動作していません。 クリックボタンをトリガーして、配列内のグラフイメージをbase64でエンコードしてプッシュし、データをphpファイルに送り、イメージとして保存するようにします。

2つの画像が作成されていますが、1つの画像のみが適切で、もう1つの画像が壊れています。ここ

は世代をグラフ化するために私のコードです：ここ https://jsfiddle.net/a1so23dh/2/

は私のPHPファイルのコードです：

<?php 
$data = urldecode($_POST['imageData']); 
list($type, $data) = explode(';', $data); 
list(, $data)  = explode(',', $data); 
$data = base64_decode($data); 
$filename = "images/image".rand(1000,10000).".jpg"; 
file_put_contents($filename, $data); 
?> 

その他のアプローチでも動作する可能性があります。

Answer 1

this tutorialの最初の例のような、偽のクリックを使用する代わりに、AmChartsのイベントとAmChartsエクスポートプラグインAPIでAPIメソッドを使用する方がよいでしょう。それはrenderedイベントを使用していますが、同様に動作しますanimationFinished：

"listeners": [{ 
    "event": "animationFinished", 
    "method": function(e) { 
    //wait for fabric 
    var interval = setInterval(function() { 
     if (window.fabric) { 
     clearTimeout(interval); 
     e.chart.export.capture({}, function() { 
      this.toJPG({}, function(data) { 
      //post base64 string in data to your endpoint directly 
      }); 
     }); 
     } 
    }); 
    } 
] 

Updated fiddle - 私はこれが動作することを検証するために、画面の一番下にエクスポート画像を追加したデバッグ目的のためにそれを注意してください。

Answer 2

あなたのsendAllData（）は呼び出されません。だから私はいくつかの変更を提案します。それは完全な解決策ではありませんが、あなたを助けます。

$('*').click(function(e){ 
    sendAllData(); 
}); 



function sendAllData(){ 
    console.log(dataArray); 
    var arsize = dataArray.length; 
    console.log("here"); 
    //execute this function and use the dataArray here 
    //send data to php file 
    if(arsize != 0){ 
     for(i=0;i<=dataArray.length;i++){ 
      jQuery.post("a.php", {imageData: encodeURIComponent(dataArray[i])}) 
       .done(function(data) { 
        if(data != 1){ 
         console.log("Data Loaded: " + data); 
        }else{ 
         console.log("error"); 
        } 
      }); 
     } 
    } 
} 

PHPでは以下のコードを使用します。

<?php 
    $data = urldecode($_POST['imageData']); 
    list($type, $data) = explode(';', $data); 
    list(, $data)  = explode(',', $data); 
    $data = base64_decode($data); 
    //$filename = "images/image".rand(1000,10000).".jpg"; 
    //file_put_contents($filename, $data); 

    $im = imagecreatefromstring($data); 

    if ($im !== false) { 
     header('Content-Type: image/jpeg'); 
     imagejpeg($im, "uploads/png3.jpeg"); 
     imagedestroy($im); 
    }else{ 
     echo '1'; 
    } 
?> 

は、私が最初のグラフすなわちバーチャートの画像を保存することができていますが、円グラフでは、私はerror.pleaseはこれを試して取得しています。