子线程网络请求和自定义网络改为异步请求、复用场景清空组件内容

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

CHANGELOG.md

@@ -2,7 +2,7 @@
 - Rollback the old version V1 decorator. V2 decorator will be provided in version 4.x
 - The sub-thread network request is changed to asynchronous, thereby increasing the number of concurrent sub-thread network requests
 - Set the concurrency through the setMaxRequests interface under the ImageKnife class
-- Custom network changed to asynchronous request
+- aboutToRecycle life cycle clear image content
 
 ## 3.0.3
 - Released version 3.0.3

README.md

@@ -56,12 +56,12 @@ await ImageKnife.getInstance().initFileCache(context, 256, 256 * 1024 * 1024)
 
 ```
 ImageKnifeComponent({
-  ImageKnifeOption: new ImageKnifeOption({
+  ImageKnifeOption:{
     loadSrc: $r("app.media.app_icon"),
     placeholderSrc: $r("app.media.loading"),
     errorholderSrc: $r("app.media.app_icon"),
     objectFit: ImageFit.Auto
-  })
+  }
 }).width(100).height(100)
 ```
 
@@ -69,12 +69,12 @@ ImageKnifeComponent({
 
 ```
 ImageKnifeComponent({
-  ImageKnifeOption: new ImageKnifeOption({
+  ImageKnifeOption: {
     loadSrc: this.localFile,
     placeholderSrc: $r("app.media.loading"),
     errorholderSrc: $r("app.media.app_icon"),
     objectFit: ImageFit.Auto
-  })
+  }
 }).width(100).height(100)
 ```
 
@@ -82,12 +82,12 @@ ImageKnifeComponent({
 
 ```
 ImageKnifeComponent({
-  ImageKnifeOption: new ImageKnifeOption({
+  ImageKnifeOption: {
     loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
     placeholderSrc: $r("app.media.loading"),
     errorholderSrc: $r("app.media.app_icon"),
     objectFit: ImageFit.Auto
-  })
+  }
 }).width(100).height(100)
 ```
 
@@ -95,13 +95,13 @@ ImageKnifeComponent({
 
 ```
 ImageKnifeComponent({
-  ImageKnifeOption: new ImageKnifeOption({
+  ImageKnifeOption: {
     loadSrc: "https://file.atomgit.com/uploads/user/1704857786989_8994.jpeg",
     placeholderSrc: $r("app.media.loading"),
     errorholderSrc: $r("app.media.app_icon"),
     objectFit: ImageFit.Auto,
     customGetImage: custom
- })
+ }
 }).width(100).height(100)
 
 // Custom implementation of the image acquisition method, such as custom network download。
@@ -117,33 +117,33 @@ async function custom(context: Context, src: string | PixelMap | Resource): Prom
 
 ```
 ImageKnifeComponent({
-  ImageKnifeOption: new ImageKnifeOption({
+  ImageKnifeOption: {
     loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
     progressListener:(progress:number)=>{console.info("ImageKinfe:: call back progress = " + progress)}
-  })
+  }
 }).width(100).height(100)
 ```
 
 #### 6. Setting Border Options
 
 ```
-ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
+ImageKnifeComponent({ ImageKnifeOption: 
 {
    loadSrc: $r("app.media.rabbit"),
    border: {radius:50}
-  })
+  }
 }).width(100).height(100)
 ```
 
 #### 7. Setting Image Transformation Options
 
 ```
-ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
+ImageKnifeComponent({ ImageKnifeOption: 
 {
    loadSrc: $r("app.media.rabbit"),
    border: {radius:50},
    transformation: new BlurTransformation(3)
-  })
+  }
 }).width(100).height(100)
 ```
 Multiple combined transformation usages:
@@ -153,14 +153,14 @@ let transformations: collections.Array<PixelMapTransformation> = new collections
 transformations.push(new BlurTransformation(5));
 transformations.push(new BrightnessTransformation(0.2));
 ImageKnifeComponent({
-  imageKnifeOption: new ImageKnifeOption({
+  imageKnifeOption: {
   loadSrc: $r('app.media.pngSample'),
   placeholderSrc: $r("app.media.loading"),
   errorholderSrc: $r("app.media.app_icon"),
   objectFit: ImageFit.Contain,
   border: { radius: { topLeft: 50, bottomRight: 50 } }, // Rounded corner settings
   transformation: transformations.length > 0 ? new MultiTransTransformation(transformations) : undefined // Graphic transformation group
-})
+}
 }).width(300)
   .height(300)
   .rotate ({angle: 90}) // Rotate by 90 degrees.
@@ -171,12 +171,12 @@ Other transformation-related properties can be stacked to achieve combined trans
 Example of circular cropping transformation:
 
 ```
-ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption(
+ImageKnifeComponent({ ImageKnifeOption:
   {
   loadSrc: $r('app.media.pngSample'),
   objectFit: ImageFit.Cover,
   border: { radius: 150 }
-})
+}
 }).width(300)
   .height(300)
 ```
@@ -184,12 +184,12 @@ ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption(
 Example of Circular cropping with border transformation:
 
 ```
-ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption(
+ImageKnifeComponent({ ImageKnifeOption:
   {
   loadSrc: $r('app.media.pngSample'),
   objectFit: ImageFit.Cover,
   border: { radius: 150, color: Color.Red, width: 5 }
-})
+}
 }).width(300)
   .height(300)
 ```
@@ -198,9 +198,9 @@ Example of contrast filtering transformation:
 
 ```
 ImageKnifeComponent({
-  imageKnifeOption: new ImageKnifeOption({
+  imageKnifeOption: {
     loadSrc: $r('app.media.pngSample')
-  })
+  }
 }).width(300)
   .height(300)
   .contrast(12)
