html2canvas is a library that generates canvas from html elements. Most of the styles of the drawn canvas are consistent with CSS. For example, as of 1.0.0-alpha.12, the dotted border is still drawn as a solid line, and there is still a problem with border-collapse.
Here, based on an idea in github issues, the dashed border effect is simulated.
Applicable situation: There are many separate borders, that is, it is not a complete border, and border-radius is not considered.
1. First, before drawing html2canvas, find out the direction and position of all dotted borders in the elements that need to be drawn on canvas. findDashedBorders = (page) => { const tds = page.querySelectorAll(td); const borders = []; tds.forEach(td => { const computedStyle = window.getComputedStyle(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 = { rect, border: dashedBorder[index] } borders.push( border); td.style[`border${dashedBorder[index]}Color`] = 'transparent'; }); } }); return borders; }Page is the element that needs to draw the canvas. All the td elements with dashed borders here are td elements, so find all td elements and use the getComputedStyle() method to find their borderStyle. If it has a dashed border, then the value of this attribute is in the form of dashed dashed none none, so find all dashed directions according to the custom method findAll() (for example, dashed dashed none none will return [0, 1]), where the dashedBorder array is as follows:
const dashedBorder = [Top, Right, Bottom, Left];
After finding the direction, obtain its position at the same time, store the direction and position information into the borders array, and set this border to transparent so that html2canvas does not draw this box. We will handle it separately later. (Note: The dotted borders on this page will all become transparent. We do not consider changing the transparent borders back to their original colors after the drawing is completed)
2. Use html2canvas to get the drawn canvas pages.forEach((page, idx) => { const borders = this.findDashedBorders(page); const parentRect = page.getBoundingClientRect(); html2canvas(page, {scale: 2, logging: false, useCORS: true}). then((canvas) => { this.drawDashedBorder(canvas, borders, parentRect); ... })})Pages are all elements that need to be drawn on canvas. When we obtain the dashed border of each page, we also obtain the position of this page, so that when we draw the dashed border, we can get the position of the border relative to this page. After html2canvas draws the canvas, we further draw the dashed border through the drawDashedBorder() method. This method is implemented below.
3. drawDashedBorder() further draws the dashed line after getting the canvas. drawDashedBorder = (canvas, borders, parentRect) => { var ctx = canvas.getContext(2d); ctx.setLineDash([6, 3]); ctx.strokeStyle = '#3089c7'; ctx.lineWidth = 1; ctx. globalAlpha = 1; borders.forEach(border => { 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; var bottom = (border.rect.bottom - 0.5 - parentRect.top)*2; switch (border.border) { case 'Top': ctx.beginPath(); ctx.moveTo(left, top); ctx.lineTo(right, top); ctx.stroke(); break; case 'Right': ctx.beginPath(); ctx.moveTo(right, top ); ctx.lineTo(right, bottom); ctx.stroke(); break; case 'Bottom': ctx.beginPath(); ctx.moveTo(left, bottom); ctx.lineTo(right, bottom); ctx.stroke(); break; case 'Left': ctx.beginPath(); ctx.moveTo(left, top); ctx.lineTo( left, bottom); ctx.stroke(); break; default: break; } }) }This means that based on the direction and position information of the dashed border in borders, obtain the 2D context in the canvas and use the setLineDash method to draw the dashed line. The positions are *2 because we used 2 times the canvas size before.
4. This method is currently only available for chrome testing and is invalid for firefox because the information returned by getComputedStyle under firefox is different from that in chrome.
Since I don’t have a deep understanding of canvas and I can’t PR, I can only look forward to the official implementation of html2canvas.
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.