Automatically convert user uploads to grayscale in WordPress

3 Views

Hello,

I’m currently working on a WordPress site for a client that uses the Fancy Product Designer combined with WooCommerce to sell custom engraved memory stones. The stones are black and the engravings are laser etched, which produces beautiful grayscale text and images.

Read More

The client wants the images uploaded to the Designer to be grayscale so customers don’t end up with an unrealistic expectation of a color print, which the client cannot provide.

The Fancy Product Designer is a solution to most of our problems, but the individual elements in the designer are inaccessible to CSS, since they’re drawn on an HTML5 CANVAS element via the plugin’s JQuery. Our original solution was to apply a grayscale CSS overlay to the entire CANVAS element, but that obfuscated the red error messages native to the Designer.

I think the solution is in finding a plugin or method that automatically converts user uploads to grayscale before applying them as elements to the CANVAS.

Please help!

Post Views: 3

Related posts

Leave a Reply

2 comments

  1. I can’t comment because I lack the rep, but there’s a tutorial that allows grayscaling of images in canvas. This can be achieved through the use of an image filter, individually reading each pixel of the image, and then de-emphasizing the colors so they’re gray. Check it out here

  2. Turns out the Fancy Product Designer uses Fabric.js to control its <canvas> tags. All it took was a few lines of code:

    var d = $("div.outermost"); //Outermost <div> containing the <canvas>.
var canvas = new fabric.Canvas('id');
var filter = new fabric.Image.filters.Grayscale();
d.on('elementAdded', function(evt, element){
    element.filters.push(filter);
    element.applyFilters(canvas.renderAll.bind(canvas));
});

    This simply applied a grayscale filter to the elements as they were included to the canvas without having to do things with convoluted plugins or processes. Go here for more on the Fabric.js canvas method