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

本文链接：https://blog.csdn.net/yanhuomatou2015/article/details/118564849

本文探讨了一种需求，即在App中处理Base64编码的大图片，通过前端裁剪技术将其重组。作者在实现过程中遇到iOS与Android平台裁剪差异，最终通过RN调用原生代码解决。关键步骤包括判断设备类型并选择相应编辑器，以及处理不同平台回调和规则排序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.需求分析

现在很多APP都有这样一个需求：
在这里插入图片描述

在一个大图片里拖动小滑块，使小滑块能填充吻合到大图上去。为了减少一个图片的HTTP请求，往往会把图片编码成base64的格式,（将一张图片数据编码成一串字符串，使用该字符串代替图片地址)。于是请求服务器时返回来的是一张打乱了的base64格式的图片，需要前端自己重组图片。我想到的重组思路是裁剪 (当然还有其他方法):
1.1 先将大图片(200100)剪裁成20等分的小图片（2050）；
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，至今没解决！测试结果如下图：
在这里插入图片描述