Solved

Fade an image revisited

Posted on 2011-03-01
9
1,163 Views
Last Modified: 2012-05-11
Hi,

I asked a question earlier about fading an image, that is create the impression that the image loose its colors. So the answer was using transparency which works fine.
But I wonder if there are other way of doing this? My problem is that when I draw an image behind the transparent image it will of course show.

So is it possible to make the colors fade by other means? Perhaps using the ColorFilter?

Thank you,

Peter
0
Comment
Question by:pivar
  • 3
  • 3
  • 2
  • +1
9 Comments
 
LVL 86

Assisted Solution

by:CEHJ
CEHJ earned 100 total points
ID: 35006696
>> My problem is that when I draw an image behind the transparent image it will of course show.

Yes it will. One approach you could try is to keep the image fully opaque but mask it with another image, which of course CAN have an alpha channel
0
 
LVL 22

Author Comment

by:pivar
ID: 35007179
I'm not sure I follow. Can you show with some code?
How will the image fade?
0
 
LVL 12

Assisted Solution

by:satsumo
satsumo earned 300 total points
ID: 35007893
Yes, there are other methods.

One method is to draw a progressively more opaque rectangle on top of the image you want to fade. This is effectively what CEHJ suggests. This method can create a few styles of transition.  If you draw a white rectangle with alpha masking, this is a fade-to-white effect.  If you draw a white rectangle with an additive blend you get a white-out effect (like turning the brightness on TV right up).

The two methods have a different 'feel' about them.  The masking is smooth, the whiteout is more organic (the best word I can think of).  I don't know if the Canvas draw code from the previous question was any use to you.  Otherwise, I would show code for creating this effect.
0
 
LVL 12

Expert Comment

by:satsumo
ID: 35007938
Yet, another method is palette manipulation.  However, thats not supported by an modern API that I know of and requires using an indexed image.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 5

Expert Comment

by:UnConn
ID: 35007999
If you do not mind 'modifiying' the bitmap in memory at run-time (a little expensive) look into Xfer modes Avoid or Target.  I am using it to tint (or replace) anythign that is white (or close to white).  If you did a paint with an Xfer mode of Avoid set to black (avoid black) you could 'color' everything else white.  This should 'tint' the image white thereby making it a vlack and white image.  If you wanted it to fade you would have to run a loop where the accuracy in matching the color changed each time from 0 to 255 I think.
0
 
LVL 22

Author Comment

by:pivar
ID: 35008325
satsumo, the canvas code from the previous question was in javascript (according to the methods used). I would prefer to have it in java (but pseudo-code could also work). I ended up setting the alpha on the paint object used to draw the bitmap as described in one of the links.

I feel I need to give some more details. The image I want to fade is of an irregular shape. Behind the shape I don't want image painted behind to show. But outside the shape I want images behind to show. The pixels outside the shape are set to full transparency.

I was thinking of painting a masked opaque bitmap with the background color behind my image. Would that give the same effect or better/worse than the one you described above?
If you just could show how to create an image from another image setting the opaque pixels to a certain (opaque) color and keep the transparent pixels I think it would be enough. Looping through all pixels you don't need to show, but hopefully there is a more efficient way to do this, perhaps by filters or the like.

0
 
LVL 5

Assisted Solution

by:UnConn
UnConn earned 100 total points
ID: 35008652
The first one uses Avoid, but also only does it for a circle that I set.

The second one uses Target, creates the shape by drawing a circle first and then painting the the whole circle using Target.

Both will maintain the transparencies set.

/* START modify back color */
Bitmap viewBack = BitmapFactory.decodeResource(context.getResources(),back);
Bitmap backBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas backCanvas = new Canvas(backBitmap);
Paint backPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
backCanvas.drawBitmap(viewBack, 0, 0, backPaint);
backPaint.setXfermode(new AvoidXfermode(Color.TRANSPARENT, 255, Mode.AVOID));
backPaint.setColor(colorBack);
backCanvas.drawCircle(147, 147, 294, backPaint);
backCanvas.setBitmap(backBitmap);
if (DEBUG) Log.v(TAG, "back " + mAppWidgetId);
/* END modify back color */


backPaint.setColor(Color.WHITE);
backCanvas.drawCircle(147, 147, 138, backPaint);
backPaint.setXfermode(new AvoidXfermode(Color.TRANSPARENT, 255, Mode.AVOID));
backPaint.setColor(Color.WHITE);
backCanvas.drawBitmap(viewPic, 0, 0, backPaint);
backCanvas.setBitmap(backBitmap);
0
 
LVL 12

Accepted Solution

by:
satsumo earned 300 total points
ID: 35011463
Yes, the method you suggest (drawing the fade color as opaque and putting the semi-transparent image on top) gives the same result as the one I decribed.

Unless the graphics object you're using has better compositing functions than the HTML Canvas, the only way I can see to create the mask image is to load the original image into Photshop/GIMP/Some-Image-Editor and set the color channels to white but leave the alpha intact.  I know you can do the operation you want in other graphics systems.  UnConn might know a better way.

You could try repeatedly drawing the image over itself with an additive mode.  If pixels in the image have some whiteness the image will eventually become white.  By whiteness I mean every pixel has some amount of red, green and blue (even a small amount will do).  That would be an uneven sort of fade and it can only fade to white.
0
 
LVL 22

Author Closing Comment

by:pivar
ID: 35018344
Thanks for your assistance,

I used the paint the fading image on an opaque background scheme.

I used a loop over pixels to create the opaque background bitmap mask.


/peter
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Working settings for French ISP Orange "Prêt à Surfer" SIM cards for data connections only. Can't be found anywhere else !
Introduction This article is the first of three articles that explain why and how the Experts Exchange QA Team does test automation for our web site. This article explains our test automation goals. Then rationale is given for the tools we use to a…
Viewers learn how to read error messages and identify possible mistakes that could cause hours of frustration. Coding is as much about debugging your code as it is about writing it. Define Error Message: Line Numbers: Type of Error: Break Down…
This video teaches viewers about errors in exception handling.

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now