Use case: description, code

jsfiddle

Expected behavior

Actual behavior (stack traces, console logs etc)

Library version

Browsers

• Chrome 49+
• Firefox 45+

Downloaded the latest, and it looks like tsayen#37 from dom-to-image is not fixed (it's not fixed in dom-to-image either). There is an open PR in the original repo though, tsayen#336

I tried it with the latest of dom-to-image-more and the below looks like the requests that occur

Use case: description, code

I was trying out the latest code from master to get font-awesome rendering fixed. This still didn't work.

Expected behavior

Font awesome fonts are rendered.

Actual behavior (stack traces, console logs etc)

When I execute this in the console:

document.styleSheets[1].hasOwnProperty("cssRules")

I saw that it returned false while it's actually a valid styleSheet object with a cssRules property:

The relevant line in the code:

does this check and that's the reason why no stylesheets are actually embedded.

I believe this check can be omitted anyway because of the try catch that follows?

Library version

Master @ commit d3ee842

Browsers

• Chrome 78.0.3904.70 (Official Build) (64-bit)
• Firefox 70.0.1 (64-bit)

gives me an error any one cane help ?

.nav-link:hover,
.nav-link:focus{
background: linear-gradient(to top, #ffe838, #fd57bf);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

Use case: description, code

jsfiddle

In production, I have a large table and noticed that the bottom and left edges were cut off when saving to Png. Using fiddle I isolated the problem to setting the padding on table cells to 0.

In the fiddle the bottom edge is cut off and also the image is wider than the dom table so I guess there may be various small differences when padding is 0 in this case.

Seems related to #77 where the user also fixed the issue by adding padding. Tables naturally have 1px cell padding so this might not have been noticed in the general case.

Expected behavior

Image should be full table.

Actual behavior (stack traces, console logs etc)

Image doesn't match. Edges are cropped etc.

Library version

2.13.0

Browsers

• Chrome 108

Synchronous option instead of promise?

Use case would be to wait it out and get the image rather than asynchronous

tried to install with bower install dom-to-image-more but was unsuccessful.

bower error: ENOTFOUND Package dom-to-image-more not found.

Use case: description, code

In an ideal world we want to optimize SVG output by removing styles that can be inherited.

This mainly has an impact at >>1K nodes where the output is in the 1MB scale of magnitude.

There's not much of a story here at the moment, but the library did previously lean on unset until the #90 regression:

There's two strategies I tried to research:

• The curveball method: reimplement CSSOM in the "cloning" stage using document.styleSheets
  • Multiple PITAs and footguns involved (specificity, source order and the size of this library)
  • Inheritance is done with a while loop on .parentNode, and a hardcoded list of inheritable CSS props
• The easier, "just as good" way: a post-process op in toSvg
  • Append the output to our iframe sandbox
  • use a TreeWalker to iterate over the nodes
  • see if removing an inline value changes the computed style

Some starter code, but this code snippet:

1. doesn't restore CSS props in place, making it indeterministic and liable to break styling
2. doesn't go in ascending order up the DOM tree, thus removing inherited properties that are necessary

const treeWalker = document.createTreeWalker(document.querySelector('foreignObject > *'), NodeFilter.SHOW_ELEMENT)
const elementList = [];
let currentNode = treeWalker.currentNode;

while (currentNode) {
    elementList.push(currentNode);
    currentNode = treeWalker.nextNode();
}

elementList.forEach(function(element) {
    const inlineStyles = element.style;
    const computedStyles = getComputedStyle(element);
    util.asArray(inlineStyles).forEach(function(name) {
        if (inlineStyles.cssText.includes(name + ': ' + value + ';')) {
            const value = inlineStyles.getPropertyValue(name);
            inlineStyles.removeProperty(name);
            if (value !== computedStyles.getPropertyValue(name)) {
                inlineStyles[name] = value;
            }
        }
    });
});

Actually, when a html element have a border-left css property, this property is duplicated to the border right of this element. And put border-right property on an element not showing on the picture generated.

Only on Firefox. Work fine on Chrome !!

Best regards

• Firefox 68, Linux OS

Trying to use dom-to-image with angular 12.x

import domtoimage from 'dom-to-image-more';
export class MyComponent {
    @ViewChild('leafletMap') leafletMap: ElementRef;
    
    downloadMap = (): void => {
        //error happens here
        domtoimage.toPng(this.leafletMap.nativeElement).then((img: any) => {
            console.log(img);
        });
    };
}
/* of course this is simplified */

c.getComputedStyle is not a function is thrown. Strangely enough, this exact same code works with 2.8.0
stackoverflow answer & stackblitz

Library version

2.9.x

Browsers

all

Current version of this lib is not working when converting svg with custom fonts to png

Link to the issue and solution
https://stackoverflow.com/questions/48105468/including-fonts-when-converting-svg-to-png

JS Fiddle with working solution https://jsfiddle.net/hutvL4ks/2/

Access to window breaks Angular Universal because is undefined.

Can you solve it and avoid to access window, or returning a shim?

Thanks!

Use case:

I'm trying to take a png screenshot using dom-to-image-more for more complex web pages (6000+ HTML nodes), using Firefox version 100.

As an example, see https://jsfiddle.net/joseph_white3/gj7v21yz/.

Expected behavior

Screenshot should be taken successfully. Webpages of this size are quite common, for example Google Sheets has 5000-6000 HTML nodes, according to the output of document.getElementsByTagName('*').length.

Actual behavior

In Chrome version 101, the code works fine. In Firefox 100 though, domtoimage.toPng throws an error in the makeImage function line 555:

Note: JSFiddle is letting the page crash instead of logging the error. I had to copy the HTML to a separate webpage to inspect the error.

Presumably this occurs because the data uri is a string 34277656 characters long (32.7 MB), which exceeds the max data URI length (see MDN, which states that Firefox 97+ has a max data URI length of 32 MB). As a result, the image.onerror function in makeImage gets called with the error shown above.

Library version

Latest (v. 2.9.5)

Browsers

• [] Chrome 49+
• Firefox 45+

First of all: Thanks for this fantastic project!

I am using dom-to-image-more in combination with pdfmake. Since upgrading to version 2.9.1 I am receiving a TypeError in browser console:

ERROR Error: Uncaught (in promise): TypeError: c.getComputedStyle is not a function TypeError: c.getComputedStyle is not a function at P (dom-to-image-more.min.js:3) at e (dom-to-image-more.min.js:3) at ZoneDelegate.invoke (zone.js:372) at Object.onInvoke (core.js:28672) at ZoneDelegate.invoke (zone.js:371) at Zone.run (zone.js:134) at zone.js:1276 at ZoneDelegate.invokeTask (zone.js:406) at Object.onInvokeTask (core.js:28659) at ZoneDelegate.invokeTask (zone.js:405) at resolvePromise (zone.js:1213) at resolvePromise (zone.js:1167) at zone.js:1279 at ZoneDelegate.invokeTask (zone.js:406) at Object.onInvokeTask (core.js:28659) at ZoneDelegate.invokeTask (zone.js:405) at Zone.runTask (zone.js:178) at drainMicroTaskQueue (zone.js:582) at invokeTask (zone.js:491) at ZoneTask.invoke (zone.js:476)

Downgrading to version 2.8.0 solves the problem. A fix would be appreciated.

Use case: description, code

Package usage via NPM

Expected behavior

Installed package does not contain bower_components

Actual behavior (stack traces, console logs etc)

Package contains bower_components

Library version

Latest (2.10.1)

Use case: description, code

See this URL: http://www.nossebromediaproduktion.se/test/domtopng-test/domtopng-test.html

Expected behavior

Clicking the button I expect it to copy the exact displayed contents of the wrapper DIV element above the button to a PNG image below the button.

Actual behavior (stack traces, console logs etc)

Copies the SVG content that is not in ::before or ::after CSS rules to the PNG image below the button. This example uses a multitude of ::before and ::after to add extra graphical content, so it may be an edge case.

Library version

2.8.0

Browsers

• Chrome 76
• Firefox 69

For some reason, on chrome mobile, when an image is generated, there are some differences and looks like it is related to the font-family or kerning... not sure what is happening. Everything works fine on browser.

DOM:

Generated image:

Any ideas on what is happening and why the generated image is not matching the DOM on chrome for mobile?

i try with a div that has background image，but not rendered.

The relevant line in the code

i change line 861 to backgroundNode.style.getPropertyPriority('background') and it works

Use case:

I need to download a bookshelf where all the images come from Google Books.

I created the fiddle below, with only 1 image, to show the problem I'm experiencing.

jsfiddle

Expected behavior

Here is an image of my DOM and just below the result, after clicking on Screenshot:

Actual behavior

Access to XMLHttpRequest at 'https://books.google.com/books/content?id=rBdiDwAAQBAJ&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api'
from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Library version

• "dom-to-image-more": "^2.9.5"

Browsers

• Chrome 49+
• Firefox 45+
• Brave 1.34.81

I'm using Vue and my question is: does this have a solution? How to add an 'Access-Control-Allow-Origin' header in the resource?

Use case: description, code

https://jsfiddle.net/z9042mw8/1/

The getAndEncode() function is well able to fetch base64 URL with correct mimetype. However, the mimetype is manually removed from the result during the inlining and poorly restored later.

Proposed fix:

diff --git a/src/dom-to-image-more.js b/src/dom-to-image-more.js
index 044adea9..84913046 100644
--- a/src/dom-to-image-more.js
+++ b/src/dom-to-image-more.js
@@ -446,8 +446,6 @@
         return {
             escape: escapeRegEx,
             parseExtension: parseExtension,
-            mimeType: mimeType,
-            dataAsUrl: dataAsUrl,
             isDataUrl: isDataUrl,
             canvasToBlob: canvasToBlob,
             resolveUrl: resolveUrl,
@@ -538,11 +536,6 @@
             }
         }
 
-        function mimeType(url) {
-            const extension = parseExtension(url).toLowerCase();
-            return mimes()[extension] || '';
-        }
-
         function isDataUrl(url) {
             return url.search(/^(data:)/) !== -1;
         }
@@ -666,8 +659,7 @@
 
                         const encoder = new FileReader();
                         encoder.onloadend = function () {
-                            const content = encoder.result.split(/,/)[1];
-                            resolve(content);
+                            resolve(encoder.result);
                         };
                         encoder.readAsDataURL(request.response);
                     }
