การใช้ html2canvas เพื่อใช้งานภาพหน้าจอของเบราว์เซอร์จะต้องถูกนำมาใช้ในสภาพแวดล้อมของเซิร์ฟเวอร์
ผลhtml2canvas สามารถจับภาพหน้าจอทางฝั่งเบราว์เซอร์ผ่าน JS ล้วนๆ ได้ แต่ต้องปรับปรุงความแม่นยำของภาพหน้าจอ และ CSS บางตัวไม่สามารถจดจำได้ ดังนั้นจึงไม่สามารถนำเสนอรูปแบบหน้าจอดั้งเดิมบนผืนผ้าใบได้อย่างสมบูรณ์แบบ
/*ไม่สามารถละเว้นการโอเวอร์โฟลว์หลายบรรทัดได้ แต่สามารถซ่อนได้เท่านั้น*/ .book_inf{ ตำแหน่ง: สัมพันธ์; ล้น: ซ่อนข้อความ: จุดไข่ปลา; จอแสดงผล: -webkit-line-clamp : 2; - webkit-box-orient: แนวตั้ง; เบราว์เซอร์ที่รองรับ /*พารามิเตอร์: * #screenshots รหัสองค์ประกอบของภาพหน้าจอที่จำเป็น ฟังก์ชันที่จะดำเนินการหลังจากถ่ายภาพหน้าจอ * สีพื้นหลังของรายการการกำหนดค่าสีพื้นหลัง * canvas เป็นผืนผ้าใบสุดท้ายที่ส่งคืนหลังจากถ่ายภาพหน้าจอ */function ภาพหน้าจอImg(){ html2canvas (document.querySelector( #screenshots),{ backgroundColor: 'transparent',//ตั้งค่าพื้นหลังให้โปร่งใส}).then(canvas => { canvasTurnImg(canvas) // วิธีการแปลงรูปแบบภาพที่บันทึกไว้}); } รายการการกำหนดค่าที่มีอยู่| ชื่อพารามิเตอร์ | พิมพ์ | ค่าเริ่มต้น | อธิบาย |
|---|---|---|---|
| อนุญาตให้มีเทน | บูลีน | เท็จ | ว่าจะอนุญาตให้รูปภาพแบบข้ามต้นทางทำให้ผืนผ้าใบเสียหายหรือไม่---อนุญาตแบบข้ามต้นทาง |
| พื้นหลัง | เชือก | #ffff | สีพื้นหลังของแคนวาส หากไม่มีการระบุไว้ใน DOM ตั้งค่าไม่ได้กำหนดสำหรับสีพื้นหลังแคนวาสแบบโปร่งใส หากไม่ได้ตั้งค่าสีขาวเริ่มต้น นี่คือกับดัก ฉันเปลี่ยนเป็นสีพื้นหลัง |
| ความสูง | ตัวเลข | โมฆะ | กำหนดความสูงของผืนผ้าใบเป็นพิกเซล หากเป็นโมฆะ แสดงผลด้วยความสูงเต็มหน้าต่าง---การตั้งค่าความสูงของผืนผ้าใบ |
| จดหมายRendering | บูลีน | เท็จ | จำเป็นต้องแสดงตัวอักษรแต่ละตัวแยกกันหรือไม่ จำเป็นหากใช้การเว้นวรรคตัวอักษร ---- มีประโยชน์เมื่อตั้งค่าระยะห่างระหว่างตัวอักษร |
| การบันทึก | บูลีน | เท็จ | ไม่ว่าจะบันทึกเหตุการณ์ในคอนโซล ---- ข้อมูลเอาต์พุตใน console.log() |
| พร็อกซี | เชือก | ไม่ได้กำหนด | URL ไปยังพร็อกซีที่จะใช้สำหรับการโหลดรูปภาพแบบข้ามต้นทาง หากปล่อยว่างไว้ รูปภาพแบบข้ามต้นทางจะไม่ถูกโหลด---ที่อยู่พร็อกซี |
| มีการทดสอบ | บูลีน | จริง | ว่าจะทดสอบแต่ละภาพว่าผืนผ้าใบเสียก่อนวาดภาพหรือไม่---ว่าจะทดสอบภาพก่อนเรนเดอร์หรือไม่ |
| หมดเวลา | ตัวเลข | 0 | ระยะหมดเวลาสำหรับการโหลดภาพ ในหน่วยมิลลิวินาที การตั้งค่าเป็น 0 จะส่งผลให้ไม่มีการหมดเวลา ---- ความล่าช้าในการโหลดภาพ ความล่าช้าเริ่มต้นคือ 0 ในหน่วยมิลลิวินาที |
| ความกว้าง | ตัวเลข | โมฆะ | กำหนดความกว้างของผืนผ้าใบเป็นพิกเซล หากเป็นโมฆะ แสดงผลด้วยความกว้างเต็มหน้าต่าง---ความกว้างของผืนผ้าใบ |
| ใช้ CORS | บูลีน | เท็จ | จะพยายามโหลดรูปภาพข้ามต้นทางเป็น CORS ที่ให้บริการหรือไม่ ก่อนที่จะเปลี่ยนกลับเป็นพร็อกซี--พร็อกซีข้ามต้นทาง |
1. แยกข้อมูลเมตาของภาพโดยตรงจากแคนวาส
// ส่งออกรูปภาพเป็นรูปแบบ PNG var type = 'png';
2. เปลี่ยน mime-type เป็น image/octet-stream เพื่อบังคับให้เบราว์เซอร์ดาวน์โหลดโดยตรง
/** * รับ mimeType * @param {String} พิมพ์ mime-type เก่า * @return the new mime-type */var _fixType = function(type) { type = type.toLowerCase().replace(/jpg/i , 'jpeg'); var r = type.match(/png|jpeg|bmp|gif/)[0]; return 'image/' + r;}; ข้อมูล แทนที่ mime typeimgData = imgData.replace(_fixType(type),'image/octet-stream');3. ดาวน์โหลดภาพลงในเครื่อง
/** * บันทึกไฟล์ในเครื่อง * ข้อมูล @param {String} ข้อมูลรูปภาพที่จะบันทึกในเครื่อง * @param {String} ชื่อไฟล์ชื่อไฟล์ */var saveFile = function(data, filename){ var save_link = document.createElementNS ('http //www.w3.org/1999/xhtml', 'a'); save_link.href = data; save_link.download = ชื่อไฟล์; document.createEvent('MouseEvents'); event.initMouseEvent('คลิก', จริง, เท็จ, หน้าต่าง, 0, 0, 0, 0, 0, เท็จ, เท็จ, เท็จ, เท็จ, 0, null); เหตุการณ์);}; // ชื่อไฟล์ที่ดาวน์โหลด var filename = 'baidufe_' + (new Date()).getTime() + '.' downloadsaveFile(imgData,ชื่อไฟล์);กรณี
กรณี
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network