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 信息如下, 只粘贴了部分结构:
我们可以发现规律,每一个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 不是很规范,导致被放弃!