模糊圖像的特定部分（矩形、圓形）？

Question

我想模糊圖像矩形或圓形。 谷歌搜索后，我發現模糊整個圖像很容易，但模糊圖像的特定部分（矩形，圓形）很難。 那怎么可能？？？

提前致謝

Answer 1

只需將您的UIImageView屬性名稱設置為“imageView”，並在您的實現文件中以相同的順序添加以下四個方法。 此外，將您的 ImageView 模式設置為“重繪”。 為給定的模糊效果添加 UIImage 類別或使用任何自定義類，它將為您工作。

方法 1 - 裁剪圖像

#pragma mark - Cropping the Image 

- (UIImage *)croppIngimageByImageName:(UIImage *)imageToCrop toRect:(CGRect)rect{

    CGImageRef imageRef = CGImageCreateWithImageInRect([imageToCrop CGImage], rect);    
    UIImage *cropped = [UIImage imageWithCGImage:imageRef];
    CGImageRelease(imageRef);

    return cropped;   


}

方法 2 - 合並兩個圖像

#pragma mark - Marge two Images 

- (UIImage *) addImageToImage:(UIImage *)img withImage2:(UIImage *)img2 andRect:(CGRect)cropRect{

    CGSize size = CGSizeMake(imageView.image.size.width, imageView.image.size.height);
    UIGraphicsBeginImageContext(size);

    CGPoint pointImg1 = CGPointMake(0,0);
    [img drawAtPoint:pointImg1]; 

    CGPoint pointImg2 = cropRect.origin;
    [img2 drawAtPoint: pointImg2];

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

    return result;
}

方法 3 - 圓整圖像

#pragma mark - RoundRect the Image

- (UIImage *)roundedRectImageFromImage:(UIImage *)image withRadious:(CGFloat)radious {

    if(radious == 0.0f)
        return image;

    if( image != nil) {

        CGFloat imageWidth = image.size.width;
        CGFloat imageHeight = image.size.height;

        CGRect rect = CGRectMake(0.0f, 0.0f, imageWidth, imageHeight);
        UIWindow *window = [[[UIApplication sharedApplication] windows] objectAtIndex:0];
        const CGFloat scale = window.screen.scale;
        UIGraphicsBeginImageContextWithOptions(rect.size, NO, scale);

        CGContextRef context = UIGraphicsGetCurrentContext();

        CGContextBeginPath(context);
        CGContextSaveGState(context);
        CGContextTranslateCTM (context, CGRectGetMinX(rect), CGRectGetMinY(rect));
        CGContextScaleCTM (context, radious, radious);

        CGFloat rectWidth = CGRectGetWidth (rect)/radious;
        CGFloat rectHeight = CGRectGetHeight (rect)/radious;

        CGContextMoveToPoint(context, rectWidth, rectHeight/2.0f);
        CGContextAddArcToPoint(context, rectWidth, rectHeight, rectWidth/2.0f, rectHeight, radious);
        CGContextAddArcToPoint(context, 0.0f, rectHeight, 0.0f, rectHeight/2.0f, radious);
        CGContextAddArcToPoint(context, 0.0f, 0.0f, rectWidth/2.0f, 0.0f, radious);
        CGContextAddArcToPoint(context, rectWidth, 0.0f, rectWidth, rectHeight/2.0f, radious);
        CGContextRestoreGState(context);
        CGContextClosePath(context);
        CGContextClip(context);

        [image drawInRect:CGRectMake(0.0f, 0.0f, imageWidth, imageHeight)];

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

        return newImage;
    } 
    return nil;
}

方法 4 - 觸摸移動

#pragma mark - Touch Methods

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


    UIImage *croppedImg = nil;

    UITouch *touch = [touches anyObject];
    CGPoint currentPoint = [touch locationInView:self.imageView];

    double ratioW=imageView.image.size.width/imageView.frame.size.width ;

    double ratioH=imageView.image.size.height/imageView.frame.size.height;

    currentPoint.x *= ratioW;
    currentPoint.y *= ratioH;

    double circleSizeW = 30 * ratioW;
    double circleSizeH = 30 * ratioH;


    currentPoint.x = (currentPoint.x - circleSizeW/2<0)? 0 : currentPoint.x - circleSizeW/2;
    currentPoint.y = (currentPoint.y - circleSizeH/2<0)? 0 : currentPoint.y - circleSizeH/2;


    CGRect cropRect = CGRectMake(currentPoint.x , currentPoint.y,   circleSizeW,  circleSizeH);

    NSLog(@"x %0.0f, y %0.0f, width %0.0f, height %0.0f", cropRect.origin.x, cropRect.origin.y,   cropRect.size.width,  cropRect.size.height );

    croppedImg = [self croppIngimageByImageName:self.imageView.image toRect:cropRect];

    // Blur Effect 
    croppedImg = [croppedImg imageWithGaussianBlur9];

    // Contrast Effect 
    // croppedImg = [croppedImg imageWithContrast:50];



    croppedImg = [self roundedRectImageFromImage:croppedImg withRadious:4]; 

    imageView.image = [self addImageToImage:imageView.image withImage2:croppedImg andRect:cropRect];  
} 

UIImage 分類類

UIImage+ImageBlur.h

#import <UIKit/UIKit.h>

@interface UIImage (ImageBlur)

- (UIImage *)imageWithGaussianBlur9;

@end

UIImage+ImageBlur.m

#import "UIImage+ImageBlur.h"

@implementation UIImage (ImageBlur)

- (UIImage *)imageWithGaussianBlur9 {
    float weight[5] = {0.1270270270, 0.1945945946, 0.1216216216, 0.0540540541, 0.0162162162};
    // Blur horizontally
    UIGraphicsBeginImageContextWithOptions(self.size, NO, self.scale);
    [self drawInRect:CGRectMake(0, 0, self.size.width, self.size.height) blendMode:kCGBlendModeNormal alpha:weight[0]];
    for (int x = 1; x < 5; ++x) {
        [self drawInRect:CGRectMake(x, 0, self.size.width, self.size.height) blendMode:kCGBlendModeNormal alpha:weight[x]];
        [self drawInRect:CGRectMake(-x, 0, self.size.width, self.size.height) blendMode:kCGBlendModeNormal alpha:weight[x]];
    }
    UIImage *horizBlurredImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    // Blur vertically
    UIGraphicsBeginImageContextWithOptions(self.size, NO, self.scale);
    [horizBlurredImage drawInRect:CGRectMake(0, 0, self.size.width, self.size.height) blendMode:kCGBlendModeNormal alpha:weight[0]];
    for (int y = 1; y < 5; ++y) {
        [horizBlurredImage drawInRect:CGRectMake(0, y, self.size.width, self.size.height) blendMode:kCGBlendModeNormal alpha:weight[y]];
        [horizBlurredImage drawInRect:CGRectMake(0, -y, self.size.width, self.size.height) blendMode:kCGBlendModeNormal alpha:weight[y]];
    }
    UIImage *blurredImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    //
    return blurredImage;
}

@end

快樂編碼....

Answer 2

在視圖或圖像視圖中添加以下 Pangesture

