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

.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rgba(37, 41, 51, 1) }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { line-height: 1.5; margin-top: 35px; margin-bottom: 10px; padding-bottom: 5px }
.markdown-body h1 { font-size: 24px; line-height: 38px; margin-bottom: 5px }
.markdown-body h2 { font-size: 22px; line-height: 34px; padding-bottom: 12px; border-bottom: 1px solid rgba(236, 236, 236, 1) }
.markdown-body h3 { font-size: 20px; line-height: 28px }
.markdown-body h4 { font-size: 18px; line-height: 26px }
.markdown-body h5 { font-size: 17px; line-height: 24px }
.markdown-body h6 { font-size: 16px; line-height: 24px }
.markdown-body p { line-height: inherit; margin-top: 22px; margin-bottom: 22px }
.markdown-body img { max-width: 100% }
.markdown-body hr { border-top: 1px solid rgba(221, 221, 221, 1); border-right: none; border-bottom: none; border-left: none; margin-top: 32px; margin-bottom: 32px }
.markdown-body code { border-radius: 2px; overflow-x: auto; background-color: rgba(255, 245, 245, 1); color: rgba(255, 80, 44, 1); font-size: 0.87em; padding: 0.065em 0.4em }
.markdown-body code, .markdown-body pre { font-family: Menlo, Monaco, Consolas, Courier New, monospace }
.markdown-body pre { overflow: auto; position: relative; line-height: 1.75 }
.markdown-body pre>code { font-size: 12px; padding: 15px 12px; margin: 0; word-break: normal; display: block; overflow-x: auto; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1) }
.markdown-body a { text-decoration: none; color: rgba(2, 105, 200, 1); border-bottom: 1px solid rgba(209, 233, 255, 1) }
.markdown-body a:active, .markdown-body a:hover { color: rgba(39, 91, 140, 1) }
.markdown-body table { display: inline-block !important; font-size: 12px; width: auto; max-width: 100%; overflow: auto; border: 1px solid rgba(246, 246, 246, 1) }
.markdown-body thead { background: rgba(246, 246, 246, 1); color: rgba(0, 0, 0, 1); text-align: left }
.markdown-body tr:nth-child(2n) { background-color: rgba(252, 252, 252, 1) }
.markdown-body td, .markdown-body th { padding: 12px 7px; line-height: 24px }
.markdown-body td { min-width: 120px }
.markdown-body blockquote { color: rgba(102, 102, 102, 1); padding: 1px 23px; margin: 22px 0; border-left: 4px solid rgba(203, 203, 203, 1); background-color: rgba(248, 248, 248, 1) }
.markdown-body blockquote:after { display: block; content: "" }
.markdown-body blockquote>p { margin: 10px 0 }
.markdown-body ol, .markdown-body ul { padding-left: 28px }
.markdown-body ol li, .markdown-body ul li { margin-bottom: 0; list-style: inherit }
.markdown-body ol li .task-list-item, .markdown-body ul li .task-list-item { list-style: none }
.markdown-body ol li .task-list-item ol, .markdown-body ol li .task-list-item ul, .markdown-body ul li .task-list-item ol, .markdown-body ul li .task-list-item ul { margin-top: 0 }
.markdown-body ol ol, .markdown-body ol ul, .markdown-body ul ol, .markdown-body ul ul { margin-top: 3px }
.markdown-body ol li { padding-left: 6px }
.markdown-body .contains-task-list { padding-left: 0 }
.markdown-body .task-list-item { list-style: none }
@media (max-width: 720px) { .markdown-body h1 { font-size: 24px } .markdown-body h2 { font-size: 20px } .markdown-body h3 { font-size: 18px } }.markdown-body pre, .markdown-body pre>code.hljs { color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1) }
.hljs-comment, .hljs-quote { color: rgba(153, 153, 136, 1); font-style: italic }
.hljs-keyword, .hljs-selector-tag, .hljs-subst { color: rgba(51, 51, 51, 1); font-weight: 700 }
.hljs-literal, .hljs-number, .hljs-tag .hljs-attr, .hljs-template-variable, .hljs-variable { color: rgba(0, 128, 128, 1) }
.hljs-doctag, .hljs-string { color: rgba(221, 17, 68, 1) }
.hljs-section, .hljs-selector-id, .hljs-title { color: rgba(153, 0, 0, 1); font-weight: 700 }
.hljs-subst { font-weight: 400 }
.hljs-class .hljs-title, .hljs-type { color: rgba(68, 85, 136, 1); font-weight: 700 }
.hljs-attribute, .hljs-name, .hljs-tag { color: rgba(0, 0, 128, 1); font-weight: 400 }
.hljs-link, .hljs-regexp { color: rgba(0, 153, 38, 1) }
.hljs-bullet, .hljs-symbol { color: rgba(153, 0, 115, 1) }
.hljs-built_in, .hljs-builtin-name { color: rgba(0, 134, 179, 1) }
.hljs-meta { color: rgba(153, 153, 153, 1); font-weight: 700 }
.hljs-deletion { background: rgba(255, 221, 221, 1) }
.hljs-addition { background: rgba(221, 255, 221, 1) }
.hljs-emphasis { font-style: italic }
.hljs-strong { font-weight: 700 }

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测试机利用后置摄像头拍摄照片

	格式	尺寸/设置的最大目标尺寸	压缩质量	大小
压缩前	jpg	3073x4096	--	4745595
压缩后	jpg	1500x1500	80	1130380
压缩后	jpg	1500x1500	70	875938
压缩后	png	1500x1500	80	3101374
压缩后	webp	1500x1500	80	629054

---

更多内容可关注

我的公众号悬空八只脚