Home > Mobile >  How to remove blur effect on the image when user touch the image
How to remove blur effect on the image when user touch the image

Time:04-14

In my application there are two option blur and Unblur image by touch the image. I am doing this to blur the Image when user touch the image

override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
    var croppedImg: UIImage? = nil
    let touch = touches.first
    var currentPoint = touch!.location(in: imgBackground)
    let ratioW: Double = Double(imgBackground.image!.size.width / imgBackground.frame.size.width)
    let ratioH: Double = Double(imgBackground.image!.size.height / imgBackground.frame.size.height)
    currentPoint.x *= CGFloat(ratioW)
    currentPoint.y *= CGFloat(ratioH)
    
    let circleSizeW = 25 * ratioW
    let circleSizeH = 25 * ratioH
    
    
   currentPoint.x = CGFloat((Double(currentPoint.x ) - circleSizeW / 2 < 0) ? 0 : Double(currentPoint.x ) - circleSizeW / 2)
    currentPoint.y = CGFloat((Double(currentPoint.y ) - circleSizeH / 2 < 0) ? 0 : Double(currentPoint.y ) - circleSizeH / 2)
    
    
    let cropRect = CGRect(x: currentPoint.x , y: currentPoint.y , width: CGFloat(circleSizeW), height: CGFloat(circleSizeH))
    
    
    croppedImg = croppIngimage(byImageName: imgBackground?.image, to: cropRect)
    
    // Blur Effect
    croppedImg = croppedImg?.imageWithGaussianBlur9()
    
   
    croppedImg = roundedRectImage(from: croppedImg, withRadious: 4)
    imgBackground.image = addImage(to: imgBackground.image, withImage2: croppedImg, andRect: cropRect)
}

func imageWithGaussianBlur9() -> UIImage? {
    // Blur horizontally

    UIGraphicsBeginImageContextWithOptions(size, _: false, _: scale)
    draw(in: CGRect(x: 0, y: 0, width: size.width, height: size.height), blendMode: .normal, alpha:  0.5)
    for x in 1..<5 {
        draw(in: CGRect(x: CGFloat(x), y: 0, width: size.width, height: size.height), blendMode: .normal, alpha: 0.5)
        draw(in: CGRect(x: CGFloat(-x), y: 0, width: size.width, height: size.height), blendMode: .normal, alpha:  0.5)
    }
    let horizBlurredImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    // Blur vertically
    UIGraphicsBeginImageContextWithOptions(size, _: false, _: scale)
    horizBlurredImage?.draw(in: CGRect(x: 0, y: 0, width: size.width, height: size.height), blendMode: .normal, alpha:  0.5)
    for y in 1..<5 {
        horizBlurredImage?.draw(in: CGRect(x: 0, y: CGFloat(y), width: size.width, height: size.height), blendMode: .normal, alpha:  0.5)
        horizBlurredImage?.draw(in: CGRect(x: 0, y: CGFloat(-y), width: size.width, height: size.height), blendMode: .normal, alpha:  0.5)
    }
    let blurredImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    //
    return blurredImage
}

The above code works perfectly when we blur the image

What should I do when user want to remove the blur effect

CodePudding user response:

you have to place 2 UIImageView over each other. In the bottom you have to place original image.

@IBOutlet weak var imgBackground:UIImageView!
@IBOutlet weak var bottomViewImage:UIImageView! // original image

Add below code for unblur the image -:

 var croppedImg: UIImage? = nil
    let touch = touches.first
    var currentPoint = touch!.location(in: imgBackground)
    let ratioW: Double = Double(imgBackground.image!.size.width / imgBackground.frame.size.width)
    let ratioH: Double = Double(imgBackground.image!.size.height / imgBackground.frame.size.height)
    currentPoint.x *= CGFloat(ratioW)
    currentPoint.y *= CGFloat(ratioH)
    
    let circleSizeW = 25 * ratioW
    let circleSizeH = 25 * ratioH
    
    
    currentPoint.x = CGFloat((Double(currentPoint.x ) - circleSizeW / 2 < 0) ? 0 : Double(currentPoint.x ) - circleSizeW / 2)
    currentPoint.y = CGFloat((Double(currentPoint.y ) - circleSizeH / 2 < 0) ? 0 : Double(currentPoint.y ) - circleSizeH / 2)
    
    
    let cropRect = CGRect(x: currentPoint.x , y: currentPoint.y , width: CGFloat(circleSizeW), height: CGFloat(circleSizeH))
croppedImg = croppIngimage(byImageName: bottomViewImage?.image, to: cropRect)
    croppedImg = roundedRectImage(from: croppedImg, withRadious: 4)
     imgBackground.image = addImage(to: imgBackground.image, withImage2: croppedImg, andRect: cropRect)
  • Related