Compare commits

..

1 Commits

Author SHA1 Message Date
11d65ebf1b fix: ios grapheme layout 2021-08-16 20:21:04 +08:00
37 changed files with 142 additions and 361 deletions

View File

@ -101,26 +101,22 @@ jobs:
- os: macos-latest
name: OSX Safari Stable
targetBrowser: Safari_Stable
- os: macos-10.15
- os: macos-latest
name: iOS Simulator Safari 12
targetBrowser: Safari_IOS_12
xcode: /Applications/Xcode_10.3.app
- os: macos-10.15
- os: macos-latest
name: iOS Simulator Safari 13
targetBrowser: Safari_IOS_13
xcode: /Applications/Xcode_11.7.app
- os: macos-10.15
xcode: /Applications/Xcode_11.6_beta.app
- os: macos-latest
name: iOS Simulator Safari 14
targetBrowser: Safari_IOS_14
xcode: /Applications/Xcode_12.4.app
- os: macos-11
name: iOS Simulator Safari 15.0
targetBrowser: Safari_IOS_15_0
xcode: /Applications/Xcode_13.0.app
xcode: /Applications/Xcode_12_beta.app
- os: macos-11
name: iOS Simulator Safari 15
targetBrowser: Safari_IOS_15
xcode: /Applications/Xcode_13.2.app
xcode: /Applications/Xcode_13.0.app
- os: windows-latest
name: Windows Internet Explorer 9 (Emulated)
targetBrowser: IE_9

View File

