Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Calling html2canvas multiple times increases memory usage on Chrome #1609

Open
koenpoppe opened this issue Jul 28, 2018 · 19 comments · May be fixed by #2949
Open

Calling html2canvas multiple times increases memory usage on Chrome #1609

koenpoppe opened this issue Jul 28, 2018 · 19 comments · May be fixed by #2949

Comments

@koenpoppe
Copy link

koenpoppe commented Jul 28, 2018

Bug reports:

Calling html2canvas multiple times increases memory usage.

Specifications:

  • html2canvas version tested with: html2canvas 1.0.0-alpha.12
  • Browser & version: Chrome 68.0.3440.75
  • Operating system: Mac OS 10.13.6 (17G65)

How to reproduce

  1. Go to https://html2canvas.hertzen.com/
  2. Open the developer tools performance monitor: 717 DOM Nodes, JS heap size 14.8 MB
  3. Press 'Try it out'
  4. Press 'Capture' and close the image
  5. Repeat this several times
  6. Open the developer tools performance monitor: 3578 DOM Nodes, JS heap size 19.3 MB

It appears the clean up of the cloned nodes is not working as expected, or Chrome isn't cleaning it up.

chrome

@Albatrosses
Copy link

me too, wait fix...

@ding-xu
Copy link

ding-xu commented Jan 22, 2019

I use vue-cli3, calling html2canvas multiple times increases memory usage, and fail to compile my project.
Otherwise, some picture in my page can't display, calling several times but no out of usage.

@dselgo
Copy link

dselgo commented May 2, 2019

I am having the same problem. The nodes are all detached but aren't being garbage collected.

@ThunderWorm
Copy link

Hello! I made some memory profiling using chrome and found a bottleneck with one closure, in my case I commented out the code snippet which isn't used in our case, so this solves the issue for us.

SourceCodeScreenshot

@dselgo
Copy link

dselgo commented May 21, 2019

Thanks for the suggestion @ThunderWorm, but unfortunately this did not fix the problem for me.

@nrs32
Copy link

nrs32 commented May 21, 2019

We fixed our memory leak by making a change in the file Clone.js around line 541.
The previous code was:
image
It seems that this kept a reference to documentClone so it was never deleted. Instead we made the function async to wait for the response from iframeLoader.
The code looks like this:
image

@Shadorc
Copy link

Shadorc commented Aug 12, 2019

This seems to be fixed in the last version (1.0.0-rc3).
However, in this version, logging cannot be disabled due to a bug.

@hungpp250795
Copy link

This bug still happen in the last version (1.0.0-rc5). Please fixed this.

@wufeng87
Copy link

Any good news here? I got the problem too.

@yuto7th
Copy link

yuto7th commented May 30, 2020

I'm also very troubled about this bug...
I use last version (1.0.0-rc.5).
I called canvas.remove() after called html2canvas but heap memory remained.
Do you have any idea to delete heap memory by html2canvas?

スクリーンショット 2020-05-31 01 22 56

@yutou15
Copy link

yutou15 commented Dec 23, 2020

I recommend this one: https://github.com/bubkoo/html-to-image. It is very easy to use. The multiple screenshot function can be realized without memory leak.

@codingedgar
Copy link

I recommend this one: https://github.com/bubkoo/html-to-image. It is very easy to use. The multiple screenshot function can be realized without memory leak.

it was way worse for my use case it froze the app entirely

@JeniaGl
Copy link

JeniaGl commented Nov 15, 2021

Any progress with that?
Those memory leaks are a big problem for me since I use html2canvas about 100 times on the same page...

@ffavia
Copy link

ffavia commented Aug 1, 2022

Hello, has the problem been solved?

@huonghong112
Copy link

I used merge-images lib instead, it worked for me, the memory doesn't overflow anymore. When inserting text data into the image I use the text-to-image library (version 2.4.4), to rotate image I used base64-rotate.
https://www.npmjs.com/package/merge-images
https://www.npmjs.com/package/text-to-image
https://www.npmjs.com/package/base64-rotate

@yuyuyzl
Copy link

yuyuyzl commented Sep 5, 2022

try this:

html2canvas(dom,{removeContainer:false}).then(function(canvas) {
    document.querySelectorAll('.html2canvas-container').forEach(el => {
        const iframe = el.contentWindow;
        if (el) {
            el.src = 'about:blank';
            iframe.document.write('');
            iframe.document.clear();
            iframe.close();
            el.remove();
        }
    })
    canvas.toBlob(blob => {
      // your code
    });

});

the memory leak comes from those iframes.
with those cleanup code it should work better than just remove the iframe from dom tree.

works for me in rendering 10000+ images, 200 max without this fix.
will PR later.

yuyuyzl added a commit to yuyuyzl/html2canvas that referenced this issue Sep 6, 2022
yuyuyzl added a commit to yuyuyzl/html2canvas that referenced this issue Sep 6, 2022
@yuyuyzl yuyuyzl linked a pull request Sep 6, 2022 that will close this issue
1 task
@thilsenoffice
Copy link

Any Update? I am using latest 1.4.1. Calling 10 times itself crashing chrome. aw snap coming.

@alizaidi606
Copy link

Will this be addressed? @niklasvh please suggest some solution.
I am using html2pdf and it is internally using this library, and on Safari, it fails and gives warning Total canvas memory use exceeds the maximum limit (480 MB). After which getContext('2d') returns null and code crashes.

Sharcoux pushed a commit to cantoo-scribe/html2canvas that referenced this issue Aug 31, 2023
@muratcanoguzhan
Copy link

try this:

html2canvas(dom,{removeContainer:false}).then(function(canvas) {
    document.querySelectorAll('.html2canvas-container').forEach(el => {
        const iframe = el.contentWindow;
        if (el) {
            el.src = 'about:blank';
            iframe.document.write('');
            iframe.document.clear();
            iframe.close();
            el.remove();
        }
    })
    canvas.toBlob(blob => {
      // your code
    });

});

the memory leak comes from those iframes. with those cleanup code it should work better than just remove the iframe from dom tree.

works for me in rendering 10000+ images, 200 max without this fix. will PR later.
@yuyuyzl
When I try this it breaks my code because I use html2canvas separately for each element and element can not be found later.

nangelina added a commit to artificialonlinesao/html2canvas that referenced this issue Feb 9, 2024
Squashed commit of the following:

commit 96cc89a
Author: yuyuyzl <yuzhongliang221@gmail.com>
Date:   Tue Sep 6 10:36:07 2022 +0800

    fix: cleanup iframe first to prevent memory leaks, see niklasvh#1609

commit 485a49e
Author: yuyuyzl <yuzhongliang221@gmail.com>
Date:   Tue Sep 6 10:28:22 2022 +0800

    fix: cleanup iframe first to prevent memory leaks, see niklasvh#1609
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.