CODEWITHSUNDEEP
iosswiftcore-graphics
Zaid Pathan
Zaid Pathan

Reputation: 16820

Image masking is not working properly, the output image is black-and-white, it should be colourful

I'm trying to do image masking here is my output and code.

This is my masking reference image(Image size doesn't matter),

mask.png,

Masking Image

This is image on which i'm performing masking,

imggo.png,

Image on which masking is performed (Here the image size doesn't matter)

This is the Output.

Output

I'm using Swift, Here is my code...

override func viewDidLoad() {
    super.viewDidLoad()

    var maskRefImg : UIImage? = UIImage(named: "mask.png")
    var maskImg :UIImage? = UIImage(named: "imggo.png")

    var imgView: UIImageView? = UIImageView(frame: CGRectMake(20, 50, 99, 99))
    imgView?.image = maskImage(maskRefImg!, maskImage: maskImg!)


self.view.addSubview(imgView!)
}


func maskImage(image:UIImage,maskImage:UIImage)-> UIImage{

    var maskRef:CGImageRef = maskImage.CGImage

    var mask:CGImageRef = CGImageMaskCreate(CGImageGetWidth(maskRef), CGImageGetHeight(maskRef), CGImageGetBitsPerComponent(maskRef), CGImageGetBitsPerPixel(maskRef), CGImageGetBytesPerRow(maskRef), CGImageGetDataProvider(maskRef), nil, true)

    var masked:CGImageRef = CGImageCreateWithMask(image.CGImage, mask)


return UIImage(CGImage: masked)!

}

So,How can I make Go! image colourful.? Would anyone provide code.?

Upvotes: 0

Views: 1282

Answers (1)

DarkDust
DarkDust

Reputation: 92335

You are calling the function maskImage with the wrong order of arguments:

The maskImage function wants the image to mask first, and then the mask. But when you call maskImage(maskRefImg!, maskImage: maskImg!) you have it exactly swapped.

So you need to call maskImage(maskImg!, maskImage: maskRefImg!)

I'm guessing that what you want to have is the tilted rectangle with the word "Go!" and that the result image should be exactly the same size as the mask image.

When you swap the images (as you must), the mask image is scaled to the "Go!" image size. But instead, you probably want the mask image centered over your "Go!" image. So you need to create a new image with the same size as your "Go!" image and draw the mask centered into that temporary image. You then use the temporary image as the actual mask to apply.

The example image when you swap the arguments also shows that the "outside" is also green. This probably because your mask image is transparent there and CGImageMaskCreate converts it to black. But the documentation of CGImageCreateWithMask basically tells you that the created image will blend the "Go!" image so that parts where your mask image is black will have the "Go!" image visible and where your mask image is white it will be transparent.

The step-by-step instructions thus are:

  • Create a new, temporary image that is of the same size as your input image (the "Go!" image).
  • Fill it with white.
  • Draw your mask image centered into the temporary image.
  • Create the actual mask by calling CGImageMaskCreate with the temporary image.
  • Call CGImageCreateWithMask with the "Go!" image as first argument and the actual mask we've just created as second argument.
  • The result might be too big (have a lot of transparency surrounding it). If you don't want that you need to crop the result image (e.g. to the size of your original mask image; make sure to crop to the center).

You can probably skip the CGImageCreateWithMask part if you immediately create the temporary image in the DeviceGray color space, as CGImageCreateWithMask wants the second argument to be an image in this color space. In that case, I suggest you modify your mask.png so it does not contain any transparency: it should be white where it's transparent now.

Upvotes: 2

Related Questions