PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

21 January 2014 By


สามารถศึกษา หรือดูรายละเอียดเพิ่มเติม
ได้ที่ 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:: html5 javascript html2canvas screenshots





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