@@ -210,9 +210,9 @@ Example of rotation transformation:
 
 ```
 ImageKnifeComponent({
-  imageKnifeOption: new ImageKnifeOption({
+  imageKnifeOption:({
     loadSrc: $r('app.media.pngSample')
-  })
+  }
 }).width(300)
   .height(300)
   .rotate({angle:90})
@@ -222,7 +222,7 @@ ImageKnifeComponent({
 #### 8. Listening for Image Loading Success and Failure
 
 ```
-ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
+ImageKnifeComponent({ ImageKnifeOption:
 {
    loadSrc: $r("app.media.rabbit"),
    onLoadListener:{
@@ -241,27 +241,27 @@ ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
       console.info(err)
     }
    }
-  })
+  }
 }).width(100).height(100)
 ```
 #### 9. Use of syncLoad
 **syncLoad** sets whether to load the image synchronously. By default, the image is loaded asynchronously. When loading a small image, you are advised to set **syncLoad** to **true** so that the image loading can be quickly completed on the main thread.
 ```
 ImageKnifeComponent({
-        imageKnifeOption:new ImageKnifeOption({
+        imageKnifeOption:{
           loadSrc:$r("app.media.pngSample"),
           placeholderSrc:$r("app.media.loading")
-        }),syncLoad:true
+        },syncLoad:true
       })
 ```
 #### 10. Use of ImageKnifeAnimatorComponent
 ```
 ImageKnifeAnimatorComponent({
-        imageKnifeOption:new ImageKnifeOption({
+        imageKnifeOption:{
           loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
           placeholderSrc:$r('app.media.loading'),
           errorholderSrc:$r('app.media.failed')
-        }),animatorOption:this.animatorOption
+        },animatorOption:this.animatorOption
       }).width(300).height(300).backgroundColor(Color.Orange).margin({top:30})
 ```
 #### Reuse Scenario
@@ -359,7 +359,7 @@ Method 2: Set the third-party HAR as a dependency in the **oh-package.json5** fi
 
 This project has been verified in the following version:
 
-DevEco Studio: 5.0 Canary3 (5.0.3.502), SDK: API 12 (5.0.0.31)
+DevEco Studio: NEXT Beta1-5.0.3.806, SDK: API12 Release(5.0.0.66)
 
 ## How to Contribute
 

README_zh.md

@@ -56,12 +56,12 @@ await ImageKnife.getInstance().initFileCache(context, 256, 256 * 1024 * 1024)
 
 ```
 ImageKnifeComponent({
-  ImageKnifeOption: new ImageKnifeOption({
+  ImageKnifeOption: {
     loadSrc: $r("app.media.app_icon"),
     placeholderSrc: $r("app.media.loading"),
     errorholderSrc: $r("app.media.app_icon"),
     objectFit: ImageFit.Auto
-  })
+  }
 }).width(100).height(100)
 ```
 
@@ -69,12 +69,12 @@ ImageKnifeComponent({
 
 ```
 ImageKnifeComponent({
-  ImageKnifeOption: new ImageKnifeOption({
+  ImageKnifeOption: {
     loadSrc: this.localFile,
     placeholderSrc: $r("app.media.loading"),
     errorholderSrc: $r("app.media.app_icon"),
     objectFit: ImageFit.Auto
-  })
+  }
 }).width(100).height(100)
 ```
 
@@ -82,12 +82,12 @@ ImageKnifeComponent({
 
 ```
 ImageKnifeComponent({
-  ImageKnifeOption: new ImageKnifeOption({
+  ImageKnifeOption: {
     loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
     placeholderSrc: $r("app.media.loading"),
     errorholderSrc: $r("app.media.app_icon"),
     objectFit: ImageFit.Auto
-  })
+  }
 }).width(100).height(100)
 ```
 
@@ -95,13 +95,13 @@ ImageKnifeComponent({
 
 ```
 ImageKnifeComponent({
-  ImageKnifeOption: new ImageKnifeOption({
+  ImageKnifeOption: {
     loadSrc: "https://file.atomgit.com/uploads/user/1704857786989_8994.jpeg",
     placeholderSrc: $r("app.media.loading"),
     errorholderSrc: $r("app.media.app_icon"),
     objectFit: ImageFit.Auto,
     customGetImage: custom
- })
+ }
 }).width(100).height(100)
 
 // 自定义实现图片获取方法，如自定义网络下载
