รบกวนช่วนแนะนำเรื่อง Screenshorts ด้วย html2canvas
ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา รบกวนช่วนแนะนำเรื่อง Screenshorts ด้วย html2canvas
รบกวนช่วนแนะนำเรื่อง Screenshorts ด้วย html2canvas
Copy
ดูตัวอย่างการ Screenshorts ด้วย html2canvas จาก https://www.ninenik.com/จับภาพ_screenshots_บางส่วน_หรือทั้งเพจ_ด้วย_html2canvas_ใช้_html5-463.html
ซึ่งนำโค้ดที่มีมาปรับแต่งเล็กน้อย ปัญหาคือในเว็บของหนูที่ต้องการให้มีตัว Scrennshorts หน้าจอนั้น ตัว VDO ที่มีอยู่ไม่มีรูปขึ้น ซึ่งหนูต้องการแคปหน้า VDO หน้าสุดท้ายและ Save ออกไป หน้าเว็บที่มีปัญหาค่ะ https://drive.google.com/file/d/1epWG7MaCOVaKFb0xGDEgh0iJlkLBoXlJ/view?usp=sharing
ลิ้งค์เว็บที่ทำค่ะ http://testwp.rcheewaonline.com/test/
โค้ดที่ใช้ค่ะ
ซึ่งนำโค้ดที่มีมาปรับแต่งเล็กน้อย ปัญหาคือในเว็บของหนูที่ต้องการให้มีตัว Scrennshorts หน้าจอนั้น ตัว VDO ที่มีอยู่ไม่มีรูปขึ้น ซึ่งหนูต้องการแคปหน้า VDO หน้าสุดท้ายและ Save ออกไป หน้าเว็บที่มีปัญหาค่ะ https://drive.google.com/file/d/1epWG7MaCOVaKFb0xGDEgh0iJlkLBoXlJ/view?usp=sharing
ลิ้งค์เว็บที่ทำค่ะ http://testwp.rcheewaonline.com/test/
โค้ดที่ใช้ค่ะ
<link rel="stylesheet" type="text/css" href="_styles.css" media="screen"> <title>Fullscreen API | The CSS Ninja</title> <div id="content_page_data"> <div id="my_rectangle"> TEST SCREENSHOTS <iFrame src = "http://rcheewaonline.com/dropbox/test/story_html5.html" width= "100%" height="795px" frameborder ="0" scrolling = "yes" align = "center"></iFrame></div><image id="theimage"></image><button onclick="to_image()">Draw to Image</button> </div> <center><div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div><image id="theimage"></image> <center><div class="fl"><button id="fullscreeniframe" class="button button5">Fullscreen</button> </div></center> <script type="text/javascript" src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script> <script type="text/javascript"> html2canvas(document.getElementById("my_rectangle"),{ onrendered: function(canvas) { canvas.id = "someId"; canvas.style.display="none"; document.getElementById("content_page_data").appendChild(canvas); } }); function to_image(){ var canvas = document.getElementById("someId"); document.getElementById("theimage").src = canvas.toDataURL(); Canvas2Image.saveAsPNG(canvas); } </script> </body>
Vousmaei
02-05-2019
16:06:14
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