3

I'm working on a t-shirt designer and got stuck with one problem. When I upload custom artwork into the system I automatically remove the background of the uploaded image. But for some reason it is not being removed completely.

Image example:

T-shirt image

This is pretty much how the art is being presented most of the time all those white pixels aren't fully removed.

I have a simple code right now, and don't have an access to Imagick.

protected function remove_image_background($image, $bgcolor)
{
    $bg_a = imagecolorallocatealpha($image, $bgcolor['red'], $bgcolor['green'], $bgcolor['blue'], 127);
    imagealphablending($image, false);
    imagesavealpha($image, true);
    imagefill($image, 0, 0, $bg_a);
    return $image;
}
halfer
  • 19,824
  • 17
  • 99
  • 186
Alex Gurin
  • 61
  • 3
  • Can you provide the original image. It is possible that the color is slightly different from the given one... – Willem Van Onsem Mar 30 '15 at 14:38
  • 5
    Your problem is that around the shirt, there are non-white areas where shadow occurs in the photograph. Flooding the genuinely white areas with a dark colour shows these areas up as very light grey. One approach is to use an artwork package, such as GIMP, to remove the background colour and make it transparent. This will either require the eraser brush or a magic selector - either way this is rather hard to do just with GD2. – halfer Mar 30 '15 at 14:53
  • @CommuSoft I tested all original images that I've been uploading. All of them have white background. I picked the color with a color picker in photoshop and it is always white. – Alex Gurin Mar 30 '15 at 17:07
  • @halfer Do you think Imagick will do the trick? I contacted my hosting support and they have installed it for me just now – Alex Gurin Mar 30 '15 at 17:08
  • @Alex: unlikely, in my view - have a look at the docs to see how it might be done. It's not a trivial problem, and in photography work this generally used to require manual cutting-out with an eraser brush, so that a 8-bit opacity layer was created. I'm not au fait with modern methods, so its possible someone has created a solid and reliable magic selector that can be applied programmatically. This would try to determine which pixels belong to the object and which are shadow, and apply an auto-cutout accordingly. – halfer Mar 30 '15 at 17:17
  • (Personally I'd fix each of these manually in GIMP, and then you can place them on any colour you like. For images with transparency, it's better to composite onto another image than to flood fill, as the latter tends to eat into your anti-aliasing at the edges of your product). – halfer Mar 30 '15 at 17:24
  • @halfer problem is, people who will be using this t-shirt designer aren't always going to upload fully transparent background logos/images, this is why I need to make this functionality. Similar functionality is on customink.com designer – Alex Gurin Mar 31 '15 at 12:44
  • Right, so I've just tried their designer. They appear to be re-colourising an image with full transparency (I would guess 8-bit). It's just one T-shirt image that's been cut out using the tools I described above, and saved perhaps in PNG format so the transparency layer is preserved. You can then do colourisation programmatically in a trivial operation. I suspect, nevertheless, the image needs substantial manual preparation, and would doubt that uploading shirt images could be made to work in the same way. – halfer Mar 31 '15 at 19:42
  • If you believe users can upload an article of clothing and re-colourise it using this tool, can you describe to me how to get to that item of functionality? I can't see it. – halfer Mar 31 '15 at 19:43
  • @halfer I just want to make it clear for both of us because I have a feeling that we are talking about different things. – Alex Gurin Apr 01 '15 at 17:47
  • You said "Similar functionality is on customink.com designer", by which I understood you meant the ability to "upload ... logos/images [that do not have a] fully transparent background". However, I tried looking for this, to see how they might have done it, and they do not appear to offer it. – halfer Apr 01 '15 at 17:49
  • @halfer The image I presented in this question is not an actual piece of art that users would upload, this was just a test of mine to check if my scripts were working. But I posted this question because scripts aren't removing background fully. People aren't going to re-color the art that they upload, they will only need to upload it and drag/resize it around the t-shirt in the background (as I said before pretty much as customink.com) – Alex Gurin Apr 01 '15 at 17:51
  • Right, I see - see my previous comment for how confusion entered our discussion. So, the solution is as I have already outlined, and is fairly easy - all your images need to be cut out using the Eraser tool (or similar) in a painting package, and saved in a format that supports transparency. Since you say that users won't need to upload clothing artwork, that makes the problem _much_ easier. Can you give that a go? – halfer Apr 01 '15 at 17:52
  • 1
    My bad, you reply faster than I answer to all your and my own questions :D – Alex Gurin Apr 01 '15 at 17:57
  • @halfer I just wanted to let you know that, Imagick did the trick. Imagick does the job better than GD library. And it can also control the percentage of the removed color. – Alex Gurin Apr 08 '15 at 13:34
  • Great @Alex! If you can capture how to do that somewhere - maybe as an answer to the suggested duplicate? or a Gist/GitHub demo - that may be very useful to someone else. I would have thought Imagick was too low-level to be able to cope with the anti-aliased edges of non-transparent, non-rectangular images. – halfer Apr 08 '15 at 13:43
  • 1
    @halfer Will do once I get time, still got things to fix. – Alex Gurin Apr 08 '15 at 14:10
  • @halfer I posted my comment here http://stackoverflow.com/questions/10751227/remove-image-background-with-php-and-save-transparent-png – Alex Gurin Apr 08 '15 at 14:22

0 Answers0