网络请求减少拼接操作，修复网络加载速度慢

Signed-off-by: zgf <zenggaofeng2@h-partners.com>

CHANGELOG.md

@@ -3,6 +3,7 @@
 - 支持hsp多包图片资源
 - 新增putCache写入缓存接口
 - 修复入参为pixelMap图片不显示问题
+- 网络请求减少拼接操作，修复网络加载速度慢
 
 ## 3.0.0-rc.3
 - 将请求默认并行从64调整到8，减少对taskpool execute内存消耗

entry/src/main/ets/pages/LongImagePage.ets

@@ -28,8 +28,8 @@ struct LongImagePage {
         imageKnifeOption: {
           loadSrc:"https://wx2.sinaimg.cn/mw690/006HyQKGgy1hnqp08dw09j30u04twu0x.jpg",
           //src:$r("app.media.aaa"),
-          // placeholderSrc: $r("app.media.loading"),
+          placeholderSrc: $r("app.media.loading"),
-          // errorholderSrc: $r("app.media.app_icon"),
+          errorholderSrc: $r("app.media.failed"),
           objectFit: ImageFit.Auto
         }
       })

entry/src/main/ets/pages/ManyPhotoShowPage.ets

@@ -41,7 +41,7 @@ struct ManyPhotoShowPage {
                   //src:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
                   //  src: this.localFile,
                   placeholderSrc:$r("app.media.loading"),
-                  errorholderSrc:$r("app.media.app_icon"),
+                  errorholderSrc:$r("app.media.failed"),
                   objectFit: ImageFit.Auto,
                   border: {radius:50}
                 }})

entry/src/main/ets/pages/SingleImage.ets

@@ -45,7 +45,7 @@ struct SingleImage {
           imageKnifeOption: {
             loadSrc: $r("app.media.app_icon"),
             placeholderSrc: $r("app.media.loading"),
-            errorholderSrc: $r("app.media.app_icon"),
+            errorholderSrc: $r("app.media.failed"),
             objectFit: ImageFit.Contain
           }
         }).width(100).height(100)
@@ -56,7 +56,7 @@ struct SingleImage {
           imageKnifeOption: {
             loadSrc: this.localFile,
             placeholderSrc: $r("app.media.loading"),
-            errorholderSrc: $r("app.media.app_icon"),
+            errorholderSrc: $r("app.media.failed"),
             objectFit: ImageFit.Contain
           }
         }).width(100).height(100)
