รบกวนช่วนแนะนำเรื่อง Screenshorts ด้วย html2canvas

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา รบกวนช่วนแนะนำเรื่อง Screenshorts ด้วย html2canvas

รบกวนช่วนแนะนำเรื่อง Screenshorts ด้วย html2canvas

ดูตัวอย่างการ 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/
โค้ดที่ใช้ค่ะ

<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

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

ตัว VDO จะอยู่ใน IFrame ค่ะ

vousmaei 02-05-2019 16:06

ความคิดเห็นที่ 2

ถ้าเป็น video เหมือนจตะไม่ได้ น่าจะเป็นข้อจำกัด อาจจะต้องหาวิธี หรือแนวทางอื่น

ninenik 02-05-2019

ความคิดเห็นที่ 3

ลองดูตัวอย่างการประยุกต์นี้เป็นแนวทาง

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <title>Document</title> 
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.1.0/dist/css/bootstrap.min.css" >

</head>
<body>

 <div style="margin:auto;width:100%;text-align:center;">
 <br>
<br>
กดปุ่ม PrintScr แล้วกด Ctrl+v<br>
 <div>
    <div style="text-align:center;">
    <iframe width="700" height="400" class="video" src="https://www.youtube.com/embed/CX17qmYO0o0">
</iframe>
      </div>
 <button type="button" class="btn-capture" id="shareButton" style="display:none;">Share</button>     
 &nbsp;       
 <button type="button" class="btn-capture" id="submitGraphic" style="display:none;">Capture</button>      
 &nbsp;
 <button type="button" class="btn-capture" id="resetGraphic" style="display:none;">Reset</button>     
</div>

<div class="place_capture" style="text-align:center;">

</div>
</div>

 <canvas style="border:1px solid grey;height:100%;width:100%;background-color:#FFFFFF;display:none;" id="mycanvas">

<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script type="text/javascript">
var blob = null;
// เมื่อกด Ctrl + V เพื่อวางรูปที่ print screen ไว้
document.addEventListener("paste", function(e){
	var items = e.clipboardData.items;		
	for (var i = 0; i < items.length; i++) {
		if (items[i].type.indexOf("image") == -1) continue;
		blob = items[i].getAsFile();
		var canvasPV = document.getElementById("mycanvas");
		var ctxPV = canvasPV.getContext('2d');		

		var img = new Image();

		img.onload = function(){
			canvasPV.width = this.width;
			canvasPV.height = this.height;
			ctxPV.drawImage(img, 0, 0);
			$(".btn-capture").show();
		};
		var URLObj = window.URL || window.webkitURL;
		img.src = URLObj.createObjectURL(blob);					
				
	}			  
}, false);
$(function(){

	// กำหนดให้ขนาด canvas เท่าหน้าจอคอม
	$("#mycanvas").width(screen.width).height(screen.height);	
	
	// เมื่อกดปุ่ม Capture
	$("#submitGraphic").click(function(){
		// กำหนดขนาดของรูปที่ต้องการ
		var targetW = 800;
		var targetH = 500;
		// เลือก canvas ที่จะใช้งาน
		var canvas = document.getElementById("mycanvas");
		// canvas context
		var context = canvas.getContext("2d");
		// ดึงข้อมูลของรูปตามจุดและตำแหน่งบริเวณที่ต้องการ จากรูปเต็ม
		var _x = (screen.width - targetW) / 2;  // คำนวณ ตำแหน่งเริ่มต้น x
		var _y = $(".video").offset().top-$(window).scrollTop();  // คำนวนตำแหน่งเริ่มต้น y
		var data = context.getImageData(_x, _y, targetW, targetH);
		
		// สร้าง canvas  ขั่วคราว ที่มีขนาดรูปใหม่
		var tempCanvas = document.createElement("canvas"),
			tCtx = tempCanvas.getContext("2d");
	
		tempCanvas.width = targetW;
		tempCanvas.height = targetH;
	
	//	tCtx.drawImage(canvas,0,0);
		tCtx.putImageData(data,0,0); // สร้างรูปจากเฉพาะบริเวณที่ต้องการ
	
		// แปลงข้อมูลเป็นรูป
		var img = tempCanvas.toDataURL("image/png");
		$( ".place_capture" ).html('<img style="margin:auto;" src="'+img+'"/>'); // แสดงรูป
		$(this).fadeOut(); // ซ่อนปุ่ม capture
	});
	// เมื่อทำการ reset
	$("#resetGraphic").click(function(){
		$(".btn-capture").hide();  // ซ่อนทุกปุ่ม
		$( ".place_capture" ).html(''); // ไม่แสดงรูป
	});

});
</script>
</body>
</html>

ตัวอย่าง

กดปุ่ม PrintScr แล้วกด Ctrl+v

ninenik 02-05-2019

ความคิดเห็นที่ 4

ขอบคุณค่ะ เดี๋ยวจะลองดูนะคะ

vousmaei 04-05-2019 10:57

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน