Blend colors with images using Canvas

Blend me up, Scotty!

One of latest projects, done here in fleka, was a website for color manufacturer Maxima. This family company, located in Serbia, have a great line of products distributed and used in relatively small market, so our aim was to design and develop website that can help them reach more customers.

Since they are distributing their own color mixing device across country, our job was to replicate the same experience on the website. We build page displaying all shades of available colors and materials with filters an option to send chosen colors (with code) via email. You can check it out here.

The problem:

Displaying colors went smoothly, display grid of tiles in 3 sizes, and voila. But things get complicated with materials. All of them have different properties, granularity levels, smoothness, applying technique etc. In the first batch, we had about 300 database entries with corresponding images. Since those images were not clear enough we decided to use the base image and blend them with RGB value for that particular material. Blend mode of choice was luminosity. Finally, there was a chance to use this CSS property to achieve awesome effects and image transformations.

Light and dark base image for Sahara material type

Here is peace of css code to achieve blending mode using luminosity:

#material__tile — blend{
    background-color: rgb(134, 122, 34);
    background-image: 
url(/assets/images/materials/sahara_dark.jpg);
    background-blend-mode: luminosity;
}

I mentioned two images, not without reason, because for blend mode luminosity we need to check certain RGB values against base image, darker shades blend with darker images and vice versa. So we used javascript library TinyColor to check colour brightness. So, pretty easy, right? Wrong! Using base image and blend it with RGB colour in Chrome is ok, but since we need to cover all other browsers this strategy is not going to work. Safari for instance is not supporting blend mode luminosity, which we are using here, not to mention Internet Explorer. We needed to find another and better way.

Third party solutions

We also tried to implement couple of real-time image processing services out there (Cloudinary and Imgix), but with now luck. Even though we use them in some other web apps, for dynamic crops and scaling, they couldn’t provide out of the box solution for blending modes.

Canvas to the rescue!

Adding material in CMS

Our web project consists of three main parts: API, CMS and website using Laravel and AngularJS. Adding material is fairly simple and straightforward. As shown on the gif above, RGB values are watched and immediately updated on material image to the right. Upon save, javascript code use div with id material__tile — blend and create canvas that is converted to base64 data.

html2canvas(document.getElementById("material__tile--blend"), {
    blendingMode: materialTypeBlendingMode,
    onrendered: function(canvas) {
        base64data = canvas.toDataURL("image/png");
        $scope.item.uploadImage(base64data);
    }
});

Because we are using materials with different blend modes, we introduced variable materialTypeBlendingMode which is defined for each material type.

This base64 data is sent to our API, which converts it to jpg image using PHP Image Magic. Bigger image is used as full screen pattern and smaller one for tiles. Images are saved to media repository, separated from other media files. Each material image is referenced to image by its id.

Generating blended images flow

Here are some final screenshots, also you can check it here.

Full palette with regular images and base images blended with color shades. Used luminosity and multiply mode.

Blend bode “multiply” applied to green shade and wood pattern.

All this stuff may look like a bit overkill when you can upload regular image and wrap it up, but there are hundreds of available shades for each material type, and at the end of the day you need to create them and enter manually, so… all help you can get automating process is more than welcome.
Blending modes are not so well supported after all (partial support in Safari and no support in IE and Edge), so we needed to create this flow in order to produce best possible user experience and to present client’s offer in more authentic and appealing way.