สอบถามฟังก์ชัน html2canvas

พูดคุยแลกเปลี่ยน ปัญหา การเขียน JavaScript เครื่องมือ AJAX Web 2.0 AJAX Framework jQuery และ Node.JS รวมถึง Framework Express ของ Node.JS ทำงานฝั่ง Server

Moderator: mindphp

ภาพประจำตัวสมาชิก
Thanapoom1514
PHP VIP Members
PHP VIP Members
โพสต์: 4329
ลงทะเบียนเมื่อ: 04/07/2022 9:46 am

สอบถามฟังก์ชัน html2canvas

โพสต์ที่ยังไม่ได้อ่าน โดย 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
JavaScript & Jquery Ajax & Node.JS-1.png (477.04 KiB) Viewed 1086 times

ผลที่ได้คือ รูปภาพมันไม่เต็มครับ
JavaScript & Jquery Ajax & Node.JS-2.png
JavaScript & Jquery Ajax & Node.JS-2.png (326.51 KiB) Viewed 1086 times
:gfb:
ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 21991
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: สอบถามฟังก์ชัน html2canvas

โพสต์ที่ยังไม่ได้อ่าน โดย tsukasaz »

ลองกำหนดความสูงของ drag-container หรือยังครับ
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
ภาพประจำตัวสมาชิก
Thanapoom1514
PHP VIP Members
PHP VIP Members
โพสต์: 4329
ลงทะเบียนเมื่อ: 04/07/2022 9:46 am

Re: สอบถามฟังก์ชัน html2canvas

โพสต์ที่ยังไม่ได้อ่าน โดย 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%;
}
:gfb:
ภาพประจำตัวสมาชิก
Thanapoom1514
PHP VIP Members
PHP VIP Members
โพสต์: 4329
ลงทะเบียนเมื่อ: 04/07/2022 9:46 am

Re: สอบถามฟังก์ชัน html2canvas

โพสต์ที่ยังไม่ได้อ่าน โดย 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-1.png

ผลที่ดาวน์โหลดรูปได้
JavaScript & Jquery Ajax & Node.JS-2.png
JavaScript & Jquery Ajax & Node.JS-2.png (8.05 KiB) Viewed 995 times

แต่รูปภาพที่ได้ยังไม่เต็มหรือแสดงแค่บางส่วน ไม่ได้ตามที่ต้องการครับ
JavaScript & Jquery Ajax & Node.JS-3.png
JavaScript & Jquery Ajax & Node.JS-3.png (968.77 KiB) Viewed 995 times
แก้ไขล่าสุดโดย Thanapoom1514 เมื่อ 02/12/2022 1:47 pm, แก้ไขไปแล้ว 1 ครั้ง.
:gfb:
ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 21991
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: สอบถามฟังก์ชัน html2canvas

โพสต์ที่ยังไม่ได้อ่าน โดย 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
PHP VIP Members
โพสต์: 4329
ลงทะเบียนเมื่อ: 04/07/2022 9:46 am

Re: สอบถามฟังก์ชัน html2canvas

โพสต์ที่ยังไม่ได้อ่าน โดย Thanapoom1514 »

tsukasaz เขียน: 02/12/2022 11:37 am ขอตัว result ที่ได้จาก canvas.toDataURL('image/png') หน่อยครับ
อันนี้ใช่ไหมครับ
JavaScript & Jquery Ajax & Node.JS-1.png
JavaScript & Jquery Ajax & Node.JS-1.png (686.72 KiB) Viewed 987 times
:gfb:
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41232
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: สอบถามฟังก์ชัน html2canvas

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

ลองตัด html, css, javascritp เฉพาะ ส่วนที่ต้องการ ไฟล์ ใหม่สักไฟล์
และดูว่ามีปัญหาหรือเปล่า เพื่อตัด css, javascript ที่ไม่เกี่ยวข้องออกไปก่อน
ถ้าไม่มีปัญหา ค่อยๆ ทะยอยใส่ส่วนที่จำเป็นต้องใช้เพิ่มเข้าไปแล้วเช็คไปทีละตัว
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ภาพประจำตัวสมาชิก
Thanapoom1514
PHP VIP Members
PHP VIP Members
โพสต์: 4329
ลงทะเบียนเมื่อ: 04/07/2022 9:46 am

Re: สอบถามฟังก์ชัน html2canvas

โพสต์ที่ยังไม่ได้อ่าน โดย 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
JavaScript & Jquery Ajax & Node.JS-1.png (1.42 MiB) Viewed 731 times
:gfb:
ตอบกลับโพส

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 76