react-native-image-crop-picker openCropper 安卓无法对webp图片格式的裁剪问题

149 阅读1分钟

google未找到解决方法,最后以原生的方式对图片进行格式转换

1、在android java文件夹下面新建 ImageConverterModule.java

写入以下代码

package 你的包名;

import android.util.Log;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.uimanager.IllegalViewOperationException;

import com.facebook.react.bridge.Callback;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;


import java.util.Map;
import java.util.HashMap;

public class ImageConverterModule extends ReactContextBaseJavaModule {

    private static final String DURATION_SHORT_KEY = "SHORT";
    private static final String DURATION_LONG_KEY = "LONG";

    public ImageConverterModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    // 复写方法,返回react-native中调用的 组件名
    @Override
    public String getName() {
        return "ImageConverterModule";
    }
    // 复写方法,返回常量
    @Override
    public Map<String, Object> getConstants() {
        final Map<String, Object> constants = new HashMap<>();
        return constants;
    }
      @ReactMethod
    public void convertWebPToJPG(String inputPath, String outputPath, Callback callback) {
        try {
            // 加载 WebP 图片
            Bitmap bitmap = BitmapFactory.decodeFile(inputPath);
            if (bitmap == null) {
                callback.invoke("Failed to load WebP image", null);
                return;
            }

            // 创建输出文件
            File outputFile = new File(outputPath);
            FileOutputStream outputStream = new FileOutputStream(outputFile);

            // 将 Bitmap 保存为 JPG
            boolean success = bitmap.compress(Bitmap.CompressFormat.JPEG, 100, outputStream);
            outputStream.flush();
            outputStream.close();

            if (success) {
                callback.invoke(null, outputFile.getAbsolutePath());
            } else {
                callback.invoke("Failed to convert WebP to JPG", null);
            }

        } catch (IOException e) {
            callback.invoke(e.getMessage(), null);
        }
    }
}


2.新建文件,导出使用

import { Platform } from "react-native";
import RNFetchBlob from 'rn-fetch-blob'
import { NativeModules } from 'react-native';


const { ImageConverterModule } = NativeModules

//默认使用网络地址下载后处理
export const webpToJpg=(edit_path:string,callback:(path:string)=>void)=>{
    if(Platform.OS==='android'){
        RNFetchBlob.config({
            fileCache: true,
            appendExt: "webp",
          })
            .fetch("GET",edit_path, {
            })
            .then((res) => {
              const path= res.path();
              //下载后的文件路径
              const outputPath=RNFetchBlob.fs.dirs.CacheDir+'/' + new Date().getTime()+'.jpg';
              //处理图片
              ImageConverterModule.convertWebPToJPG(path, outputPath,(res:any)=>{
                console.log('转换成功',res);
                if(res===null){
                    callback('file://'+outputPath)
                }
              })
            })
            return;
    }
}