@@ -117,33 +117,33 @@ async function custom(context: Context, src: string | PixelMap | Resource): Prom
 
 ```
 ImageKnifeComponent({
-  ImageKnifeOption: new ImageKnifeOption({
+  ImageKnifeOption: {
     loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
     progressListener:(progress:number)=>{console.info("ImageKinfe:: call back progress = " + progress)}
-  })
+  }
 }).width(100).height(100)
 ```
 
 #### 6.支持option传入border，设置边框，圆角
 
 ```
-ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
+ImageKnifeComponent({ ImageKnifeOption: 
 {
    loadSrc: $r("app.media.rabbit"),
    border: {radius:50}
-  })
+  }
 }).width(100).height(100)
 ```
 
 #### 7.支持option图片变换
 
 ```
-ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
+ImageKnifeComponent({ ImageKnifeOption: 
 {
    loadSrc: $r("app.media.rabbit"),
    border: {radius:50},
    transformation: new BlurTransformation(3)
-  })
+  }
 }).width(100).height(100)
 ```
 多种组合变换用法
@@ -153,14 +153,14 @@ let transformations: collections.Array<PixelMapTransformation> = new collections
 transformations.push(new BlurTransformation(5));
 transformations.push(new BrightnessTransformation(0.2));
 ImageKnifeComponent({
-  imageKnifeOption: new ImageKnifeOption({
+  imageKnifeOption: {
   loadSrc: $r('app.media.pngSample'),
   placeholderSrc: $r("app.media.loading"),
   errorholderSrc: $r("app.media.app_icon"),
   objectFit: ImageFit.Contain,
   border: { radius: { topLeft: 50, bottomRight: 50 } }, // 圆角设置
   transformation: transformations.length > 0 ? new MultiTransTransformation(transformations) : undefined // 图形变换组
-})
+}
 }).width(300)
   .height(300)
   .rotate({ angle: 90 }) // 旋转90度
