iOS WebView生成长截图（截图分享功能实现)

iOS WebView生成长截图（截图分享功能实现)

产品经理今天提出一个新的需求，需要实现类似于每日优鲜、淘宝等客户端的截屏分享的功能，即点击分享按钮把整个H5报告（kwWebView展示的所有内容）截取成一个二进制流，再合成一张有大小的图片分享出去，如下效果：

1、给WKWebView添加类别 （WKWebView+ZFJViewCapture.h）
这个类别可以把网页全屏截图，直接上代码！

 1. (void)ZFJContentCaptureCompletionHandler:(void(^)(UIImage *capturedImage))completionHandler{
    CGPoint offset = self.scrollView.contentOffset;
    
    UIView *snapShotView = [self snapshotViewAfterScreenUpdates:YES];
    snapShotView.frame = CGRectMake(self.frame.origin.x, self.frame.origin.y, snapShotView.frame.size.width, snapShotView.frame.size.height);
    [self.superview addSubview:snapShotView];
    
    if(self.frame.size.height < self.scrollView.contentSize.height){
        self.scrollView.contentOffset = CGPointMake(0, self.scrollView.contentSize.height - self.frame.size.height);
    }
    
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.3 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        self.scrollView.contentOffset = CGPointZero;
        
        [self ZFJContentCaptureWithoutOffsetCompletionHandler:^(UIImage *capturedImage) {
            self.scrollView.contentOffset = offset;
            
            [snapShotView removeFromSuperview];
            
            completionHandler(capturedImage);
        }];
    });
    
}

2、某个wkWebView调用

[self.wkWebView ZFJContentScrollCaptureCompletionHandler:^(UIImage *capturedImage) {
            NSData *imageData = UIImagePNGRepresentation(capturedImage);//网页转成图片的二进制流
            }];

3、把NSData转成有大小的命名图片

#pragma mark-处理图片 
-(NSData *)shotImg: (NSData *)imageData
{
    NSMutableDictionary *msgResp;
    int cut = [[msgResp objectForKey:@"cut"] intValue] ;
    int cutend = [[msgResp objectForKey:@"cutend"] intValue] ;
    int headFlag = [[msgResp objectForKey:@"head"] intValue] ;
    if( headFlag !=1 )return imageData ;
    if(cut <=0 && cutend <=0 )return imageData ;
    UIImage * imageHead = [UIImage imageNamed:@"ja_share_head.png"];
    UIImage * i2 = [JAFun Image_composed: [UIImage imageWithData:imageData] : imageHead : cut : cutend ];
    return UIImagePNGRepresentation(i2) ;
}


//合成图片
+(UIImage *)Image_composed :(UIImage *)image : (UIImage *)imageHead : (int)cut : (int)cutend
    {
        if(!image) return nil;
        CGFloat cc = imageHead.size.width ;// 750 ;
        CGFloat width = image.size.width;
        if(width != cc )
        {
            CGSize sizea = image.size ;
            sizea.width = cc;
            sizea.height = cc * image.size.height / image.size.width ;
            //CGFloat xx = cc * image.size.height ;
            UIImage * ijg = [JAFun ImageScaleToSize:image size:sizea ] ;
            if(cut >0 || cutend > 0 ){
                UIImage * ijg2 = [JAFun ImageCut:ijg withRect: CGRectMake(0,cut, ijg.size.width , (ijg.size.height - cut- cutend) ) ] ;
                NSLog(@"JaWeiXinSdk 111 ho1= %f, hn1 = %f" , ijg.size.height , ijg2.size.height );
                return  [self Image2AddToOne:ijg2 twoImage:imageHead :cut :cutend ] ;
            }
            return  [self Image2AddToOne:ijg twoImage:imageHead :cut :cutend ] ;
        }else{
            
            if(cut >0 || cutend > 0 ){
                UIImage * ijg2 = [JAFun ImageCut:image withRect: CGRectMake(0,cut, image.size.width , (image.size.height - cut- cutend) ) ] ;
                NSLog(@"JaWeiXinSdk 222 ho1= %f, hn1 = %f" , image.size.height , ijg2.size.height );
                return  [self Image2AddToOne:ijg2 twoImage:imageHead :cut :cutend ] ;
            }
        }
        
        return   [self Image2AddToOne:image twoImage:imageHead : cut : cutend ] ;
    }

+(UIImage *)Image2AddToOne:(UIImage *) oneImg twoImage:(UIImage *) twoImg : (int)cut : (int)cutend
    {
        if(cut <=0 )cut = 0 ;
        if(cutend <=0 )cutend =0 ;
        CGSize sizeAll = oneImg.size ;
        CGFloat height_2 = twoImg.size.height  ;
        CGFloat height_1 = oneImg.size.height  ;
        sizeAll.height = height_1 + height_2  ;
        CGFloat y1 = height_2  ;
        CGFloat h1 = height_1  ;
        // [JAFun Log:@"JaWeiXinSdk:onResp-==4002" Msg:s1  ]; cut=90 ,h1=2592.000000 ,h2=191.000000 ,y1=101.000000 , hall =2693.000000
        NSLog(@" JaWeiXinSdk Image2AddToOne :cutend=%i, cut=%i ,ho1=%f ,ho2=%f ,y1=%f , hall =%f , h1=%f",cutend, cut , height_1 ,height_2 , y1 , sizeAll.height ,h1);
        UIGraphicsBeginImageContext( sizeAll ) ;
        [oneImg drawInRect:CGRectMake(0, y1 , oneImg.size.width , h1 )];
        [twoImg drawInRect:CGRectMake(0, 0, twoImg.size.width, twoImg.size.height)];
        
        UIImage *resultImg = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        return resultImg;
    }

4、分享的方法：
分享我使用的第三方的极光分享最新版
iOS JShare极光官方集成指南

#pragma mark-分享
 _shareView = [ShareView getFactoryShareViewWithCallBack:^(JSHAREPlatform platform, JSHAREMediaType type) {
       
            [self shareTextWithPlatform:platform];
    }];
    [self.view.window addSubview:self.shareView];
    [self.shareView showWithContentType:6];
    }
    #pragma mark-分享类型
- (void)shareTextWithPlatform:(JSHAREPlatform)platform {
    JSHAREMessage *message = [JSHAREMessage message];
    message.text = [NSString stringWithFormat:@"时间:%@ JShare SDK支持主流社交平台、帮助开发者轻松实现社会化功能！",[self localizedStringTime]];
    message.platform = platform;
    message.mediaType = JSHARELink;//分享链接

//    message.image = imageData;
    message.mediaType = JSHAREImage;
    message.image = imageData2;
    
    [JSHAREService share:message handler:^(JSHAREState state, NSError *error) {
       [self showAlertWithState:state error:error];
    }];
}

这样就可以实现整个截屏分享的功能。