蚂蚁工具箱日签功能解析 (iOS图片加水印功能)

蚂蚁工具箱在appstore上线之后:https://itunes.apple.com/app/id1193575039?mt=8,挺多人喜欢日签这个功能,所以现在把源码分享一下。

蚂蚁工具箱日签的效果图如下

IMG_7740.JPG

这个功能其实就是在图片上面增加元素,类似于在图片上面增加水印的功能,之前就说过使用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;
}
  1. 直接使用image的size,而不使用CGImageGetWidth是因为CGImageGetWidth会获取图片的真实宽高,并不是在视图中的宽高,所以会导致文件压缩
  2. 注销掉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];
}

四、通过上面的函数开始拼接图片

通过上面的函数就已经实现了合成图片的功能,剩下的就是拼接图片布局的,

  1. 先将带二维码的图片拼接到背景图上面
  2. 然后将时间拼接到背景图
  3. 再将想要显示的文字拼接到带二维码的图片上

通过这三步即可实现效果

-(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的显示效果

Simulator Screen Shot - iPhone 6s - 2017-10-26 at 19.58.18.png

之后可以通过调整字体和布局,做细微的调整即可。

Demo下载

github下载:https://github.com/DamonHu/HudongBlogDemo/tree/master/imgWaterMarkDemo

gitee下载:https://gitee.com/DamonHoo/HudongBlogDemo/tree/master/imgWaterMarkDemo

参考文章

Last modification:October 26th, 2017 at 09:29 pm
如果看了这个文章可以让你少加会班,可以请我喝杯可乐
已打赏名单
微信公众号

2 comments

  1. BookOfStopHere

    拼图的长度有限制哈,可以考虑CoreImage 或者 CoreGraphic

    1. 东东
      @BookOfStopHere

      这个长度有什么限制呢?还望赐教OωO

Leave a Comment