ios开发html转图片,iOS | PPT 转图片(UIImage) 解决方案

为了实现PPT 转 图片功能, 首先来看下,iOS系统 有哪些API可以实现PPT预览功能;

iOS 预览PPT 3种方式:

1. UIWebView / wkwebView

通过 UIWebView 或 wkwebView 可以简单实现PPT 或 office 系列文档的预览功能,代码如下,非常简单:

NSString * filePath = [[NSBundle mainBundle] pathForResource:@"IOS.pptx" ofType:nil];

NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL fileURLWithPath:pptFileUrl]];

//...webView 创建省略...

[self.webView loadRequest:request];

2. QLPreveiewController

QLPreveiewController 是IOS4.0后，apple推出新的文件预览控件,可以实现在线预览ppt，word，excel，pdf等文件的功能, 使用方法同UITableViewController 类似,创建一个控制器继承QLPreveiewController, 并实现其数据源方法,代码如下:

// .h

#import

#import

@interface TestViewController : QLPreviewController

@end

// .m

#import "TestViewController.h"

@interface TestViewController ()

@end

@implementation TestViewController

- (void)viewDidLoad {

[super viewDidLoad];

self.dataSource = self;

self.delegate = self;

}

- (NSInteger)numberOfPreviewItemsInPreviewController:(QLPreviewController *)controller{

return 1;

}

- (id )previewController: (QLPreviewController *)controller previewItemAtIndex:(NSInteger)index{

NSString * filePath = [[NSBundle mainBundle] pathForResource:@"IOS.pptx" ofType:nil];

return [NSURL fileURLWithPath:filePath];

}

@end

3.UIDocumentInteractionController

UIDocumentInteractionController是从ios 3.2的sdk开始支持的，他是直接继承自NSObject，因此需要UIDocumentInteractionController提供的方法来展示他, 使用方法也极其简单,需要实现 协议, 代码如下;

- (void)viewDidLoad {

[super viewDidLoad];

NSString * filePath = [[NSBundle mainBundle] pathForResource:@"IOS.pptx" ofType:nil];

UIDocumentInteractionController *documentController = [UIDocumentInteractionController interactionControllerWithURL:[NSURL fileURLWithPath:filePath]];

documentController.delegate = self;

[documentController presentPreviewAnimated:YES];

}

- (UIViewController *)documentInteractionControllerViewControllerForPreview:(UIDocumentInteractionController *)controller{

return self;

}

上述3种方法,都可以实现PPT等文档的本地查看预览功能, 方法2和方法3,再带有分享分档功能,使用起来都很简单, 接下来我们介绍一下如何将PPT转图片:

PPT 转 Image

问题分析:

虽然 iOS 为我们提供了多种本地查看预览PPT的功能模块, 但是上述的3种方式,系统都没有提供什么附加信息用于获取每一页PPT的信息,更谈不上转图片了.

WebView 在展示PPT的时候, WebView会将PPT转为相应的HTML代码,然后在放入 WebView 进行展示, 我们可以看一下生成的 html 代码,通过运行JS代码,可以获取页面的HTML代码 :

运行如下代码,即可获取页面的 html 代码信息:

[self.webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.innerHTML"]

获取到得 html 信息如下, 只粘贴了部分结构:

src="x-apple-ql-id://1F090401-1846-46C8-863A-5DC9BAA53ED7/x-apple-ql-magic/A979BC4A-42E4-4823-9CB0-8CF19D91D4D2.jpg"

style="position:absolute; top:22; left:84; width:792; height:495;">

hello.world!

测试

src="x-apple-ql-id://0AF5CA5C-5685-4D8F-9503-2FBF3A206542/x-apple-ql-magic/CAA89CFD-5597-4A35-A6CB-85C050BA2A6A.png"

style="position:absolute; top:124; left:292; width:340; height:340;">

我们可以发现规律,每一个PPT 都在一个 div元素内, 对应类选择器为 slide!

通过运行JS代码,我们来获取一下PPT的页数,以及每一页的尺寸信息

获取PPT页数信息

NSInteger pageCount = [[self.webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByClassName('slide').length"] integerValue];

获取PPT每一页的长宽:

// PPT 宽度

NSInteger pageWidth = [[self.webView stringByEvaluatingJavaScriptFromString:@"parseInt(window.getComputedStyle(document.getElementsByClassName('slide')[0]).width)"] integerValue];

// PPT高度

NSInteger pageHeight = [[self.webView stringByEvaluatingJavaScriptFromString:@"parseInt(window.getComputedStyle(document.getElementsByClassName('slide')[0]).height)"] integerValue];

将PPT 展示到 WebView 后,然后通过iOS绘制, 来将每一页PPT保存到本地

绘制代码如下

- (UIImage* )imageWithView:(UIView *)view frame:(CGRect)frame{

@autoreleasepool {

UIGraphicsBeginImageContextWithOptions(frame.size, YES, 0.0);

CGContextRef context = UIGraphicsGetCurrentContext();

if (!context) {

return nil;

}

[view.layer renderInContext:context];

UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

NSData *imageData = UIImageJPEGRepresentation(image,0.6);

UIImage *resultImage = [UIImage imageWithData:imageData];

return resultImage;

}

}

以上就是通过PPT转图片的大概的一个流程!

我将以上代码进行了简单封装,下面介绍一下使用步骤

使用步骤:

导入 头文件

#import "PPTToImageTool.h"

传入PPT本地 url, 获取 转换后的 image 图片

// 获取本地 ppt url 地址

NSString * filePath = [[NSBundle mainBundle] pathForResource:@"IOS.pptx" ofType:nil];

// block 内部使用__weakself

__weak __typeof(self)weakSelf = self;

// 进行 ppt 转换

[self.toImagetool pptToImageWithPPTFileUrl:filePath

progress:^(CGFloat value) {

NSLog(@"进度-------%f", value);

} completion:^(NSArray * _Nonnull images) {

NSLog(@"转换后图片信息-------%@",images);

weakSelf.imageListView.images = images;

[weakSelf.imageListView reloadData];

}];

是不是非常简单....

踩坑总结

发现webView可以获取 html 代码后, 想着看能否通过 js 实现 html 区域转图片, 使用比较火的 js 三方库html2canvas进行转图片操作, 在写了一套转图片的js代码, 测试浏览器上运行都没啥问题, 但是到了 移动端,由于 html 的同源策略, 就会出现本地图片无法 截取的问题,以及 webView 生成的 html 不是很规范,导致被放弃!