RN项目笔记(二)ImageEditor裁剪base64图片填坑

一.需求分析

现在很多APP都有这样一个需求：

在一个大图片里拖动小滑块，使小滑块能填充吻合到大图上去。为了减少一个图片的HTTP请求，往往会把图片编码成base64的格式,（将一张图片数据编码成一串字符串，使用该字符串代替图片地址)。于是请求服务器时返回来的是一张打乱了的base64格式的图片，需要前端自己重组图片。我想到的重组思路是裁剪 (当然还有其他方法):

1.1 先将大图片(200*100)剪裁成20等分的小图片（20*50）；

1.2 根据后台提供的规则进行重组。

二.遇到问题

在做项目过程中，遇到了一个问题——不管我是使用官网提供的ImageEditor，还是开源社区的@react-native-community/image-editor提供的图片编辑器在ios手机上都能成功裁剪，但在android手机上裁剪都是不成功的。大致看了一下@react-native-community/image-editor源码，发现它是在官网的ImageEditor基础上做了一些优化的，比如它使用了await关键字做了一个异步等待回调结果，提高了程序的流畅性。经过多次测试我又发现，两者都能在ios，android上成功裁剪http、https格式的图片。但是不能满足需求，服务器返回的是base64格式的图片，虽然ios能裁剪成功，但android上裁剪不成功。这应该是官方的ImageEditor存在的一个bug，至今没解决！测试结果如下图：

三.解决问题（填坑）

解决方案：用RN去调用android代码。

3.1 判断一下，如果是运行在ios上就使用@react-native-community/image-editor，如果是运行在android上就去调android原生代码.

3.2  是android手机，去调android原生代码

3.3  android 原生代码

3.4 RN 接收android回调结果（20张小图），根据服务器提供的规则排序小图片

注：到此android部分已搞定

3.5 是ios手机，直接使用@react-native-community/image-editor提供的ImageEditor

注：到此ios部分已搞定

再加上一些手势的监听事件，拖动滑块验证的代码，请看下一篇文章.........此处已省略。

今天的分享结束了，再见~