Skip to content

Instantly share code, notes, and snippets.

@tenten0213

tenten0213/index.html

Last active December 22, 2015 13:08
Show Gist options
  • Save tenten0213/6476713 to your computer and use it in GitHub Desktop.
Save tenten0213/6476713 to your computer and use it in GitHub Desktop.
Download ZIP
Canvasを画像にしてPDFにする
Raw
index.html
<!doctype html>
<html>
<head>
<title>Pie Chart</title>
<meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
</head>
<body>
<canvas id="canvas" height="450" width="450"></canvas>
<button type="button" onclick="createPDF()">Create PDF</button>
<iframe frameborder="0" width="450" height="450"></iframe>
<script src="js/Chart.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/jspdf.js"></script>
<script type="text/javascript" src="js/jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="js/jspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="js/jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="js/jspdf.plugin.from_html.js"></script> <script>
var pieData = [
{
value: 30,
color:"#F38630"
},
{
value : 50,
color : "#E0E4CC"
},
{
value : 100,
color : "#69D2E7"
}
];
var options = {
animation : false,
fillColor : "rgb(223,88,88)"
}
var ctx = document.getElementById("canvas").getContext("2d");
// この方法ではダメ
// ctx.fillStyle = 'white';
// ctx.fillRect(0, 0, 450, 450);
var myPie = new Chart(ctx).Pie(pieData, options);
// cssはtoDataURLで読み込まれない
$("canvas").css("background-color", "gray");
function createPDF() {
var image = document.getElementById("canvas").toDataURL("image/jpeg");
var pdf = new jsPDF();
pdf.setFontSize(40);
pdf.text(35, 25, 'Pie chart');
pdf.addImage(image, 'JPEG',15, 40, 180,180);
var string = pdf.output('datauristring');
$("iframe").attr("src", string);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment