Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android - Selective focus on a bitmap

I'm currently able to blur a whole bitmap (by resizing it down than up for example).

The effect I'm trying to accomplish is a selective blur : the result bitmap would be blurred, minus a round / oval part of it which would still be sharp :

Example image

The difficult part is that the sharp oval part could be smaller or bigger, and should be movable (its coordinates aren't always the center of the original bitmap).

I already found a solution, but I don't think of it as a good performance wise solution :

  1. Copy the original bitmap into two different bitmaps (background and foreground)
  2. Blur the background one
  3. Crop the foreground one into the desired shape (round or oval)
  4. Erase the borders of the foreground a bit (to avoid a too sharp difference between foreground and background images)
  5. Put back the two images together
  6. Export it as a bitmap

Possible solution image

One another solution could be to recreate a blur algorithm which would run through every pixel of the original bitmap and apply an amount of blur higher or lower depending on the portion of the bitmap.

like image 350
Quentin S. Avatar asked Oct 19 '22 19:10

Quentin S.


1 Answers

I finally decided to follow my first idea, using @DerGolem links. Here is the updated version of the chart :

Updated chart

The algorithm is quite simple:

  1. We create two copies of the bitmap : the first one will serve as the background, while the other one will be used as the sharp part of the picture. To avoid the second one to be too sharp, we'll use a prepared mask (stored in the drawables folder)
  2. We blur the first one as much as we want
  3. We apply the mask to the second bitmap
  4. We create a bitmap from those two previous steps

I created a sample demo application, hosted on BitBucket. You can clone the project and try it, the performances are much better than what I expected!

In order to achieve this, I used the following resources:

  1. RenderScript to blur the background, much better than resizing the image down and up : 1, 2
  2. Understand Porter/Duff

As said in the project's readme, the provided code is far from being perfect, but it works.

like image 184
Quentin S. Avatar answered Oct 29 '22 19:10

Quentin S.