การใช้ภาพหน้าจอ JavaScript ฉันอยากจะแนะนำสองส่วนประกอบโอเพ่นซอร์สที่นี่: หนึ่งคือ Canvas2Image ซึ่งสามารถตั้งโปรแกรมการวาดภาพการวาดภาพและการเขียนโปรแกรม PNG/JPEG/BMP; แต่การมีคนเดียวไม่เพียงพอ เราจำเป็นต้องถ่ายภาพหน้าจอของ DOM ใด ๆ (อย่างน้อยส่วนใหญ่) ซึ่งต้องใช้ HTML2Canvas ซึ่งสามารถแปลงวัตถุ DOM ให้เป็นวัตถุผ้าใบ การรวมฟังก์ชั่นของทั้งสองคุณสามารถถ่ายภาพหน้าจอ DOM บนหน้าลงในภาพ PNG หรือ JPEG ซึ่งเจ๋งมาก
Canvas2Image
หลักการของมันคือการใช้วัตถุ HTML5 Canvas เพื่อจัดหา API todataurl ():
การคัดลอกรหัสมีดังนี้:
var strdatauri = ocanvas.todataurl ();
// ส่งคืน "ข้อมูล: ภาพ/png; base64, ivborw0kggoaaaaansuheugaaamgaaadicayaaact ... "
ผลที่ได้คือการเข้ารหัส Base64 (อันที่จริงแล้วภาพยังสามารถเขียนลงในหน้าด้วยวิธีนี้ในรูปแบบของสตริง) ดังนั้นเราจึงต้องใช้ LIB ที่เข้ารหัส base64
อย่างไรก็ตามมีข้อบกพร่องมากมายในปัจจุบัน ตัวอย่างเช่น Opera และ Safari รองรับ PNG เท่านั้นในขณะที่ Firefox นั้นให้การสนับสนุนที่ดีกว่ามาก
มีสองวิธีในการเขียนรูปภาพไปยังหน้า หนึ่งคือการสร้างวัตถุภาพที่จะเขียนลงในหน้าทรี DOM ซึ่งเป็นวิธีการสนับสนุนที่ดีกว่า:
การคัดลอกรหัสมีดังนี้:
// ส่งคืนองค์ประกอบ <IMG> ที่มีรูปภาพ PNG ที่แปลงแล้ว
var oimgpng = canvas2image.saveaspng (ocanvas, true);
แต่ถ้าคุณทำฟังก์ชั่นภาพหน้าจอ JavaScript คุณอาจต้องการเปิดกล่องโต้ตอบ "บันทึก" โดยอัตโนมัติสำหรับการบันทึกไฟล์หลังจากภาพหน้าจอ:
การคัดลอกรหัสมีดังนี้:
Canvas2Image.saveaspng (Ocanvas);
// จะแจ้งให้ผู้ใช้บันทึกภาพเป็น PNG
การเรียกใช้วิธีนี้จะสร้างสตรีมข้อมูลด้วย mimetype "image/octet-stream" ไปยังเบราว์เซอร์ แต่กล่องโต้ตอบ "บันทึก" ไม่สามารถจดจำชื่อคำต่อท้ายที่เหมาะสมของภาพได้ ไฟล์ที่บันทึกเริ่มต้นเรียกว่า "xxx.part" ภายใต้ Firefox นี่เป็นเรื่องน่าเสียดาย แต่ดูเหมือนจะไม่มีทางออกที่ดี
html2canvas
มันทำหน้าที่ในกระบวนการโหลด DOM รวบรวมข้อมูลในนั้นแล้ววาดภาพผ้าใบ กล่าวอีกนัยหนึ่งมันไม่ได้ตัดทรี DOM ที่แสดงลงในภาพผืนผ้าใบ แต่แทนที่จะวาดภาพผืนผ้าใบอีกครั้งตามต้นไม้ DOM ดังนั้นรูปแบบ CSS จำนวนมากไม่สามารถระบุได้อย่างถูกต้องและไม่สามารถสะท้อนได้อย่างถูกต้องในรูป
มีข้อ จำกัด อื่น ๆ อีกมากมายเช่น:
● JavaScript ต้องเป็นโดเมนเดียวกัน สำหรับสถานการณ์ข้ามโดเมนคุณต้องใช้พร็อกซีเซิร์ฟเวอร์ (มีพารามิเตอร์ใน API ที่สามารถระบุได้) และสิ่งเดียวกันนี้เป็นจริงสำหรับรูปภาพ
●ต้นไม้ DOM ในเฟรมไม่สามารถวาดได้อย่างถูกต้อง
●เนื่องจากคุณต้องการวาดแผนภาพผืนผ้าใบเบราว์เซอร์เช่น IE8 จำเป็นต้องใช้ไลบรารีของบุคคลที่สามเช่น FlashCanvas
หน้านี้สามารถทดสอบผลกระทบของการใช้งานกับภาพหน้าจอในแต่ละเว็บไซต์และเอฟเฟกต์ค่อนข้างดี:
ตัวอย่างการใช้ API:
การคัดลอกรหัสมีดังนี้:
html2canvas (
[DOM1, DOM2],
-
การบันทึก: เท็จ
ผู้ใช้: เท็จ
พร็อกซี: เท็จ
onrendered: ฟังก์ชั่น (ผ้าใบ) {
// Canvas เป็นวัตถุที่วาด
-
-
-
สำหรับไลบรารีคลาสที่ค่อนข้างเฉพาะประเภทนี้เอกสารนี้แย่มากรวมถึงคำจำกัดความของ API ซึ่งต้องอ่านซอร์สโค้ดและเขียนไว้อย่างชัดเจนในรหัส
นอกจากนี้ยังมีปลั๊กอิน jQuery ในแพ็คเกจดาวน์โหลดของเว็บไซต์นี้ซึ่งได้ห่อหุ้ม API นี้และสามารถละเว้นได้