@@ -689,10 +681,6 @@
             return cacheEntry.promise;
         }
 
-        function dataAsUrl(content, type) {
-            return `data:${type};base64,${content}`;
-        }
-
         function escapeRegEx(string) {
             return string.replace(/([.*+?^${}()|\[\]\/\\])/g, '\\$1');
         }
@@ -772,9 +760,6 @@
                     return baseUrl ? util.resolveUrl(urlValue, baseUrl) : urlValue;
                 })
                 .then(get || util.getAndEncode)
-                .then(function (data) {
-                    return util.dataAsUrl(data, util.mimeType(url));
-                })
                 .then(function (dataUrl) {
                     return string.replace(urlAsRegex(url), `\$1${dataUrl}\$3`);
                 });
@@ -891,9 +876,6 @@
 
                 return Promise.resolve(element.src)
                     .then(get || util.getAndEncode)
-                    .then(function (data) {
-                        return util.dataAsUrl(data, util.mimeType(element.src));
-                    })
                     .then(function (dataUrl) {
                         return new Promise(function (resolve) {
                             element.onload = resolve;

Expected behavior

Expected the image to work in the JSFiddle

Actual behavior (stack traces, console logs etc)

The image breaks and the alt text for the mathematical formula appears.

Library version

Confirmed in 2.13.1 and also dom-to-image.

Browsers

• Chrome 49+
• Firefox 45+

let url = domtoimage.toPng(document.getElementById('treeCanvas')).then(dataUrl=> { return dataUrl })
where treeCanvas is div with svg(ngx-graph component) inside it. Tried to search for this error, but it seems like this error only appeared in another library called html2canvas.

dom-to-image^latest
Chrome^73

-webkit-background-clip: text;
background-clip: text;
/* -webkit-text-fill-color: transparent;

firefox ok , but not chorme.
Please tell me anyone if there is any sollution for it.

Use case: calculating size of element with box shadow

Even using the "style" option or "wrapper" trick, i cannot have the full rendering of my element including its box shadow
jsfiddle

Expected behavior

The resulting image should include the box shadow area.

Actual behavior (stack traces, console logs etc)

Library version

Browsers

• Chrome 103+

Use case: description, code

jsfiddle

<div id='dom-node'>
<span><a href='#dom-node'>dom-to-image-more/issues/90</a></span>
</div>

<div id='result'>
<img src='data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="232" height="132"><foreignObject x="0" y="0" width="100%" height="100%"><div id="dom-node" xmlns="http://www.w3.org/1999/xhtml" style="background-color: rgb(211, 211, 211); block-size: 100px; display: block; height: 100px; inline-size: 200px; padding-block: 16px; padding: 16px; padding-inline: 16px; text-align: center; width: 200px;">%0A<span><a href="%23dom-node" style="cursor: pointer; text-decoration-line: underline; text-decoration-thickness: initial;">dom-to-image-more/issues/90</a></span>%0A</div></foreignObject></svg>'></img>
</div>

#dom-node {
  color: #000000;
  height: 100px;
  width: 200px;
  background-color: lightgrey;
  text-align: center;
  padding: 1em;
}

a[href="#dom-node"] {
  color: #000000;
}

#result {
  margin-top: 10px;
}

Expected behavior

Related issues & PRs: #37 #71

It was taken as true that unset had no gotchas. I tried using toSvg on .Box in https://github.com/pulls. copyUserComputedStyle is an over-eager optimisation and has value collisions.

In this case, link color overrides that match inherit (as in .Box .Link--primary) are stripped away prematurely.

Here's an explanation of the copyUserComputedStyle regression:

1. Initial value from user-agent origin = -webkit-link/-moz-hyperlinktext
2. Stylesheet from author origin sets it to an explicit color value, which happens to be the computed value of inherit
3. copyUserComputedStyle assigns unset inline which is computed as inherit
4. Because the computed value of unset and and the explicit color value match, that value is not added to the inline style
5. 👉 The output SVG's inline style has no explicit color style. So instead of 2, we're literally back to square 1. 😃

Actual behavior (stack traces, console logs etc)

When you open up the #result image src from the jsfiddle demo, it appears purple.

Library version

Regression confirmed in https://github.com/1904labs/dom-to-image-more/releases/tag/v2.12.0 and present since https://github.com/1904labs/dom-to-image-more/releases/tag/v2.9.1.

Browsers

• Chrome 49+
• Firefox 45+

When font-loading is made, does not care about unicode-range defined in the font-face and loads all available fonts.

Expected behavior

Should load only those which are loaded by the browser automatically

Description

@IDisposable Let's generate lighter SVGs that don't dump the entire computed styles in the document.

State-of-the-art solution: https://stackoverflow.com/a/56408175/15764156

Expected behavior

Much lighter SVG (<20% of current size).

Actual behavior (stack traces, console logs etc)

Able to output SVGs that are 1MB large.

Library version

2.8.0

Browsers

Chrome/89.0.4389.128 Electron/12.0.13

Hi folks, I have the following DOM being rendered:

And when I "convert" it to an image, the subtitle is broken:

I have no idea what is happening here.

Use case: description, code

I'm rendering some text with custom fonts and in the render only Helvetica or Times New Roman are displayed (replacing my custom font). This problem occurs only on iOS 15 but not with the original dom-to-image version, only on the -more.

@charset "UTF-8";

@font-face {
  font-family: 'Lato';
  src: url('../fonts/lato-regular.eot');
  src: url('../fonts/lato-regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/lato-regular.woff2') format('woff2'),
    url('../fonts/lato-regular.woff') format('woff'),
    url('../fonts/lato-regular.ttf') format('truetype'),
    url('../fonts/lato-regular.svg#Lato') format('svg');
  font-style: normal;
  font-weight: 400;
}

I know iOS15 changed some fonts aspects, any way to fix this?

Browsers

iOS Crome
iOS Firefox
iOS Safari

Use case

When cloning a node whose content is larger than the node, domtoimage produces an image whose size is larger than the node's size. See this jsfiddle. In the fiddle, the blue border around the image shows that the domtoimage result is 4 pixels taller than the actual height of the node. This extra space doesn't end up displaying content and seems more like a nuisance than an expected behavior.

Side-note: In this particular example, the SVG child is the same size as the node itself, but the node's content is still larger because the SVG is rendered inline (workarounds include: changing its display to block or font-size to 0px).

Expected behavior

A node should not be rendered larger than its actual size.

Actual behavior

The node renders larger than its actual size if the content inside of it is larger.

Library version

2.8.0

Browsers

• Chrome 91
• Firefox 89

Possible solution

The behavior occurs because util.width and util.height use scrollWidth and scrollHeight to calculate the size of the element (see line 630). This is helpful if we want to capture overflowing content in the screenshot, as shown in this jsfiddle. I don't think this is the intended behavior in most cases though. We could consider changing the code to use clientWidth and clientHeight instead.

If this overflow behavior is still necessary, I hope we can add an option for users like me to turn it off. Or even better, have it off by default.

Another possible solution is allowing the user to specify the height and width of the node via the options, but unfortunately it does not work for me since the node I am trying to screenshot has a border - see this jsfiddle. We'd need to change applyOptions so it takes this border into account so the resultant image isn't skewed.

The same issue reported from the original repo: tsayen#121 is still happening. There is a note to a potential fix (tsayen#142) but it was never merged.

Hey first of all: Great work!

I want to ask you if you could release a new version to npm/yarn with your changes from the last months.
Escpecially the onclone feature is something I need for my project.

Thank you in advance! :)

Use case: description, code

jsfiddle

Expected behavior

Actual behavior (stack traces, console logs etc)

Library version

Browsers

• Chrome 49+
• Firefox 45+
  

Use case: description, code

My DOM to save as:

<div id="mywrap" class="wrapper">
    <div class="layer1>My images / texts</div>
    <div class="layer2>My images / texts</div>
</div>
All layer is absolute with z-index as 1, 2, 3 => layer1, layer2, layer3.
My JavaScript code as...
let layer3 = document.createElement('div');
layer3.style.width = '100px';
layer3.style.height = '100px';
document.getElementById('mywrap').appendChild(layer3);
Layer3 is not show in created image.

Expected behavior

The result must be included layer3

Actual behavior (stack traces, console logs etc)

Library version

05-07-2022

Browsers

• Chrome 100+
• Firefox 100+

HI,
I have an issue with Angular 8+

Access to XMLHttpRequest at 'http://example.com/images/example_image.png' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Is there a way to add a header to requests maybe?
Or what can I do with that?

Browsers

• Chrome 49+
• Firefox 45+

Use case: description, code

Fails to export canvas with 0 width
https://jsfiddle.net/nv5aq6wh/

Expected behavior

export image

Actual behavior (stack traces, console logs etc)

throws error without stacktrace and explanation. was hard to find a cause...

Library version

@master

Browsers

• Chrome 49+

I tried this lib with a root node that is an <iframe> and got that html2canvas is not defined

Hi folks,

Just a quick question. Is that possible to run dom-to-image on NodeJS?

Use case:

I was using the dom-to-image-more, and although it was suprisingly faster than the regular lib it was not properly rendering fonts on SVG. I made a comparisson between 2 libs:

** New Edition **
I've run the minified version and it breaks the svg, but the "ugly" run just fine:
repository with just these 2 files to download

dom-to-image-more
dom-to-image-retina-fix

more

function newCanvas(domNode, scale) {
            var canvas = document.createElement('canvas');
            canvas.width = (options.width || util.width(domNode)) * scale;
            canvas.height = (options.height || util.height(domNode)) * scale;

retina-fix

function newCanvas(domNode) {
            var canvas = document.createElement('canvas');
            canvas.width = options.width || util.width(domNode) * 2;
            canvas.height = options.height || util.height(domNode) * 2;
            canvas.style.width = util.width(domNode);
            canvas.style.height = util.height(domNode);

=======================

more
look at the $

function parseExtension(url) {
            var match = /\.([^\.\/]*?)(\?|$)/g.exec(url);
            if (match) return match[1];
            else return '';
        }

retina-fix
look at the $

function parseExtension(url) {
            var match = /\.([^\.\/]*?)$/g.exec(url);
            if (match) return match[1];
            else return '';
        }

=======================

more
look at the reject resolve

function newImage(element) {
            return {
                inline: inline
            };

            function inline(get) {
                if (util.isDataUrl(element.src)) return Promise.resolve();

                return Promise.resolve(element.src)
                    .then(get || util.getAndEncode)
                    .then(function(data) {
                        return util.dataAsUrl(data, util.mimeType(element.src));
                    })
                    .then(function(dataUrl) {
                        return new Promise(function(resolve, reject) {
                            element.onload = resolve;
                            // for any image with invalid src(such as <img src />), just ignore it
                            element.onerror = resolve;
                            element.src = dataUrl;
                        });
                    });
            }
        }

retina-fix
look at the reject resolve

function newImage(element) {
            return {
                inline: inline
            };

            function inline(get) {
                if (util.isDataUrl(element.src)) return Promise.resolve();

                return Promise.resolve(element.src)
                    .then(get || util.getAndEncode)
                    .then(function(data) {
                        return util.dataAsUrl(data, util.mimeType(element.src));
                    })
                    .then(function(dataUrl) {
                        return new Promise(function(resolve, reject) {
                            element.onload = resolve;
                            // for any image with invalid src(such as <img src />), just ignore it
                            element.onerror = reject;
                            element.src = dataUrl;
                        });
                    });
            }
        }

Hi,

is it possible to merge tsayen#142 or has it already been done?

Thanks in advance!!

Please refer to tsayen#77

Am trying to divide my html into multiple pages but the element are getting cut abruptly

Use case: description, code

Hi!
I'm trying to install the package on my node.js app, but I'm not sure of how to do. I copied the content of /src/dom-to-image-more.js into my JS script (in the "public" folder), but whenever I try to use the default example:

var node = document.getElementById("h1");

domtoimage
  .toPng(node)
  .then(function (dataUrl) {
    console.log(dataUrl)
  })
  .catch(function (error) {
    console.error("oops, something went wrong!", error);
  });

I got an error saying ownerWindow is not defined.

I tried to use npm install and put import domtoimage from "dom-to-image-more"; in my JS file but then I get an error when trying to use it (<script src="/js/dom-to-img.js" type='module'></script>):

Uncaught TypeError: Failed to resolve module specifier "dom-to-image-more". Relative references must start with either "/", "./", or "../".

I'm pretty new to this, so, not sure what's going on...

Expected behavior

?

Actual behavior (stack traces, console logs etc)

dom-to-img.js:475 Uncaught ReferenceError: ownerWindow is not defined
at Object.getWindow (dom-to-img.js:475:79)
at toSvg (dom-to-img.js:68:50)
at draw (dom-to-img.js:205:16)
at Object.toPng (dom-to-img.js:139:16)
at :4:4

Library version

2.13.1

Browsers

• Chrome 49+
• Firefox 45+

How to allow library to use fonts?

Use case: description, code

Use custom fonts in html, especially google fonts, loaded via link. Results after applying dom-to-image-more to div will produce wrong fonts.

Expected behavior

Fonts should be the same as in the original html.

Library version

2.8.0

Browsers

Chrome Version 76.0.3809.132 (Official Build) (64-bit)

Use case

jsfiddle

Render a text node.

I know wrapping it with a span can make it render, but what I'm working on is a developer tool, so I want to be able to take screenshot of any DOM node including text node.

Expected behavior

Render correctly.

Actual behavior

Fail to render.

On chrome it gives:

Failed to execute 'appendChild' on 'Node': This node type does not support this method.

The source location is:

Seems it does not take into account the case of text node and tries to add a style element into it.

Is it difficult to make it support text node?

Library version

2.9.5

Browsers

• Chrome 49+
• Firefox 45+

Use case

When cloning a node that has absolute positioning, domtoimage produces an image whose contents are shifted by the position of the node. This results in a significant portion of the image being missing. See this jsfiddle.

Expected behavior

The image produced by domtoimage should be the same, whether the node has absolute positioning applied or not.

Actual behavior

The image produced is shifted, with most of the content missing.

Library version

2.8.0

Browsers

• Chrome 90
• Firefox 88

Possible solution

I fixed this in my own copy of dom-to-image-more.js by adding the following code to the end of the copyProperties function, which starts on line 289:

// Remove positioning of root elements, which stops them from being captured correctly
if (root) {
    ['inset-block', 'inset-block-start', 'inset-block-end'].forEach((prop) => target.removeProperty(prop));
    ['left', 'right', 'top', 'bottom'].forEach((prop) => {
        if (target.getPropertyValue(prop)) {
            target.setProperty(prop, '0px');
        }
    });
}

This sets any properties like top and left to 0 if they had been set on the cloned node. It also removes inset-block properties, which is a newer CSS property that has the same effect.

I'd be happy to create a pull request for this issue, if anyone would be willing to review it

Use case: description, code

I want to use this library from within my Kotlin/JS project, but it does not contain any type definitions that could be used by the Dukat tool.

Expected behavior

High quality TypeScript type definitions exist and can be used to import this library into Kotlin/JS projects

Actual behavior (stack traces, console logs etc)

TypeScript type definitions are missing and thus interoperability is very limited/non existent.

Library version

2.9.5

Browsers

• Chrome 49+
• Firefox 45+

Is this possible?

I have been using this but it is limited to having to ensure the element is already in the DOM Tree.

Mu use case, is that there are times i create the element programmatically. Thing is, I have to attach this to the DOM tree in order for the toSvg() or toPng() to work.

I wonder if it is possible to do the same thing without having to add the element to the DOM tree?

    var el = document.createElement('div');
    el.setAttribute('style', 'white-space: nowrap; position: relative; z-index: -99; width: 100px; height:200px; display: inline-block; font: ' 12px Arial');
    el.setAttribute('id', 'test');
    el.innerHTML = 'sample text';

    $('#where_to_insert).append(el);

    domtoimage.toSvg(el).then(function(dataUrl) {
console.log(dataUrl);
        $(el).remove();
    });

This works because of $('#where_to_insert).append(el);, but if i do not add it to the DOM Tree. nothing gets rendered.

Thoughts?

Use case: description, code

Thanks for the help.

domtoimage.toJpeg(
		document.getElementById('street_view'), 
		{ 'quality':0.95 }
	).then(function (dataUrl) {
		
		var img = new Image();
		img.src = dataUrl;
		document.body.appendChild(img);
	})
	.catch(function (error) {
		console.error("oops, something went wrong!", error);
	});

<iframe 
id="street_view" 
width="100%"
height="1024px"
style="border:0"
loading="lazy"
allowfullscreen
src="https://www.google.com/maps/embed/v1/streetview?key=REDACTED
&location=47.2740517,-2.2116541
&heading=10
&pitch=10
&fov=70">
</iframe>

Expected behavior

An image containing the screenshot of the iframe

Actual behavior (stack traces, console logs etc)

Image of the correct size, but entirely black.
No exception are thrown, no errors.

The only error is js?client=google-maps-embed&paint_origin=&libraries=geometry,search&v=3.exp&language=en_US&callback=onApiLoad:258 The deviceorientation events are blocked by permissions policy.

Library version

• master built a few minutes ago
• dom-to-image-more 21-05-2019

Browsers

• Chrome 49+ (90.0.4430.212 )

Use case: description, code

I'm trying to take several images and compose them together into one image for download. I'm also adding some metadata text on top of each image.

I have a prototype working at:
https://csb-te5qjm.vercel.app/

It works partly, but I'm getting CORS issue on some images (from Pinterest, Wikipedia). Just wondering how best to fix this. The cachebust option doesn't work for me. Should I try a proxy server to fix this issue?

Below is my code for the event component(i'm using react).

import domtoimage from "dom-to-image"

const downloadImage = () => {
  domtoimage
    .toJpeg(document.getElementById("event-container"), { cacheBust: true })
    .then(function (dataUrl) {
      var link = document.createElement("a")
      link.download = "my-image-name.jpeg"
      link.href = dataUrl
      link.click()
    })
}

Expected behavior

Actual behavior (stack traces, console logs etc)

I'm getting this error in the console:
cannot fetch resource:
I'm pretty sure it's a CORS issue and that images from Pinterest or Wikipedia are not being rendered. Images from Twitter however is OK and gets fetched.

Library version

2.11.1

Browsers

• [ x] Chrome 49+
• Firefox 45+