แผนการเล่น ที่เป็น code
ผลลัพธ์ เมื่อแปลงได้ จะแสดงในนี้เป็น .png
library ที่ใช้
https://github.com/pbakaus/domvas
code แสดง แผนการเล่น
โค้ด: เลือกทั้งหมด
<div class="drag-container" align="center" >
<?php $getyourid = $_GET['id'];
$sql_opt_position = "SELECT * FROM $datalineup_logs AS lo
LEFT JOIN $datalineup_player AS play ON lo.logs_team_id = play.team_id
LEFT JOIN $datalineup_position AS posit ON lo.logs_plan_id = posit.plan_id
WHERE play.play_position = posit.pst_posit AND lo.lineup_id = $getyourid ";
$result_logs = mysqli_query($con, $sql_opt_position);
while ($rowlogs = mysqli_fetch_assoc($result_logs)){
$laplyname = ($lang=='th') ? $rowlogs['play_name_th'] : $rowlogs['play_name_en'];
?>
<div class="draggable" data-toggle="modal" data-target="#myModal"
style="transform: translate(<?php echo $rowlogs['pst_x'].'px'; ?> ,
<?php echo $rowlogs['pst_y'].'px'; ?>);"
data-x="<?php echo $rowlogs['pst_x']; ?>"
data-y="<?php echo $rowlogs['pst_y'];?>">
<img src="player_image/<?php echo $rowlogs['play_img'];?>" style="width:80px" alt="<?php echo $laplyname; ?>">
<h4><span class="badge badge-secondary" ><?php echo $laplyname; ?> <?php echo $rowlogs["play_num"]; ?></span></h4>
</div>
<?php } ?>
</div>
โค้ด: เลือกทั้งหมด
<canvas id="test" width="500px" height="700px" ></canvas>
<script src="src/domvas.min.js"></script>
<script src="src/domvas.js"></script>
$(document).ready(function(){
var canvas = document.getElementById("test");
var context = canvas.getContext('2d');
domvas.toImage(document.getElementsByClassName("drag-container"), function() {
context.drawImage(this, 20, 20);
});
});