PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


จับภาพ screenshots บางส่วน หรือทั้งเพจ ด้วย html2canvas ใช้ html5

21 January 2014 By Ninenik Narkdee
html2canvas screenshots javascript html5

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ html2canvas screenshots javascript html5



สามารถศึกษา หรือดูรายละเอียดเพิ่มเติม
ได้ที่ http://html2canvas.hertzen.com/
 
ความสามารถของ สคริปนี้ยังมีข้อจำกัด 
- สามารถรันได้เฉพาะบราวเซอร์ ที่รองรับ html5 
- ข้อความภาษาไทย ที่มีการใช้วรรยุกต์ จะไม่แสดงตัวอักษร
- css style บางอันไม่สามารถใช้งานได้
- อื่นๆ
 
อย่างไรก็ดี ก็สามารถประยุกต์ใช้งานได้หลากหลาย ขึ้นกับความต้องการ
เช่น สร้างรูปแบบบัตรสมาชิก และแสดงข้อมูล ให้สมาชิกสามารถ ดาวน์โหลด 
บัตรสมาชิก เป็นไฟล์ภาพได้ หรืออื่นๆ
 
การใช้งาน ให้ดาวน์โหลด ไฟล์ html2canvas.js ได้ที่
https://github.com/niklasvh/html2canvas/releases
 
ในที่นี้จะมี 2 ส่วน คือ 
ส่วนที่ 1 แปลง html เป็น canvas ใน html5
ส่วนที่ 2 แปลง canvas ให้เป็นรูปภาพ สามารถ คลิกขวา และบันทึก เป็น png ไฟล์ ได้
 
และใช้รูปแบบเรียกใช้งาน แบบ javascript แต่สามารถเอาไปประยุกต์ใช้งานกับ jQuery ได้

ตัวอย่าง

ทดสอบ มีข้อความภาษาไทย ไก่


 
คำอธิบายแสดงในโค้ดทั้งหมด

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
  #my_rectangle{
	display:block;
	border:1px dashed #333;
	width:180px;
	height:130px;
	background:#9CF url(images/logo_01_Tue.gif) center center no-repeat;
	color:#000;
  }
</style>
</head>  
<body>
<div id="content_page_data">

<div id="my_rectangle">ทดสอบ มีข้อความภาษาไทย ไก่ </div>
<br>
<image id="theimage"></image>
<br />
<button onclick="to_image()">Draw to Image</button>
 
</div>    

    
<!--<script type="text/javascript" src="js/html2canvas.js"></script>-->
<script type="text/javascript" src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>

<script type="text/javascript">
//ส่วนที่ 1 แปลง html เป็น canvas ใน html5
html2canvas(document.getElementById("my_rectangle"),{ //ต้องการแปลก div id เท่ากับ my_rectangle เป็น canvas
	onrendered: function(canvas) {// ฟังก์ชั่น เมื่อทำงานเสร็จ
		canvas.id = "someId"; // กำหนด id ให้กับ canvas นั้น เพื่ออ้างอิงใช้งานในภายหลัง
		canvas.style.display="none";// ซ่อน canvas นั้นไม่ต้องแสดง หรือจะแสดงก็ได้ โดยตัดบรรทัดนี้ออก
		document.getElementById("content_page_data").appendChild(canvas);// ให้ canvas ที่สร้างอยู่ใน div id ที่เรากำหนด
	}
});	  
// ส่วนที่ 2 แปลง canvas ให้เป็นรูปภาพ สามารถ คลิกขวา และบันทึก เป็น png ไฟล์ ได้
function to_image(){
	var canvas = document.getElementById("someId"); // เรียกใช้ canvas ที่ถูกสร้างขึ้น อ้างอิงตาม id ที่กำหนดก่อนหน้า
	document.getElementById("theimage").src = canvas.toDataURL();
	//นำ canvas แปลงเป็นข้อมูล url แล้วแสดงใน element img รูปภาพ
	Canvas2Image.saveAsPNG(canvas);//แสดงเป็นไฟล์รูปภาพ png
}		
</script>


  </body>
</html>






Tags:: html2canvas html5 javascript screenshots






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง