├── .gitignore ├── LICENSE ├── README.md ├── UIColor+Change.h ├── UIColor+Change.m ├── UIWebView+HTML5.h └── UIWebView+HTML5.m /.gitignore: -------------------------------------------------------------------------------- 1 | # CocoaPods 2 | # 3 | # We recommend against adding the Pods directory to your .gitignore. However 4 | # you should judge for yourself, the pros and cons are mentioned at: 5 | # http://guides.cocoapods.org/using/using-cocoapods.html#should-i-ignore-the-pods-directory-in-source-control? 6 | # 7 | # Pods/ 8 | 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Du Zixi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | UIWebView-HTML5 2 | =============== 3 | 4 | This project is a UIWebView category about HTML5 methods including basic JavaScript functions, canvas API and others(comming soon...). 5 | 6 | 7 | Note: This category should be used with "UIColor+change.h" Category together. 8 | 9 | 10 | -------------------------------------------------------------------------------- /UIColor+Change.h: -------------------------------------------------------------------------------- 1 | // 2 | // UIColor+Change.h 3 | // ChangeColor 4 | // 5 | // Created by 杜子兮 on 14-3-13. 6 | // Edited by 杜子兮 on 14-5-23. 7 | // Edited by 杜子兮 on 14-7-12. for Canvas. 8 | // Copyright (c) 2014年 莲兮奈若何. All rights reserved. 9 | // 10 | 11 | #import 12 | 13 | @interface UIColor (Change) 14 | 15 | /// 获取canvas用的颜色字符串 16 | - (NSString *)canvasColorString; 17 | 18 | ///获取网页颜色字串 19 | - (NSString *) webColorString; 20 | 21 | ///获取RGB值 22 | - (CGFloat *) getRGB; 23 | 24 | ///让颜色更亮 25 | - (UIColor *) lighten; 26 | 27 | ///让颜色更暗 28 | - (UIColor *) darken; 29 | 30 | ///取两个颜色的中间 31 | - (UIColor *) mix: (UIColor *) color; 32 | 33 | 34 | 35 | @end 36 | -------------------------------------------------------------------------------- /UIColor+Change.m: -------------------------------------------------------------------------------- 1 | // 2 | // UIColor+Change.m 3 | // ChangeColor 4 | // 5 | // Created by 杜子兮 on 14-3-13. 6 | // Edited by 杜子兮 on 14-5-23. 7 | // Edited by 杜子兮 on 14-7-12. for Canvas. 8 | // Copyright (c) 2014年 莲兮奈若何. All rights reserved. 9 | // 10 | 11 | #import "UIColor+Change.h" 12 | 13 | @implementation UIColor (Change) 14 | 15 | /// 获取canvas用的颜色字符串 16 | - (NSString *)canvasColorString 17 | { 18 | CGFloat *arrRGBA = [self getRGB]; 19 | int r = arrRGBA[0] * 255; 20 | int g = arrRGBA[1] * 255; 21 | int b = arrRGBA[2] * 255; 22 | float a = arrRGBA[3]; 23 | return [NSString stringWithFormat:@"rgba(%d,%d,%d,%f)", r, g, b, a]; 24 | } 25 | 26 | /// 获取网页颜色字串 27 | - (NSString *)webColorString 28 | { 29 | CGFloat *arrRGBA = [self getRGB]; 30 | int r = arrRGBA[0] * 255; 31 | int g = arrRGBA[1] * 255; 32 | int b = arrRGBA[2] * 255; 33 | NSLog(@"%d,%d,%d", r, g, b); 34 | NSString *webColor = [NSString stringWithFormat:@"#%02X%02X%02X", r, g, b]; 35 | return webColor; 36 | } 37 | 38 | /// 加亮 39 | - (UIColor *) lighten 40 | { 41 | CGFloat *rgb = [self getRGB]; 42 | CGFloat r = rgb[0]; 43 | CGFloat g = rgb[1]; 44 | CGFloat b = rgb[2]; 45 | CGFloat alpha = rgb[3]; 46 | 47 | r = r + (1 - r) / 6.18; 48 | g = g + (1 - g) / 6.18; 49 | b = b + (1 - b) / 6.18; 50 | 51 | UIColor * uiColor = [UIColor colorWithRed:r green:g blue:b alpha:alpha]; 52 | return uiColor; 53 | } 54 | 55 | - (UIColor *) darken{ //变暗 56 | CGFloat *rgb = [self getRGB]; 57 | CGFloat r = rgb[0]; 58 | CGFloat g = rgb[1]; 59 | CGFloat b = rgb[2]; 60 | CGFloat alpha = rgb[3]; 61 | 62 | r = r * 0.618; 63 | g = g * 0.618; 64 | b = b * 0.618; 65 | 66 | UIColor *uiColor = [UIColor colorWithRed:r green:g blue:b alpha:alpha]; 67 | return uiColor; 68 | } 69 | 70 | - (UIColor *) mix: (UIColor *) color{ 71 | CGFloat * rgb1 = [self getRGB]; 72 | CGFloat r1 = rgb1[0]; 73 | CGFloat g1 = rgb1[1]; 74 | CGFloat b1 = rgb1[2]; 75 | CGFloat alpha1 = rgb1[3]; 76 | 77 | CGFloat * rgb2 = [color getRGB]; 78 | CGFloat r2 = rgb2[0]; 79 | CGFloat g2 = rgb2[1]; 80 | CGFloat b2 = rgb2[2]; 81 | CGFloat alpha2 = rgb2[3]; 82 | 83 | //mix them!! 84 | CGFloat r = (r1 + r2) / 2.0; 85 | CGFloat g = (g1 + g2) / 2.0; 86 | CGFloat b = (b1 + b2) / 2.0; 87 | CGFloat alpha = (alpha1 + alpha2) / 2.0; 88 | 89 | UIColor * uiColor = [UIColor colorWithRed:r green:g blue:b alpha:alpha]; 90 | return uiColor; 91 | } 92 | 93 | - (CGFloat *) getRGB{ 94 | UIColor * uiColor = self; 95 | 96 | CGColorRef cgColor = [uiColor CGColor]; 97 | 98 | int numComponents = CGColorGetNumberOfComponents(cgColor); 99 | 100 | if (numComponents == 4){ 101 | static CGFloat * components = Nil; 102 | components = (CGFloat *) CGColorGetComponents(cgColor); 103 | return (CGFloat *)components; 104 | } else { //否则默认返回黑色 105 | static CGFloat components[4] = {0}; 106 | CGFloat f = 0; 107 | //非RGB空间的系统颜色单独处理 108 | if ([uiColor isEqual:[UIColor whiteColor]]) { 109 | f = 1.0; 110 | } else if ([uiColor isEqual:[UIColor lightGrayColor]]) { 111 | f = 0.8; 112 | } else if ([uiColor isEqual:[UIColor grayColor]]) { 113 | f = 0.5; 114 | } 115 | components[0] = f; 116 | components[1] = f; 117 | components[2] = f; 118 | components[3] = 1.0; 119 | return (CGFloat *)components; 120 | } 121 | } 122 | 123 | @end 124 | -------------------------------------------------------------------------------- /UIWebView+HTML5.h: -------------------------------------------------------------------------------- 1 | // 2 | // UIWebView+HTML5.h 3 | // WebViewJS 4 | // 5 | // Created by 杜子兮(duzixi) on 14-6-30. 6 | // Edited by 杜子兮(duzixi) on 14-7-11. 修改网页图片显示大小 7 | // Edited by 杜子兮(duzixi) on 14-7-26. 添加 canvas API 类目 8 | // Copyright (c) 2014年 lanou3g.com 蓝鸥. All rights reserved. 9 | // 10 | 11 | #import 12 | 13 | 14 | @interface UIWebView (JavaScript) 15 | 16 | #pragma mark - 17 | #pragma mark 获取网页中的数据 18 | 19 | /// 获取某个标签的结点个数 20 | - (int)nodeCountOfTag:(NSString *)tag; 21 | 22 | /// 获取当前页面URL 23 | - (NSString *) getCurrentURL; 24 | 25 | /// 获取标题 26 | - (NSString *) getTitle; 27 | 28 | /// 获取图片 29 | - (NSArray *) getImgs; 30 | 31 | /// 获取当前页面所有链接 32 | - (NSArray *) getOnClicks; 33 | 34 | #pragma mark - 35 | #pragma mark 改变网页样式和行为 36 | 37 | /// 改变背景颜色 38 | - (void) setBackgroundColor:(UIColor *)color; 39 | 40 | /// 为所有图片添加点击事件(网页中有些图片添加无效) 41 | - (void) addClickEventOnImg; 42 | 43 | /// 改变所有图像的宽度 44 | - (void) setImgWidth:(int)size; 45 | 46 | /// 改变所有图像的高度 47 | - (void) setImgHeight:(int)size; 48 | 49 | /// 改变指定标签的字体颜色 50 | - (void) setFontColor:(UIColor *) color withTag:(NSString *)tagName; 51 | 52 | /// 改变指定标签的字体大小 53 | - (void) setFontSize:(int) size withTag:(NSString *)tagName; 54 | 55 | @end 56 | 57 | #pragma mark - 58 | #pragma mark 在网页上画图 59 | 60 | @interface UIWebView (Canvas) 61 | 62 | /// 创建一个指定大小的画布 63 | - (void)createCanvas:(NSString *)canvasId 64 | width:(NSInteger)width 65 | height:(NSInteger)height; 66 | 67 | /// 在指定位置创建一个指定大小的画布 68 | - (void)createCanvas:(NSString *)canvasId 69 | width:(NSInteger)width 70 | height:(NSInteger)height 71 | x:(NSInteger)x 72 | y:(NSInteger)y; 73 | 74 | /// 绘制矩形填充 context.fillRect(x,y,width,height) 75 | - (void)fillRectOnCanvas:(NSString *)canvasId 76 | x:(NSInteger)x 77 | y:(NSInteger)y 78 | width:(NSInteger)width 79 | height:(NSInteger)height 80 | uicolor:(UIColor *)color; 81 | 82 | /// 绘制矩形边框 context.strokeRect(x,y,width,height) 83 | - (void)strokeRectOnCanvas:(NSString *)canvasId 84 | x:(NSInteger)x 85 | y:(NSInteger)y 86 | width:(NSInteger)width 87 | height:(NSInteger)height 88 | uicolor:(UIColor *)color 89 | lineWidth:(NSInteger)lineWidth; 90 | 91 | /// 清除矩形区域 context.clearRect(x,y,width,height) 92 | - (void)clearRectOnCanvas:(NSString *)canvasId 93 | x:(NSInteger)x 94 | y:(NSInteger)y 95 | width:(NSInteger)width 96 | height:(NSInteger) height; 97 | 98 | /// 绘制圆弧填充 context.arc(x, y, radius, starAngle,endAngle, anticlockwise) 99 | - (void)arcOnCanvas:(NSString *)canvasId 100 | centerX:(NSInteger)x 101 | centerY:(NSInteger)y 102 | radius:(NSInteger)r 103 | startAngle:(float)startAngle 104 | endAngle:(float)endAngle 105 | anticlockwise:(BOOL)anticlockwise 106 | uicolor:(UIColor *)color; 107 | 108 | /// 绘制一条线段 context.moveTo(x,y) context.lineTo(x,y) 109 | - (void)lineOnCanvas:(NSString *)canvasId 110 | x1:(NSInteger)x1 111 | y1:(NSInteger)y1 112 | x2:(NSInteger)x2 113 | y2:(NSInteger)y2 114 | uicolor:(UIColor *)color 115 | lineWidth:(NSInteger)lineWidth; 116 | 117 | /// 绘制一条折线 118 | - (void)linesOnCanvas:(NSString *)canvasId 119 | points:(NSArray *)points 120 | unicolor:(UIColor *)color 121 | lineWidth:(NSInteger)lineWidth; 122 | 123 | /// 绘制贝塞尔曲线 context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) 124 | - (void)bezierCurveOnCanvas:(NSString *)canvasId 125 | x1:(NSInteger)x1 126 | y1:(NSInteger)y1 127 | cp1x:(NSInteger)cp1x 128 | cp1y:(NSInteger)cp1y 129 | cp2x:(NSInteger)cp2x 130 | cp2y:(NSInteger)cp2y 131 | x2:(NSInteger)x2 132 | y2:(NSInteger)y2 133 | unicolor:(UIColor *)color 134 | lineWidth:(NSInteger)lineWidth; 135 | 136 | /// 绘制二次样条曲线 context.quadraticCurveTo(qcpx,qcpy,qx,qy) 137 | // coming soon... 138 | 139 | /// 显示图像的一部分 context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh) 140 | - (void)drawImage:(NSString *)src 141 | onCanvas:(NSString *)canvasId 142 | sx:(NSInteger)sx 143 | sy:(NSInteger)sy 144 | sw:(NSInteger)sw 145 | sh:(NSInteger)sh 146 | dx:(NSInteger)dx 147 | dy:(NSInteger)dy 148 | dw:(NSInteger)dw 149 | dh:(NSInteger)dh; 150 | 151 | @end 152 | -------------------------------------------------------------------------------- /UIWebView+HTML5.m: -------------------------------------------------------------------------------- 1 | // 2 | // UIWebView+HTML5.m 3 | // 4 | // 14-06-30. Created by 杜子兮(duzixi.com) 5 | // 14-07-11. 修改网页图片显示大小 6 | // 14-07-26. 添加 canvas API 类目 7 | // 14-11-05. 完善改变图片高度和宽度实现; 针对iOS8类型检测进行完善 8 | // 9 | // Copyright (c) 2014年 lanou3g.com 蓝鸥. All rights reserved. 10 | // 11 | 12 | #import "UIWebView+HTML5.h" 13 | #import "UIColor+Change.h" 14 | 15 | @implementation UIWebView (JavaScript) 16 | 17 | #pragma mark - 18 | #pragma mark 获取网页中的数据 19 | 20 | /// 获取某个标签的结点个数 21 | - (int)nodeCountOfTag:(NSString *)tag 22 | { 23 | NSString *jsString = [NSString stringWithFormat:@"document.getElementsByTagName('%@').length", tag]; 24 | int len = [[self stringByEvaluatingJavaScriptFromString:jsString] intValue]; 25 | return len; 26 | } 27 | 28 | /// 获取当前页面URL 29 | - (NSString *)getCurrentURL 30 | { 31 | return [self stringByEvaluatingJavaScriptFromString:@"document.location.href"]; 32 | } 33 | 34 | /// 获取标题 35 | - (NSString *)getTitle 36 | { 37 | return [self stringByEvaluatingJavaScriptFromString:@"document.title"]; 38 | } 39 | 40 | /// 获取所有图片链接 41 | - (NSArray *)getImgs 42 | { 43 | NSMutableArray *arrImgURL = [[NSMutableArray alloc] init]; 44 | 45 | for (int i = 0; i < [self nodeCountOfTag:@"img"]; i++) { 46 | NSString *jsString = [NSString stringWithFormat:@"document.getElementsByTagName('img')[%d].src", i]; 47 | [arrImgURL addObject:[self stringByEvaluatingJavaScriptFromString:jsString]]; 48 | } 49 | return arrImgURL; 50 | } 51 | 52 | /// 获取当前页面所有点击链接 53 | - (NSArray *)getOnClicks 54 | { 55 | NSMutableArray *arrOnClicks = [[NSMutableArray alloc] init]; 56 | 57 | for (int i = 0; i < [self nodeCountOfTag:@"a"]; i++) { 58 | NSString *jsString = [NSString stringWithFormat:@"document.getElementsByTagName('a')[%d].getAttribute('onclick')", i]; 59 | NSString *clickString = [self stringByEvaluatingJavaScriptFromString:jsString]; 60 | NSLog(@"%@", clickString); 61 | [arrOnClicks addObject:clickString]; 62 | } 63 | return arrOnClicks; 64 | } 65 | 66 | #pragma mark - 67 | #pragma mark 改变网页样式和行为 68 | 69 | /// 改变背景颜色 70 | - (void)setBackgroundColor:(UIColor *)color 71 | { 72 | NSString * jsString = [NSString stringWithFormat:@"document.body.style.backgroundColor = '%@'",[color webColorString]]; 73 | [self stringByEvaluatingJavaScriptFromString:jsString]; 74 | } 75 | 76 | /// 为所有图片添加点击事件(网页中有些图片添加无效,需要协议方法配合截取) 77 | - (void)addClickEventOnImg 78 | { 79 | for (int i = 0; i < [self nodeCountOfTag:@"img"]; i++) { 80 | //利用重定向获取img.src，为区分，给url添加'img:'前缀 81 | NSString *jsString = [NSString stringWithFormat: 82 | @"document.getElementsByTagName('img')[%d].onclick = \ 83 | function() { document.location.href = 'img' + this.src; }",i]; 84 | [self stringByEvaluatingJavaScriptFromString:jsString]; 85 | } 86 | } 87 | 88 | /// 改变所有图像的宽度 89 | - (void) setImgWidth:(int)size 90 | { 91 | for (int i = 0; i < [self nodeCountOfTag:@"img"]; i++) { 92 | NSString *jsString = [NSString stringWithFormat:@"document.getElementsByTagName('img')[%d].width = '%d'", i, size]; 93 | [self stringByEvaluatingJavaScriptFromString:jsString]; 94 | 95 | jsString = [NSString stringWithFormat:@"document.getElementsByTagName('img')[%d].style.width = '%dpx'", i, size]; 96 | [self stringByEvaluatingJavaScriptFromString:jsString]; 97 | 98 | } 99 | } 100 | 101 | /// 改变所有图像的高度 102 | - (void) setImgHeight:(int)size 103 | { 104 | for (int i = 0; i < [self nodeCountOfTag:@"img"]; i++) { 105 | NSString *jsString = [NSString stringWithFormat:@"document.getElementsByTagName('img')[%d].height = '%d'", i, size]; 106 | [self stringByEvaluatingJavaScriptFromString:jsString]; 107 | 108 | jsString = [NSString stringWithFormat:@"document.getElementsByTagName('img')[%d].style.height = '%dpx'", i, size]; 109 | [self stringByEvaluatingJavaScriptFromString:jsString]; 110 | } 111 | } 112 | 113 | /// 改变指定标签的字体颜色 114 | - (void)setFontColor:(UIColor *)color withTag:(NSString *)tagName 115 | { 116 | NSString *jsString = [NSString stringWithFormat: 117 | @"var nodes = document.getElementsByTagName('%@'); \ 118 | for(var i=0;i