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

Update README.md with adjustClonedNode and onclone options #186

Merged
merged 1 commit into from
Sep 5, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,30 @@ A function taking DOM node as argument. Should return true if passed node should
included in the output (excluding node means excluding it's children as well). Not called
on the root node.

#### adjustClonedNode

A function that will be invoked on each node as they are cloned. Useful to adjust nodes in any way needed before the conversion.
Note that this be invoked before the onclone callback.
The handler gets the original node, the cloned node, and a boolean that says if we've cloned the children already (so you can handle either before or after)

Sample use:

```const adjustClone = (node, clone, after) => {
if (!after && clone.id === 'element') {
clone.style.transform = 'translateY(100px)';
}
return clone;
}```

const wrapper = document.getElementById('wrapper');
const blob = domtoimage.toBlob(wrapper, { adjustClonedNode: adjustClone});

#### onclone

A function taking the cloned and modified DOM node as argument. It allows to make final adjustements to the elements before rendering, on the whole clone, after all elements have been individually cloned. Note that this will be invoked after all the onclone callbacks have been fired.

The cloned DOM might differ a lot from the original DOM, for example canvas will be replaced with image tags, some class might have changed, the style are inlined. It can be useful to log the clone to get a better senses of the transformations.

#### bgcolor

A string value for the background color, any valid CSS color value.
Expand Down
Loading