在html中生成圖形並保存爲圖像

我想使用某些值生成圖形並將輸出捕獲/保存爲jpeg/png。我使用google圖表生成圖形並使用html2canvas進行捕獲。以下是我正在嘗試的代碼。在html中生成圖形並保存爲圖像

<html> 
    <head> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script> 
    <script type="text/javascript" src="html2canvas.js"></script> 

    <script type="text/javascript" src="jquery-3.2.1.min.js"></script> 
    <script language="javascript"> 

    <script type="text/javascript"> 
     google.charts.load('current', {'packages':['bar']}); 
     google.charts.setOnLoadCallback(drawChart); 

     function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Year', 'Sales', 'Expenses', 'Profit'], 
      ['2014', 1000, 400, 200], 
      ['2015', 1170, 460, 250], 
      ['2016', 660, 1120, 300], 
      ['2017', 1030, 540, 350] 
     ]); 

     var options = { 
      chart: { 
      title: 'Company Performance', 
      subtitle: 'Sales, Expenses, and Profit: 2014-2017', 
      }, 
      bars: 'horizontal' 
     }; 

     var chart = new google.charts.Bar(document.getElementById('barchart_material')); 

     chart.draw(data, google.charts.Bar.convertOptions(options)); 
     } 
    $(document).ready(function() { 
    html2canvas($("#barchart_material"), { 
     onrendered: function(canvas) { 
      // canvas is the final rendered <canvas> element 
      var myImage = canvas.toDataURL("image/png"); 
      window.open(myImage); 
     } 
    }); 
</script> 
    </head> 
    <body> 
<div id="barchart_material" style="width: 900px; height: 500px;"></div> 
</body> 
</html>

谷歌圖工作正常，也開放圖像捕獲，作爲一個單獨的代碼，但是當我合併它不。而且，我的目標是在本地保存圖像，而不是公開。

來源

2017-05-15 umzee

您是否嘗試刪除window.open（myImage）;以便圖像不會打開 – user93

@ user93是的，我嘗試過，但只是爲了確認html2canvas是否正常工作，我已將window.open – umzee

看起來html2canvas無法在Google圖形中正常工作。您是否嘗試使用chart.getUrI（）方法獲取圖像 – user93

爲自己省去很多麻煩，不要使用交互式Google Charts API。改爲使用基於圖像的圖表。

https://developers.google.com/chart/image/docs/gallery/bar_charts

來源

2017-05-15 06:40:49 Brad

感謝您的提示。但我正在尋找像我的問題中討論的圖像保存部分。 – umzee

@umzee事情是，所有這些'html2canvas'庫都是黑客。他們並沒有真正以你期望的方式工作，並且經常有副作用。你可能會遇到一個。如果您切換到基於圖像的圖表，則無需執行任何操作。 – Brad

在html中生成圖形並保存爲圖像

回答

相關問題