iOSUIWebView加载UIImage对象 生成高清二维码

iOSUIWebView加载UIImage对象 生成高清二维码

需求：生成二维码图片后 用UIWebview加载出来

之前采用把图片保存到手机中然后读取路径的方法加载。操作复杂，且如果不需要保存到本地，其步骤就显得有些累赘了。

学习JS之后发现img标签可以读取 Base64 编码的图片，遂做更改。
采用加载Base64字符串的方式加载图片。

1、生成高清二维码

/**创建二维码图片*/
- (UIImage *)createQRCodeImageWithQRCodeMessage:(NSString *)msg Scale:(CGFloat)scale{
    //创建过滤器
    CIFilter *filter = [CIFilter filterWithName:@"CIQRCodeGenerator"];
    [filter setDefaults];
    //给过滤器添加数据
    NSData *data = [msg dataUsingEncoding:NSUTF8StringEncoding];
    [filter setValue:data forKey:@"inputMessage"];
    //获取二维码
    CIImage *outputImage = [filter outputImage];
    
    //把二维码变清晰
    CIContext *context = [CIContext contextWithOptions:nil];
    CGImageRef cgImage = [context createCGImage:outputImage
                                       fromRect:[outputImage extent]];
    UIImage *image = [UIImage imageWithCGImage:cgImage
                                         scale:1.0
                                   orientation:UIImageOrientationUp];
    
    UIImage *resized = nil;
    CGFloat width = image.size.width * scale;
    CGFloat height = image.size.height * scale;
    
    UIGraphicsBeginImageContext(CGSizeMake(width, height));
    CGContextRef context1 = UIGraphicsGetCurrentContext();
    CGContextSetInterpolationQuality(context1, kCGInterpolationNone);
    [image drawInRect:CGRectMake(0, 0, width, height)];
    resized = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    CGImageRelease(cgImage);
    return resized;
}

2、将图片转化为Base64编码

//编码图片
- (NSString *)ImageSourceForImage:(UIImage *)image{
    NSData *imageData = UIImageJPEGRepresentation(image,1.0);
    NSString *imageSource = [NSString stringWithFormat:@"data:image/png;base64,%@",[imageData base64EncodedStringWithOptions:0]];
    return imageSource;
}

3、加载图片

[html appendFormat:@"<tr><td width=\"35%%\" colspan=\"1\">栋舍</td><td width=\"40%%\" colspan=\"2\">%@</td><td rowspan=\"3\" align=\"center\" width=\"25%%\"><img src =\"%@\" /></tr>",_pig.LS_NUM,imageSource];

效果图

加载效果

下一步点击图片放大显示-保存到相册

点击展示

1、为img标签添加onclik事件

<img src =\"%@\" onclick=\"touchImage()\" />

2、捕捉js点击事件 直接用系统提供的库吧

#import <JavaScriptCore/JavaScriptCore.h>
- (void)webViewDidFinishLoad:(UIWebView *)webView{
    if (webView == wvCard) {
        JSContext *context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
        //点击二维码
        context[@"touchImage"] = ^() {
            if (self.QRCodeImage) {
                AFDISPATCH_MAIN_THREAD(^{
                    [self showQRCodeImage];
                })
            }
        };
    }
}

3、简单的展示图片

- (void)showQRCodeImage{
    UIControl * backview  = [[UIControl alloc]initWithFrame:CGRectMake(0, 0, ScreenWidth, ScreenHeight)];
    backview.backgroundColor = [UIColor blackColor];

    //计算位置
    CGFloat startX = wvCard.right - 30.f;
    CGFloat startY = wvCard.top + 44.f;
    UIImageView * imageview = [[UIImageView alloc] initWithFrame:CGRectMake(startX,startY, ((ScreenWidth - 10) /4), ((ScreenWidth - 10) /4))];
    
    //加载图片
    imageview.image = self.QRCodeImage;
    imageview.contentMode = UIViewContentModeScaleAspectFit;
    [[UIApplication sharedApplication].keyWindow addSubview:backview];
    [[UIApplication sharedApplication].keyWindow addSubview:imageview];
    
    //设置动画显示
    [UIView animateWithDuration:ANIMATE animations:^{
        CGRect frame = CGRectMake(0, 0, ScreenWidth, ScreenHeight);
        imageview.frame = frame;
    }];
    
    [backview bk_addEventHandler:^(id sender) {
        [UIView animateWithDuration:ANIMATE animations:^{
            backview.alpha = 0;
            imageview.alpha = 0;
        } completion:^(BOOL finished) {
            [imageview removeFromSuperview];
            [backview removeFromSuperview];
        }];
        
    } forControlEvents:UIControlEventTouchDown];
}