Highchart和HTMLCanvas

Question

我有多個圖表（高圖）放在extjs面板組件。 我想下載所有的圖表和extjs組件作爲圖像。 我用html canvas，它只下載extjs組件。圖表中未捕獲到高分辨率組件。 任何人都可以幫忙嗎？

Answer 1

Agi La我不知道extjs，但是因爲我也在下載高圖表時遇到了問題，所以我會解釋我做了什麼來獲得它們。

首先，確保你有rgbcolor.js和canvg.js庫。

其次，你可以使用這個腳本來進行AJAX調用：

<script> 
     $(document).ready(function(){ 
      var svg = document.getElementById('$this->id_chart').children[0].innerHTML; 
      canvg(document.getElementById('$this->id_canvas'),svg); 
      var img = $this->id_canvas.toDataURL('image/png'); //img is data:image/png;base64 
      img = img.replace('data:image/png;base64,', ''); 
      $.ajax({ 
       type: 'POST', 
       url: 'AJAX/AJAX1.php', 
       data: {INFO1: img , INFO2: '$this->file_name_export' }     
      }); 
     }); 
</script> 

<script type='text/javascript' src='JS/rgbcolor.js'></script>  
<script type='text/javascript' src='JS/canvg.js'></script> 

<!-- canvas tag to convert SVG --> 
<canvas id='$this->id_canvas' style='display:none;'></canvas> 

其中$這個 - > id_chart是你在哪裏放置highchart和$這個 - 的div id> file_name_export是您想要給您保存的圖表的名稱。

和你的Ajax文件，你必須有：

$img  = $_POST['INFO1']; 
$fileName = $_POST['INFO2']. '.jpeg'; 

$data = str_replace(' ', '+', $img); 
$data = base64_decode($data); 
$im = imagecreatefromstring($data); 

if ($im !== false) { 
    // Save image in the specified location 
    imagejpeg($im, "../temp/" .$fileName,100); 
    imagedestroy($im);    
}  

你可以看到here原始來源，在一個按鈕，而不是一個自動下載像我使用此代碼。