พูดคุยแลกเปลี่ยน ปัญหา การเขียน JavaScript เครื่องมือ AJAX Web 2.0 AJAX Framework jQuery และ Node.JS รวมถึง Framework Express ของ Node.JS ทำงานฝั่ง Server
Moderator: mindphp
-
Thanapoom1514
- PHP VIP Members
- โพสต์: 4329
- ลงทะเบียนเมื่อ: 04/07/2022 9:46 am
โพสต์ที่ยังไม่ได้อ่าน
โดย Thanapoom1514 »
ผมทำระบบันทึกรูปภาพโดยใช้ฟังก์ชัน html2canvas ครับ โดยในตรงนี้คือให้รูปภาพแสดงขึ้นมาก่อนครับแต่ผลที่ได้คือ รูปภาพที่ได้มันไม่เต็มหรือแสดงแค่บางส่วนครับ อันนี้ต้องทำยังไงหรอครับ
โค้ด: เลือกทั้งหมด
<div id="drag-container">
<div class="drag-container" align="center">
<div class="logo_team" style="display:none;">
<img class="logoteam" src="">
</div>
<div class="namecoach" style="display:none;">
<img class="coachimage" src="">
<p></p>
</div>
<?php
$sql_opt_position = "SELECT * FROM $datalineup_position WHERE plan_id = 1 ";
$result_opt_position = mysqli_query($con, $sql_opt_position);
while ($rowposition = mysqli_fetch_assoc($result_opt_position)) { ?>
<div class="draggable" id="po_<?php echo $rowposition['pst_posit']; ?>" style="transform: translate(<?php echo $rowposition['pst_x'] . 'px'; ?> ,
<?php echo $rowposition['pst_y'] . 'px'; ?>);" data-x="<?php echo $rowposition['pst_x']; ?>" data-y="<?php echo $rowposition['pst_y']; ?>">
<p id="shw_nameply"> <?php echo $rowposition["pst_name"]; ?></p>
<div class="showplayer"></div>
<input type="hidden" class="setplayer" name="setplayer[]" >
<input type="hidden" class="setposit" name="setposit[]" value="<?php echo $rowposition["pst_posit"]; ?>">
</div>
<?php } ?>
<p class="powerby">Power by Mindphp</p>
</div>
</div>
<script>
$(function() {
// $('.modal-title').text =
$("#savepicture").click(function() {
html2canvas(document.querySelector("#drag-container")).then(canvas => {
var imgsrc = canvas.toDataURL("image/png");
// console.log(imgsrc);
$("#newimg").attr('src', imgsrc);
$("#img").show();
$("#img").focus();
var dataURL = canvas.toDataURL();
$.ajax({
type: "POST",
url: "script.php",
data: {
imgBase64: dataURL
}
}).done(function(o) {
console.log('saved');
});
// }
});
return false;
});
});
</script>
กดที่บันทึกรูป
- JavaScript & Jquery Ajax & Node.JS-1.png (477.04 KiB) Viewed 1088 times
ผลที่ได้คือ รูปภาพมันไม่เต็มครับ
- JavaScript & Jquery Ajax & Node.JS-2.png (326.51 KiB) Viewed 1088 times
-
tsukasaz
- PHP VIP Members
- โพสต์: 22002
- ลงทะเบียนเมื่อ: 18/04/2012 9:39 am
โพสต์ที่ยังไม่ได้อ่าน
โดย tsukasaz »
ลองกำหนดความสูงของ drag-container หรือยังครับ
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
-
Thanapoom1514
- PHP VIP Members
- โพสต์: 4329
- ลงทะเบียนเมื่อ: 04/07/2022 9:46 am
โพสต์ที่ยังไม่ได้อ่าน
โดย Thanapoom1514 »
tsukasaz เขียน: ↑30/11/2022 11:58 am
ลองกำหนดความสูงของ drag-container หรือยังครับ
ผมกำหนดไว้ในไฟล์ css
โค้ด: เลือกทั้งหมด
.drag-container {
background-image: url('../background_image/image1.jpg');
/* display: inline-block; */
height: 750px;
width: 100%;
border: 1px solid black;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
-
Thanapoom1514
- PHP VIP Members
- โพสต์: 4329
- ลงทะเบียนเมื่อ: 04/07/2022 9:46 am
โพสต์ที่ยังไม่ได้อ่าน
โดย Thanapoom1514 »
ตอนนี้ผมลองปรับ code script js
โค้ด: เลือกทั้งหมด
<script>
function downloadByHtml2Canvas() {
html2canvas(document.querySelector('#drag-container')).then((canvas) => {
const name = 'test';
let today = new Date();
let dd = today.getDate();
let mm = today.getMonth() + 1;
let yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd;
}
if (mm < 10) {
mm = '0' + mm;
}
today = yyyy + mm + dd;
let img = canvas.toDataURL('image/png');
downloadImage(img, `${name}_${today}`);
});
}
function downloadImage(blob, fileName) {
const fakeLink = window.document.createElement('a');
fakeLink.style = 'display:none;';
fakeLink.download = fileName;
fakeLink.href = blob;
document.body.appendChild(fakeLink);
fakeLink.click();
document.body.removeChild(fakeLink);
fakeLink.remove();
}
สามารถดาวน์โหลดรูปได้แล้วแต่รูปภาพตำแหน่งยังแสดงไม่เต็มครับ
ผลที่ดาวน์โหลดรูปได้
- JavaScript & Jquery Ajax & Node.JS-2.png (8.05 KiB) Viewed 997 times
แต่รูปภาพที่ได้ยังไม่เต็มหรือแสดงแค่บางส่วน ไม่ได้ตามที่ต้องการครับ
- JavaScript & Jquery Ajax & Node.JS-3.png (968.77 KiB) Viewed 997 times
แก้ไขล่าสุดโดย
Thanapoom1514 เมื่อ 02/12/2022 1:47 pm, แก้ไขไปแล้ว 1 ครั้ง.
-
tsukasaz
- PHP VIP Members
- โพสต์: 22002
- ลงทะเบียนเมื่อ: 18/04/2012 9:39 am
โพสต์ที่ยังไม่ได้อ่าน
โดย tsukasaz »
ขอตัว result ที่ได้จาก canvas.toDataURL('image/png') หน่อยครับ
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
-
Thanapoom1514
- PHP VIP Members
- โพสต์: 4329
- ลงทะเบียนเมื่อ: 04/07/2022 9:46 am
โพสต์ที่ยังไม่ได้อ่าน
โดย Thanapoom1514 »
tsukasaz เขียน: ↑02/12/2022 11:37 am
ขอตัว result ที่ได้จาก canvas.toDataURL('image/png') หน่อยครับ
อันนี้ใช่ไหมครับ
- JavaScript & Jquery Ajax & Node.JS-1.png (686.72 KiB) Viewed 989 times
-
mindphp
- ผู้ดูแลระบบ MindPHP
- โพสต์: 41251
- ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
-
ติดต่อ:
โพสต์ที่ยังไม่ได้อ่าน
โดย mindphp »
ลองตัด html, css, javascritp เฉพาะ ส่วนที่ต้องการ ไฟล์ ใหม่สักไฟล์
และดูว่ามีปัญหาหรือเปล่า เพื่อตัด css, javascript ที่ไม่เกี่ยวข้องออกไปก่อน
ถ้าไม่มีปัญหา ค่อยๆ ทะยอยใส่ส่วนที่จำเป็นต้องใช้เพิ่มเข้าไปแล้วเช็คไปทีละตัว
-
Thanapoom1514
- PHP VIP Members
- โพสต์: 4329
- ลงทะเบียนเมื่อ: 04/07/2022 9:46 am
โพสต์ที่ยังไม่ได้อ่าน
โดย Thanapoom1514 »
ผมลองใช้ scrollX กับ scrollX ใน options ของ html2canvas
โค้ด: เลือกทั้งหมด
<script>
function downloadByHtml2Canvas() {
html2canvas(document.querySelector("#drag-container"), {
scrollX:-8.5,
scrollY: -window.scrollY+5 })
.then((canvas) => {
const name = 'test';
let today = new Date();
let dd = today.getDate();
let mm = today.getMonth();
let yyyy = today.getFullYear();
today = yyyy + mm + dd;
let img = canvas.toDataURL('image/png');
console.log(img);
downloadImage(img, `${name}_${today}`);
});
}
function downloadImage(blob, fileName) {
const fakeLink = window.document.createElement('a');
fakeLink.style = 'display:none;';
fakeLink.download = fileName;
fakeLink.href = blob;
document.body.appendChild(fakeLink);
fakeLink.click();
document.body.removeChild(fakeLink);
fakeLink.remove();
}
</script>
กดบันทึกรูปแล้วผลที่ได้ไฟล์รูป
- JavaScript & Jquery Ajax & Node.JS-1.png (1.42 MiB) Viewed 733 times
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 3