UIPanGestureRecognizer *panGesture=[[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(imageTaped:)];
[panGesture setMaximumNumberOfTouches:1];
[self.view addGestureRecognizer:panGesture];

模糊圖像的方法

- (void)imageTaped:(UIPanGestureRecognizer *)gestureRecognizer
{

    CIContext *context = [CIContext contextWithOptions:nil];
    CGPoint touchLocation = [gestureRecognizer locationInView:self.imgviewMain];


    CGRect temp=CGRectMake(touchLocation.x-25, ((self.imgviewMain.frame.size.height-50) - touchLocation.y)+25, 50, 50);

    CIImage *inputImage0 = [[CIImage alloc] initWithImage:self.imgviewMain.image];

    CIImage *inputImage = [[CIImage alloc] initWithImage:[UIImage imageWithCGImage:[context createCGImage:inputImage0 fromRect:temp]]];
    CIFilter *blurFilter = [CIFilter filterWithName:@"CIGaussianBlur"];
    [blurFilter setDefaults];
    [blurFilter setValue: inputImage forKey: @"inputImage"];
    [blurFilter setValue: [NSNumber numberWithFloat:0.1]
                  forKey:@"inputRadius"];


    CIImage *outputImage = [blurFilter valueForKey: @"outputImage"];
    UIImageView *imgtest=[[UIImageView alloc]init];

    imgtest.image=[UIImage imageWithCGImage:[context createCGImage:outputImage fromRect:outputImage.extent]];



    UIImage *image;

    UIImage *bottomImage = self.imgviewMain.image; 
          image = imgtest.image;    


    CGSize newSize = CGSizeMake(self.imgviewMain.frame.size.width, self.imgviewMain.frame.size.height);
    UIGraphicsBeginImageContext( newSize );

    [bottomImage drawInRect:CGRectMake(0,0,768,1024)];

    CGRect newRect2=CGRectMake(temp.origin.x,((self.imgviewMain.frame.size.height-50) - temp.origin.y), image.size.width, image.size.height);
    image=[self makeRoundedImage:image radius:10];

    [image drawInRect:newRect2 blendMode:kCGBlendModeNormal alpha:0.5];
     UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    self.imgviewMain.image=newImage;
   }

圓角圖像方法

-(UIImage *)makeRoundedImage:(UIImage *) image
                      radius: (float) radius;
{
    CALayer *imageLayer = [CALayer layer];
    imageLayer.frame = CGRectMake(0, 0, image.size.width, image.size.height);
    imageLayer.contents = (id) image.CGImage;

    imageLayer.masksToBounds = YES;
    imageLayer.cornerRadius = radius;

    UIGraphicsBeginImageContext(image.size);
    [imageLayer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *roundedImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return roundedImage;
}

Answer 3

我知道我參加聚會有點晚了，但它可能會幫助其他努力使這項工作發揮作用的人。

我最近需要實現它，但我在互聯網上找不到關於這個特定主題的太多信息（特別是在處理不同的 UIImageView 的縮放類型，如縮放填充、居中等）時如何讓它工作。 所以我開發了一個小項目，它完全符合你的期望。

https://github.com/pauloubuntu/ios-blur-pan-gesture

Answer 4

我設法為基於 OSX 的項目進行了模糊處理。 OSX 和 iOS 的繪圖和圖形上下文管理代碼可能不同。 希望這可以幫助其他想要做類似事情的 macOS 開發者！

在這里，當用戶拖動鼠標時，我們裁剪圖像並將其覆蓋在主圖像視圖上

- (void)mouseDragged:(NSEvent *)theEvent {

        NSPoint currentPoint = [self.view convertPoint:[theEvent locationInWindow] fromView:nil];
        NSPoint currentPointForOverLay = currentPoint;
        double ratioW=self.imageView.image.size.width/ self.imageView.frame.size.width ;
        double ratioH=self.imageView.image.size.height/self.imageView.frame.size.height;

        double circleSizeW = 30;   //Width and Height of Rect
        double circleSizeH = 30;

        currentPointBackup.x *= ratioW;
        currentPointBackup.y *= ratioH;

        CGRect overLayRect = CGRectMake(currentPointBackup.x , currentPointBackup.y,  circleSizeW  * ratioW,  circleSizeH * ratioH);

        CGRect cropRect = CGRectMake(currentPoint.x, currentPoint.y, circleSizeW, circleSizeH);

        //NSLog(@"x %0.0f, y %0.0f, width %0.0f, height %0.0f", cropRect.origin.x, cropRect.origin.y,   cropRect.size.width,  cropRect.size.height);

        //Logic to CROP Image on OSX 
        NSSize ratio = [(NSImageView*)self.imageExtractor.canvasController.contentView originalImageRatio];
        CGFloat x = cropRect.origin.x / ratio.width;
        CGFloat y = cropRect.origin.y / ratio.height;
        CGFloat w = cropRect.size.width / ratio.width;
        CGFloat h = cropRect.size.height / ratio.height;
        NSRect sourceFrame = NSMakeRect(x, y, w, h);
        NSRect targetFrame = NSMakeRect(0, 0, w*1.0f, h*1.0f);
        NSImage *targetImage = [[NSImage alloc] initWithSize:targetFrame.size];
        if(targetImage.size.width > 0 && targetFrame.size.height > 0) {
            [targetImage lockFocus];
            [[(NSImageView*)self.imageExtractor.canvasController.contentView originalImage] drawInRect:targetFrame fromRect:sourceFrame operation:NSCompositingOperationCopy fraction:1.0f];
            [targetImage unlockFocus];
        }
        //End CROP Image on OSX  

        //Apply filters
        NSData *data = targetImage.TIFFRepresentation;
        CIImage *croppedCIImage = [[CIImage alloc] initWithData:data];

        CIImage *filteredCIImage;
        if (self.filterTypeOnCanvas == BlurFilterMode)
        {
            CGFloat filterValue = self.blurSlider.floatValue;
            filteredCIImage = [filterManager getBlurredImage:croppedCIImage withAmount:filterValue];
        }
        else if (self.filterTypeOnCanvas == PixilateFilterMode)
        {
            CGFloat filterValue = self.pixillateSlider.floatValue;                
            filteredCIImage = [filterManager getPixellatedImage:croppedCIImage withAmount:filterValue];
        }

        CGImageRef cgimgRef = [context createCGImage:filteredCIImage
                                            fromRect:[croppedCIImage extent]];

        NSImage *blurredNSImage = [[NSImage alloc] initWithCGImage:cgimgRef size:cropRect.size];

        //Finally overlay the blurred image on main image
        NSImage *newImage = [imageUtils overlayImages:self.imageView.image overlayImage:blurredNSImage overLayRect:nsRect];

        self.imageView.image = newImage;
   }

疊加圖像邏輯

- (NSImage *) overlayImages:(NSImage *)backgroundImage overlayImage:(NSImage *)overlayImage
           overLayRect:(NSRect)overLayRect
{
     NSImage *newImage = [[NSImage alloc] initWithSize:[backgroundImage size]];
     [newImage lockFocus];

     CGRect newImageRect = CGRectZero;
     newImageRect.size = [newImage size];

     [backgroundImage drawInRect:newImageRect];
     [overlayImage drawInRect:overLayRect];

     [newImage unlockFocus];

     return newImage;
}

應用過濾器

-(CIImage *)getBlurredImage:(CIImage *)img withAmount:(float)intensity {
    CIFilter *blurFilter = [CIFilter filterWithName:@"CIDiscBlur"];
    [blurFilter setValue:img forKey:kCIInputImageKey];
    [blurFilter setValue:@(intensity) forKey:@"inputRadius"];
    return blurFilter.outputImage; 
}

-(CIImage *)getPixellatedImage:(CIImage *)img withAmount:(float)scale
{
    CIFilter *pixilateFilter = [CIFilter filterWithName:@"CIPixellate"];
    [pixilateFilter setValue:img forKey:kCIInputImageKey];
    [pixilateFilter setValue:@(scale) forKey:@"inputScale"];

    return pixilateFilter.outputImage;
}

Answer 5

檢查這個

用戶拖動手指時模糊圖像部分