ก่อนหน้านี้เราสามารถจับภาพผ่านเครื่องมือจับภาพหน้าจออื่นๆ เท่านั้น ฟังก์ชั่นของเบราว์เซอร์สมัยใหม่มีประสิทธิภาพมากขึ้นเรื่อย ๆ ด้วยความนิยมอย่างค่อยเป็นค่อยไปของ H5 ทำให้เบราว์เซอร์สามารถจับภาพหน้าจอได้ html2canvas เป็นปลั๊กอินส่วนหน้า หลักการของมันคือการวาดโหนด Dom ใน Canvas แม้ว่าจะสะดวกมาก แต่ก็มีข้อจำกัดดังต่อไปนี้:
เนื่องจากสถานการณ์การใช้งานของฉันเรียบง่ายมาก ให้บันทึกข้อมูลข้อยกเว้น และหน้าข้อยกเว้นก็ถูกกำหนดด้วยตัวเองเช่นกัน ดังนั้น html2canvas ก็เพียงพอแล้วที่จะใช้
ครั้งแรกที่ฉันใช้ html2canvas จุดประสงค์คือเพื่อจับภาพหน้าจอของทั้งหน้าและสร้างภาพเพื่อให้ผู้ใช้บันทึก
ก่อนอื่นเรามาดูกันว่าการเรนเดอร์ HTML เป็นอย่างไร
จากรูปภาพที่เรนเดอร์ด้วย HTML คุณจะเห็นว่ารูปภาพด้านบนมีเอฟเฟกต์มุมโค้งมน แต่เมื่อฉันใช้ html2canvas เพื่อแปลงรูปภาพ ฉันพบว่าเอฟเฟกต์มุมโค้งมนของรูปภาพไม่หายไป
มันกลายเป็นแบบนี้ หลังจากคิดถึงวิธีแก้ปัญหาหลายอย่าง ในที่สุดฉันก็ตัดสินใจทำให้มุมโค้งมนด้านหลังเป็นภาพพื้นหลัง พื้นหลังของวงกลมตรงกลางมีความโปร่งใส จากนั้นจึงวางซ้อนบนภาพต้นฉบับผ่านการวางตำแหน่งสัมบูรณ์ ซึ่งเทียบเท่ากับการมาสก์ ผล.
แน่นอนว่าโหนด DOM ของรูปภาพมาส์กจะต้องอยู่ด้านล่างรูปภาพที่ต้องมีมุมโค้งมน คล้ายกัน
<div class=avatar_img fl><div class=avatar_img fl> <img src= id=you class=avatar_pp fl /><!--ภาพต้นฉบับที่ต้องใช้มุมโค้งมน--> <img src=/template/images/avatar .png class=img-responsive style=position: Absolute;><!--Mask image--></div>
เมื่อสร้างแล้วก็จะดูเป็นปกติ
<div class=avatar_img fl><div class=avatar_img fl> <img src= id=you class=avatar_pp fl /><!--ภาพต้นฉบับที่ต้องใช้มุมโค้งมน--> <img src=/template/images/avatar .png class=img-responsive style=position: Absolute;><!--Mask image--></div>คัดลอกรหัส