Javascript 在html中生成图形并另存为图像
我想使用某些值生成一个图形，并将输出捕获/保存为jpeg/png。我正在使用谷歌图表生成一个图形，并使用html2canvas进行捕获。下面是我正在尝试的代码Javascript 在html中生成图形并另存为图像,javascript,html,html2canvas,Javascript,Html,Html2canvas,我想使用某些值生成一个图形，并将输出捕获/保存为jpeg/png。我正在使用谷歌图表生成一个图形，并使用html2canvas进行捕获。下面是我正在尝试的代码 <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"
<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>
load（'current'，{'packages'：['bar']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[“年度”、“销售额”、“费用”、“利润”]，
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
变量选项={
图表：{
标题：“公司业绩”，
字幕：“销售、费用和利润：2014-2017”，
},
酒吧：“水平”
};
var chart=new google.charts.Bar（document.getElementById（'barchart_material'）；
绘制（数据，google.charts.Bar.convertOptions（选项））；
}
$（文档）.ready（函数（）{
html2canvas（$（“条形图材料”）{
onrendered：函数（画布）{
//画布是最终渲染的元素
var myImage=canvas.toDataURL（“image/png”）；
窗口打开（myImage）；
}
});
另外，我的目标是在本地保存图像，而不仅仅是打开图像。省去了很多麻烦，不要使用交互式谷歌图表API，而是使用基于图像的图表
您是否尝试删除窗口。打开（myImage）；这样图像就不会被删除opened@user93是的，我试过了，但为了确认html2canvas是否正常工作，我已经将window.open放在了上面。html2canvas似乎不能与google graph一起正常工作。你试过chart.getUrI（）了吗方法获取图像谢谢你的提示。但我正在寻找问题中讨论的图像保存部分。@umzee问题是，所有这些
html2canvas