@@ -67,7 +67,7 @@ struct SingleImage {
           imageKnifeOption: {
             loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
             placeholderSrc: $r("app.media.loading"),
-            errorholderSrc: $r("app.media.app_icon"),
+            errorholderSrc: $r("app.media.failed"),
             objectFit: ImageFit.Contain,
             progressListener:(progress:number)=>{console.info("ImageKnife:: call back progress = " + progress)}
           }
@@ -79,7 +79,7 @@ struct SingleImage {
           imageKnifeOption: {
             loadSrc: "https://file.atomgit.com/uploads/user/1704857786989_8994.jpeg",
             placeholderSrc: $r("app.media.loading"),
-            errorholderSrc: $r("app.media.app_icon"),
+            errorholderSrc: $r("app.media.failed"),
             objectFit: ImageFit.Contain,
             customGetImage: custom,
             transformation: new BlurTransformation(10)
@@ -92,7 +92,7 @@ struct SingleImage {
           imageKnifeOption: {
             loadSrc: this.pixelMap!,
             placeholderSrc: $r("app.media.loading"),
-            errorholderSrc: $r("app.media.app_icon"),
+            errorholderSrc: $r("app.media.failed"),
             objectFit: ImageFit.Contain,
           }
         }).width(100).height(100)

entry/src/main/ets/pages/TestIsUrlExist.ets

@@ -19,7 +19,8 @@ import { ImageKnifeComponent, ImageKnife, ImageKnifeOption, CacheStrategy } from
 struct TestIsUrlExist {
   @State imageKnifeOption: ImageKnifeOption = {
     loadSrc: $r('app.media.startIcon'),
-    placeholderSrc: $r('app.media.loading')
+    placeholderSrc: $r('app.media.loading'),
+    errorholderSrc:$r('app.media.failed')
   }
   @State source: PixelMap | string | Resource = $r("app.media.startIcon")
   @State source1: PixelMap | string | Resource = $r("app.media.startIcon")

entry/src/main/ets/pages/TestPrefetchToFileCache.ets

@@ -19,7 +19,8 @@ import { ImageKnifeComponent,ImageKnife,ImageKnifeOption } from '@ohos/imageknif
 struct TestPrefetchToFileCachePage {
   @State imageKnifeOption: ImageKnifeOption = {
     loadSrc:$r('app.media.startIcon'),
-    placeholderSrc:$r('app.media.loading')
+    placeholderSrc:$r('app.media.loading'),
+    errorholderSrc:$r('app.media.failed')
   }
   async preload(url:string) {
     let fileCachePath = await ImageKnife.getInstance().preLoadCache(url)

entry/src/main/ets/pages/User.ets

@@ -52,7 +52,8 @@ export struct UserAvatar {
     this.ImageKnifeOption = {
       //TODO:写死loadSRC，场景：变更组件大小，所有图片不显示
       loadSrc: this.userInfo,
-      placeholderSrc: $r('app.media.icon'),
+      placeholderSrc: $r('app.media.loading'),
+      errorholderSrc: $r('app.media.failed'),
       border: { radius:20,width:5,color:$r('app.color.start_window_background') },
       objectFit:ImageFit.Contain
       // signature: new ObjectKey(this.userInfo.infoUpdateTime.getTime().toString())

library/oh-package.json5

@@ -14,7 +14,7 @@
   "main": "index.ets",
   "repository": "https://gitee.com/openharmony-tpc/ImageKnife",
   "type": "module",
-  "version": "3.0.0-rc.3",
+  "version": "3.0.0-rc.4",
   "dependencies": {
 
   },

library/src/main/ets/ImageKnifeDispatcher.ets

@@ -38,6 +38,7 @@ import {
   RequestJobResult,
   RequestJobRequest
 } from './model/ImageKnifeData'
+import { combineArrayBuffers } from './model/utils';
 
 export class ImageKnifeDispatcher {
   // 最大并发
@@ -280,6 +281,7 @@ async function requestJob(request: RequestJobRequest): Promise<RequestJobResult
         if (resBuf === undefined && request.onlyRetrieveFromCache != true) {
           let httpRequest = http.createHttp();
           let progress: number = 0
+          let arrayBuffers = new Array<ArrayBuffer>()
           const headerObj: Record<string, object> = {}
           if (request.headers != undefined) {
             request.headers.forEach((value) => {
@@ -299,11 +301,7 @@ async function requestJob(request: RequestJobRequest): Promise<RequestJobResult
           });
 
           httpRequest.on("dataReceive", (data: ArrayBuffer) => {
-            if (resBuf == undefined) {
+            arrayBuffers.push(data)
-              resBuf = data
-            } else {
-              resBuf = buffer.concat([buffer.from(resBuf), buffer.from(data)]).buffer;
-            }
           });
 
           httpRequest.on('dataReceiveProgress', (data: RequestData) => {
@@ -318,6 +316,9 @@ async function requestJob(request: RequestJobRequest): Promise<RequestJobResult
           })
 
           await promise.then((data: number) => {
+            if (data == 200) {
+              resBuf = combineArrayBuffers(arrayBuffers)
+            }
           }).catch((err: Error) => {
             LogUtil.error("requestInStream ERROR : err = " + JSON.stringify(err));
           });

library/src/main/ets/model/utils.ets

@@ -0,0 +1,38 @@
+/*
+ * Copyright (C) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export function combineArrayBuffers(arrayBuffers: ArrayBuffer[]): ArrayBuffer {
+  // 计算多个ArrayBuffer的总字节大小
+  let totalByteLength = 0;
+  for (const arrayBuffer of arrayBuffers) {
+    totalByteLength += arrayBuffer.byteLength;
+  }
+
+  // 创建一个新的ArrayBuffer
+  const combinedArrayBuffer = new ArrayBuffer(totalByteLength);
+
+  // 创建一个Uint8Array来操作新的ArrayBuffer
+  const combinedUint8Array = new Uint8Array(combinedArrayBuffer);
+
+  // 依次复制每个ArrayBuffer的内容到新的ArrayBuffer中
+  let offset = 0;
+  for (const arrayBuffer of arrayBuffers) {
+    const sourceUint8Array = new Uint8Array(arrayBuffer);
+    combinedUint8Array.set(sourceUint8Array, offset);
+    offset += sourceUint8Array.length;
+  }
+
+  return combinedArrayBuffer;
+}