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.

Sign up for GitHub

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

Jump to bottom

appear a bug called: 'Uncaught (in promise) ' #175

Closed
1 of 2 tasks
Juliiii opened this issue Dec 14, 2017 · 4 comments
Closed
1 of 2 tasks

appear a bug called: 'Uncaught (in promise) ' #175

Juliiii opened this issue Dec 14, 2017 · 4 comments

Comments

@Juliiii
Copy link

Juliiii commented Dec 14, 2017 •
edited
Loading

Use case: description, code

error
code

Expected behavior

i want the bug never happen again, because when it happen, my code will regard it as a failure so the loading status will never end which make my users can not use the other picture.just like this:
image

Actual behavior (stack traces, console logs etc)

the atcual behavior just like i say above. and the stack traces like this:(i think the bug may not be caused by dom-to-image, but i do not how to fix, beacuse it only happen sometimes)
image

Library version

Browsers

  • Chrome 49+
  • Firefox 45+
@VinaykumarJeyshan
Copy link

Even Im getting same error for particular DIV..In other places it is working fine

@perry-mitchell
Copy link

For me this is occurring when trying to select the body. I'd like to image the entire page, so using document.body as the target element is necessary. If I select say the very first <main> element, that works, but attempting to perform this on the <body> breaks on all sites that I've tried.

@perry-mitchell
Copy link

perry-mitchell commented Jan 23, 2018 •
edited
Loading

So I've managed to get it to work on the <body> by using the filter method as described in the docs. This is quite ugly, but now works as it filters out whatever was causing the problem:

import domToImage from "dom-to-image";

function filterNode(node) {
    if (node instanceof Text) {
        return true;
    }
    return [
        "div",
        "span",
        "p",
        "i",
        "strong",
        "main",
        "aside",
        "article",
        "pre",
        "code",
        "time",
        "address",
        "header",
        "footer"
    ].includes(node.tagName.toLowerCase()) || /^h[123456]$/i.test(node.tagName);
}

export function getBodyImage(body = document.body) {
    // @todo: Get data from S3 if it exists
    return domToImage
        .toJpeg(body, { quality: 70, filter: filterNode, bgcolor: "#fff", imagePlaceholder: "https://placem.at/places?w=500" });
}

UPDATE: Adding "img" to the above function breaks it in my case.. It seems that the images break it a lot of the time.

@Pree21
Copy link

Pree21 commented Feb 25, 2020

Thanks @perry-mitchell, My issue fixed with your solution.

@Juliiii Juliiii closed this as completed Feb 25, 2020
@ggrunwald97 ggrunwald97 mentioned this issue Nov 3, 2021
Closed
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@perry-mitchell @Pree21 @Juliiii @VinaykumarJeyshan