Resolve that box shadow cannot be displayed without inset attribute,and No blur effect when blur radius is set #3110
Conversation
package.json
Outdated
| @@ -119,6 +119,7 @@ | |||
| "license": "MIT", | |||
| "dependencies": { | |||
| "css-line-break": "^2.1.0", | |||
| "less": "^4.2.0", | |||
There was a problem hiding this comment.
Ouch. Adding less to the project is already not a good idea, but adding it to the dependencies...
Can you provide your PR without less?
| @@ -11,9 +11,13 @@ export const backgroundPosition: IPropertyListDescriptor<BackgroundPosition> = { | |||
| initialValue: '0% 0%', | |||
| type: PropertyDescriptorParsingType.LIST, | |||
| prefix: false, | |||
| parse: (_context: Context, tokens: CSSValue[]): BackgroundPosition => { | |||
There was a problem hiding this comment.
This change introduces no improvement and is actually more confusing due to unnamed variables.
| @@ -19,6 +19,9 @@ export const backgroundSize: IPropertyListDescriptor<BackgroundSize> = { | |||
| prefix: false, | |||
| type: PropertyDescriptorParsingType.LIST, | |||
| parse: (_context: Context, tokens: CSSValue[]): BackgroundSize => { | |||
| // console.log('bakground-size') | |||
| @@ -24,8 +24,7 @@ export const boxShadow: IPropertyListDescriptor<BoxShadow> = { | |||
| if (tokens.length === 1 && isIdentWithValue(tokens[0], 'none')) { | |||
| return []; | |||
| } | |||
|
|
|||
| return parseFunctionArgs(tokens).map((values: CSSValue[]) => { | |||
| let c = parseFunctionArgs(tokens).map((values: CSSValue[]) => { | |||
There was a problem hiding this comment.
This change introduces no improvement and is actually more confusing due to unnamed variables.
src/dom/element-container.ts
Outdated
| @@ -34,6 +34,7 @@ export class ElementContainer { | |||
| if (this.styles.transform !== null) { | |||
| // getBoundingClientRect takes transforms into account | |||
| element.style.transform = 'none'; | |||
| console.log('isHTMLElementNode') | |||
src/render/canvas/canvas-renderer.ts
Outdated
| @@ -727,15 +727,14 @@ export class CanvasRenderer extends Renderer { | |||
| .forEach((shadow) => { | |||
| this.ctx.save(); | |||
| const borderBoxArea = calculateBorderBoxPath(paint.curves); | |||
| const maskOffset = shadow.inset ? 0 : MASK_OFFSET; | |||
| const maskOffset = shadow.inset ? 0 : 1; | |||
There was a problem hiding this comment.
This might be correct, but I find it suspicious that switching a value from 10000 to 1 is not having bad impacts somewhere. Are you sure that this cannot introduce bugs elsewhere?
| @@ -14,6 +14,9 @@ export class Vector implements IPath { | |||
| add(deltaX: number, deltaY: number): Vector { | |||
| return new Vector(this.x + deltaX, this.y + deltaY); | |||
| } | |||
| reverse(): Vector { | |||
There was a problem hiding this comment.
Is it really necessary to create a function that just returns this?
There was a problem hiding this comment.
If this is not done, the border radius in canvas will not display correctly.
|
Hey, I'm trying to get promising PRs to be merged. Can you check my review? Some parts are uncleared to me but I have meny PRs to review so I didn't dig too deep into it. Don't hesitate to comment. |
|
Can be tested in |
|
Okay, I will modify the unreasonable code. |
|
@Sharcoux Is it okay now? |
|
Actually I can't merge in this repo, but I released @cantoo/html2canvas that includes your change. You can test it and use it if you need. |
|
ok! |
Resolve that box shadow cannot be displayed without inset attribute and has no blur effect when blur radius is set.
version 1.4.1
(I must say that this is not a perfect effect, and there is still a slight difference between the shadow style and the actual style.)
berfore:
now: