专栏首页程序员维他命iOS--React Native 图片插件(打开、保存、剪切、压缩)

iOS--React Native 图片插件(打开、保存、剪切、压缩)

一:介绍

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

在React Native移动平台项目开发中,除了React Native 提供的封装好的部分插件和原声组建外,在实际的项目中还需要使用到很多其他的插件,比如网络请求、数据库、相机、相册、通讯录、视频播放器、浏览器、蓝牙连接、图片处理、消息推送、地图、统计、埋点等等APP开发中需要用到的功能,都为IDE开发平台提供封装好的插件,以便项目开发使用。

另外,这些博文都是来源于我日常开发中的技术总结,在时间允许的情况下,我会针对技术点分别分享iOS、Android两个版本,如果有其他技术点需要,可在文章后留言,我会尽全力帮助大家。这篇文章重点介绍相册插件的开发与使用。

源码Demo获取方法

如果需要React Native图片插件(打开、保存、剪切、压缩)源码demo,欢迎关注 【网罗开发】微信公众号,回复【67】便可领取。

网罗天下方法,方便你我开发,更多RN技术干货等待领取,所有文档会持续更新,欢迎关注一起成长!

二:实现思路分析

相册插件是需要实现打开相册、保存图片到相册、图片剪切、图片压缩等功能的实现。这些功能加通过在PhotosManage类中对应封装的方法来提供给Javascript开发使用。

具体的实现思路如下:

  1. 新建PhotosManage类,实现RCTBridgeModule协议
  2. 添加RCT_EXPORT_MODULE()宏
  3. 添加React Native跟控制器
  4. 声明被JavaScript 调用的方法
  5. 实现打开相册
  6. 实现保存图片到相册
  7. 实现图片剪切
  8. 实现图片压缩
  9. JavaScript调用浏览器方法

三:实现源码分析

实现源码分析是根据上面列出的具体实现思路来为大家解刨内部的实现流程及核心代码分析。

1. 新建PhotosManage类,实现RCTBridgeModule协议

新建继承NSObject的PhotosManage类,并实现RCTBridgeModule协议

// PhotosManage.h#import <Foundation/Foundation.h>#import <React/RCTBridgeModule.h>#import <UIKit/UIKit.h>@interface PhotosManage : NSObject<RCTBridgeModule>@end

2. 添加RCT_EXPORT_MODULE()宏

为了实现RCTBridgeModule协议,PhotosManage的类需要包含RCT_EXPORT_MODULE()宏。

并在这个宏里面添加一个参数“PhotosManage”用来指定在 JavaScript 中访问这个模块的名字。

如果你不指定,默认就会使用这个 Objective-C 类的名字。

如果类名以 RCT 开头,则 JavaScript 端引入的模块名会自动移除这个前缀。

// PhotosManage.m#import "PhotosManage.h"@implementation PhotosManageRCT_EXPORT_MODULE(PhotosManage);@end

3. 添加React Native跟控制器

如果不添加React Native跟控制器,view将不能正常显示出来,实现方法如下:

// PhotosManage.m#import <React/RCTUtils.h>

引入<React/RCTUtils.h>之后,在视图初始化或者显示的时候,按照如下方法调用即可

UIViewController *vc = RCTPresentedViewController();

4. 声明被JavaScript 调用的方法

React Native需要明确的声明要给 JavaScript 导出的方法,否则 React Native 不会导出任何方法。声明通过RCT_EXPORT_METHOD()宏来实现:

// PhotosManage.m#import "PhotosManage.h"#import <React/RCTUtils.h>@implementation PhotosManageRCT_EXPORT_MODULE(PhotosManage);/** 打开相册 @return 选择图片的地址,缩略图 */RCT_EXPORT_METHOD(picture:(NSDictionary *)arguments                  :(RCTResponseSenderBlock)sucessCallback                  :(RCTResponseSenderBlock)failCallback){    CIBNSLog(@"调起打开相册方法");}
/** 保存相册 @return 返回BOOL */RCT_EXPORT_METHOD(saveAlbum:(NSDictionary *)arguments                  :(RCTResponseSenderBlock)sucessCallback                  :(RCTResponseSenderBlock)failCallback){    CIBNSLog(@"调起保存相册方法");}
/** 图片剪切 @param shearImage  剪切图片 @return 剪切后的图片地址 */RCT_EXPORT_METHOD(shearImage:(NSDictionary *)arguments                  :(RCTResponseSenderBlock)sucessCallback                  :(RCTResponseSenderBlock)failCallback){    CIBNSLog(@"调起图片剪切方法");}
/** 图片压缩接口 @return 压缩后的图片路径 */RCT_EXPORT_METHOD(compressImage:(NSDictionary *)arguments                  :(RCTResponseSenderBlock)sucessCallback                  :(RCTResponseSenderBlock)failCallback){    CIBNSLog(@"调起图片压缩方法");}@end

5. 实现打开相册

打开相册需要实现HXAlbumListViewControllerDelegate代理方法,跳转到系统相册中选取需要的图片,并返回。

核心源码如下:

dispatch_async(dispatch_get_main_queue(), ^{        [self.manager clearSelectedList];        // 照片选择控制器        HXAlbumListViewController *vc = [[HXAlbumListViewController alloc] init];        vc.delegate = self;        self.manager.configuration.openCamera = NO;        vc.manager = self.manager;        vc.manager.configuration.requestImageAfterFinishingSelection = YES;        [RCTPresentedViewController() presentViewController:[[HXCustomNavigationController alloc] initWithRootViewController:vc] animated:YES completion:nil];    });

6. 实现保存图片到相册

保存图片到相册,需要将用户传给系统的图片路径转换成UIImage格式,然后调用HXPhotoTools中的savePhotoToCustomAlbumWithName方法来实现图片保存到相册。

savePhotoToCustomAlbumWithName核心源码如下:

// 判断授权状态    [PHPhotoLibrary requestAuthorization:^(PHAuthorizationStatus status) {        if (status != PHAuthorizationStatusAuthorized) return;        dispatch_async(dispatch_get_main_queue(), ^{            if (!iOS9_Later) {                UIImageWriteToSavedPhotosAlbum(photo, nil, nil, nil);                return;            }            NSError *error = nil;            // 保存相片到相机胶卷            __block PHObjectPlaceholder *createdAsset = nil;            [[PHPhotoLibrary sharedPhotoLibrary] performChangesAndWait:^{                createdAsset = [PHAssetCreationRequest creationRequestForAssetFromImage:photo].placeholderForCreatedAsset;            } error:&error];                        if (error) {                NSSLog(@"保存失败");                return;            }                        // 拿到自定义的相册对象            PHAssetCollection *collection = [self createCollection:albumName];            if (collection == nil) {                NSSLog(@"保存自定义相册失败");                return;            }                        [[PHPhotoLibrary sharedPhotoLibrary] performChangesAndWait:^{                [[PHAssetCollectionChangeRequest changeRequestForAssetCollection:collection] insertAssets:@[createdAsset] atIndexes:[NSIndexSet indexSetWithIndex:0]];            } error:&error];                        if (error) {                NSSLog(@"保存自定义相册失败");            } else {                NSSLog(@"保存成功");            }        });    }];

7. 实现图片剪切

实现图片剪切,首先需要实现UIImagePickerControllerDelegate代理方法,然后将用户传入的图片路径转换成UIImage,根据传入的参数进行标准剪切。

核心源码如下:

dispatch_async(dispatch_get_main_queue(), ^{                HXDatePhotoEditViewController *vc = [[HXDatePhotoEditViewController alloc] init];                NSString *imagePath;                imagePath = [self handleFilePath:simplifyPath];                UIImage *image = [UIImage imageWithContentsOfFile:imagePath];                if (image == nil) {                    CIBNSLog(@"需要剪切的图片不存在");                    self.shearImageFailure(@[@{@"resultCode":@"-1",@"reslutMessage":@"需要剪切的图片不存在"}]);                }else{                    HXPhotoModel *photoModel = [HXPhotoModel photoModelWithImage:image];                    vc.model = photoModel;                    vc.delegate = self;                    vc.manager = self.manager;                    vc.outside = YES;                    [RCTPresentedViewController() presentViewController:[[HXCustomNavigationController alloc] initWithRootViewController:vc] animated:YES completion:nil];                }            });

8. 实现图片压缩

图片压缩分为按照比例进行压缩和按照byte压缩。

按照比例进行压缩核心源码如下:

//按照比例进行压缩    if ([[arguments allKeys] containsObject:@"scale"]) {        scale = [NSString stringWithFormat:@"%@",arguments[@"scale"]];        if (!ValidStr(scale)) {            CIBNSLog(@"参数错误");            failCallback(@[@{@"resultCode":@"0",@"reslutMessage":@"参数错误"}]);        }        float scaleF = [scale floatValue];                UIImage *originalImg = [UIImage imageWithContentsOfFile:originaImgPath];        UIImage *compressedImg = [UIImageTool configureImage:originalImg withScale:scaleF];                NSData *data = UIImagePNGRepresentation(compressedImg);        BOOL success = [data writeToFile:compressedImgPath atomically:YES];        if (success) {            CIBNSLog(@"图片压缩成功");            sucessCallback(@[@{@"status":@"1",@"data":compressedImgPath}]);        }else{            CIBNSLog(@"图片压缩失败");            failCallback(@[@{@"resultCode":@"-1",@"reslutMessage":@"失败"}]);        }    }

按照byte压缩核心源码如下:

//按照byte压缩    if ([[arguments allKeys] containsObject:@"size"]) {        size = [NSString stringWithFormat:@"%@",arguments[@"size"]];;        if (!ValidStr(size)) {            failCallback(@[@{@"resultCode":@"0",@"reslutMessage":@"参数错误"}]);        }        NSInteger Byte = [size integerValue];                UIImage *originalImg = [UIImage imageWithContentsOfFile:originaImgPath];        UIImage *compressedImg = [[self class] configureImageWithoutDistort:originalImg withBytes:Byte];                NSData *data = UIImagePNGRepresentation(compressedImg);        BOOL success = [data writeToFile:compressedImgPath atomically:YES];        if (success) {            CIBNSLog(@"图片压缩成功");            sucessCallback(@[@{@"status":@"1",@"data":compressedImgPath}]);        }else{            CIBNSLog(@"图片压缩失败");            failCallback(@[@{@"resultCode":@"-1",@"reslutMessage":@"失败"}]);        }    }

9. Javascript调用浏览器方法

现在从 Javascript 里可以这样调用这个方法:

import { NativeModules } from "react-native";const PhotosManagePlugin = NativeModules.PhotosManage;//实现打开相册PhotosManagePlugin.picture({},(msg) => {                                         Alert.alert(JSON.stringify(msg));                                         },(err) => {                                         Alert.alert(JSON.stringify(err));                                         });//实现保存图片到相册PhotosManagePlugin.saveAlbum({image:"defaults://images/798E49BF-F71E-4CA9-BA96-026D23A7B491.jpg"},(msg) => {                                         Alert.alert(JSON.stringify(msg));                                         },(err) => {                                         Alert.alert(JSON.stringify(err));                                         });
//实现图片剪切PhotosManagePlugin.shearImage({image:"defaults://2.png"},(msg) => {                                         Alert.alert(JSON.stringify(msg));                                         },(err) => {                                         Alert.alert(JSON.stringify(err));                                         });
//实现图片压缩PhotosManagePlugin.compressImage({image:"defaults://images/798E49BF-F71E-4CA9-BA96-026D23A7B491.jpg",scale:"0.5"},(msg) => {                                         Alert.alert(JSON.stringify(msg));                                         },(err) => {                                         Alert.alert(JSON.stringify(err));                                         });

本文分享自微信公众号 - 程序员维他命(J_Knight_)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-03-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Apple Widget:下一个顶级流量入口?

    2020 年 6 月 22 日,苹果召开了第一次线上的开发者大会 - WWDC20。这可谓是一次可以载入史册的发布会,宣布了 ARM 架构 Mac 芯片、软硬件...

    用户2932962
  • 你该考虑的,从来都不是“该不该辞职”

    辞职半年有余。起初因为一篇《【教你赚钱】5 分钟教你成为会赚钱的独立开发者》开通了专栏。如今两个月过去,发布 33 篇文章,没想到竟总共收获了超过 1100 次...

    用户2932962
  • 点亮你 App 的 5 个 iOS 库

    TVButton 可在 UIButton 控件上重新创建类似于在 Apple TV 上看到的美丽视差效果。长按或拖动即可触发效果。要使用视差效果,您至少需要两/...

    用户2932962
  • 1.2.3.3 TCP/IP模型与OSI参考模型的比较

    首先,二者都采用分层的体系结构,将庞大且复杂的问题划分为若干个较容易处理的,范围较小的问题,而且分层的功能也大体相似。

    week
  • 让度秘机器人去卖薯条,百度是咋想的?

    4月25日上午,百度公司与肯德基在上海联合推出智能概念店“KFC original+”,该概念店内,将使用百度度秘机器人完成语音交互、智能点餐和全息投影展示。这...

    机器人网
  • 【通俗理解】区块链

    用户1594945
  • 抽样调查怎么做?

    全篇为5部分,主要采用5W2H的逻辑。 ? (本文框架) 01 输为什么要用抽样样本 我们经常需要调查某一批对象的某一项情况,如果所调查对象的体量比较少时,我...

    张俊红
  • Linux从入门到精通系列之Squid代理服务器

    首先呢我们来介绍下Squid:    作为一种免费的网络操作系统,Linux越来越受到广大网络爱好者的欢迎,目前因特网(Internet)上运行的主机有相当一...

    DevinGeng
  • ASP.NET Ajax 库

    .NET 4.0中所包含的ASP.NET Ajax 库是一个完全不一样的Ajax库,现在完全采用New BSD协议,也就是完全开源了,它是 CodePlex F...

    张善友
  • bootstrap 表单控件

    <form role="form"> <div class="checkbox"> <label>

    用户5760343

扫码关注云+社区

领取腾讯云代金券