This article and we share the main front-end Html2canvas related content, hope that through the sharing of this article to everyoneLearn the Web front endhelpful.
Html2canvas is a library that generates canvas for HTML elements, and most of the canvas's styles are consistent with CSS. For example, the cutoff 1.0.0-alpha.12, the dashed border is still drawn as a solid line, Border-collapse still have problems.
here, based on a thought in GitHub issues, the dashed border effect is simulated.
applicable: More individual borders, that is, not a full border, and do not consider Border-radius
1. First, before Html2canvas draw, find out the direction and position of all the dashed borders in the elements that need to be drawn in the 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, I have the dashed border is the TD element, so find all TD elements, use the getComputedStyle () method to find its BorderStyle, if it has a dashed border, Then the value of this property is in the form "dashed dashed none none", so according to FindAll () This custom method finds all dashed directions (such as "dashed dashed none none" will return [0, 1]), Where the Dashedborder array is as follows:
const Dashedborder = ["Top", "right", "Bottom", "left"];
after locating the azimuth and acquiring its position, the direction and position information is stored in the Borders array, and the border is made transparent so that Html2canvas does not draw the box, and we will handle it separately. (Note: The dashed border of this page will be transparent, this does not consider the transparent border back to the original color after drawing is completed)
2, using Html2canvas to get the canvas after drawing
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 is all the elements of the canvas that need to be drawn, and when we get the dashed border of each page, we get the page position at the same time so that when we draw the dashed border we get the position of the border relative to the page. After Html2canvas to draw the canvas, we use the Drawdashedborder () method to further draw the dashed border, the following implementation of this method.
3. Drawdashedborder () draw a dashed line further 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) * *;
var right = (border.rect.right-0.5-parentrect.left) * *;
var top = (border.rect.top + 0.5-parentrect.top) * *;
var bottom = (border.rect.bottom-0.5-parentrect.top) * *;
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 according to the direction and position information of the dashed border in the borders, the dotted line is drawn using the Setlinedash method after getting the 2d context in the canvas. Location is because we used to use twice times the size of canvas.
4, this method is currently only available in the Chrome test, Firefox is invalid, because Firefox under getComputedStyle returned information and chrome different.
Source: Network
Html2canvas How do I implement a dashed dashed border?
