mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

添加对css的text-stroke属性的支持

Browse Source
This commit is contained in:
ysk2014 2020-08-26 16:21:12 +08:00
parent a38de5f461
commit 51bb0da805
5 changed files with 88 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
examples/demo3.html Normal file
View File

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<title>Text stroke tests</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
div span:first-child {
font-size: 2em;
}
div span:nth-child(2) {
font-size: 5em;
}
.stroke1 {
-webkit-text-stroke: .09em red;
font-size: 1em;
}
.stroke2 {
-webkit-text-stroke-width: .12em;
-webkit-text-stroke-color: green;
font-size: 2em;
box-shadow: 1px 1px #000;
}
.stroke3 {
-webkit-text-stroke-width: .19em;
-webkit-text-stroke-color: blue;
font-size: 3em;
}
body {
font-family: Arial;
}
</style>
</head>
<body>
<div class="stroke1">
Some text <span> with bigger text </span> that should have a stroke
<strong>Bolder stroke</strong> that makes things pretty
</div>
<script type="text/javascript" src="../dist/html2canvas.js"></script>
<script type="text/javascript">
html2canvas(document.body).then(function (canvas) {
document.body.appendChild(canvas);
});
</script>
</html>

9
src/css/index.ts
View File

@ -47,6 +47,8 @@ import {textAlign} from './property-descriptors/text-align';
import {position, POSITION} from './property-descriptors/position';
import {textShadow} from './property-descriptors/text-shadow';
import {textTransform} from './property-descriptors/text-transform';
import {textStrokeColor} from './property-descriptors/text-stroke-color';
import {textStrokeWidth} from './property-descriptors/text-stroke-width';
import {transform} from './property-descriptors/transform';
import {transformOrigin} from './property-descriptors/transform-origin';
import {visibility, VISIBILITY} from './property-descriptors/visibility';
@ -131,6 +133,8 @@ export class CSSParsedDeclaration {
textDecorationLine: ReturnType<typeof textDecorationLine.parse>;
textShadow: ReturnType<typeof textShadow.parse>;
textTransform: ReturnType<typeof textTransform.parse>;
textStrokeColor: Color;
textStrokeWidth: LengthPercentage;
transform: ReturnType<typeof transform.parse>;
transformOrigin: ReturnType<typeof transformOrigin.parse>;
visibility: ReturnType<typeof visibility.parse>;
@ -195,6 +199,8 @@ export class CSSParsedDeclaration {
this.textDecorationLine = parse(textDecorationLine, declaration.textDecorationLine);
this.textShadow = parse(textShadow, declaration.textShadow);
this.textTransform = parse(textTransform, declaration.textTransform);
this.textStrokeColor = parse(textStrokeColor, declaration.webkitTextStrokeColor);
this.textStrokeWidth = parse(textStrokeWidth, declaration.webkitTextStrokeWidth);
this.transform = parse(transform, declaration.transform);
this.transformOrigin = parse(transformOrigin, declaration.transformOrigin);
this.visibility = parse(visibility, declaration.visibility);
@ -261,7 +267,8 @@ export class CSSParsedCounterDeclaration {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const parse = (descriptor: CSSPropertyDescriptor<any>, style?: string | null) => {
const tokenizer = new Tokenizer();
const value = style !== null && typeof style !== 'undefined' ? style.toString() : descriptor.initialValue;
const value =
style !== null && typeof style !== 'undefined' && style != '' ? style.toString() : descriptor.initialValue;
tokenizer.write(value);
const parser = new Parser(tokenizer.read());
switch (descriptor.type) {

9
src/css/property-descriptors/text-stroke-color.ts Normal file
View File

@ -0,0 +1,9 @@
import {IPropertyTypeValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
export const textStrokeColor: IPropertyTypeValueDescriptor = {
name: `-webkit-text-stroke-color`,
initialValue: 'transparent',
prefix: false,
type: PropertyDescriptorParsingType.TYPE_VALUE,
format: 'color'
};

8
src/css/property-descriptors/text-stroke-width.ts Normal file
View File

@ -0,0 +1,8 @@
import {IPropertyTypeValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
export const textStrokeWidth: IPropertyTypeValueDescriptor = {
name: '-webkit-text-stroke-width',
initialValue: '0',
type: PropertyDescriptorParsingType.TYPE_VALUE,
prefix: false,
format: 'length-percentage'
};

9
src/render/canvas/canvas-renderer.ts
View File

@ -233,6 +233,15 @@ export class CanvasRenderer {
}
});
}
if (styles.textStrokeWidth && styles.textStrokeColor && text.text.trim().length) {
this.ctx.strokeStyle = asString(styles.textStrokeColor);
this.ctx.lineWidth = getAbsoluteValue(styles.textStrokeWidth, text.bounds.width);
this.ctx.strokeText(text.text, text.bounds.left, text.bounds.top + text.bounds.height);
this.ctx.strokeStyle = '';
this.ctx.lineWidth = 0;
}
});
}