网页截长图分享和保存iOS

Posted 2023-02-16

参考技术A 需要截取wkwebview的内容成图片，保存或者分享出去；

建分类，写截图方法；本文的截图方法适用wkwebview截长图，但是如果网页有导航，可能会存在问题，即多个导航拼接的情况。这种可能考虑另一种方案了。

#import <WebKit/WebKit.h>

#import <UIKit/UIKit.h>

@interface WKWebView (CYScreenshotWebView)

- (NSArray *)prepareSnapShotOffsets;

- (void)captureWebSnapshotWithScale:(CGFloat)scale andCompletion:(void (^)(UIImage *capturedImage)) completion;

@end

#import "WKWebView+CYScreenshotWebView.h"

@implementation WKWebView (CYScreenshotWebView)

//根据当前网页的内容大小（即网页的scrollView的contentSize）来创建一个图形上下文，保存每次渲染的网页内容

- (void)captureWebSnapshotWithScale:(CGFloat)scale andCompletion:(void (^)(UIImage *capturedImage))completion

    //为达到无感知截图，添加遮照，截图完成后去掉

    UIView *coverView = [self snapshotViewAfterScreenUpdates:YES];

    coverView.frame = CGRectMake(self.frame.origin.x, self.frame.origin.y, coverView.frame.size.width, coverView.frame.size.height);

    [self.superview addSubview:coverView];

    //首先根据网页内容大小（contentSize）与显示大小（bounds.size）的关系，计算网页需要截取多少次图，以及每次截图的页面的偏移量contentOffset

    NSArray *offsets = [self prepareSnapShotOffsets];

    CGPoint bckUp = self.scrollView.contentOffset;//保存网页当前偏移量。便于截图

    UIGraphicsBeginImageContextWithOptions(self.scrollView.contentSize, YES, scale);

    //根据步骤2中所获取的偏移点的坐标，将当前显示的内容渲染到图形上下文中，然后继续滚动和渲染直到将所有网页内容渲染完成，结束上下文

    __weak __typeof(self) weakSelf = self;

    [self captureAtPage:0 point:offsets drawCallback:^

        UIImage *captureImage = UIGraphicsGetImageFromCurrentImageContext();

        UIGraphicsEndImageContext();

        if (completion)

            completion(captureImage);

       

        __strong __typeof(weakSelf) strongSelf = weakSelf;

        [strongSelf.scrollView setContentOffset:bckUp animated:false];//恢复截图前

        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.01*NSEC_PER_SEC)), dispatch_get_main_queue(), ^

            [coverView removeFromSuperview];//去掉遮罩

        );

    ];



- (NSArray *)prepareSnapShotOffsets

    NSMutableArray *offsets = [NSMutableArray arrayWithCapacity:0];

    int pageX = ceilf(self.scrollView.contentSize.width / self.scrollView.bounds.size.width);

    int pageY = ceilf(self.scrollView.contentSize.height / self.scrollView.bounds.size.height);

    for (int i = 0; i< pageX *pageY; i++)

        int x = i / pageY;

        int y = i % pageY;

        CGFloat orginX = x * self.scrollView.bounds.size.width;

        CGFloat orginY = y *self.scrollView.bounds.size.height;

        NSValue *value = [NSValue valueWithCGPoint:CGPointMake(orginX, orginY)];

        [offsets addObject:value];

   

    return offsets;



-(void)captureAtPage:(int)page point:(NSArray *)offsets drawCallback:(void(^)(void))callback

    NSValue *valuePoint = offsets[page];

    CGPoint point = [valuePoint CGPointValue];

    [self.scrollView setContentOffset:point animated:NO];

    __weak __typeof(self)weakSelf = self;

    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.35 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^

        __strong __typeof(weakSelf)strongSelf = weakSelf;

        CGRect rect = CGRectMake(point.x, point.y, strongSelf.scrollView.bounds.size.width, strongSelf.scrollView.bounds.size.height);

        BOOL finish = [strongSelf.scrollView drawViewHierarchyInRect:rect afterScreenUpdates:YES];

        if (finish)

            if (page < offsets.count - 1)

                [strongSelf captureAtPage:page + 1 point:offsets drawCallback:callback];

            else

                callback();

           

       

    );



//保存图片到内存
- (void)saveShareImageInTmp
    NSData *data = UIImagePNGRepresentation(_currentImg);
    //截图存入文件夹
    _imgFilePath = [self tempFilePath:@"shareImg.png"];
    [data writeToFile:_imgFilePath atomically:YES];


//保存图片到相册

- (void)saveImgToLibrary

    [[phphotoLibrary sharedPhotoLibrary] performChanges:^

        PHAssetChangeRequest *req = [PHAssetChangeRequest creationRequestForAssetFromImage:self.currentImg];

    completionHandler:^(BOOL success, NSError * _Nullable error)

        dispatch_async(dispatch_get_main_queue(), ^

            self.saveImgBtn.enabled = YES;

            [self.view CY_showHudText:@"保存完成" duration:2.0];

        );

    ];



#pragma mark - 分享方法

//分享链接

- (void)shareClick:(UIButton *)sender

    _docVC = [[UIDocumentInteractionController alloc] init];

    _docVC.URL = [NSURL URLWithString:_shareUrl];

    [_docVC presentOptionsMenuFromRect:self.view.frame inView:self.view animated:YES];



//1、截网页整张图并分享

- (void)setupQRCodeImageWithCatoryWebViewAndShare

    __weak __typeof(self) weakSelf = self;

  [self.cotentWebView captureWebSnapshotWithScale: [UIScreen

mainScreen].nativeScale andCompletion:^(UIImage * _Nonnull

capturedImage)

        weakSelf.currentImg  = capturedImage;

        //保存到临时文件下

        [weakSelf saveShareImageInTmp];

        weakSelf.docVC = [[UIDocumentInteractionController alloc] init];

        weakSelf.docVC.URL = [NSURL fileURLWithPath:weakSelf.imgFilePath];

        [weakSelf.docVC presentOptionsMenuFromRect:weakSelf.view.frame inView:weakSelf.view animated:YES];

        weakSelf.inviteBtn.enabled = YES;

    ];



//2.截网页整张图并保存相册
- (void)setupQRCodeImageWithCatoryWebViewAndSave
    __weak __typeof(self) weakSelf = self;
    [self.cotentWebView captureWebSnapshotWithScale:[UIScreen mainScreen].nativeScale andCompletion:^(UIImage * _Nonnull capturedImage)
        weakSelf.currentImg  = capturedImage;
        [self saveImgToLibrary];
    ];