@ -2,66 +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.4.1](https://github.com/niklasvh/html2canvas/compare/v1.4.0...v1.4.1) (2022-01-22)
### deps
* fix source maps (#2812) ([67c5e8d](https://github.com/niklasvh/html2canvas/commit/67c5e8dec4b2af9260a2b5b75b3399495fd1fee9)), closes [#2812](https://github.com/niklasvh/html2canvas/issues/2812)
### feat
* add support for <video> elements (#2788) ([181d1b1](https://github.com/niklasvh/html2canvas/commit/181d1b1103910d6e1b5277d5c007fc5e3006c6bf)), closes [#2788](https://github.com/niklasvh/html2canvas/issues/2788)
### fix
* Properties x and y of BoundingRect is undefined in old browser (#2797) ([e587a82](https://github.com/niklasvh/html2canvas/commit/e587a82dca01d9ada78cae34fd1bdb934e547f9b)), closes [#2797](https://github.com/niklasvh/html2canvas/issues/2797)
* source maps (#2787) ([46db867](https://github.com/niklasvh/html2canvas/commit/46db86755f064828559a4b0b37310f3ae94f5494)), closes [#2787](https://github.com/niklasvh/html2canvas/issues/2787)
# [1.4.0](https://github.com/niklasvh/html2canvas/compare/v1.3.4...v1.4.0) (2022-01-01)
### feat
* use native text segmenter where available (#2782) ([6521a48](https://github.com/niklasvh/html2canvas/commit/6521a487d78172f7179f7c973c1a3af40eb92009)), closes [#2782](https://github.com/niklasvh/html2canvas/issues/2782)
### fix
* adopted stylesheets (#2785) ([74696fa](https://github.com/niklasvh/html2canvas/commit/74696faf47c07b48b9c9587db0b999da1c08a8be)), closes [#2785](https://github.com/niklasvh/html2canvas/issues/2785)
* ios text wrapping with 0 width rect (#2786) ([0476d06](https://github.com/niklasvh/html2canvas/commit/0476d065158c33d2020a9f602b3043e5e2f90c75)), closes [#2786](https://github.com/niklasvh/html2canvas/issues/2786)
* reduce SLICE_STACK_SIZE to 50k (#2784) ([1cc853a](https://github.com/niklasvh/html2canvas/commit/1cc853a3186853eaca00af060f651697dc3497a9)), closes [#2784](https://github.com/niklasvh/html2canvas/issues/2784)
## [1.3.4](https://github.com/niklasvh/html2canvas/compare/v1.3.3...v1.3.4) (2021-12-29)
### ci
* add ios 15.0 testing (#2780) ([d922207](https://github.com/niklasvh/html2canvas/commit/d9222075daaed08884491b0563fc899ee0ced731)), closes [#2780](https://github.com/niklasvh/html2canvas/issues/2780)
### fix
* ios 15 font rendering crash (#2645) ([ba2b1cd](https://github.com/niklasvh/html2canvas/commit/ba2b1cd8e9a9d7932675d7abffce1526a609e769)), closes [#2645](https://github.com/niklasvh/html2canvas/issues/2645)
## [1.3.3](https://github.com/niklasvh/html2canvas/compare/v1.3.2...v1.3.3) (2021-11-23)
### ci
* fix macos action runners (#2757) ([ed57781](https://github.com/niklasvh/html2canvas/commit/ed577815949b6a565df54f2101cf6f0fb731c290)), closes [#2757](https://github.com/niklasvh/html2canvas/issues/2757)
### fix
* "offsets" text when font is big ([fd22a01](https://github.com/niklasvh/html2canvas/commit/fd22a01a3c9e39293f47caaed0c0e13d2dc8170c))
* const enums (#2651) ([eeda86b](https://github.com/niklasvh/html2canvas/commit/eeda86bd5e81fb4e97675fe9bee3d4d15899997f)), closes [#2651](https://github.com/niklasvh/html2canvas/issues/2651)
## [1.3.2](https://github.com/niklasvh/html2canvas/compare/v1.3.1...v1.3.2) (2021-08-15)
@ -271,14 +211,9 @@ All notable changes to this project will be documented in this file. See [standa
* update www deps (#2525) ([2a013e2](https://github.com/niklasvh/html2canvas/commit/2a013e20c814b7dbaea98f54f0bde8f553eb79a2)), closes [#2525](https://github.com/niklasvh/html2canvas/issues/2525)
### feat
* add support for border-style dashed, dotted, double (#2531) ([72cd528](https://github.com/niklasvh/html2canvas/commit/72cd5284296e4cdb3fe88f2982ec7528604b6618))
### fix
* opacity with overflow hidden (#2450) ([82b7da5](https://github.com/niklasvh/html2canvas/commit/82b7da558c342e7f53d298bb1d843a5db86c3b21)), closes [#2450](https://github.com/niklasvh/html2canvas/issues/2450)
* top right border radius (#2522) ([ba17267](https://github.com/niklasvh/html2canvas/commit/ba172678f07f962e9f54b398df087e86217d7a13))
### test
@ -426,16 +361,16 @@ All notable changes to this project will be documented in this file. See [standa
* Fix white space appearing on element rendering (Fix #1438)
* Reset canvas transform on finish (Fix #1494)
# v1.0.0-alpha.11 - 1.4.2018
* Fix IE11 member not found error
# v1.0.0-alpha.11 - 1.4.2018
* Fix IE11 member not found error
* Support blob image resources in non-foreignObjectRendering mode
# v1.0.0-alpha.10 - 15.2.2018
# v1.0.0-alpha.10 - 15.2.2018
* Re-introduce `onclone` option (Fix #1434)
* Add `ignoreElements` predicate function option
* Fix version console logging
# v1.0.0-alpha.9 - 7.1.2018
# v1.0.0-alpha.9 - 7.1.2018
* Fix dynamic style sheets
* Fix > 50% border-radius values
@ -447,7 +382,7 @@ All notable changes to this project will be documented in this file. See [standa
* Fix form input rendering (#1338)
* Improve word line breaking algorithm
# v1.0.0-alpha.6 - 28.12.2017
# v1.0.0-alpha.6 - 28.12.2017
* Fix list-style: none (#1340)
* Extend supported values for pseudo element content
@ -457,7 +392,7 @@ All notable changes to this project will be documented in this file. See [standa
* Fix overflow: auto
* Added support for rendering list-style
v1.0.0-alpha.4 - 12.12.2017
v1.0.0-alpha.4 - 12.12.2017
* Fix rendering with multiple fonts defined (Fix #796)
* Add support for radial-gradients
* Fix logging option (#1302)
@ -479,8 +414,8 @@ All notable changes to this project will be documented in this file. See [standa
##### Breaking Changes #####
* Remove deprecated onrendered callback, calling `html2canvas` returns a `Promise<HTMLCanvasElement>`
* Removed option `type`, same results can be achieved by assigning `x`, `y`, `scrollX`, `scrollY`, `width` and `height` properties.
## New featues / fixes
## New featues / fixes
* Add support for scaling canvas (defaults to device pixel ratio)
* Add support for multiple text-shadows
* Add support for multiple text-decorations
@ -489,7 +424,7 @@ All notable changes to this project will be documented in this file. See [standa
* Correctly handle px and percentage values in linear-gradients
* Correctly support all angle types for linear-gradients
* Add support for multiple values for background-repeat, background-position and background-size
# v0.5.0-beta4 - 23.1.2016
* Fix logger requiring access to window object
* Derequire browserify build
@ -509,11 +444,11 @@ All notable changes to this project will be documented in this file. See [standa
* Fix transparent colors breaking gradients
* Preserve scrolling positions on render
# v0.5.0-alpha2 - 3.2.2015
# v0.5.0-alpha2 - 3.2.2015
* Switch to using browserify for building
* Fix (#517) Chrome stretches background images with 'auto' or single attributes
# v0.5.0-alpha - 19.1.2015
# v0.5.0-alpha - 19.1.2015
* Complete rewrite of library
* Switched interface to return Promise
* Uses hidden iframe window to perform rendering, allowing async rendering and doesn't force the viewport to be scrolled to the top anymore.
@ -524,14 +459,14 @@ All notable changes to this project will be documented in this file. See [standa
* Changed format for proxy requests, permitting binary responses with CORS headers as well
* Fixed many layering issues (see z-index tests)
# v0.4.1 - 7.9.2013
# v0.4.1 - 7.9.2013
* Added support for bower
* Improved z-index ordering
* Basic implementation for CSS transformations
* Fixed inline text in top element
* Basic implementation for text-shadow
# v0.4.0 - 30.1.2013
# v0.4.0 - 30.1.2013
* Added rendering tests with <a href="https://github.com/niklasvh/webdriver.js">webdriver</a>
* Switched to using grunt for building
* Removed support for IE<9, including any FlashCanvas bits
@ -541,7 +476,7 @@ All notable changes to this project will be documented in this file. See [standa
* Support for placeholder rendering
* Reformatted all tests to small units to test specific features
# v0.3.4 - 26.6.2012
# v0.3.4 - 26.6.2012
* Removed (last?) jQuery dependencies (<a href="https://github.com/niklasvh/html2canvas/commit/343b86705fe163766fcf735eb0217130e4bd5b17">niklasvh</a>)
* SVG-powered rendering (<a href="https://github.com/niklasvh/html2canvas/commit/67d3e0d0f59a5a654caf71a2e3be6494ff146c75">niklasvh</a>)

View File

@ -34,25 +34,19 @@ module.exports = function(config) {
base: 'MobileSafari',
name: 'iPhone 8',
platform: 'iOS',
sdk: '13.7'
sdk: '13.6'
},
Safari_IOS_14: {
base: 'MobileSafari',
name: 'iPhone 8',
platform: 'iOS',
sdk: '14.4'
},
Safari_IOS_15_0: {
base: 'MobileSafari',
name: 'iPhone 13',
platform: 'iOS',
sdk: '15.0'
sdk: '14.0'
},
Safari_IOS_15: {
base: 'MobileSafari',
name: 'iPhone 13',
name: 'iPhone 8',
platform: 'iOS',
sdk: '15.2'
sdk: '15.0'
},
SauceLabs_IE9: {
base: 'SauceLabs',

90
package-lock.json generated
View File

@ -1,15 +1,15 @@
{
"name": "html2canvas",
"version": "1.4.1",
"version": "1.3.2",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"version": "1.4.0",
"version": "1.2.2",
"license": "MIT",
"dependencies": {
"css-line-break": "^2.1.0",
"text-segmentation": "^1.0.3"
"css-line-break": "2.0.1",
"text-segmentation": "^1.0.2"
},
"devDependencies": {
"@babel/cli": "^7.4.3",
@ -5705,7 +5705,6 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.1.tgz",
"integrity": "sha512-vFIUq7FdLtjZMhATwDul5RZWv2jpXQ09Pd6jcVEOvIsqCWTRFD/ONHNfyOS8dA/Ippi5dsIgpyKWKZaAKZltbA==",
"dev": true,
"engines": {
"node": ">= 0.6.0"
}
@ -8466,11 +8465,19 @@
}
},
"node_modules/css-line-break": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
"integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.0.1.tgz",
"integrity": "sha512-gwKYIMUn7xodIcb346wgUhE2Dt5O1Kmrc16PWi8sL4FTfyDj8P5095rzH7+O8CTZudJr+uw2GCI/hwEkDJFI2w==",
"dependencies": {
"utrie": "^1.0.2"
"base64-arraybuffer": "^0.2.0"
}
},
"node_modules/css-line-break/node_modules/base64-arraybuffer": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
"integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ==",
"engines": {
"node": ">= 0.6.0"
}
},
"node_modules/cssom": {
@ -22750,11 +22757,11 @@
}
},
"node_modules/text-segmentation": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
"integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.2.tgz",
"integrity": "sha512-uTqvLxdBrVnx/CFQOtnf8tfzSXFm+1Qxau7Xi54j4OPTZokuDOX8qncQzrg2G8ZicAMOM8TgzFAYTb+AqNO4Cw==",
"dependencies": {
"utrie": "^1.0.2"
"utrie": "^1.0.1"
}
},
"node_modules/text-table": {
@ -23798,19 +23805,11 @@
}
},
"node_modules/utrie": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
"integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.1.tgz",
"integrity": "sha512-JPaDXF3vzgZxfeEwutdGzlrNoVFL5UvZcbO6Qo9D4GoahrieUPoMU8GCpVpR7MQqcKhmShIh8VlbEN3PLM3EBg==",
"dependencies": {
"base64-arraybuffer": "^1.0.2"
}
},
"node_modules/utrie/node_modules/base64-arraybuffer": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
"integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
"engines": {
"node": ">= 0.6.0"
"base64-arraybuffer": "^1.0.1"
}
},
"node_modules/uuid": {
@ -29687,8 +29686,7 @@
"base64-arraybuffer": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.1.tgz",
"integrity": "sha512-vFIUq7FdLtjZMhATwDul5RZWv2jpXQ09Pd6jcVEOvIsqCWTRFD/ONHNfyOS8dA/Ippi5dsIgpyKWKZaAKZltbA==",
"dev": true
"integrity": "sha512-vFIUq7FdLtjZMhATwDul5RZWv2jpXQ09Pd6jcVEOvIsqCWTRFD/ONHNfyOS8dA/Ippi5dsIgpyKWKZaAKZltbA=="
},
"base64-js": {
"version": "1.5.1",
@ -31952,11 +31950,18 @@
}
},
"css-line-break": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
"integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.0.1.tgz",
"integrity": "sha512-gwKYIMUn7xodIcb346wgUhE2Dt5O1Kmrc16PWi8sL4FTfyDj8P5095rzH7+O8CTZudJr+uw2GCI/hwEkDJFI2w==",
"requires": {
"utrie": "^1.0.2"
"base64-arraybuffer": "^0.2.0"
},
"dependencies": {
"base64-arraybuffer": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
"integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ=="
}
}
},
"cssom": {
@ -43205,11 +43210,11 @@
"dev": true
},
"text-segmentation": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
"integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.2.tgz",
"integrity": "sha512-uTqvLxdBrVnx/CFQOtnf8tfzSXFm+1Qxau7Xi54j4OPTZokuDOX8qncQzrg2G8ZicAMOM8TgzFAYTb+AqNO4Cw==",
"requires": {
"utrie": "^1.0.2"
"utrie": "^1.0.1"
}
},
"text-table": {
@ -44006,18 +44011,11 @@
"dev": true
},
"utrie": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
"integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.1.tgz",
"integrity": "sha512-JPaDXF3vzgZxfeEwutdGzlrNoVFL5UvZcbO6Qo9D4GoahrieUPoMU8GCpVpR7MQqcKhmShIh8VlbEN3PLM3EBg==",
"requires": {
"base64-arraybuffer": "^1.0.2"
},
"dependencies": {
"base64-arraybuffer": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
"integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="
}
"base64-arraybuffer": "^1.0.1"
}
},
"uuid": {

View File

@ -6,7 +6,7 @@
"module": "dist/html2canvas.esm.js",
"typings": "dist/types/index.d.ts",
"browser": "dist/html2canvas.js",
"version": "1.4.1",
"version": "1.3.2",
"author": {
"name": "Niklas von Hertzen",
"email": "niklasvh@gmail.com",
@ -118,7 +118,7 @@
"homepage": "https://html2canvas.hertzen.com",
"license": "MIT",
"dependencies": {
"css-line-break": "^2.1.0",
"text-segmentation": "^1.0.3"
"css-line-break": "2.0.1",
"text-segmentation": "^1.0.2"
}
}

View File

@ -30,7 +30,7 @@ export default {
// Allow json resolution
json(),
// Compile TypeScript files
typescript({ sourceMap: true, inlineSources: true }),
typescript(),
// Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs)
commonjs({
include: 'node_modules/**'

View File

@ -211,12 +211,5 @@ export const FEATURES = {
const value = 'withCredentials' in new XMLHttpRequest();
Object.defineProperty(FEATURES, 'SUPPORT_CORS_XHR', {value});
return value;
},
get SUPPORT_NATIVE_TEXT_SEGMENTATION(): boolean {
'use strict';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const value = !!(typeof Intl !== 'undefined' && (Intl as any).Segmenter);
Object.defineProperty(FEATURES, 'SUPPORT_NATIVE_TEXT_SEGMENTATION', {value});
return value;
}
};

View File

@ -17,11 +17,11 @@ export class Bounds {
}
static fromDOMRectList(context: Context, domRectList: DOMRectList): Bounds {
const domRect = Array.from(domRectList).find((rect) => rect.width !== 0);
const domRect = domRectList[0];
return domRect
? new Bounds(
domRect.left + context.windowBounds.left,
domRect.top + context.windowBounds.top,
domRect.x + context.windowBounds.left,
domRect.y + context.windowBounds.top,
domRect.width,
domRect.height
)

View File

@ -28,24 +28,27 @@ export const parseTextBounds = (
textList.forEach((text) => {
if (styles.textDecorationLine.length || text.trim().length > 0) {
if (FEATURES.SUPPORT_RANGE_BOUNDS) {
const clientRects = createRange(node, offset, text.length).getClientRects();
if (clientRects.length > 1) {
const subSegments = segmentGraphemes(text);
let subOffset = 0;
subSegments.forEach((subSegment) => {
textBounds.push(
new TextBounds(
subSegment,
Bounds.fromDOMRectList(
context,
createRange(node, subOffset + offset, subSegment.length).getClientRects()
if (!FEATURES.SUPPORT_WORD_BREAKING) {
const rects = createRange(node, offset, text.length).getClientRects();
if (rects.length > 1) {
let graphemeOffset = 0;
splitGraphemes(text).forEach((grapheme) => {
textBounds.push(
new TextBounds(
grapheme,
Bounds.fromDOMRectList(
context,
createRange(node, graphemeOffset + offset, grapheme.length).getClientRects()
)
)
)
);
subOffset += subSegment.length;
});
);
graphemeOffset += grapheme.length;
});
} else {
textBounds.push(new TextBounds(text, Bounds.fromDOMRectList(context, rects)));
}
} else {
textBounds.push(new TextBounds(text, Bounds.fromDOMRectList(context, clientRects)));
textBounds.push(new TextBounds(text, getRangeBounds(context, node, offset, text.length)));
}
} else {
const replacementNode = node.splitText(text.length);
@ -91,32 +94,12 @@ const createRange = (node: Text, offset: number, length: number): Range => {
return range;
};
export const segmentGraphemes = (value: string): string[] => {
if (FEATURES.SUPPORT_NATIVE_TEXT_SEGMENTATION) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const segmenter = new (Intl as any).Segmenter(void 0, {granularity: 'grapheme'});
// eslint-disable-next-line @typescript-eslint/no-explicit-any
return Array.from(segmenter.segment(value)).map((segment: any) => segment.segment);
}
return splitGraphemes(value);
};
const segmentWords = (value: string, styles: CSSParsedDeclaration): string[] => {
if (FEATURES.SUPPORT_NATIVE_TEXT_SEGMENTATION) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const segmenter = new (Intl as any).Segmenter(void 0, {
granularity: 'word'
});
// eslint-disable-next-line @typescript-eslint/no-explicit-any
return Array.from(segmenter.segment(value)).map((segment: any) => segment.segment);
}
return breakWords(value, styles);
const getRangeBounds = (context: Context, node: Text, offset: number, length: number): Bounds => {
return Bounds.fromClientRect(context, createRange(node, offset, length).getBoundingClientRect());
};
const breakText = (value: string, styles: CSSParsedDeclaration): string[] => {
return styles.letterSpacing !== 0 ? segmentGraphemes(value) : segmentWords(value, styles);
return styles.letterSpacing !== 0 ? splitGraphemes(value) : breakWords(value, styles);
};
// https://drafts.csswg.org/css-text/#word-separator

View File

@ -1,7 +1,7 @@
import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue, isIdentToken} from '../syntax/parser';
import {Context} from '../../core/context';
export const enum BACKGROUND_CLIP {
export enum BACKGROUND_CLIP {
BORDER_BOX = 0,
PADDING_BOX = 1,
CONTENT_BOX = 2

View File

@ -3,7 +3,7 @@ import {CSSValue, isIdentToken, parseFunctionArgs} from '../syntax/parser';
import {Context} from '../../core/context';
export type BackgroundRepeat = BACKGROUND_REPEAT[];
export const enum BACKGROUND_REPEAT {
export enum BACKGROUND_REPEAT {
REPEAT = 0,
NO_REPEAT = 1,
REPEAT_X = 2,

View File

@ -1,6 +1,6 @@
import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export const enum BORDER_STYLE {
export enum BORDER_STYLE {
NONE = 0,
SOLID = 1,
DASHED = 2,

View File

@ -1,6 +1,6 @@
import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export const enum FLOAT {
export enum FLOAT {
NONE = 0,
LEFT = 1,
RIGHT = 2,

View File

@ -1,6 +1,6 @@
import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export const enum FONT_STYLE {
export enum FONT_STYLE {
NORMAL = 'normal',
ITALIC = 'italic',
OBLIQUE = 'oblique'

View File

@ -1,6 +1,6 @@
import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export const enum LIST_STYLE_POSITION {
export enum LIST_STYLE_POSITION {
INSIDE = 0,
OUTSIDE = 1
}

View File

@ -1,6 +1,6 @@
import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export const enum LIST_STYLE_TYPE {
export enum LIST_STYLE_TYPE {
NONE = -1,
DISC = 0,
CIRCLE = 1,

View File

@ -1,7 +1,7 @@
import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue, isIdentToken} from '../syntax/parser';
import {Context} from '../../core/context';
export const enum OVERFLOW {
export enum OVERFLOW {
VISIBLE = 0,
HIDDEN = 1,
SCROLL = 2,

View File

@ -1,7 +1,7 @@
import {IPropertyListDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {CSSValue, isIdentToken} from '../syntax/parser';
import {Context} from '../../core/context';
export const enum PAINT_ORDER_LAYER {
export enum PAINT_ORDER_LAYER {
FILL,
STROKE,
MARKERS

View File

@ -1,6 +1,6 @@
import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export const enum POSITION {
export enum POSITION {
STATIC = 0,
RELATIVE = 1,
ABSOLUTE = 2,

View File

@ -1,6 +1,6 @@
import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export const enum TEXT_ALIGN {
export enum TEXT_ALIGN {
LEFT = 0,
CENTER = 1,
RIGHT = 2

View File

@ -1,6 +1,6 @@
import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export const enum TEXT_TRANSFORM {
export enum TEXT_TRANSFORM {
NONE = 0,
LOWERCASE = 1,
UPPERCASE = 2,

View File

@ -1,6 +1,6 @@
import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
import {Context} from '../../core/context';
export const enum VISIBILITY {
export enum VISIBILITY {
VISIBLE = 0,
HIDDEN = 1,
COLLAPSE = 2

View File

@ -657,7 +657,7 @@ export class Tokenizer {
}
private consumeStringSlice(count: number): string {
const SLICE_STACK_SIZE = 50000;
const SLICE_STACK_SIZE = 60000;
let value = '';
while (count > 0) {
const amount = Math.min(SLICE_STACK_SIZE, count);

View File

@ -10,7 +10,7 @@ import {radialGradient} from './functions/radial-gradient';
import {prefixRadialGradient} from './functions/-prefix-radial-gradient';
import {Context} from '../../core/context';
export const enum CSSImageType {
export enum CSSImageType {
URL,
LINEAR_GRADIENT,
RADIAL_GRADIENT
@ -56,12 +56,12 @@ export interface CSSLinearGradientImage extends ICSSGradientImage {
type: CSSImageType.LINEAR_GRADIENT;
}
export const enum CSSRadialShape {
export enum CSSRadialShape {
CIRCLE,
ELLIPSE
}
export const enum CSSRadialExtent {
export enum CSSRadialExtent {
CLOSEST_SIDE,
FARTHEST_SIDE,
CLOSEST_CORNER,

View File

@ -2,19 +2,16 @@ import {Bounds} from '../css/layout/bounds';
import {
isBodyElement,
isCanvasElement,
isCustomElement,
isElementNode,
isHTMLElementNode,
isIFrameElement,
isImageElement,
isScriptElement,
isSelectElement,
isSlotElement,
isStyleElement,
isSVGElementNode,
isTextareaElement,
isTextNode,
isVideoElement
isTextNode
} from './node-parser';
import {isIdentToken, nonFunctionArgSeparator} from '../css/syntax/parser';
import {TokenType} from '../css/syntax/tokenizer';
@ -66,7 +63,7 @@ export class DocumentCloner {
throw new Error('Cloned element does not have an owner document');
}
this.documentElement = this.cloneNode(element.ownerDocument.documentElement, false) as HTMLElement;
this.documentElement = this.cloneNode(element.ownerDocument.documentElement) as HTMLElement;
}
toIFrame(ownerDocument: Document, windowSize: Bounds): Promise<HTMLIFrameElement> {
@ -146,9 +143,7 @@ export class DocumentCloner {
if (isCanvasElement(node)) {
return this.createCanvasClone(node);
}
if (isVideoElement(node)) {
return this.createVideoClone(node);
}
if (isStyleElement(node)) {
return this.createStyleClone(node);
}
@ -165,17 +160,6 @@ export class DocumentCloner {
}
}
if (isCustomElement(clone)) {
return this.createCustomElementClone(clone);
}
return clone;
}
createCustomElementClone(node: HTMLElement): HTMLElement {
const clone = document.createElement('html2canvascustomelement');
copyCSSStyles(node.style, clone);
return clone;
}
@ -247,63 +231,7 @@ export class DocumentCloner {
return clonedCanvas;
}
createVideoClone(video: HTMLVideoElement): HTMLCanvasElement {
const canvas = video.ownerDocument.createElement('canvas');
canvas.width = video.offsetWidth;
canvas.height = video.offsetHeight;
const ctx = canvas.getContext('2d');
try {
if (ctx) {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
if (!this.options.allowTaint) {
ctx.getImageData(0, 0, canvas.width, canvas.height);
}
}
return canvas;
} catch (e) {
this.context.logger.info(`Unable to clone video as it is tainted`, video);
}
const blankCanvas = video.ownerDocument.createElement('canvas');
blankCanvas.width = video.offsetWidth;
blankCanvas.height = video.offsetHeight;
return blankCanvas;
}
appendChildNode(clone: HTMLElement | SVGElement, child: Node, copyStyles: boolean): void {
if (
!isElementNode(child) ||
(!isScriptElement(child) &&
!child.hasAttribute(IGNORE_ATTRIBUTE) &&
(typeof this.options.ignoreElements !== 'function' || !this.options.ignoreElements(child)))
) {
if (!this.options.copyStyles || !isElementNode(child) || !isStyleElement(child)) {
clone.appendChild(this.cloneNode(child, copyStyles));
}
}
}
cloneChildNodes(node: Element, clone: HTMLElement | SVGElement, copyStyles: boolean): void {
for (
let child = node.shadowRoot ? node.shadowRoot.firstChild : node.firstChild;
child;
child = child.nextSibling
) {
if (isElementNode(child) && isSlotElement(child) && typeof child.assignedNodes === 'function') {
const assignedNodes = child.assignedNodes() as ChildNode[];
if (assignedNodes.length) {
assignedNodes.forEach((assignedNode) => this.appendChildNode(clone, assignedNode, copyStyles));
}
} else {
this.appendChildNode(clone, child, copyStyles);
}
}
}
cloneNode(node: Node, copyStyles: boolean): Node {
cloneNode(node: Node): Node {
if (isTextNode(node)) {
return document.createTextNode(node.data);
}
@ -332,12 +260,17 @@ export class DocumentCloner {
const counters = this.counters.parse(new CSSParsedCounterDeclaration(this.context, style));
const before = this.resolvePseudoContent(node, clone, styleBefore, PseudoElementType.BEFORE);
if (isCustomElement(node)) {
copyStyles = true;
}
if (!isVideoElement(node)) {
this.cloneChildNodes(node, clone, copyStyles);
for (let child = node.firstChild; child; child = child.nextSibling) {
if (
!isElementNode(child) ||
(!isScriptElement(child) &&
!child.hasAttribute(IGNORE_ATTRIBUTE) &&
(typeof this.options.ignoreElements !== 'function' || !this.options.ignoreElements(child)))
) {
if (!this.options.copyStyles || !isElementNode(child) || !isStyleElement(child)) {
clone.appendChild(this.cloneNode(child));
}
}
}
if (before) {
@ -351,10 +284,7 @@ export class DocumentCloner {
this.counters.pop(counters);
if (
(style && (this.options.copyStyles || isSVGElementNode(node)) && !isIFrameElement(node)) ||
copyStyles
) {
if (style && (this.options.copyStyles || isSVGElementNode(node)) && !isIFrameElement(node)) {
copyCSSStyles(style, clone);
}

View File

@ -124,7 +124,6 @@ export const isHTMLElement = (node: Element): node is HTMLHtmlElement => node.ta
export const isSVGElement = (node: Element): node is SVGSVGElement => node.tagName === 'svg';
export const isBodyElement = (node: Element): node is HTMLBodyElement => node.tagName === 'BODY';
export const isCanvasElement = (node: Element): node is HTMLCanvasElement => node.tagName === 'CANVAS';
export const isVideoElement = (node: Element): node is HTMLVideoElement => node.tagName === 'VIDEO';
export const isImageElement = (node: Element): node is HTMLImageElement => node.tagName === 'IMG';
export const isIFrameElement = (node: Element): node is HTMLIFrameElement => node.tagName === 'IFRAME';
export const isStyleElement = (node: Element): node is HTMLStyleElement => node.tagName === 'STYLE';
@ -132,5 +131,3 @@ export const isScriptElement = (node: Element): node is HTMLScriptElement => nod
export const isTextareaElement = (node: Element): node is HTMLTextAreaElement => node.tagName === 'TEXTAREA';
export const isSelectElement = (node: Element): node is HTMLSelectElement => node.tagName === 'SELECT';
export const isSlotElement = (node: Element): node is HTMLSlotElement => node.tagName === 'SLOT';
// https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name
export const isCustomElement = (node: Element): node is HTMLElement => node.tagName.indexOf('-') > 0;

View File

@ -2,7 +2,7 @@ import {ElementPaint, parseStackingContexts, StackingContext} from '../stacking-
import {asString, Color, isTransparent} from '../../css/types/color';
import {ElementContainer, FLAGS} from '../../dom/element-container';
import {BORDER_STYLE} from '../../css/property-descriptors/border-style';
import {CSSParsedDeclaration} from '../../css';
import {CSSParsedDeclaration} from '../../css/index';
import {TextContainer} from '../../dom/text-container';
import {Path, transformPath} from '../path';
import {BACKGROUND_CLIP} from '../../css/property-descriptors/background-clip';
@ -18,12 +18,12 @@ import {
} from '../border';
import {calculateBackgroundRendering, getBackgroundValueForIndex} from '../background';
import {isDimensionToken} from '../../css/syntax/parser';
import {segmentGraphemes, TextBounds} from '../../css/layout/text';
import {TextBounds} from '../../css/layout/text';
import {ImageElementContainer} from '../../dom/replaced-elements/image-element-container';
import {contentBox} from '../box-sizing';
import {CanvasElementContainer} from '../../dom/replaced-elements/canvas-element-container';
import {SVGElementContainer} from '../../dom/replaced-elements/svg-element-container';
import {ReplacedElementContainer} from '../../dom/replaced-elements';
import {ReplacedElementContainer} from '../../dom/replaced-elements/index';
import {EffectTarget, IElementEffect, isClipEffect, isOpacityEffect, isTransformEffect} from '../effects';
import {contains} from '../../core/bitwise';
import {calculateGradientDirection, calculateRadius, processColorStops} from '../../css/types/functions/gradient';
@ -44,6 +44,7 @@ import {PAINT_ORDER_LAYER} from '../../css/property-descriptors/paint-order';
import {Renderer} from '../renderer';
import {Context} from '../../core/context';
import {DIRECTION} from '../../css/property-descriptors/direction';
import {splitGraphemes} from 'text-segmentation';
export type RenderConfigurations = RenderOptions & {
backgroundColor: Color | null;
@ -148,7 +149,7 @@ export class CanvasRenderer extends Renderer {
if (letterSpacing === 0) {
this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + baseline);
} else {
const letters = segmentGraphemes(text.text);
const letters = splitGraphemes(text.text);
letters.reduce((left, letter) => {
this.ctx.fillText(letter, left, text.bounds.top + baseline);
@ -161,7 +162,7 @@ export class CanvasRenderer extends Renderer {
const fontVariant = styles.fontVariant
.filter((variant) => variant === 'normal' || variant === 'small-caps')
.join('');
const fontFamily = fixIOSSystemFonts(styles.fontFamily).join(', ');
const fontFamily = styles.fontFamily.join(', ');
const fontSize = isDimensionToken(styles.fontSize)
? `${styles.fontSize.number}${styles.fontSize.unit}`
: `${styles.fontSize.number}px`;
@ -946,12 +947,3 @@ const canvasTextAlign = (textAlign: TEXT_ALIGN): CanvasTextAlign => {
return 'left';
}
};
// see https://github.com/niklasvh/html2canvas/pull/2645
const iOSBrokenFonts = ['-apple-system', 'system-ui'];
const fixIOSSystemFonts = (fontFamilies: string[]): string[] => {
return /iPhone OS 15_(0|1)/.test(window.navigator.userAgent)
? fontFamilies.filter((fontFamily) => iOSBrokenFonts.indexOf(fontFamily) === -1)
: fontFamilies;
};

View File

@ -27,7 +27,6 @@ export class FontMetrics {
container.style.fontSize = fontSize;
container.style.margin = '0';
container.style.padding = '0';
container.style.whiteSpace = 'nowrap';
body.appendChild(container);

View File

@ -1,6 +1,6 @@
import {BezierCurve} from './bezier-curve';
import {Vector} from './vector';
export const enum PathType {
export enum PathType {
VECTOR = 0,
BEZIER_CURVE = 1
}

Binary file not shown.

View File

@ -1,20 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video tests</title>
<script type="text/javascript" src="../../test.js"></script>
</head>
<body>
<h2>Same origin</h2>
<video controls width="250">
<source src="../../assets/cc0-video.mp4" type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
<h2>Cross-origin (doesn't taint)</h2>
<video controls width="250">
<source src="http://localhost:8081/cors/tests/assets/cc0-video.mp4" type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
</body>
</html>

View File

@ -11,13 +11,6 @@
float: left;
}
.apple-system {
font-family: -apple-system, Arial;
}
.system-ui {
font-family: system-ui, Arial;
}
</style>
</head>
<body>
@ -39,7 +32,5 @@
</p><p>&nbsp;&nbsp;&nbsp;&nbsp;13 法捷耶夫(一九○一——一九五六),苏联名作家。他所作的小说《毁灭》于一九二七年出版,内容是描写苏联国内战争时期由苏联远东滨海边区工人、农民和革命知识分子所组成的一支游击队同国内反革命白卫军以及日本武装干涉军进行斗争的故事。这部小说曾由鲁迅译为汉文。
</p><p>&nbsp;&nbsp;&nbsp;&nbsp;14 见鲁迅《集外集·自嘲》《鲁迅全集》第7卷人民文学出版社1981年版第147页</p>
</div>
<div class="apple-system">中文</div>
<div class="system-ui">中文</div>
</body>
</html>

View File

@ -149,6 +149,6 @@
<span>[AB / CD]</span>
</div>
<div>Emojis 🤷🏾‍♂️👨‍👩‍👧‍👦 :)</div>
<div style="letter-spacing: 2px">Emojis with letter-spacing 🤷🏾‍♂️👨‍👩‍👧‍👦 :) ❤️❤️❤️👨‍❤️‍💋‍👨👨‍❤️‍👨</div>
<div style="letter-spacing: 2px">Emojis with letter-spacing 🤷🏾‍♂️👨‍👩‍👧‍👦 :)</div>
</body>
</html>

View File

@ -40,10 +40,6 @@ class AutonomousCustomElement extends HTMLElement {
wrapper.appendChild(img);
wrapper.appendChild(info);
}
connectedCallback() {
this.shadowRoot.adoptedStyleSheets = [sheet];
}
}
customElements.define('autonomous-custom-element', AutonomousCustomElement);

View File

@ -3,11 +3,10 @@
<head>
<title>Web components tests</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
const sheet = new CSSStyleSheet();
sheet.replaceSync('* { color: red !important; }')
</script>
<script type="text/javascript" src="../../test.js"></script>
<style>
</style>
</head>
<body>
<div>

View File

@ -12,7 +12,7 @@ const mkdirp = require('mkdirp');
export const app = express();
app.use('/', serveIndex(path.resolve(__dirname, '../'), {icons: true}));
app.use([/^\/src($|\/)/, '/'], express.static(path.resolve(__dirname, '../')));
app.use('/', express.static(path.resolve(__dirname, '../')));
export const corsApp = express();
corsApp.use('/proxy', proxy());

2
www/.gitignore vendored
View File

@ -9,5 +9,3 @@ yarn-error.log
src/results.json
static/tests/preview.js
src/preview.js
.docusaurus
build/