iOS 高仿美图定制

先看效果

思路

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]);//在这段上下文中获取到颜色UIColorCGContextFillRect(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 costif (CGImageGetAlphaInfo(sourceImage) == kCGImageAlphaNone) {//        imageWithAlpha = CopyImageAndAddAlphaChannel(sourceImage);}CGImageRef masked = CGImageCreateWithMask(imageWithAlpha, mask);CGImageRelease(mask);//release imageWithAlpha if it was created by CopyImageAndAddAlphaChannelif (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];

通过截面GIF看一下

贴纸与文字

贴纸、文字都是UIView子类。控制图像的旋转缩放都是基于CGAffineTransform属性与手势UIPanGestureRecognizer进行调整。
核心代码如下:

Demo：https://github.com/wanggoing/CustomT-shirt

iOS 高仿美图定制相关推荐

iOS高仿微信项目、阴影圆角渐变色效果、卡片动画、波浪动画、路由框架等源码...
2019独角兽企业重金招聘Python工程师标准>>> iOS精选源码 iOS高仿微信完整项目源码 Khala: Swift 编写的iOS/macOS 路由框架微信左滑删除效果的实 ...
iOS高仿微信项目、阴影圆角渐变色效果、卡片动画、波浪动画、路由框架等源码
iOS精选源码 iOS高仿微信完整项目源码 Khala: Swift 编写的iOS/macOS 路由框架微信左滑删除效果的实现与TableViewCell的常用样式介绍实现阴影圆角并存,渐变色背景 ...
iOS高仿微信完整源码，网易爱玩APP源码等
iOS精选源码 iOS一种弹出视图效果带动画一个快速便捷.无侵入.可扩展的动画弹框库高仿Elk - 旅行货币转换器 iOS内分享的界面.功能一体化解决方案使用Olami sdk实现一个语音查询股 ...
iOS 高仿爱鲜蜂APP
//联系人:石虎 QQ: 1224614774昵称:嗡嘛呢叭咪哄 iOS高仿爱鲜蜂前言 2016年匆匆的就过去了,又老了一岁,这一年起起伏伏,有笑声也有眼泪,感谢陪伴在我身边的人. 关于项目(代码 ...
iOS 高仿微信相机拍摄和编辑
效果描述: 1.自定义相机拍摄视频和照片 2.切换前后摄像头.调整焦距/设置聚焦点.横屏拍摄 3.视频编辑:涂鸦.贴图.文字水印.视频裁剪 .添加背景音乐 4 .图片编辑:涂鸦.贴图.文字水印.马赛 ...
iOS高仿微信、仪表盘、图片标注图片滤镜、高斯模糊、上拉加载、下拉刷新等源码
iOS精选源码 Swift-图片画框标注 Swift版的上拉加载, 下拉刷新控件(一句话集成, 超级易用) iOS tabbar上的提示框 Swift图片浏览器,经过一年多维护,已基本稳定图片滤镜 ...
iOS高仿微信、仪表盘、图片标注图片滤镜、高斯模糊、上拉加载、下拉刷新等源码...
iOS精选源码 Swift-图片画框标注 Swift版的上拉加载, 下拉刷新控件(一句话集成, 超级易用) iOS tabbar上的提示框 Swift图片浏览器,经过一年多维护,已基本稳定图片滤镜 ...
爬虫百度百万高清美图源代码
@T爬虫百度百万高清美图源代码OC #! -- coding: utf-8 -- Date:2020-09-20 16:52 USER:gordon_lu 使用正则表达式删选指定的 URL 链接. ...
python批量读取图片并批量保存_Python爬虫：批量抓取花瓣网高清美图并保存
原标题:Python爬虫:批量抓取花瓣网高清美图并保存昨天看到了不错的图片分享网--花瓣,里面的图片质量还不错,所以利用selenium+xpath我把它的妹子的栏目下爬取了下来,以图片栏目名称给文 ...

iOS 高仿美图定制

思路

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

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

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

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

：

代码思路：

原理

完整代码示例

通过截面GIF看一下

贴纸与文字

iOS 高仿美图定制相关推荐

最新文章

热门文章