@@ -171,12 +171,12 @@ ImageKnifeComponent({
 圆形裁剪变换示例
 
 ```
-ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption(
+ImageKnifeComponent({ ImageKnifeOption: 
   {
   loadSrc: $r('app.media.pngSample'),
   objectFit: ImageFit.Cover,
   border: { radius: 150 }
-})
+}
 }).width(300)
   .height(300)
 ```
@@ -184,12 +184,12 @@ ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption(
 圆形裁剪带边框变换示例
 
 ```
-ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption(
+ImageKnifeComponent({ ImageKnifeOption: 
   {
   loadSrc: $r('app.media.pngSample'),
   objectFit: ImageFit.Cover,
   border: { radius: 150, color: Color.Red, width: 5 }
-})
+}
 }).width(300)
   .height(300)
 ```
@@ -198,9 +198,9 @@ ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption(
 
 ```
 ImageKnifeComponent({
-  imageKnifeOption: new ImageKnifeOption({
+  imageKnifeOption: {
     loadSrc: $r('app.media.pngSample')
-  })
+  }
 }).width(300)
   .height(300)
   .contrast(12)
@@ -210,9 +210,9 @@ ImageKnifeComponent({
 
 ```
 ImageKnifeComponent({
-  imageKnifeOption: new ImageKnifeOption({
+  imageKnifeOption:  {
     loadSrc: $r('app.media.pngSample')
-  })
+  }
 }).width(300)
   .height(300)
   .rotate({angle:90})
@@ -222,7 +222,7 @@ ImageKnifeComponent({
 #### 8.监听图片加载成功与失败
 
 ```
-ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
+ImageKnifeComponent({ ImageKnifeOption: 
 {
    loadSrc: $r("app.media.rabbit"),
    onLoadListener:{
@@ -241,27 +241,27 @@ ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
       console.info(err)
     }
    }
-  })
+ }
 }).width(100).height(100)
 ```
 #### 9.ImageKnifeComponent - syncLoad
 设置是否同步加载图片，默认是异步加载。建议加载尺寸较小的Resource图片时将syncLoad设为true，因为耗时较短，在主线程上执行即可
 ```
 ImageKnifeComponent({
-        imageKnifeOption:new ImageKnifeOption({
+        imageKnifeOption:{
           loadSrc:$r("app.media.pngSample"),
           placeholderSrc:$r("app.media.loading")
-        }),syncLoad:true
+        },syncLoad:true
       })
 ```
 #### 10.ImageKnifeAnimatorComponent 示例
 ```
 ImageKnifeAnimatorComponent({
-        imageKnifeOption:new ImageKnifeOption({
+        imageKnifeOption: {
           loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
           placeholderSrc:$r('app.media.loading'),
           errorholderSrc:$r('app.media.failed')
-        }),animatorOption:this.animatorOption
+        },animatorOption:this.animatorOption
       }).width(300).height(300).backgroundColor(Color.Orange).margin({top:30})
 ```
 #### 复用场景
@@ -361,7 +361,7 @@ ImageKnifeAnimatorComponent({
 ## 约束与限制
 
 在下述版本验证通过：  
-DevEco Studio 5.0 Canary3（5.0.3.502）--SDK:API12 (5.0.0.31)
+DevEco Studio: NEXT Beta1-5.0.3.806, SDK: API12 Release(5.0.0.66)
 
 ## 贡献代码
 

entry/src/main/ets/pages/Index.ets

@@ -45,6 +45,11 @@ struct Index {
             uri: 'pages/PrefetchAndCacheCount',
           });
         })
+        Button($r('app.string.request_concurrency')).margin({top:10}).onClick(()=>{
+          router.push({
+            uri: 'pages/SetMaxRequestPage',
+          });
+        })
         Button($r('app.string.Test_multiple_images')).margin({top:10}).onClick(()=>{
           router.push({
             uri: 'pages/TestCommonImage',

entry/src/main/ets/pages/MaxRequest1.ets

@@ -0,0 +1,55 @@
+/*
+ * 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.
+ */
+import { ImageKnifeComponent,ImageKnife } from '@ohos/libraryimageknife';
+import { CommonDataSource } from './model/CommonDataSource';
+
+@Entry
+@Component
+struct MaxRequest1 {
+  @State hotCommendList:CommonDataSource<string> = new CommonDataSource<string>([])
+  private data: Array<string> = []
+  aboutToAppear(): void {
+    ImageKnife.getInstance().setMaxRequests(8)
+    for (let index = 0; index < 200; index++) {
+      this.data.push(`https://img-blog.csdn.net/20140514114029140?${index}`)
+    }
+    this.hotCommendList.addData(this.hotCommendList.totalCount(),this.data)
+  }
+  build() {
+    Column() {
+      WaterFlow() {
+        LazyForEach(this.hotCommendList,(item: string)=>{
+          FlowItem() {
+            Column(){
+              ImageKnifeComponent({
+                imageKnifeOption: {
+                  loadSrc: item,
+                  placeholderSrc: $r("app.media.loading"),
+                  errorholderSrc: $r("app.media.failed"),
+                }
+              }).width("50%").height(160)
+            }
+          }.height(200)
+          .backgroundColor("#95efd2")
+        },(item: string) => item)
+      }.columnsTemplate("1fr 1fr")
+      .cachedCount(8)
+      .columnsGap(10)
+      .rowsGap(5)
+      .backgroundColor(0xFAEEE0)
+      .width("100%").height("100%")
+    }
+  }
+}

entry/src/main/ets/pages/MaxRequest2.ets

@@ -0,0 +1,55 @@
+/*
+ * 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.
+ */
+import { ImageKnifeComponent,ImageKnife } from '@ohos/libraryimageknife';
+import { CommonDataSource } from './model/CommonDataSource';
+
+@Entry
+@Component
+struct MaxRequest2 {
+  @State hotCommendList:CommonDataSource<string> = new CommonDataSource<string>([])
+  private data: Array<string> = []
+  aboutToAppear(): void {
+    ImageKnife.getInstance().setMaxRequests(20)
+    for (let index = 200; index < 400; index++) {
+      this.data.push(`https://img-blog.csdn.net/20140514114029140?${index}`)
+    }
+    this.hotCommendList.addData(this.hotCommendList.totalCount(),this.data)
+  }
+  build() {
+    Column() {
+      WaterFlow() {
+        LazyForEach(this.hotCommendList,(item: string)=>{
+          FlowItem() {
+            Column(){
+              ImageKnifeComponent({
+                imageKnifeOption: {
+                  loadSrc: item,
+                  placeholderSrc: $r("app.media.loading"),
+                  errorholderSrc: $r("app.media.failed"),
+                }
+              }).width("50%").height(160)
+            }
+          }.height(200)
+          .backgroundColor("#95efd2")
+        },(item: string) => item)
+      }.columnsTemplate("1fr 1fr")
+      .cachedCount(20)
+      .columnsGap(10)
+      .rowsGap(5)
+      .backgroundColor(0xFAEEE0)
+      .width("100%").height("100%")
+    }
+  }
+}

entry/src/main/ets/pages/MaxRequest3.ets

@@ -0,0 +1,55 @@
+/*
+ * 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.
+ */
+import { ImageKnifeComponent,ImageKnife } from '@ohos/libraryimageknife';
+import { CommonDataSource } from './model/CommonDataSource';
+
+@Entry
+@Component
+struct MaxRequest3 {
+  @State hotCommendList:CommonDataSource<string> = new CommonDataSource<string>([])
+  private data: Array<string> = []
+  aboutToAppear(): void {
+    ImageKnife.getInstance().setMaxRequests(32)
+    for (let index = 400; index < 600; index++) {
+      this.data.push(`https://img-blog.csdn.net/20140514114029140?${index}`)
+    }
+    this.hotCommendList.addData(this.hotCommendList.totalCount(),this.data)
+  }
+  build() {
+    Column() {
+      WaterFlow() {
+        LazyForEach(this.hotCommendList,(item: string)=>{
+          FlowItem() {
+            Column(){
+              ImageKnifeComponent({
+                imageKnifeOption: {
+                  loadSrc: item,
+                  placeholderSrc: $r("app.media.loading"),
+                  errorholderSrc: $r("app.media.failed"),
+                }
+              }).width("50%").height(160)
+            }
+          }.height(200)
+          .backgroundColor("#95efd2")
+        },(item: string) => item)
+      }.columnsTemplate("1fr 1fr")
+      .cachedCount(40)
+      .columnsGap(10)
+      .rowsGap(5)
+      .backgroundColor(0xFAEEE0)
+      .width("100%").height("100%")
+    }
+  }
+}

entry/src/main/ets/pages/SetMaxRequestPage.ets

@@ -0,0 +1,23 @@
+import { router } from '@kit.ArkUI'
+
+@Entry
+@Component
+struct SetMaxRequestPage {
+  build() {
+    Column() {
+      Button("maxRequest = 8")
+        .onClick(()=>{
+          router.pushUrl({url:"pages/MaxRequest1"})
+        })
+      Button("maxRequest = 20")
+        .onClick(()=>{
+          router.pushUrl({url:"pages/MaxRequest2"})
+        }).margin({top:20})
+      Button("maxRequest = 32")
+        .onClick(()=>{
+          router.pushUrl({url:"pages/MaxRequest2"})
+        }).margin({top:20})
+    }.width("100%")
+    .height("100%")
+  }
+}

entry/src/main/resources/base/element/string.json

@@ -507,6 +507,10 @@
     {
       "name": "Customize_RCP_network",
       "value": "Customize RCP network request"
+    },
+    {
+      "name": "request_concurrency",
+      "value": "Set request concurrency"
     }
   ]
 }

entry/src/main/resources/base/profile/main_pages.json

@@ -32,6 +32,10 @@
     "pages/TestCacheDataPage",
     "pages/TestChangeColorPage",
     "pages/TestLoadCancelListenerPage",
-    "pages/CustomNetImagePage"
+    "pages/CustomNetImagePage",
+    "pages/SetMaxRequestPage",
+    "pages/MaxRequest1",
+    "pages/MaxRequest2",
+    "pages/MaxRequest3"
   ]
 }

entry/src/main/resources/zh_CN/element/string.json

@@ -503,6 +503,10 @@
     {
       "name": "Customize_RCP_network",
       "value": "自定义rcp网络请求"
+    },
+    {
+      "name": "request_concurrency",
+      "value": "设置请求并发度"
     }
   ]
 }

library/src/main/ets/ImageKnifeLoader.ets

@@ -102,6 +102,11 @@ export class ImageKnifeLoader {
       resPixelmap = await request.transformation?.transform(request.context, resPixelmap,  request.componentWidth, request.componentHeight);
       LogUtil.log("ImageKnife_DataTime_requestJob.transform.end:" + request.src)
     }
+    try {
+      resPixelmap?.setTransferDetached(true)
+    } catch (e) {
+      LogUtil.error("PixelMap setTransferDetached err:"+JSON.stringify(e))
+    }
     let res: RequestJobResult = {
       pixelMap: resPixelmap,
       bufferSize: resBuf.byteLength,
@@ -136,6 +141,11 @@ export class ImageKnifeLoader {
       .then((pixelmap: PixelMap) => {
         resPixelmap = pixelmap
         imageSource.release()
+        try {
+          resPixelmap.setTransferDetached(true)
+        } catch (e) {
+          LogUtil.error("PixelMap setTransferDetached err:"+JSON.stringify(e))
+        }
       }).catch((error: BusinessError) => {
         imageSource.release()
         ImageKnifeLoader.makeEmptyResult(request,JSON.stringify(error))
@@ -235,6 +245,15 @@ export class ImageKnifeLoader {
     }
     return headerObj
   }
+  static FileCacheParseImage(request:RequestJobRequest,resBuf:ArrayBuffer,fileKey:string){
+    // 保存文件缓存
+    if (resBuf !== undefined && request.writeCacheStrategy !== CacheStrategy.Memory) {
+      LogUtil.log("ImageKnife_DataTime_requestJob_saveFileCacheOnlyFile.start:"+request.src)
+      FileCache.saveFileCacheOnlyFile(request.context, fileKey, resBuf , request.fileCacheFolder)
+      LogUtil.log("ImageKnife_DataTime_requestJob_saveFileCacheOnlyFile.end:"+request.src)
+    }
+    ImageKnifeLoader.parseImage(resBuf,fileKey,request)
+  }
   // 获取图片资源
   static async getImageArrayBuffer(request: RequestJobRequest, requestList: List<ImageKnifeRequestWithSource> | undefined,fileKey:string) {
     let resBuf: ArrayBuffer | undefined
@@ -250,13 +269,7 @@ export class ImageKnifeLoader {
           request.customGetImage(request.context, request.src, headerObj)
             .then((buffer)=>{
               if(buffer != undefined) {
-                // 保存文件缓存
+                ImageKnifeLoader.FileCacheParseImage(request,buffer,fileKey)
-                if (request.writeCacheStrategy !== CacheStrategy.Memory) {
-                  LogUtil.log("ImageKnife_DataTime_requestJob_saveFileCacheOnlyFile.start:" + request.src)
-                  FileCache.saveFileCacheOnlyFile(request.context, fileKey, buffer, request.fileCacheFolder)
-                  LogUtil.log("ImageKnife_DataTime_requestJob_saveFileCacheOnlyFile.end:" + request.src)
-                }
-                ImageKnifeLoader.parseImage(buffer,fileKey,request)
               } else {
                 loadError = "customGetImage loadFail undefined"
                 ImageKnifeLoader.makeEmptyResult(request,loadError)
@@ -325,13 +338,7 @@ export class ImageKnifeLoader {
             promise.then((data: number) => {
               if (data == 200 || data == 206 || data == 204) {
                 resBuf = combineArrayBuffers(arrayBuffers)
-                // 保存文件缓存
+                ImageKnifeLoader.FileCacheParseImage(request,resBuf,fileKey)
-                if (resBuf !== undefined && request.writeCacheStrategy !== CacheStrategy.Memory) {
-                  LogUtil.log("ImageKnife_DataTime_requestJob_saveFileCacheOnlyFile.start:"+request.src)
-                  FileCache.saveFileCacheOnlyFile(request.context, fileKey, resBuf , request.fileCacheFolder)
-                  LogUtil.log("ImageKnife_DataTime_requestJob_saveFileCacheOnlyFile.end:"+request.src)
-                }
-                ImageKnifeLoader.parseImage(resBuf,fileKey,request)
               } else {
                 loadError = "HttpDownloadClient has error, http code =" + JSON.stringify(data)
                 ImageKnifeLoader.makeEmptyResult(request,loadError)

library/src/main/ets/components/ImageKnifeComponent.ets

@@ -24,7 +24,7 @@ import { DefaultEngineKey } from '../key/DefaultEngineKey';
 @Component
 export struct ImageKnifeComponent {
   @Watch('watchImageKnifeOption') @ObjectLink imageKnifeOption: ImageKnifeOption;
-  @State pixelMap: PixelMap | string | undefined = undefined
+  @State pixelMap: PixelMap | string | ImageContent | undefined = undefined
   @State syncLoad: boolean = false
   @State adaptiveWidth: Length = '100%'
   @State adaptiveHeight: Length = '100%'
@@ -68,6 +68,7 @@ export struct ImageKnifeComponent {
   }
 
   aboutToRecycle() {
+    this.pixelMap = ImageContent.EMPTY
     this.clearLastRequest()
   }
   /**