Legacy ImageMagick Discussions Archive

Hello,
Ive been looking into using ImageMagick for a project I am currently working on; and maybe I'm not searching for the correct terms.
What we need to do is when a customer uploads a graphic jpeg, gif, bmp, png, we need the background be removed and then the customer needs to be able to recolor areas of the image based on pattern colors that are available and any colors that arent assigned to the pattern.

To explain further- this project is for a company that knits custom team sports socks- teams have logos and the sock patterns are set and have specific combinations of colors. There are a maximum of 5 available colors to apply to a logo. The attached image shows how we would like the image to import https://www.dropbox.com/s/yij4ibbbuwbh8 ... l.JPG?dl=0

What the customer needs to be able to do now is select a color and apply it to the white areas and the outline in the supplied image.

If anyone has any experience with this or knows the terms that I need to use to research I would appreciate the help.

Thank you

1. You have an image that represents a sock. And you want to change some areas of that image from white to a user-selected colour. Is that right?

2. Can the user also select a logo?

3. Is there one sock design, or more?

(1) is easy, but with a complication at the boundary between white and the other colour. At that boundary, there is "anti-aliasing", a merging of the two colours. A common technique is to make the white areas transparent, and set the boundary to the correct colour but partially transparent. Then flatten the image to the user-selected colour. (In other words, put the user colour "behind" the image, so it shows through the transparency.)

snibgo,
Thank you for the quick reply- here is the link for the current product builder. https://tcksports.com/builder/?group=kn ... ariation=0

What happens in this product builder is- 1 customer selects the pattern/design of the sock- 2 they choose if they want logo or no logo (default is no logo) - 3 If they choose logo they can pick to upload their own image or from a variety of provided stock images - 4 this instantly spawns the confirm logo colors modal window- 5 here is where the customer needs to apply the colors from the sock pattern and any unassigned to the logo.

What we want to have happen at this point to the uploaded image is any background be automatically removed up to the foreground image (knowing there will be some images the customer submits just will not work on) and when placed on top of the sock image, the uploaded image or selected stock image is then recolored with the allowed swatches plus the 1 unassigned.

Hopefully that process makes sense.

So could the method you mention be applied to multiple segments of the image that is selected or uploaded?

Okay, multiple designs for the socks, with up to about four changeable colours per design. A trick there would be to have a "template" for each design. Each template might be a number of images, one image per colour, white where you want the colour, black where you don't, and gray where you want a mixture (anti-aliasing). Then it is easy to construct the final images from the required template and colours.

The stock logos could work exactly the same way.

Uploaded logos are more complex. I suppose these will generally be artwork/graphics of club badges, or similar. How intelligent should this be? A script could estimate how many "real" colours the image has (2, 3, etc), so each can be changed to one of the standard swatch colours. The script could guess at which pixels are "background", and make these transparent.

ImageMagick could certainly do the back-end image processing for this. PHP could do the user interface, making exec() calls to IM as required.

I don't know if PHP exec() can call bash scripts. If it can, that might simplify the development.

snibgo wrote:I don't know if PHP exec() can call bash scripts. If it can, that might simplify the development.

Yes, it can. That is how many of my script clients interface the script to their web site.

chrisrabkin wrote:What we need to do is when a customer uploads a graphic jpeg, gif, bmp, png, we need the background be removed

If the background is not nearly a constant color, then this is very hard to do automatically.

Thank you for the replies-

I need to rewind a bit and address some points that maybe were not as clear as I thought they were.

The product builders have all their respective templates and variations of colors already installed- this was done prior to my coming on to lead the project. The product variations are created using SVG files which render a lightweight image that is then changed with the color swatches. On click the color swatch that is enabled (allowed to be changed) spawns a color selection palette of allowed color choices for this design.

All variations have a maximum of 5 colors, 4 in the sock design itself and 1 unassigned that can be applied along with the 4 assigned sock colors to a customer logo or supplied stock art.

All stock (company provided images) are png's with a transparent alpha channel and a solid black line (consistent and easy to manipulate), the customer provided artwork may not be so great (the stakeholders will have to accept that not every customer supplied image is going to work with this system)

So based on instructions given and oneness placed back on the customer using the product builder- we need a set of imagemajick variables that will A remove the background around the image, B remove color inside an images outlines, C allow sections that are within the outlines to be recolored with some type action, bringing over one of the 5 allowed colors.

What Im lacking is the experience with imagemajick - im missing something. I know Ive seen in the past on tshirt printing websites where this is employed and you can remove background colors, recolor, type text and a few other things. Im never really able to get past the initial questions with these companies to inquire how they are employing imagemajick (leery for obvious reasons).

So, I think you don't need help for the designs or the stock logos. Is that correct?

The difficulties are with uploaded logos.

chrisrabkin wrote:A remove the background around the image,

I assume you mean "make the background transparent". First, define "background". This isn't easy, but we might say, for graphics images: if all the pixels around the edge of the image are the same colour, then that is the background colour. Or, even simpler, the pixel at the top-left corner defines the background colour. But some pixels within the object might have the same colour, so we might say that only pixels of that colour that are 4-connected to the top-left pixel are background. So we can flood-fill with transparency from the top-left.

If the image has anti-aliasing, a special technique may be needed, to avoid traces of the background colour remaining.

It is easiest if uploaded images use a background colour that isn't used elsewhere.

chrisrabkin wrote:B remove color inside an images outlines,

I'm not sure what this means. Perhaps "make a certain colour transparent", so it is the same problem as the background, but we know what colour is to be removed.

chrisrabkin wrote:C allow sections that are within the outlines to be recolored with some type action, bringing over one of the 5 allowed colors.

This is similar again, but instead of making a colour transparent, we change it to the closest of the 5 allowed colours.

snibgo,
When i talk about making colors inside the uploaded image or the provided stock designs transparent- what i want to do is remove or make all colors except the outline of the image and internal boundaries that construct the internal parts of the image transparent. For example take the devil head image on my first example- it has a transparent "background" up to the outer edge of the image border, and inside the internal margins are areas of white. What is likely to happen is a customer will upload an image with a white background and black outlines and different colors inside the internal boundaries. We need to remove all these colors inside the image so they can be replaced with the swatch colors that are available for the current sock pattern and 1 additional unspecified color.

the majority of your understanding in my prior post is correct. Ill whip up an example drawing and post in a few min.

Thanks again for your input!

You should be able to do that with a floodfill starting at some coordinate inside the area whose color you want to make transparent.
the XX% represent how much variation in white you have inside the area. If it is perfectly white then XX=0 or remove the -fuzz XX%. And x,y represents any point inside the boundary of where you want to change, I.e. a white region.

If you want to change the color from white directly to some other color, then
Sorry, I do not know the Magickwand API. The above is the equivalent command line code.

fmw42
Thats a fantastic start! Ill start my research from your suggestions. I do have a question about the starting coordinates you mention- is that starting coordinate an onclick action initiated by the user? Would it be floating per say?

Imagemagick is command line, no GUI to speak of. You have to measure the coordinates by some other means. They are integers for pixel locations, though you can provide float values, but it should not make a difference here since it is just the seed location for starting the flood fill. The origin is the top left corner of the image and y increases downward.