Html2canvas: Element styling only for html2canvas?

Created on 19 Oct 2015  ·  5Comments  ·  Source: niklasvh/html2canvas

I'm using the handy data-html2canvas-ignore tag on a few elements, but Firefox is giving me problems with elements with negative margins. I'd like to be able to add an html2canvas-only style tag for a particular element, such as: data-html2canvas-style="margin-left: 0".

Has anyone else had any luck doing something like this?

Question

Most helpful comment

You can modify the contents of the document (which is a clone of the original) that will get rendered with the onclone option, for example:

html2canvas(document.body, {onclone: function(document) {
  document.querySelector('.something').style.marginLeft = 0;
}}).then(...)

All 5 comments

You can modify the contents of the document (which is a clone of the original) that will get rendered with the onclone option, for example:

html2canvas(document.body, {onclone: function(document) {
  document.querySelector('.something').style.marginLeft = 0;
}}).then(...)

Thanks Nik! Greatly appreciate your work on this library. Is this in the documentation?

No, unfortunately not. The documentation is greatly lacking in many respects at the moment...

My downloaded image isn't getting the proper styling so I'm using computed-style-to-inline-style to render it properly by converting all the styling to inline css. But the issue with that is it's affecting the original dom. So I want to do it for the cloned element instead inside the onclone function but it's not working and the image isn't properly styled. Any idea why it's happening?

I tried to do the same thing, here is how I implemented it and all my styles were properly downloaded:

const computedStyleToInlineStyle = require("computed-style-to-inline-style");

 html2canvas(document.querySelector(".someclass"), {onclone: function(document) {
     computedStyleToInlineStyle(document.querySelector(".someclass"), {
          recursive: true
      });
    }}).then(canvas => {
        const imgData = canvas.toDataURL('image/png');
        ...
    });
Was this page helpful?
0 / 5 - 0 ratings

Related issues

deepender87 picture deepender87  ·  4Comments

Loki180 picture Loki180  ·  4Comments

kunal886496 picture kunal886496  ·  3Comments

stevencherry1 picture stevencherry1  ·  3Comments

koreanman picture koreanman  ·  4Comments