Welcome to the support center for

Fancy Product Designer & Multistep Product Configurator

Programmatically apply filters to images


I would like to apply filters to uploaded images (such as grayscale) programmatically so that the user doesn't have to open and use the filter menu themselves. Unfortunately, there doesn't seem to be any documentation around this. I've found the applyFilters method, but again, I can't figure out how to use it without the documentation. I've searched the forms and found that this has been asked before and not satisfactorily answered.

I tried to guess the syntax needed but can't get it to work:

var elem = fancyProductDesigner.getElementByID('uploaded_image');

How can I apply the grayscale filter programmatically?

After a bit more digging I was able to figure out how to apply filters programmatically. For example, this is how you can apply the Grayscale filter to an image from outside of FPD:

var elems = fancyProductDesigner.getElements();
var elem = elems[36];
grayscale = FPDUtil.getFilter('grayscale');


Login or Signup to post a comment