html2canvas เป็นไลบรารีที่สร้างแคนวาสจากองค์ประกอบ html สไตล์ส่วนใหญ่ของแคนวาสที่วาดนั้นสอดคล้องกับ CSS ตัวอย่างเช่น ในเวอร์ชัน 1.0.0-alpha.12 เส้นขอบประยังคงถูกวาดเป็นเส้นทึบ และยังคงมีปัญหาเกี่ยวกับการยุบเส้นขอบ
ตามแนวคิดในประเด็น GitHub เอฟเฟกต์เส้นขอบประจะถูกจำลองที่นี่
สถานการณ์ที่ใช้งานได้: มีขอบเขตแยกกันมากมาย กล่าวคือ ไม่ใช่ขอบเขตที่สมบูรณ์ และไม่พิจารณารัศมีของเส้นขอบ
1. ขั้นแรก ก่อนที่จะวาด html2canvas ให้ค้นหาทิศทางและตำแหน่งของเส้นขอบประทั้งหมดในองค์ประกอบที่ต้องวาดบนผืนผ้าใบ findDashedBorders = (หน้า) => { const tds = page.querySelectorAll(td); const borders = []; tds.forEach(td => { const computedStyle(td); const borderStyle = computedStyle.borderStyle ? computedStyle .borderStyle.split(' ') : []; const dashedIndex = findAll(borderStyle, 'dashed'); if (dashedIndex.length) { const rect = td.getBoundingClientRect(); dashedIndex.map(index => { const border = { ตรง, เส้นขอบ: dashedBorder[index] } borders.push( เส้นขอบ); td.style[`border${dashedBorder[index]}Color`] = 'โปร่งใส' }); }); ส่งคืนเส้นขอบ;Page เป็นองค์ประกอบที่ต้องวาด Canvas องค์ประกอบ td ทั้งหมดที่มีเส้นขอบเป็นเส้นประที่นี่คือองค์ประกอบ td ดังนั้นให้ค้นหาองค์ประกอบ td ทั้งหมดและใช้เมธอด getComputedStyle() เพื่อค้นหา borderStyle หากมีเส้นขอบเป็นเส้นประ ของแอตทริบิวต์นี้อยู่ในรูปของ dashed dashed none none ดังนั้นให้ค้นหาทิศทางของ dashed ทั้งหมดตามเมธอดที่กำหนดเอง findAll() (เช่น dashed dashed none none จะส่งคืน [0, 1]) โดยที่อาร์เรย์ dashedBorder เป็นดังนี้ : :
const dashedBorder = [บน ขวา ล่าง ซ้าย];
หลังจากค้นหาทิศทางแล้ว รับตำแหน่งพร้อมกัน เก็บข้อมูลทิศทางและตำแหน่งลงในอาร์เรย์เส้นขอบ และตั้งค่าเส้นขอบนี้ให้โปร่งใสเพื่อไม่ให้ html2canvas วาดกล่องนี้แยกกันในภายหลัง (หมายเหตุ: เส้นประบนหน้านี้จะกลายเป็นสีโปร่งใสทั้งหมด เราไม่พิจารณาเปลี่ยนเส้นขอบโปร่งใสกลับเป็นสีเดิมหลังจากวาดเสร็จ)
2. ใช้ html2canvas เพื่อรับผืนผ้าใบที่วาด Pages.forEach((page, idx) => { const borders = this.findDashedBorders(page); const parentRect = page.getBoundingClientRect(); html2canvas(page, {scale: 2, logging: false, useCORS: true}) แล้ว((canvas) => { this.drawDashedBorder(canvas, borders, parentRect); ... })})หน้าเป็นองค์ประกอบทั้งหมดที่ต้องวาดบนผืนผ้าใบ เมื่อเราได้รับเส้นขอบประของแต่ละหน้า เราก็จะได้ตำแหน่งของหน้านี้ด้วย เพื่อว่าเมื่อเราวาดเส้นขอบประ เราจะได้ตำแหน่งของเส้นขอบที่สัมพันธ์กับ หน้านี้ หลังจากที่ html2canvas วาดแคนวาส เราจะวาดเส้นขอบประเพิ่มเติมโดยใช้เมธอด DrawDashedBorder()
3. DrawDashedBorder() วาดเส้นประเพิ่มเติมหลังจากได้รับผืนผ้าใบ DrawDashedBorder = (ผ้าใบ, เส้นขอบ, parentRect) => { var ctx = canvas.getContext(2d); ctx.setLineDash([6, 3]); ctx. strokeStyle = '#3089c7'; globalAlpha = 1; borders.forEach (เส้นขอบ => { var left = (border.rect.left + 0.5 - parentRect.left)*2; var right = (border.rect.right - 0.5 - parentRect.left)*2; var top = (border.rect.top + 0.5 - parentRect.top)*2; = (border.rect.bottom - 0.5 - parentRect.top)*2; สวิตช์ (border.border) { กรณี 'ด้านบน': ctx.beginPath(); ctx.moveTo(ซ้าย, บนสุด); ctx.lineTo (ขวา, บนสุด); ctx.lineTo(ขวา, ล่าง); ctx. stroke(); ctx.moveTo(ซ้าย, ล่าง); ctx.lineTo(ขวา, ล่าง); ctx.lineTo( ซ้าย, ล่าง); ctx. stroke(); ค่าเริ่มต้น: แบ่ง;ซึ่งหมายความว่า ตามข้อมูลทิศทางและตำแหน่งของเส้นขอบประในเส้นขอบ รับบริบท 2D ในแคนวาส และใช้เมธอด setLineDash เพื่อวาดเส้นประ ตำแหน่ง *2 เพราะเมื่อก่อนเราใช้ขนาดแคนวาสถึง 2 เท่า
4. ขณะนี้วิธีนี้ใช้ได้กับการทดสอบ Chrome เท่านั้น และไม่ถูกต้องสำหรับ Firefox เนื่องจากข้อมูลที่ส่งคืนโดย getComputedStyle ภายใต้ Firefox นั้นแตกต่างจากข้อมูลใน Chrome
เนื่องจากฉันไม่มีความเข้าใจอย่างลึกซึ้งเกี่ยวกับ Canvas และฉันไม่สามารถประชาสัมพันธ์ได้ ฉันจึงได้แต่ตั้งตารอที่จะมีการใช้งาน html2canvas อย่างเป็นทางการ
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network