search

niklasvh / html2canvas

Screenshots with JavaScript
https://html2canvas.hertzen.com/
MIT License
30.43k stars 4.79k forks source link

Clone node: Setting className for SVG element raises error #1868

Closed KagamiChan closed 4 years ago

KagamiChan commented 5 years ago

Please make sure you are testing with the latest release of html2canvas. Old versions are not supported and issues reported for them will be closed.

Please follow the general troubleshooting steps first:

Bug reports:

Setting className for SVG element will raise error, here's some stack trace, I'm using the non minified js version. I thinks the reason is probably I'm using fontawesome 5 SVG icon

MY_PROJECT_PATH/lib/html2canvas.js:5304 Uncaught (in promise) TypeError: Cannot assign to read only property 'className' of object '#<SVGSVGElement>'
    at DocumentCloner.resolvePseudoContent (VM4414 html2canvas.js:5304)
    at DocumentCloner.cloneNode (VM4414 html2canvas.js:5200)
    at DocumentCloner.cloneNode (VM4414 html2canvas.js:5207)
    at DocumentCloner.cloneNode (VM4414 html2canvas.js:5207)
    at DocumentCloner.cloneNode (VM4414 html2canvas.js:5207)
    at DocumentCloner.cloneNode (VM4414 html2canvas.js:5207)
    at DocumentCloner.cloneNode (VM4414 html2canvas.js:5207)
    at DocumentCloner.cloneNode (VM4414 html2canvas.js:5207)
    at DocumentCloner.cloneNode (VM4414 html2canvas.js:5207)
    at DocumentCloner.cloneNode (VM4414 html2canvas.js:5207)
    at DocumentCloner.cloneNode (VM4414 html2canvas.js:5207)
    at DocumentCloner.cloneNode (VM4414 html2canvas.js:5207)
    at DocumentCloner.cloneNode (VM4414 html2canvas.js:5207)
    at DocumentCloner.cloneNode (VM4414 html2canvas.js:5207)
    at DocumentCloner.cloneNode (VM4414 html2canvas.js:5207)
    at DocumentCloner.cloneNode (VM4414 html2canvas.js:5207)
    at new DocumentCloner (VM4414 html2canvas.js:5006)
    at VM4414 html2canvas.js:6900
    at step (VM4414 html2canvas.js:83)
    at Object.next (VM4414 html2canvas.js:64)
    at VM4414 html2canvas.js:57
    at new Promise (<anonymous>)
    at __awaiter (VM4414 html2canvas.js:53)
    at renderElement (VM4414 html2canvas.js:6857)
    at html2canvas (VM4414 html2canvas.js:6854)

Specifications:

bguyan commented 5 years ago

Im getting the same problem

NanChen6 commented 5 years ago

getting the same error Uncaught (in promise) TypeError: Cannot assign to read only property 'className' of object '#'

sunnyqinghuan commented 5 years ago

getting the same problem TypeError: Cannot assign to read only property 'className' of object '#'

sagarp2901 commented 5 years ago

I updated html2canvas to latest version 1.0.0-rc3 and started seeing this issue.

Console Error: core.js:1673 ERROR Error: Uncaught (in promise): TypeError: Cannot assign to read only property 'className' of object '[object SVGSVGElement]' TypeError: Cannot assign to read only property 'className' of object '[object SVGSVGElement]' at DocumentCloner.resolvePseudoContent (html2canvas.js:5304) at DocumentCloner.cloneNode (html2canvas.js:5200) at DocumentCloner.cloneNode (html2canvas.js:5207) at DocumentCloner.cloneNode (html2canvas.js:5207) at DocumentCloner.cloneNode (html2canvas.js:5207) at DocumentCloner.cloneNode (html2canvas.js:5207) at DocumentCloner.cloneNode (html2canvas.js:5207) at DocumentCloner.cloneNode (html2canvas.js:5207) at DocumentCloner.cloneNode (html2canvas.js:5207) at DocumentCloner.cloneNode (html2canvas.js:5207) at resolvePromise (zone.js:831) at resolvePromise (zone.js:788) at zone.js:892 at ZoneDelegate.push.../../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423) at Object.onInvokeTask (core.js:3811) at ZoneDelegate.push.../../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422) at Zone.push.../../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195) at drainMicroTaskQueue (zone.js:601) at push.../../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:502) at ZoneTask.invoke (zone.js:487)

eralvarez commented 5 years ago

Hello guys, 1.0.0-alpha.12 works just fine

nvgopi commented 5 years ago

Hello guys, 1.0.0-alpha.12 works just fine

Thanks. It worked for me.

aosatinsky commented 5 years ago

Same problem here

DMPR-dev commented 5 years ago

I caught this error with the text: Torten dekorieren mit Fondant - 6 süße Inspirationen

Probably it's related to this word -> süße, got fixed once I removed it

moosetunes commented 5 years ago

Latest non-min doesn't work for me regarding same issue. 1.0.0-alpha.12 didn't help either.

Update: Removing references to modernizr allowed me to get latest html2canvas to work. Cheers.

ahardin13 commented 5 years ago

This issue occurs for me when there is a <rect> element. I've linked a possible fix I'm trying.

KyleTraynor commented 5 years ago

I'm having the same problem. I tried 1.0.0-alpha.12 and v1.0.0-rc.3

subramanya4shenoy commented 5 years ago

Did not work for me, any solutions will be appreciated

nora-white commented 5 years ago

