สามารถศึกษา หรือดูรายละเอียดเพิ่มเติม
ความสามารถของ สคริปนี้ยังมีข้อจำกัด
- สามารถรันได้เฉพาะบราวเซอร์ ที่รองรับ html5
- ข้อความภาษาไทย ที่มีการใช้วรรยุกต์ จะไม่แสดงตัวอักษร
- css style บางอันไม่สามารถใช้งานได้
- อื่นๆ
อย่างไรก็ดี ก็สามารถประยุกต์ใช้งานได้หลากหลาย ขึ้นกับความต้องการ
เช่น สร้างรูปแบบบัตรสมาชิก และแสดงข้อมูล ให้สมาชิกสามารถ ดาวน์โหลด
บัตรสมาชิก เป็นไฟล์ภาพได้ หรืออื่นๆ
การใช้งาน ให้ดาวน์โหลด ไฟล์ html2canvas.js ได้ที่
ในที่นี้จะมี 2 ส่วน คือ
ส่วนที่ 1 แปลง html เป็น canvas ใน html5
ส่วนที่ 2 แปลง canvas ให้เป็นรูปภาพ สามารถ คลิกขวา และบันทึก เป็น png ไฟล์ ได้
และใช้รูปแบบเรียกใช้งาน แบบ javascript แต่สามารถเอาไปประยุกต์ใช้งานกับ jQuery ได้
![]()
ตัวอย่าง
ทดสอบ มีข้อความภาษาไทย ไก่
คำอธิบายแสดงในโค้ดทั้งหมด
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><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 ใน html5html2canvas(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> |
