Erasing on UIImageView

Question

How can I erase content on front UIImage by swiping finger on it and display UIImage that is back side of UIView.

I had used following code in - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event to erase front image:

-(void)eraseDrawingContents
{
    UIGraphicsBeginImageContext(frontImage.frame.size);
    [frontImage.image drawInRect:CGRectMake(0, 0, frontImage.frame.size.width, frontImage.frame.size.height)];

    CGContextSaveGState(UIGraphicsGetCurrentContext());
    CGContextSetShouldAntialias(UIGraphicsGetCurrentContext(), YES);
    CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
    CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 25.0);
    CGContextSetShadowWithColor(UIGraphicsGetCurrentContext(), CGSizeMake(0, 0), 50, [[UIColor whiteColor]CGColor]);

    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, nil, lastPoint.x, lastPoint.y);
    CGPathAddLineToPoint(path, nil, currentPoint.x, currentPoint.y);
    CGContextSetBlendMode(UIGraphicsGetCurrentContext(), kCGBlendModeClear);
    CGContextAddPath(UIGraphicsGetCurrentContext(), path);
    CGContextStrokePath(UIGraphicsGetCurrentContext());

    frontImage.image = UIGraphicsGetImageFromCurrentImageContext();
    CGContextRestoreGState(UIGraphicsGetCurrentContext());
    UIGraphicsEndImageContext();

    lastPoint = currentPoint;
}

I achieved following output.

enter image description here

But I need output like this.

enter image description here

How can we achieve this functionality?

Please help me.

Check answer of this question, i know that your case is different but may be in there, you will get hlepful ideas that apply in your case,, http://stackoverflow.com/questions/14107979/blur-an-image-of-specific-part-rectangular-circular and also http://stackoverflow.com/questions/14811126/erasing-part-of-an-image-that-overlaps-with-text-from-a-uilabel — iPatel, Sep 13 '13 at 11:40
http://stackoverflow.com/questions/14053563/how-to-unerase-the-erased-uiimage i hope this will help you — Arun, Dec 24 '13 at 13:29

Anuj · Answer 1 · 2013-09-13T13:34:13.743

6

Try this

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{


    UITouch *touch = [touches anyObject];
    CGPoint location = [touch locationInView:self.view];


   self.imgView.image = [self.imgView.image eraseImageAtPoint:location inImageView:self.imgView  fromEraser:eraserImg];



}



- (UIImage *)eraseImageAtPoint: (CGPoint)point inImageView: (UIImageView *)imgView fromEraser: (UIImage *)eraser
{
    UIGraphicsBeginImageContext(imgView.frame.size);

    [self drawInRect:CGRectMake(0, 0, imgView.frame.size.width, imgView.frame.size.height)];

    [eraser drawAtPoint:point blendMode:kCGBlendModeDestinationOut alpha:1.0];

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;

}

And use the below image as eraser this will perfectly work for you.

eraser image

This code is working at my end give me the following result: imqage 1

edited Sep 13 '13 at 13:34

answered Sep 13 '13 at 13:15

Anuj

820
4
11

+1 Thanks Man, It works like charm but can you plz tell me how to remove just strokes? means when we drag on image, It displays small dot sized that image, and I want continuous line.. – Mehul Mistri Sep 16 '13 at 05:08
See Mehul you can achieve this by using the different brush image (eraser image) as per the effect you are looking for. – Anuj Sep 16 '13 at 06:37
Hi anuj, Some Where i did Wrong.can you help me a about this effect. i got white area while i am doing drawing. – Lakshmi Keerthana Siddu Mar 24 '17 at 06:09

score 2 · Answer 2 · answered Sep 13 '13 at 11:21

You can Achive this via blending two images

Many ways are there simple way is below, you can use GPUImage also..

just you need to blend two images with your desired output.

Blend two images on each other..

Blend more you can try

**kCGBlendModeOverlay,kCGBlendModeSoftLight,kCGBlendModeColorDodge,etc**

in CGBlendMode parameter in below function.. there are still many option are there to overly two images and merged..(even with live camera also you can do this)

-(UIImage *)blenimagwithimage:(NSString *)imagename mode:(CGBlendMode)kmode with:(float)opeticy
    {
        processedimage=nil;
        UIImage *inputImage;
        inputImage = [UIImage imageNamed:imagename];
        UIGraphicsBeginImageContext(originalImage.size);
        [originalImage drawInRect:CGRectMake(0.0, 0.0, originalImage.size.width, originalImage.size.height)];
        [inputImage drawInRect:CGRectMake(0.0, 0.0, originalImage.size.width, originalImage.size.height) blendMode:kmode alpha:opeticy];
        UIImage *layeredImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        return layeredImage;
    }

can you plz elaborate more? I have two images.. drawImage and frontImage.. I am drawing on frontimage and frontimage is added in drawimage and I want to display output like as displayed in image.. means erasing with opacity and alpha — Mehul Mistri, Sep 13 '13 at 11:53
Patel hi. How may we achive something like textured blend. Lİke a spray on a brick wall. Something like this > http://designshack.net/wp-content/uploads/texturetricks-14.jpg — Add080bbA, Mar 01 '16 at 14:06

kirti Chavda · Answer 3 · 2013-09-13T11:49:45.330

2

check this sample code

it provide this functionality like this

enter image description here

edited Sep 13 '13 at 11:49

answered Sep 13 '13 at 11:37

kirti Chavda

3,029
2
17
29

Erasing on UIImageView

3 Answers3

Linked