Is there any way I can retain a grayscale filter applied to an image?

[JamesDonnelly]

I've been using this for a while now and I think it's awesome, but I've come across a small issue which I'm hoping there's a simple solution for.

Here is an example of some content which is rendered within my application:

Notice the grayscale effect applied to the second obtained image.

Here's how it looks when rendered through html2canvas:

Notice how the grayscale effect isn't applied any more?

The effect is applied with:

-webkit-filter: grayscale(100%);
filter: grayscale(100%);

Is there any way I can retain this grayscale effect?

[JamesDonnelly]

I've created a CodePen example of this in action: https://codepen.io/inb4/pen/LyBLeq.

Code

<figure class="grayscale"></figure>

.grayscale {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

html2canvas(..., {
  allowTaint: true
});

Output

[eKoopmans]

Hi @JamesDonnelly, html2canvas doesn't currently support the filter CSS. Support for each feature has to be coded individually, and it looks like filter has a lot of pieces and not great browser support, so unless an ambitious coder feels up to the challenge, I don't expect it will be supported in the near future.

[niklasvh]

Closing in favor of #493

[cyan33]

I wrote a small library which resolves this issue, hope it helps:
https://github.com/cyan33/image-screenshot