I'm also receiving the same error. Only seems to occur with rc.2 and rc.3 releases. I want to update to rc.3 to fix an issue with font-family not displaying correctly, but then exporting svgs breaks with certain elements. I've reverted to rc.1. Running Chrome on Mac.

subramanya4shenoy commented 5 years ago

As it was beta and alpha, I took their js file and included it in my angular project. + before calling the html2canvas method I ran this method out side the ngZone. Kind of fixed the issue, U can try as well u can change the code as per your need

FabioGuerreiro commented 5 years ago

I'm also receiving the same error. Only seems to occur with rc.2 and rc.3 releases. I want to update to rc.3 to fix an issue with font-family not displaying correctly, but then exporting svgs breaks with certain elements. I've reverted to rc.1. Running Chrome on Mac.

I confirm that reverting to rc.1 fixed it for me as well, tested with Chrome on win10.

kevalForever commented 5 years ago

Hello guys, 1.0.0-alpha.12 works just fine. There is Issue in 1.0.0-rc.0 to 1.0.0-rc.3. Then don't go for Latest version.

FrantisekVrab commented 5 years ago

Well, i dont have any SVG that is used in canvas, however i'm getting this error... (this behaviour is on chrome, it works on FF). - 1.0.0-rc.3

ngspinu commented 4 years ago

This is still an issue on: 1.0.0-rc.5. Any chance of getting it fixed?

subramanya4shenoy commented 4 years ago

Hey!

I switched to htmltoImage as this reo doesn't look like will be updated or fixed. Not it will come out of RC version

On Thu, 3 Oct 2019, 2:23 pm Nicu Spinu, notifications@github.com wrote:

This is still an issue on: 1.0.0-rc.5. Any chance of getting it fixed?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/niklasvh/html2canvas/issues/1868?email_source=notifications&email_token=ABIHC5PIQDVTRNMXBDMQKE3QMWXJFA5CNFSM4HR732BKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEAHPX2A#issuecomment-537852904, or mute the thread https://github.com/notifications/unsubscribe-auth/ABIHC5LJUK6VAE4NLU3NCT3QMWXJFANCNFSM4HR732BA .

CoveMB commented 4 years ago

Hey!

I had the same problem in a React app.

I had some FontAwesomeIcon on my page, removing them fixed the problem.

(even if the font icons were not in the selected element that I wanted to canvas)

hal1984 commented 4 years ago

I have created a pull request that fix this error.

2034

rafaelncarvalho commented 4 years ago

Any news about the PR?

maxaqquepucho commented 4 years ago

I have the same issue with html2canvas: 1.0.0-rc.5" in chrome Version 78.0.3904.108 (Official Build) (64-bit)

html2canvas.js?c0e9:5333 Uncaught (in promise) TypeError: Cannot assign to read only property 'className' of object '#<SVGSVGElement>'
    at DocumentCloner.resolvePseudoContent (html2canvas.js?c0e9:5333)
    at DocumentCloner.cloneNode (html2canvas.js?c0e9:5228)
    at DocumentCloner.cloneNode (html2canvas.js?c0e9:5235)
    at DocumentCloner.cloneNode (html2canvas.js?c0e9:5235)
    at DocumentCloner.cloneNode (html2canvas.js?c0e9:5235)
    at DocumentCloner.cloneNode (html2canvas.js?c0e9:5235)
    at DocumentCloner.cloneNode (html2canvas.js?c0e9:5235)
    at DocumentCloner.cloneNode (html2canvas.js?c0e9:5235)
    at DocumentCloner.cloneNode (html2canvas.js?c0e9:5235)
    at DocumentCloner.cloneNode (html2canvas.js?c0e9:5235)
kevalForever commented 4 years ago

use dom-to-image API For JS,Angular Which is better than this.

KagamiChan commented 4 years ago

@maxaqquepucho It's because the fix is not shipped

@niklasvh could you help create a new release?

lemmingapex commented 4 years ago

@niklasvh, will you please release v1.0.0-rc.6 with this fix? What do you need to make this happen soon?

lemmingapex commented 4 years ago

@niklasvh, the community using this library expects more frequent updates than you are providing. (>3 months of inactivity) If you are unable to maintain this library on your own, please add some prominent contributors such as @andyedinborough and @cobexer as collaborators: https://github.com/niklasvh/html2canvas/settings/access. Maybe they can provide the maintenance and releases that this library needs. Thank you.

mhmdtshref commented 4 years ago

@niklasvh This guy has been cloned the repo of the package, modify it, and he deployed it here: https://www.npmjs.com/package/@trainiac/html2canvas

Thank you @niklasvh <3

BlackHacks commented 4 years ago

Thank you @mhmdtshref Moving to https://www.npmjs.com/package/@trainiac/html2canvas works fine and solves this problem. @niklasvh seems to refuse or is unwilling to fix this package.

Krishank-Tripathi commented 4 years ago

@niklasvh Sir please note that this issue is still raising for version ^1.0.0-rc.5 please open this issue or resolve it by your side Env... React @16+ Google Chrome Cause of issue : while rendering dom use case :

`printDocument(e){ e.preventDefault(); const input = document.getElementById('releaseDiv');
html2canvas(input)
.then((canvas) => {
......... });
}

// init this.printDocument.bind(this);

`

lzhoucs commented 4 years ago

I ran into the same issue and can confirm the fix in the latest master branch works for me. Hopefully 1.0.0-rc.6 can be released soon, in the meanwhile I published my fork on npm containing the fix to unblock myself. If anyone is interested, use yarn add @lzhoucs/html2canvas to install, and import html2canvas from "@lzhoucs/html2canvas"; to import.