如何在React Native(iOS)中对图像(资产)进行编码并通过照片选择器将其编码为base64?

时间:2018-11-11 03:00:26

标签: react-native base64 react-native-ios

我一直在努力寻找一种受支持的解决方案,以对图像(从资产)和照片选择器编码为base64string。

我可以在一个直接的本机应用程序中通过Swift来做到这一点。

func convertImageTobase64(format: ImageFormat, image:UIImage) -> String? {
var imageData: Data?
switch format {
case .png: imageData = image.pngData()
case .jpeg(let compression): imageData = image.jpegData(compressionQuality: compression)
}
return imageData?.base64EncodedString()

}

var mylogo: UIImage? = UIImage.init(named: "DFU-180x180")
let base64String = convertImageTobase64(format: .png, image: mylogo!)
let dataString = "data:image/jpg;base64," + base64String!

我试图通过NativeModules执行此操作,但是在后台线程而不是main上运行RCTConvert时出现错误。 图片.h

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>


@interface Images : NSObject <RCTBridgeModule>
@end

Images.m

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
#import "Images.h"

@implementation Images
RCT_EXPORT_MODULE()

// All the methods are implemented in a Swift extension, see FileBridgeExtension.swift
RCT_EXTERN_METHOD(convertImageTobase64:(nonnull NSString*)format image:(nonnull UIImage*)image callback:(RCTResponseSenderBlock))

@end

ImagesExtension.swift

import UIKit

public enum ImageFormat {
    case png
    case jpeg(CGFloat)
}

@objc extension Images {

    @objc func convertImageTobase64(_ format: NSString, image:UIImage, callback: @escaping ([Any]?)->Void) {
        var imageData: Data?
        print("convertImageTobase64_line 1")
        print("convert format: " + (format as! String))
        switch format {
        case ".png": imageData = UIImagePNGRepresentation(image)
        print("convertImageTobase64_line 2")
        case ".jpeg": imageData = UIImageJPEGRepresentation(image, 1.0)
        print("convertImageTobase64_line 3")
        default:
            print("convertImageTobase64_line 4")
            let error = RCTMakeError("Invalid image format", nil, nil)
            callback([[error], []]);
        }
        let base64string = imageData?.base64EncodedString()
        print("convertImageTobase64_line 5 = " + base64string!)
        callback([[NSNull()], [base64string]]);
    }

}

我尝试了4种不同的React Native库,但没有任何效果。我收到该库不存在的错误,甚至以为我做了npm安装并确认该库存在于node_modules中。我什至删除了node_modules文件夹,并使用npm install重建它。

我尝试过的两个库。

我正在使用的

npm版本是:6.4.1 我正在使用的节点版本是:8.12.0 Xcode v10 react-native-image-base64

react-native-image-to-base64

1 个答案:

答案 0 :(得分:1)

您可以使用此软件包rn-fetch-blob,它具有此功能File Stream,可以满足您的需求。

希望这对您有所帮助。

如果您需要进一步的帮助,请通过评论此帖子来对我进行ping操作。