HTML5 ใช้ HTML2CANVAS สำหรับตัวอย่างภาพหน้าจอเบราว์เซอร์

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-02-27 10:32:02

เมื่อเร็ว ๆ นี้เพื่อแก้ไขบันทึกข้อมูลที่ผิดปกติโดยรวมโครงการได้ศึกษาฟังก์ชั่นภาพหน้าจอเต็มรูปแบบของเบราว์เซอร์เพื่อให้ผู้ใช้สามารถถ่ายภาพหน้าจอได้อย่างรวดเร็วและส่งไปยังผู้ดูแลระบบเมื่อพบความผิดปกติ ข้อมูลที่ดีที่สุดที่บันทึกไว้ในบันทึกสุดท้ายมีดังนี้

รู้เบื้องต้นเกี่ยวกับ html2canvas

ในอดีตเราสามารถสกัดกั้นภาพผ่านเครื่องมือภาพหน้าจออื่น ๆ เท่านั้น ฟังก์ชั่นของเบราว์เซอร์ที่ทันสมัยนั้นแข็งแกร่งขึ้นและแข็งแกร่งขึ้น HTML2CANVAS เป็นปลั๊กด้านหน้าและหลักการของมันคือการวาดโหนด DOM ในผืนผ้าใบ แม้ว่าจะสะดวก แต่ก็มีขีด จำกัด ดังต่อไปนี้:

ไม่สนับสนุน iframe
อย่ารองรับภาพข้ามโดเมน
ไม่สามารถใช้ในปลั๊กเบราว์เซอร์ใน
เบราว์เซอร์บางตัวไม่รองรับรูปภาพ SVG
อย่ารองรับแฟลช
ไม่สนับสนุนเบราว์เซอร์โบราณและเช่นคุณต้องการยืนยันว่าเบราว์เซอร์ได้รับการสนับสนุนคุณสามารถใช้เพื่อเข้าถึง http://deerface.sinaapp.com/

เนื่องจากสถานการณ์การใช้งานของฉันนั้นง่ายมันจึงถูกกำหนดโดยตัวเองและหน้าผิดปกติก็ถูกกำหนดโดยตัวฉันเองดังนั้น html2canvas ก็เพียงพอแล้ว

ใช้อินสแตนซ์

อ้างถึง jQuery, html2canvas สามารถใช้และรหัสนั้นง่าย ฉันใช้ HTML2CANVAS 0.5.0 เวอร์ชันที่นี่

 html2canvas (#tbl_exception), {onrendered: function (canvas) {var url = canvas.todataurl (); pngto (body);

พารามิเตอร์แรกคือวัตถุ DOM ไปยังภาพหน้าจอและพารามิเตอร์ที่สองจะแสดงผลหลังจากการกู้คืนผ้าใบ

ชื่อ	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
อนุญาตให้ใช้	บูลีน	เท็จ	ไม่ว่าจะอนุญาตให้ภาพข้ามต้นกำเนิดถูกทำให้ผ้าใบ
พื้นหลัง	สาย	#FFF	สีพื้นหลังของผ้าใบหากไม่มีตัวเลือกใน DOM
ความสูง	ตัวเลข	โมฆะ	กำหนด heigt ของผ้าใบในพิกเซล
การส่งจดหมาย	บูลีน	เท็จ	ไม่ว่าจะเป็นตัวอักษรแต่ละตัวแยกกัน
การตัดไม้	บูลีน	เท็จ	ไม่ว่าจะเป็นบันทึกเหตุการณ์ในคอนโซล
พร็อกซี	สาย	ไม่ได้กำหนด	URL ไปยังโครงการจะใช้สำหรับการโหลดภาพข้ามต้นกำเนิด
น่าเบื่อหน่าย	บูลีน	จริง	ไม่ว่าจะทดสอบแต่ละภาพหรือไม่
การหมดเวลา	ตัวเลข	0	การหมดเวลาสำหรับการโหลดภาพในมิลลิวินาทีการตั้งค่าเป็น 0 จะส่งผลให้ไม่มีการหมดเวลา
ความกว้าง	ตัวเลข	โมฆะ	กำหนดความกว้างของผืนผ้าใบในพิกเซล
ผู้ใช้	บูลีน	เท็จ	ไม่ว่าจะพยายามโหลดภาพข้ามแหล่งกำเนิดเป็น CORS Servad ก่อนที่จะกลับไปเป็นพร็อกซี

การวิเคราะห์ปัญหา

หลังจากแนะนำเมื่อคุณพูดถึงปัญหาที่คุณพบในการใช้งานภาพหน้าจอสามารถสกัดกั้นเนื้อหาบนหน้าจอปัจจุบันเท่านั้น ค้นหาวิธีแก้ปัญหาหลังจากตรวจสอบปลีกซอร์สโค้ดและการดีบัก ใส่ซอร์สโค้ดและรหัสที่แก้ไขด้านล่าง

ซอร์สโค้ด:

 RESTOR RENDERDOCUMENT (NODE.OWNERDOCUME, ตัวเลือก, Node.OwnerDocument.defaultView.innerWidth, Node.OwnerDocumew.innerHeight, inde x) ) (ตัวเลือกที่ไม่ได้รับการคัดเลือก, HTML2CANVAS return, เป็นสัญญาที่มีผืนผ้าใบ);

แก้ไขรหัส:

 // 2016-02-18 แก้ไขซอร์สโค้ดเพื่อแก้ปัญหาพารามิเตอร์ที่ไม่สามารถใช้เพื่อเพิ่มความกว้างที่กำหนดเองไปยังหน้าจอเต็มรูปแบบเพื่อรองรับความกว้าง var = ตัวเลือก ! ) {log (opotions.onrendered เลิกใช้แล้ว html2canvas ส่งคืนสัญญาที่มีผืนผ้าใบ);

ส่วนใหญ่จะอนุญาตให้ผู้ใช้ปรับแต่งความกว้างและความสูงของวัตถุ DOM เมื่อโทร

 $ (#BTN_SCREEN) .ON (คลิก, ฟังก์ชัน () {HTML2CANVAS ($ (#TBL_EXPECTION), {ความสูง: $ (#TBL_EXPECTION) .OUTERHEIGHT () + 20, onRendered: fuins. TODATAURL (); [0] .click ();

สรุป

ผ่านปลั๊กด้านหน้า -ฟังก์ชั่นหน้าจอเต็มรูปแบบของเบราว์เซอร์ถูกนำมาใช้ การเรียนรู้ของทุกคนฉันหวังว่าทุกคนจะสนับสนุน Vevb Wulin.com