Photoshop Question posted in
The official user guide can be found here.

iOS and Android Algorithm or library for feathering edges of the images similar to photoshop's

I am looking for iOS and Android library for (preferably) or algorithm that would help me to feather edges of the image in similar way how it is handled in Photoshop. The illustration below shows the desired effect of the algorithm. I am not interested feathering bounds of the image, just alpha edges. I have been searching for algorithm that can accomplish it for few days without luck. Any help will be appreciated.

Feathering Image

Tags:

2

Answers


  1. 0

    Assuming that you have alpha channel (like on photo with transparent background) it seems that regular convultion blur matrix should satisfy you.

    However instead of going through RGB channels – you should go through ALPHA channel only.

    Check the blur filter here:
    https://en.wikipedia.org/wiki/Kernel_%28image_processing%29

    You are interested in box blur/gaussian blur. However to make this effect more smooth – you should use matrix of bigger size.

    The reason that algorithm will satisfy your needs is that if all surrounding pixels have alpha 0 – it will be still 0. If 255 – it will stay 255. Just pixels in area of border between alpha 0/255 will be affected.

    Edit:

    Please check this fiddle with chrome (in ff that’s really slow):
    http://jsfiddle.net/5L40ms65/

    You can take a look into algorithm in the end of code. Since implementation i noted that:
    – no need to blur if all neigbour pixels are 255 or 0 (alpha channel)
    – it is required to blur also RGB in other case

    In general:

    RADIUS = 2 (makes total width of matrix = 5)
For x = 0..width
  for y = 0..width
    if all pixels in square of radius 2 are alpha = 0
      do nothing
    elsif all pixels in square have alpha = 255
      do nothing
    else
      pixel[x][y].RGB = average RGB of adjacent pixels where alpha != 0
      pixel[x][y].ALPHA = average ALPHA in square

    Example result with radius=2

    Of course this is rather concept program, there is a lot of place for memoization and tuning this script however it should make a big picture clear

    enter image description here

    Login or Signup to reply.
  2. 0

    You could change the alpha of your border based on the background color of the view.

    var r:Float!
var g:Float!
var b:Float!
var a:Float!

if self.view.backgroundColor.getRed(red:r, green:g, blue:b, alpha:a) {
  var imgv = UIImageView(frame: CGRect(x:100, y:100, width:100, height:100))
  imgv.image = UIImage(named:"name")
  imgv.layer.borderWidth = 2.0
  imgv.layer.borderColor = UIColor(red:r, green:g, blue:b, alpha:0.5).CGColor
  imgv.layer.cornerRadius = imgv.frame.size.width / 2
  imgv.clipsToBounds = true
}else{
   //Could not get the RGB of background color
}

    You may see errors in this code because I have not yet tested it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search