Retrieve Base64 from Canvas with filters

Question

I need to retrieve the Base64 from a Canvas where I have applied some filters with CSS.

I have tried
canvas.toDataURL()

but it will give Base64 of the original image.

Is there a way to retrieve the Base64 of the image with filters?

Answer 1

CSS filters are not part of the canvas itself, they're applied over the canvas.

To include the filter in the generated image, you need to apply the filter to the canvas itself using JavaScript, to do this you have two main options:

• Use the built in filters , which can do pretty much the same thing as CSS filters (However with limited browser support , at the time of writing)

• Write your own filters (Or find a library that does it for you). This one goes a little out of the scope of this question, however there are some good tutorials for this sort of thing.