iOS 高仿美图定制

最新推荐文章于 2021-05-25 19:45:10 发布

灯神阿拉丁

最新推荐文章于 2021-05-25 19:45:10 发布

阅读量205

点赞数

文章标签： iOS 图像编辑定制

本文链接：https://blog.csdn.net/weixin_37782145/article/details/100155989

版权

先看效果
在这里插入图片描述

思路

1.以下图像按顺序称为A(背景图像)、B(蒙版图像)两个图像。

A	B

2.将B图像按照合适的位置及大小，放在A图像之上，结果如下

在这里插入图片描述

3.取两个图像的交集部分（灰色部分）

在这里插入图片描述

4.将交集部分颜色改为透明。形成一张根据B图像形状信息改变A图像相应颜色通道信息的新图像。

：

创建UIScrollView子类，这将是最终贴纸、文字部分内容的显示区域。在UIScrollView中创建一个UIImageView作为T-shirt的背景图像显示。

代码思路：

1.创建一张与UIScrollView子类大小相同的图像。

+ (UIImage *)imageWithColor:(UIColor *)color size:(CGSize)size {
    CGRect rect = CGRectMake(0.0f, 0.0f, size.width, size.height); //宽高 1.0只要有值就够了
    UIGraphicsBeginImageContext(rect.size); //在这个范围内开启一段上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    CGContextSetFillColorWithColor(context, [color CGColor]);//在这段上下文中获取到颜色UIColor
    CGContextFillRect(context, rect);//用这个颜色填充这个上下文
    
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();//从这段上下文中获取Image属性,,,结束
    UIGraphicsEndImageContext();
    
    return image;
}

2.将蒙版图像(上文中B图像)使用白色渲染一次(消除蒙版图片灰度)

+ (UIImage *)imageWithColor:(UIColor *)color original:(UIImage*)originalImage
{
    UIGraphicsBeginImageContextWithOptions(originalImage.size, NO, originalImage.scale);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextTranslateCTM(context, 0, originalImage.size.height);
    CGContextScaleCTM(context, 1.0, -1.0);
    CGContextSetBlendMode(context, kCGBlendModeNormal);
    CGRect rect = CGRectMake(0, 0, originalImage.size.width, originalImage.size.height);
    CGContextClipToMask(context, rect, originalImage.CGImage);
    [color setFill];
    CGContextFillRect(context, rect);
    UIImage*newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newImage;
}

3.背景图片透明区域填充颜色

+ (UIImage *)colorImage:(UIImage *)origImage withColor:(UIColor *)color
{
    UIGraphicsBeginImageContextWithOptions(origImage.size, YES, 0);
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    CGContextSetFillColorWithColor(context, [color CGColor]);
    CGContextFillRect(context, (CGRect){ {0,0}, origImage.size} );
    
    CGAffineTransform flipVertical = CGAffineTransformMake(1, 0, 0, -1, 0, origImage.size.height);
    CGContextConcatCTM(context, flipVertical);
    CGContextDrawImage(context, (CGRect){ {0,0}, origImage.size }, [origImage CGImage]);
    
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    return image;
}

4.使用新蒙版图与背景图进行蒙层操作产出蒙层图片

+(UIImage*)maskImage:(UIImage *)image withMask:(UIImage *)maskImage
{
    CGImageRef maskRef = maskImage.CGImage;
    CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef),
                                        CGImageGetHeight(maskRef),
                                        CGImageGetBitsPerComponent(maskRef),
                                        CGImageGetBitsPerPixel(maskRef),
                                        CGImageGetBytesPerRow(maskRef),
                                        CGImageGetDataProvider(maskRef), NULL, false);
    
    CGImageRef sourceImage = [image CGImage];
    CGImageRef imageWithAlpha = sourceImage;
    //add alpha channel for images that don't have one (ie GIF, JPEG, etc...)
    //this however has a computational cost
    if (CGImageGetAlphaInfo(sourceImage) == kCGImageAlphaNone) {
        //        imageWithAlpha = CopyImageAndAddAlphaChannel(sourceImage);
    }
    
    CGImageRef masked = CGImageCreateWithMask(imageWithAlpha, mask);
    
    CGImageRelease(mask);
    
    //release imageWithAlpha if it was created by CopyImageAndAddAlphaChannel
    if (sourceImage != imageWithAlpha) {
        CGImageRelease(imageWithAlpha);
    }
    
    UIImage* retImage = [UIImage imageWithCGImage:masked];
    CGImageRelease(masked);
    
    return retImage;
}

原理

使用上下文CGContextRef对象创建与背景图像(T-shirt)大小相同的全透明图像
使用白色渲染蒙版图像
将蒙版图像根据CGRect信息放入全透明图像的合适位置合成一张与背景图像(T-shirt)大小相同的新图像
将背景图像(T-shirt)与上步中产出的新图像取交集，生成最终使用的蒙层图像
将蒙层图像加载在背景图像(T-shirt)之上，因为蒙层图像边缘透明指定定区域透明，所以在视觉显示效果上，T-shirt还是以完整状态显示，在蒙层图像与背景图像(T-shirt)之间添加贴纸对象与文字对象时，就可以实现不规则蒙层遮挡。达到在指定区域绘制T-shirt的目的。

完整代码示例

CGSize groundSize = CGSizeMake(self.view.frame.size.width, self.view.frame.size.width);
// 1.创建最大宽度透明图片
UIImage * alphaImage = [UIImage imageWithColor:[UIColor clearColor] size:groundSize];
// 2.获取蒙版图片 并且使用白色渲染蒙版图片 (使用白色渲染是为了消除蒙版图片的灰度值)
UIImage * masksImage = [UIImage imageWithColor:[UIColor whiteColor] original:[UIImage imageNamed:@"make"]];
// 3.将第二步中的图片与第三部中的图片进行合并
UIImage *ZImage = [UIImage drawMaskImage:groundSize maskFrame:CGRectMake(110, 80, 190,320) alphaImage:alphaImage maskImage:masksImage];
// 4.背景图片透明区域填充颜色
self.supportView.imageView.image = [UIImage colorImage:self.supportView.imageView.image withColor:[UIColor whiteColor]];
// 5.使用新蒙版图与背景图进行蒙层操作 产出蒙层图片
UIImage *maskedImage = [UIImage maskImage:[UIImage imageWithUIView:self.supportView.imageView] withMask:ZImage];
// 6.使用蒙层图片
[self.bringView setImage:maskedImage];