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极光官方集成指南 <https://docs.jiguang.cn/jshare/client/iOS/ios_sdk/>
#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]; }]; }
这样就可以实现整个截屏分享的功能。

热门工具换一换