mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
Compare commits
1 Commits
Author | SHA1 | Date | |
---|---|---|---|
a7f5c99baa |
22
CHANGELOG.md
22
CHANGELOG.md
@ -2,28 +2,6 @@
|
||||
|
||||
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
||||
|
||||
## [1.1.4](https://github.com/niklasvh/html2canvas/compare/v1.1.3...v1.1.4) (2021-07-15)
|
||||
|
||||
|
||||
### feat
|
||||
|
||||
* add support for webkit-text-stroke and paint-order (#2591) ([522e5aa](https://github.com/niklasvh/html2canvas/commit/522e5aac5fdad090953d095b5d558053a5e2d43d)), closes [#2591](https://github.com/niklasvh/html2canvas/issues/2591)
|
||||
|
||||
### fix
|
||||
|
||||
* don't copy 'all' css property (#2586) ([fa60716](https://github.com/niklasvh/html2canvas/commit/fa60716d07ed590ec64543a586a7960cbc8557df)), closes [#2586](https://github.com/niklasvh/html2canvas/issues/2586)
|
||||
* svg d path getting truncated on copy (#2589) ([dd6d885](https://github.com/niklasvh/html2canvas/commit/dd6d8856eca820a13a0990c467b9e531433fd4a9)), closes [#2589](https://github.com/niklasvh/html2canvas/issues/2589)
|
||||
* text position for form elements and list markers (#2588) ([cd99f11](https://github.com/niklasvh/html2canvas/commit/cd99f11b1b9eb1260a548a63e2a370a0a5ddafa0)), closes [#2588](https://github.com/niklasvh/html2canvas/issues/2588)
|
||||
* this.canvas.ownerDocument is undefined (#2590) ([45efe54](https://github.com/niklasvh/html2canvas/commit/45efe54da8145f97b9ee0463e686103280e3c8b1)), closes [#2590](https://github.com/niklasvh/html2canvas/issues/2590)
|
||||
* word-break seperators (#2593) ([e9f7f48](https://github.com/niklasvh/html2canvas/commit/e9f7f48d571304be14610a181feedca3c3b42864)), closes [#2593](https://github.com/niklasvh/html2canvas/issues/2593)
|
||||
|
||||
### test
|
||||
|
||||
* refactor language tests (#2594) ([4c360fc](https://github.com/niklasvh/html2canvas/commit/4c360fc1f059f4dcab71a79f9dc8a5b2e25411ea)), closes [#2594](https://github.com/niklasvh/html2canvas/issues/2594)
|
||||
* update box-shadow with radius ([578bb77](https://github.com/niklasvh/html2canvas/commit/578bb771bfeb7e81362e9e355d6cc9ae910e3920))
|
||||
|
||||
|
||||
|
||||
## [1.1.3](https://github.com/niklasvh/html2canvas/compare/v1.1.2...v1.1.3) (2021-07-14)
|
||||
|
||||
|
||||
|
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "html2canvas",
|
||||
"version": "1.1.4",
|
||||
"version": "1.1.3",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
|
@ -6,7 +6,7 @@
|
||||
"module": "dist/html2canvas.esm.js",
|
||||
"typings": "dist/types/index.d.ts",
|
||||
"browser": "dist/html2canvas.js",
|
||||
"version": "1.1.4",
|
||||
"version": "1.1.3",
|
||||
"author": {
|
||||
"name": "Niklas von Hertzen",
|
||||
"email": "niklasvh@gmail.com",
|
||||
|
@ -70,9 +70,6 @@ const breakText = (value: string, styles: CSSParsedDeclaration): string[] => {
|
||||
return styles.letterSpacing !== 0 ? toCodePoints(value).map((i) => fromCodePoint(i)) : breakWords(value, styles);
|
||||
};
|
||||
|
||||
// https://drafts.csswg.org/css-text/#word-separator
|
||||
const wordSeparators = [0x0020, 0x00a0, 0x1361, 0x10100, 0x10101, 0x1039, 0x1091];
|
||||
|
||||
const breakWords = (str: string, styles: CSSParsedDeclaration): string[] => {
|
||||
const breaker = LineBreaker(str, {
|
||||
lineBreak: styles.lineBreak,
|
||||
@ -84,24 +81,7 @@ const breakWords = (str: string, styles: CSSParsedDeclaration): string[] => {
|
||||
|
||||
while (!(bk = breaker.next()).done) {
|
||||
if (bk.value) {
|
||||
const value = bk.value.slice();
|
||||
const codePoints = toCodePoints(value);
|
||||
let word = '';
|
||||
codePoints.forEach((codePoint) => {
|
||||
if (wordSeparators.indexOf(codePoint) === -1) {
|
||||
word += fromCodePoint(codePoint);
|
||||
} else {
|
||||
if (word.length) {
|
||||
words.push(word);
|
||||
}
|
||||
words.push(fromCodePoint(codePoint));
|
||||
word = '';
|
||||
}
|
||||
});
|
||||
|
||||
if (word.length) {
|
||||
words.push(word);
|
||||
}
|
||||
words.push(bk.value.slice());
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -526,11 +526,14 @@ export class CanvasRenderer {
|
||||
|
||||
mask(paths: Path[]): void {
|
||||
this.ctx.beginPath();
|
||||
this.ctx.save();
|
||||
this.ctx.setTransform(1, 0, 0, 1, 0, 0);
|
||||
this.ctx.moveTo(0, 0);
|
||||
this.ctx.lineTo(this.canvas.width, 0);
|
||||
this.ctx.lineTo(this.canvas.width, this.canvas.height);
|
||||
this.ctx.lineTo(0, this.canvas.height);
|
||||
this.ctx.lineTo(0, 0);
|
||||
this.ctx.restore();
|
||||
this.formatPath(paths.slice(0).reverse());
|
||||
this.ctx.closePath();
|
||||
}
|
||||
@ -723,18 +726,19 @@ export class CanvasRenderer {
|
||||
await this.renderBackgroundImage(paint.container);
|
||||
|
||||
this.ctx.restore();
|
||||
const borderBoxArea = calculateBorderBoxPath(paint.curves);
|
||||
|
||||
styles.boxShadow
|
||||
.slice(0)
|
||||
.reverse()
|
||||
.forEach((shadow) => {
|
||||
this.ctx.save();
|
||||
const borderBoxArea = calculateBorderBoxPath(paint.curves);
|
||||
const maskOffset = shadow.inset ? 0 : MASK_OFFSET;
|
||||
const shadowDirection = shadow.inset ? 1 : -1;
|
||||
const shadowPaintingArea = transformPath(
|
||||
borderBoxArea,
|
||||
-maskOffset + (shadow.inset ? 1 : -1) * shadow.spread.number,
|
||||
(shadow.inset ? 1 : -1) * shadow.spread.number,
|
||||
shadow.offsetX.number - maskOffset + shadowDirection * shadow.spread.number,
|
||||
shadow.offsetY.number + shadowDirection * shadow.spread.number,
|
||||
shadow.spread.number * (shadow.inset ? -2 : 2),
|
||||
shadow.spread.number * (shadow.inset ? -2 : 2)
|
||||
);
|
||||
@ -749,8 +753,8 @@ export class CanvasRenderer {
|
||||
this.path(shadowPaintingArea);
|
||||
}
|
||||
|
||||
this.ctx.shadowOffsetX = shadow.offsetX.number + maskOffset;
|
||||
this.ctx.shadowOffsetY = shadow.offsetY.number;
|
||||
this.ctx.shadowOffsetX = maskOffset;
|
||||
this.ctx.shadowOffsetY = 0;
|
||||
this.ctx.shadowColor = asString(shadow.color);
|
||||
this.ctx.shadowBlur = shadow.blur.number;
|
||||
this.ctx.fillStyle = shadow.inset ? asString(shadow.color) : 'rgba(0,0,0,1)';
|
||||
|
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<title>Chinese text</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../../test.js"></script>
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
<style>
|
||||
.chn-text-block {
|
||||
width: 500px;
|
@ -1,26 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="rtl" lang="fa-IR">
|
||||
<head>
|
||||
<title>Persian rtl</title>
|
||||
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../../test.js"></script>
|
||||
<style>
|
||||
body{
|
||||
font-family: Arial;
|
||||
}
|
||||
.test{
|
||||
padding: 10px 25px;
|
||||
direction: rtl;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test" lang="fa">
|
||||
<p>
|
||||
سلام دنیا! این یک تست است...
|
||||
</p>
|
||||
</div>
|
||||
<span class="test" lang="fa">من میتوانم. این است قدرت جاوااسکریپت!</span>
|
||||
</body>
|
||||
</html>
|
@ -1,145 +1,137 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Text tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial;
|
||||
}
|
||||
<head>
|
||||
<title>Text tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial;
|
||||
}
|
||||
.small{
|
||||
font-size:14px;
|
||||
line-height: 1vw;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 14px;
|
||||
line-height: 1vw;
|
||||
}
|
||||
.medium{
|
||||
font-size:18px;
|
||||
line-height: 2vw;
|
||||
}
|
||||
.large{
|
||||
font-size:24px;
|
||||
line-height: 3vw;
|
||||
}
|
||||
div{
|
||||
float:left;
|
||||
}
|
||||
h2 {
|
||||
clear:both;
|
||||
}
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
line-height: 4vw;
|
||||
}
|
||||
|
||||
.medium {
|
||||
font-size: 18px;
|
||||
line-height: 2vw;
|
||||
}
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
line-height: 3vw;
|
||||
}
|
||||
|
||||
.large {
|
||||
font-size: 24px;
|
||||
line-height: 3vw;
|
||||
}
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
line-height: 2vw;
|
||||
}
|
||||
</style>
|
||||
|
||||
div {
|
||||
float: left;
|
||||
}
|
||||
</head>
|
||||
<body> <h1><h1> text-decoration</h1>
|
||||
<div style="font-family:Arial;">
|
||||
<h2>Arial</h2>
|
||||
<ol class="small">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
|
||||
h2 {
|
||||
clear: both;
|
||||
}
|
||||
<ol class="medium">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
<ol class="large">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
line-height: 4vw;
|
||||
}
|
||||
<div style="font-family:Verdana;">
|
||||
<h2>Verdana</h2>
|
||||
<ol class="small">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
line-height: 3vw;
|
||||
}
|
||||
<ol class="medium">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
<ol class="large">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
line-height: 2vw;
|
||||
}
|
||||
<div style="font-family:Tahoma;">
|
||||
<h2>Tahoma</h2>
|
||||
<ol class="small">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
|
||||
.raw {
|
||||
font-size: 60px;
|
||||
word-spacing: 30px;
|
||||
}
|
||||
</style>
|
||||
<ol class="medium">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
<ol class="large">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<h2><h2> text-transform</h2>
|
||||
<ul>
|
||||
<li style="text-transform:none;">text-transform:none;</li>
|
||||
<li style="text-transform:capitalize;">text-transform: capitalize; (including foreign characters such as Öaäå)</li>
|
||||
<li style="text-transform:uppercase;">text-transform:uppercase;</li>
|
||||
<li style="text-transform:lowercase;">text-transform:lowercase;</li>
|
||||
</ul>
|
||||
<h3><h3> misc text alignments</h3>
|
||||
<ul>
|
||||
<li style="word-spacing:5px;">word-spacing:5px; (as each letter is rendered individually, the bounds will always be correct)</li>
|
||||
<li style="line-height:35px;">line-height:35px; <br />(same goes for line-height)</li>
|
||||
<li style="letter-spacing:5px;">letter-spacing:5px;</li>
|
||||
<li style="letter-spacing:0.9px;">letter-spacing:0.9px;</li>
|
||||
<li style="text-align:right;width:300px;">text-align:right;width:300px;</li>
|
||||
<li style="font-variant:small-caps;">font-variant:small-caps; </li>
|
||||
</ul>
|
||||
|
||||
<h1><h1> text-decoration</h1>
|
||||
<div style="font-family:Arial;">
|
||||
<h2>Arial</h2>
|
||||
<ol class="small">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
<div style="font-family: 'Inconsolata', Monaco, Consolas, 'Andale Mono', monospace">npm install --save html2canvas</div>
|
||||
|
||||
<ol class="medium">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
<ol class="large">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div style="font-family:Verdana;">
|
||||
<h2>Verdana</h2>
|
||||
<ol class="small">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
|
||||
<div class="raw">
|
||||
<span>[AB / CD]</span>
|
||||
</div>
|
||||
|
||||
<div style="font-family:Tahoma;">
|
||||
<h2>Tahoma</h2>
|
||||
<ol class="small">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
|
||||
<ol class="medium">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
<ol class="large">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<h2><h2> text-transform</h2>
|
||||
<ul>
|
||||
<li style="text-transform:none;">text-transform:none;</li>
|
||||
<li style="text-transform:capitalize;">text-transform: capitalize; (including foreign characters such as Öaäå)
|
||||
</li>
|
||||
<li style="text-transform:uppercase;">text-transform:uppercase;</li>
|
||||
<li style="text-transform:lowercase;">text-transform:lowercase;</li>
|
||||
</ul>
|
||||
<h3><h3> misc text alignments</h3>
|
||||
<ul>
|
||||
<li style="word-spacing:5px;">word-spacing:5px; (as each letter is rendered individually, the bounds will always
|
||||
be correct)
|
||||
</li>
|
||||
<li style="line-height:35px;">line-height:35px; <br/>(same goes for line-height)</li>
|
||||
<li style="letter-spacing:5px;">letter-spacing:5px;</li>
|
||||
<li style="letter-spacing:0.9px;">letter-spacing:0.9px;</li>
|
||||
<li style="text-align:right;width:300px;">text-align:right;width:300px;</li>
|
||||
<li style="font-variant:small-caps;">font-variant:small-caps;</li>
|
||||
</ul>
|
||||
|
||||
<div style="font-family: 'Inconsolata', Monaco, Consolas, 'Andale Mono', monospace">npm install --save html2canvas</div>
|
||||
<div class="raw" style="">
|
||||
<span>[AB / CD]</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<title>Thai text</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../../test.js"></script>
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
<style>
|
||||
.text-block {
|
||||
width: 500px;
|
Reference in New Issue
Block a user