I'm looking to see if this is possible and if so how to do it. I want the user to upload an image with a white background. The image can be anything from a pair of shoes to a hat. The website will then automatically turn that white background transparent then store it. What I want to know is there a way using HTML Canvas/CSS to transform that white background to 100% transparency?
Asked
Active
Viewed 244 times
2
-
Why would you want to do the transformation client-side? – JJJ Jul 28 '12 at 06:53
-
1Turning *one* colour into transparent is easy (although I'm not sure how to do it in canvas). But that will be far from true transparency, as natural photographs will almost always have edges that differ from the standard colour. An automated solution will always be imperfect. – Pekka Jul 28 '12 at 06:54
-
1@Juhana Is there a way to do this server-side with PHP or jQuery? Should I assume then that such a task is impossible? – thank_you Jul 28 '12 at 06:59
-
1It would be much, much easier to use Imagemagick or something similar on the server. (You can't use jQuery/JS server-side.) – JJJ Jul 28 '12 at 07:01
-
My mistake. It's been a late night. Thanks for the suggestion. I'll look into it. – thank_you Jul 28 '12 at 07:04
-
1IM examples are here: http://www.imagemagick.org/Usage/masking/#floodfill that page will also show the problem of edges (the 1st image of the giant). The `fuzz` option (2nd example) can help in some cases – Pekka Jul 28 '12 at 07:11
-
Saw that. Thanks for the help Pekka and Juhana. – thank_you Jul 28 '12 at 07:14
-
I have made an example (using plain PHP GD functions), I just need to find somewhere to host it as my website is down... – uınbɐɥs Jul 29 '12 at 05:37
1 Answers
0
You can have a look at this answer, which explains nicely how to change colors in an image using javascript : How to change color of an image using jquery
However, you should do this using server side code, and be aware that results may vary, as just removing a color will not look nice on the edges of your object.
