I would like to apply filters to a full color image using Fabric.js in order to simulate what it would look like if the image were to be printed using only one color of ink. Much like grayscale, but with an arbitrary base color instead of gray. My approach so far has been to convert the image to grayscale and then adjust the brightness and apply a tint or overlay using BlendColor. This solution tends to give images that are too dark or washed out. What's the most technically correct/accurate way to do this?
Here is what I have tried so far:
var grayscale = ThirdPartyLibrary.getFilter('grayscale'); // using the grayscale filter from another lib
var brightness = new fabric.Image.filters.Brightness({
brightness: 0.2
});
var tint = new fabric.Image.filters.BlendColor({
color: '#3b7998',
mode: 'tint',
alpha: 0.5
});
element.applyFilters([grayscale, brightness, tint]);
Any input is appreciated, even if just the basic approach and I can figure out how to implement the filters in Fabric.js.
If you are trying to get an effect like this:
You should be able to obtain it with using first the greyscale filter of fabricJS with the average mode, and then the blendColor with multiply mode.
Image luminance shouldn't change, but it won't work perfectly with all colors.
You need to pick up colors that have max saturation and lightness at 50%.
You have just the HUE as a free parameter.
You can generate them with the fabric color utils:
const hsl = `hsl(${Math.round(value * 360)}, 100%, 50%)`;
const [r,g,b] = fabric.Color.sourceFromHsl(hsl);
Related
I have a image processing in my uwp app where i read the colors of the image and display the results based on the matching colors.
To read the colors i use Color theif and get the color palette.
The problem is at times the background color is considered as the primary color since it is dominent
In the above image the second color must be the primary color of the image which i need. But the gray is obtained as primary color.
Since image background could be of any color, I think the best bet is to pick colors from the corners of an image (which more likely to be of background color) and compare them against the colors of the palette returned by ColorThief using the Color difference formula.
You could then use color differences and the amounts of times the color from ColorThief palette was a match to corner pixel color as weight coefficients to decide which one of the ColorThief palette colors is more likely to be the background color of the image.
I need to modify any image to get these results:
White color has to be the color I specify, I don't want to keep source image's lightness.
Rest of colors have to be tinted similar to Photoshop's "Color" layer blend mode. That is, I need them to look like if the source image was grey-scaled and then a color filter applied, even for non-greyscale images.
I am using the UIImage + Colorize.swift functions. The tint(tintColor: UIColor) -> UIImage function works as I need for non-white colors, but white color remains white. How could I get the results I need?
I have a green button with a white icon and title. I am trying to use the GPUImage library that I just learned about to change the green to blue, but keep the white as white. Here is my code:
UIImage *inputImage = [UIImage imageNamed:#"pause-button"];
GPUImageFalseColorFilter *colorSwapFilter = [[GPUImageFalseColorFilter alloc] init];
colorSwapFilter.firstColor = (GPUVector4){0.0f, 0.0f, 1.0f, 1.0f};
colorSwapFilter.secondColor = (GPUVector4){1.0f, 1.0f, 1.0f, 1.0f};
UIImage *filteredImage = [colorSwapFilter imageByFilteringImage:inputImage];
There are 2 problems:
The resulting image is a pale purple instead of blue. Almost as though the blue is being overlaid with a 50% opacity or something and the original green was set to white.
The button isn't a rectangle (more of an oval), and the transparent areas of the PNG (the corners) are now filled in with a semi-transparent blue (well, pale purple actually). Basically the button is now a rectangle with a darker oval in the middle.
Am I using this filter incorrectly? Do I have to do some pre-processing before using this filter?
The GPUImageFalseColorFilter is probably not what you want to use to alter the hue of something. It's a reimplementation of the filter by the same name in Core Image, which first converts an image to its luminance and then replaces white with one color and black with another. Instead of a grayscale, you get a variable mix between these colors. I also don't think it respects alpha channels at present.
You might want something more like a GPUImageHueFilter (again, not sure if it respects alpha) or a GPUImageLookupFilter. You might need to build a custom filter to locate a color within a certain threshold (look at the chroma keying ones for that) and to replace that with your given color. Hue changes might do the job, though.
Trying to think of a way to create color aberration (also known as color fringing) effect in black and white images on iOS but i can't figure out how. I want to create the Before effect .
Images will be passed through a filter chain with CIMaximumComponent or CIMinimumComponent for the black and white effect.
Is color aberration doable with Core Image filters? Any ideas?
How can we change the Hue and Saturation of an Image inside a PictureBox?
Below is a screenshot of an app I wrote for Windows Phone. The first image shows a blue note icon, the second, shows an orange-red note icon.
Basically what I am trying to accomplish is change the hue/saturation of certain UI elements (toolbar icons (with images)) when hovered-over. Instead of loading all these images and having 2-3 different color variations for each image. I would prefer to just have 1 image and just programmatically change the hue and saturation accordingly when the image is hovered over:
Original image:
Altered image (desired effect when changing hue/saturnation programmatically):