蚂蚁工具箱在appstore上线之后:https://itunes.apple.com/app/id1193575039?mt=8,挺多人喜欢日签这个功能,所以现在把源码分享一下。
蚂蚁工具箱日签的效果图如下
这个功能其实就是在图片上面增加元素,类似于在图片上面增加水印的功能,之前就说过使用html5拼图《Html5多图拼成一张图》和使用iOS的两个图片的拼图《IOS截图和拼图》。
现在这个日签也是同样的道理,只是多了一个把文字等view的元素也拼接到图片上。
一、图片的拼接
+(UIImage*)compostBGImg:(UIImage*)bgImg withImg:(UIImage*)img withImgFrame:(CGRect)rect
{
//以1.png的图大小为底图
CGImageRef imgRef1 = bgImg.CGImage;
CGFloat w1 = bgImg.size.width;
CGFloat h1 = bgImg.size.height;
// 看1解释
// CGFloat w1 = CGImageGetWidth(imgRef1);
// CGFloat h1 = CGImageGetHeight(imgRef1);
CGImageRef imgRef = img.CGImage;
//以1.png的图大小为画布创建上下文
UIGraphicsBeginImageContext(CGSizeMake(w1, h1));
[bgImg drawInRect:CGRectMake(0, 0, w1, h1)];//先把1.png 画到上下文中
[img drawInRect:rect];//再把小图放在上下文中
UIImage *resultImg = UIGraphicsGetImageFromCurrentImageContext();//从当前上下文中获得最终图片
UIGraphicsEndImageContext();//关闭上下文
// 看2解释
// CGImageRelease(imgRef);
// CGImageRelease(imgRef1);
return resultImg;
}
- 直接使用image的size,而不使用CGImageGetWidth是因为CGImageGetWidth会获取图片的真实宽高,并不是在视图中的宽高,所以会导致文件压缩
- 注销掉CGImageRelease是因为只有使用了
CGImageRef imageRef = CGImageCreateWithImageInRect();
这个方法后,才需要释放,没有使用如果过度释放的话会导致崩溃。
二、视图拼接到图片上
+(UIImage*)convertViewToImage:(UIView*)view
{
CGSize s = view.bounds.size;
UIGraphicsBeginImageContextWithOptions(s, NO, [UIScreen mainScreen].scale);
CGContextRef context = UIGraphicsGetCurrentContext();
[view.layer renderInContext:context];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
view.layer.contents = nil;
return image;
}
三、把文字拼接到图片上
有了把视图拼接到图片上的函数,这里可以使用UILable,封装一个将文字拼接到图片上去的函数
+(UIImage*)compostImg:(UIImage*)bgImg withText:(NSString*)text withTextPoint:(CGPoint)point
{
UIImageView *view = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, bgImg.size.width, bgImg.size.height)];
view.image = bgImg;
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0,0,0,0)];
[label setTextAlignment:NSTextAlignmentCenter];
[label setTextColor:[UIColor blackColor]];
[label setText:text];
[label setNumberOfLines:0];
UIFont *font = [UIFont systemFontOfSize:40];
[label setFont:font];
CGSize size = CGSizeMake(bgImg.size.width-200,2000);
CGSize labelsize = [text boundingRectWithSize:size font:font lineSpacing:10];
label.frame = CGRectMake(point.x,point.y, labelsize.width, labelsize.height);
[view addSubview:label];
return [self convertViewToImage:view];
}
四、通过上面的函数开始拼接图片
通过上面的函数就已经实现了合成图片的功能,剩下的就是拼接图片布局的,
- 先将带二维码的图片拼接到背景图上面
- 然后将时间拼接到背景图
- 再将想要显示的文字拼接到带二维码的图片上
通过这三步即可实现效果
-(void)createNewImg:(UIImage*)img{
//先将带二维码的图片拼接到背景图上面
UIImage *image2 = [UIImage imageNamed:@"qianCover"];
UIImage *image = [HMImageTools compostBGImg:img withImg:image2 withImgFrame:CGRectMake(0, 0, img.size.width, img.size.height)];
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(img.size.width/2.0-75, 200, 150, 220)];
[view.layer setMasksToBounds:YES];
[view.layer setBorderWidth:1.0f];
[view.layer setBorderColor:[UIColor whiteColor].CGColor];
//然后将时间拼接到背景图
NSDate *date =[NSDate date];
NSDateFormatter *formatter = [[NSDateFormatter alloc]init];
[formatter setDateFormat:@"yyyy"];
NSInteger currentYear=[[formatter stringFromDate:date] integerValue];
[formatter setDateFormat:@"dd"];
NSInteger currentDay=[[formatter stringFromDate:date] integerValue];
UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 20, 150, 90)];
[titleLabel setText:[NSString stringWithFormat:@"%ld",(long)currentDay]];
[titleLabel setFont:[UIFont fontWithName:@"AmericanTypewriter" size:70]];
[titleLabel setTextAlignment:NSTextAlignmentCenter];
[titleLabel setTextColor:[UIColor whiteColor]];
[view addSubview:titleLabel];
UILabel *commonLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 110, 150, 120)];
[commonLabel setNumberOfLines:0];
[commonLabel setText:[NSString stringWithFormat:@"Oct\n%ld",currentYear]];
[commonLabel setTextAlignment:NSTextAlignmentCenter];
[commonLabel setFont:[UIFont fontWithName:@"AmericanTypewriter" size:40]];
[commonLabel setTextColor:[UIColor whiteColor]];
[view addSubview:commonLabel];
//将想要显示的文字拼接到带二维码的图片上
UIImage *image3 = [HMImageTools convertViewToImage:view];
image = [HMImageTools compostBGImg:image withImg:image3 withImgFrame:CGRectMake(img.size.width/2.0-75, 200, 150, 220)];
NSString *str = [NSString stringWithFormat:@"%@\n-\n%@",self.content,self.mrName];
UIFont *font = [UIFont systemFontOfSize:40];
CGSize size = CGSizeMake(img.size.width-200,2000);
CGSize labelsize = [str boundingRectWithSize:size font:font lineSpacing:10];
UIImage *labelImage = [HMImageTools compostImg:image withText:str withTextPoint:CGPointMake(img.size.width/2.0-labelsize.width/2.0, img.size.height - 100 - labelsize.height)];
[_imageView setImage:labelImage];
}
demo的显示效果
之后可以通过调整字体和布局,做细微的调整即可。
Demo下载
github下载:https://github.com/DamonHu/HudongBlogDemo/tree/master/imgWaterMarkDemo
gitee下载:https://gitee.com/DamonHoo/HudongBlogDemo/tree/master/imgWaterMarkDemo
参考文章
版权属于:东哥笔记 - DongGe.org
本文链接:http://dongge.org/blog/632.html
自2017年12月26日起,『转载以及大段采集进行后续编辑』须注明本文标题和链接!否则禁止所有转载和采集行为!
2 条评论
拼图的长度有限制哈,可以考虑CoreImage 或者 CoreGraphic
这个长度有什么限制呢?还望赐教OωO