สามารถศึกษา หรือดูรายละเอียดเพิ่มเติม
ความสามารถของ สคริปนี้ยังมีข้อจำกัด
- สามารถรันได้เฉพาะบราวเซอร์ ที่รองรับ html5
- ข้อความภาษาไทย ที่มีการใช้วรรยุกต์ จะไม่แสดงตัวอักษร
- css style บางอันไม่สามารถใช้งานได้
- อื่นๆ
อย่างไรก็ดี ก็สามารถประยุกต์ใช้งานได้หลากหลาย ขึ้นกับความต้องการ
เช่น สร้างรูปแบบบัตรสมาชิก และแสดงข้อมูล ให้สมาชิกสามารถ ดาวน์โหลด
บัตรสมาชิก เป็นไฟล์ภาพได้ หรืออื่นๆ
การใช้งาน ให้ดาวน์โหลด ไฟล์ html2canvas.js ได้ที่
ในที่นี้จะมี 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>
