React-Native开发鸿蒙NEXT-蓝牙与图片处理的更正补充

悬空八只脚
286 阅读4分钟

React-Native开发鸿蒙NEXT-蓝牙与图片处理的更正补充

最近应用被鸿蒙测试团队提了几个问题，主要集中在图片上传上面。这几天在修改，过程中对于之前提到的蓝牙和图片上传两块有了点新的认识，记录以供参考。

之前在

React-Native开发鸿蒙NEXT-蓝牙信标读取

悬空八只脚，公众号：悬空八只脚React-Native开发鸿蒙NEXT-蓝牙信标读取

中有提到

图片

这次在修复问题后验证过程中，发现是硬件问题---手上的蓝牙信标电量不行了，换了个新的纽扣电池信号强了就搜得到了。误会，都是误会。。。。。。

蓝牙只是一个小插曲，图片上传的问题，在于上传的图片比例失真。调试后发现是RHON三方组件react-native-image-picker的问题。在

React-Native开发鸿蒙NEXT-图片上传

悬空八只脚，公众号：悬空八只脚React-Native开发鸿蒙NEXT-图片上传

中，提到

图片

这里为了限制图片体积限制了最大宽高，但react-native-image-picker组件在遇到超过maxHeight/maxWeight尺寸的图片时是直接采用fill模式来裁剪的，没有等比缩放。这最终导致了输出图片的失真。

和后台同学沟通了下放开了后台附加上传的大小限制(之前被限制在了1MB)，结合上传的等待时间，最终考虑在APP端将上传尺寸限制在2MB。为此在RN端引入了RHON三方组件react-native-image-resizer用于处理图片体积压缩。

目前主要的处理逻辑如下

  • 在通过react-native-image-picker选择图片时放开了对图片尺寸的限制
  • 选择的图片如果size大于2MB，则交由react-native-image-resizer做压缩处理
  • react-native-image-resizer在压缩过程中限制最大宽高尺寸1500
  • react-native-image-resizer对图片循环压缩，质量由90开始逐次递减10，如果达到50仍然无法达到小于2MB的目标体积，则停止压缩直接反馈业务报错，保证处理时间与最终效果。
  • 每次压缩均针对由react-native-image-picker输出的原图。
  • 将压缩后的图片或无需压缩的原图进行上传。
  const resizeImage = async (photoInfo: any) => {
    try {
      let quality = 90;
      let uploadUri = '';
      if (photoInfo.fileSize <= global.config.maxUploadSize * 1000) {
        console.log('图片尺寸未超出限制，直接上传');
        uploadUri = photoInfo.uri;
      } else {
        while (quality >= 50) {
          console.log('quality = ' + quality);
          let result = await ImageResizer.createResizedImage(
            photoInfo.uri,
            1500,
            1500,
            'jpeg',
            quality,
            0,
            undefined,
            false,
            'contain',
            true,
          );
          // console.log('图片数据是result = ' + JSON.stringify(result.size));
          if (!result) {
            console.log('压缩失败');
            xnToast('图片压缩失败，无法上传');
            break;
          }
          if (result.size / 1000 <= global.config.maxUploadSize) {
            console.log('可以上传');
            uploadUri = result.uri;
            break;
          } else {
            if (quality > 50) {
              quality -= 10;
              console.log('重新设定压缩参数');
            } else {
              console.log('过大无法压缩');
              xnToast('图片过大，无法上传');
              break;
            }
          }
        }
      }
      if (uploadUri && uploadUri.length > 0) {
       // 这里是上传图片的逻辑
      }
    } catch (error) {
      setLoading(false);
      xnToast('图片上传失败');
      console.log('Unable to resize the photo ' + JSON.stringify(error.message));
    }
  };

最近新版本突然被审核的自动化测试折磨得死去活来。上个版本没问题这个版本突然有崩溃，看日志又无法定位复现不了。本来都没关注云测试，现在出问题了去跑，就看见到登录页面然后闪退了。。。。。。毫无头绪。现在只能拿上个版本的app文件去跑测试，如果上个版本真实毫无问题，最差结果可能得暂时在上个版本的代码上去修复问题了，老卡在这块上不是个事。等和技术支持拉扯完再来讲讲到底怎么一回事吧。

图片

附录：@react-native-oh-tpl/react-native-image-resizer压缩效率的测试。

其中压缩前图片是由@react-native-oh-tpl/react-native-qr-decode-image-camera导出的一张mate60pro测试机利用后置摄像头拍摄照片

格式尺寸/设置的最大目标尺寸压缩质量大小
压缩前jpg3073x4096--4745595
压缩后jpg1500x1500801130380
压缩后jpg1500x150070875938
压缩后png1500x1500803101374
压缩后webp1500x150080629054

更多内容可关注
我的公众号悬空八只脚

avatar
文章
阅读
粉丝