单击链接完整脚本后将图形另存为图像
Posted
技术标签:
【中文标题】单击链接完整脚本后将图形另存为图像【英文标题】：Save graph as image after click link full script 【发布时间】：2015-04-20 11:11:10 【问题描述】：我有这个代码
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.js"></script>
<script type="text/javascript" src="js/chart-js/Chart.js"></script>
<script type="text/javascript">
var data = [
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
,
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
,
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
];
$(document).ready(
function ()
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).Pie(data);
document.getElementById("canvas_link").src = document.getElementById("myChart").toDataURL();
);
</script>
</head>
<body>
<p><a href="#" id="canvas_link">save as image</a></p>
<canvas id="myChart" ></canvas>
<p><a href="">export to pdf</a></p>
</body>
我需要创建 pdf 导出并使用通用图添加到图像中。 Berofe 我必须保存渲染图像。我尝试使用方法 .toBase64Image() 但我不知道我可以开始。
我的继续
创建 canvas_link (.toDataUrl)。单击另存为图像后，我可以放大并将图像上传到服务器。然后我可以生成 pdf 导出（跨 mPDF）并将 imageto 添加到导出中。这个我可以创建，但我不知道创建图形图像并将其上传到服务器。
我需要来自http://www.chartjs.org/docs/的更多示例
【问题讨论】：
【参考方案1】：在这种情况下，您无需上传为图片。 您可以将调用 toDataUrl 函数的结果放在隐藏字段的值中，并以表单（以 iframe 作为目标）或通过 ajax 调用发送它
在图表中使用以下选项
//new options var
var options =
bezierCurve : false,
//animation: false
onAnimationComplete: done
;
//your code with a little modification
$(document).ready(
function ()
var ctx = document.getElementById("myChart").getContext("2d");
//use the previously defined "options" here!!!
var myNewChart = new Chart(ctx).Pie(data, options);
);
//callback function, called when the pie ends his animation
function done()
//this part of your code was moved here to avoid that store an empty image
document.getElementById("canvas_link").src = document.getElementById("myChart").toDataURL();
var postdata=
file: document.getElementById("myChart").toDataURL()
$.post( "store.php", postdata)
.done(function( ret )
console.log( "Data status: Loaded successfully ");
)
.fail(function( ret )
console.log( "Data status: error ");
)
;
参考：http://api.jquery.com/jquery.post/
在php中你可以这样处理内容
// file: store.php
// Interpret data uri
$uriPhp = 'data://' . substr($file, 5);
// Get content
$binary = file_get_contents($uriPhp);
$file = 'uploads/charts/'. time() .'.png';
// Save image
file_put_contents($file, $binary);
参考：https://github.com/nnnick/Chart.js/issues/99#issuecomment-75359927
【讨论】：
【参考方案2】：根据documentation，您可以通过API调用print或save图形；
例子
var chart = new CanvasJS.Chart("chartContainer",
theme: "theme2",
title:
text: "Print Chart using print() method"
,
data: [
type: "column",
dataPoints: [
label: "apple", y: 10 ,
label: "orange", y: 15 ,
label: "banana", y: 25 ,
label: "mango", y: 30 ,
label: "grape", y: 28
]
]
);
chart.render();
document.getElementById("printChart").addEventListener("click",function()
chart.print();
//chart.exportChart(format: "jpg");
);
【讨论】：
虽然例子本身很好，但它引用了不同的图表库。 嗯。我不记得我什么时候提出这个建议了。以上是关于单击链接完整脚本后将图形另存为图像的主要内容，如果未能解决你的问题，请参考以下文章
强制打开“另存为...”弹出窗口在文本链接处打开单击以获取 HTML 中的 PDF