【问题标题】:Blur specific part of an image (rectangular, circular)?模糊图像的特定部分(矩形、圆形)?
【发布时间】:2013-01-01 05:12:16
【问题描述】:

我想模糊矩形或圆形图像。谷歌搜索后,我发现很容易模糊整个图像,但很难模糊图像的特定部分(矩形、圆形)。那怎么可能???

提前致谢

【问题讨论】:

  • “矩形或圆形”是什么意思?是否要将特定区域模糊成圆形?
  • 是的...我想模糊特定区域 rect/cir
  • 在应用程序的整个生命周期中,形状的面积和外观是固定的还是动态的?
  • 两周前我也在寻找同样的问题,但找不到合适的解决方案,我自己做了很多工作。

标签: iphone objective-c ios


【解决方案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 - RoundRect 图像

#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

愉快的编码......

【讨论】:

  • 感谢您的帮助....但我遇到了错误....我无法获取 imageWithGaussianBlur9 方法
  • 好的...问题很清楚...衷心感谢您的帮助...但是如果我想显示用户选择的矩形部分以模糊该区域?怎么可能?再次感谢
  • 这是一个 UIImage 类别的类方法。我在描述中提到
  • circleSizeH, circleSizeW 控制裁剪图像的大小。您可以将 30x30 更改为 50x30 或您想要的任何其他内容
  • 将矩形的半径值 4 更改为 0
【解决方案2】:

在 view 或 imageview 中添加以下 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;
}

【讨论】:

  • 感谢您的帮助....但是在您的代码中我需要添加哪个框架??? #import ???还是其他??
  • yes #import 还包括 CoreImage 和 QuartzCore 框架
【解决方案3】:

我知道我参加聚会有点晚了,但它可能会帮助其他努力完成这项工作的人。

我最近需要实现它,但我在互联网上找不到关于这个特定主题的太多信息(特别是在处理不同的 UIImageView 的比例类型时如何让它工作,如 Scale to Fill、Center 等) .所以我开发了一个小项目,完全符合您的期望。

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

【讨论】:

  • 这并没有提供问题的答案。要批评或要求作者澄清,请在其帖子下方发表评论。
  • @VojtechVrbka 我不同意你的意见。这个问题特别要求一种方法来模糊图像的一部分,这正是我的例子所做的。我创建这个工作示例并公开它的目的是帮助未来的程序员在寻找这个主题时。更不用说接受的答案不处理不同的 UIImageView 的比例类型,这使得我的解决方案比接受的解决方案更好。
  • @VojtechVrbka AFAIK 只要您添加免责声明,说明您是在整个 SO 中的许多不同线程中使用的开发人员,您就可以发布指向您的项目的链接。如果您仍然不同意我的观点,我建议您在 Meta 上打开一个线程来讨论这是否是一种好的做法。
  • 您应该直接在答案中包含工作示例。一旦链接过时,您的回答将不会提供任何有价值的反馈。
  • @VojtechVrbka 我进行了计算,我发现 .m 和 .h 文件都有 1517 行代码,这对于阅读目的而包含在单个答案中的代码太多了.我同意你的观点,链接有过时的风险。然而,有几十个答案指向整个 SO 中的各种文档和教程,可能会发生同样的问题。
【解决方案4】:

我设法为基于 OSX 的项目进行了 insta blur。 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;
}

【讨论】:

    猜你喜欢
    • 2018-10-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-02-21
    • 1970-01-01
    • 2012-02-13
    • 2014-12-12
    • 1970-01-01
    相关资源
    最近更新 更多