|
 |
|
สอบถามวิธีบันทึก graph chartjs เป็นรูปภาพหน่อยครับ |
|
 |
|
|
 |
 |
|
1. เพิ่มปุ่ม
Code (HTML)
<button id="save-chart-button">Save Chart as Image</button>
2. แปลงเป็นรูป Chart.js 3+ ใช้ toBase64Image() เวอร์เก่าใช้ toDataURL()
แล้วส่งรูปไปยัง server ด้วย AJAX
Code (JavaScript)
const saveChartButton = document.getElementById('save-chart-button');
saveChartButton.addEventListener('click', function() {
const canvas = document.getElementById('myChart');
const image = canvas.toDataURL();
$.ajax({
type: "POST",
url: "saveChartImage.php",
data: {
imgBase64: image
}
}).done(function() {
console.log('Chart image saved on server');
});
});
3. บันทึกลง server ตาม path ที่กำหนด
Code (PHP)
<?php
if(isset($_POST['imgBase64'])){
$imgBase64 = $_POST['imgBase64'];
$img = base64_decode($imgBase64);
$filename = 'chart.png';
file_put_contents($filename, $img);
}
?>
|
 |
 |
 |
 |
Date :
2023-03-29 10:15:34 |
By :
009 |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
|
|
|

|
Load balance : Server 03
|