修改ImageKnifeComponent组件pixel Map初始值以及修复多张错误图不显示

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

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## 3.2.0-rc.5
 - Enhance: ImageFit.Auto support adaptive height after component width change
 - Fix bug: call onLoadStart 2 times(import from 3.2.0-rc.0)
+- Change the initial value of the PixelMap component of ImageKnife to ImageContent EMPTY
 
 ## 3.2.0-rc.4
 - Support ICO format images

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

@@ -50,6 +50,16 @@ struct Index {
             uri: 'pages/SetMaxRequestPage',
           });
         })
+        Button($r('app.string.Single_CallBack')).margin({top:10}).onClick(()=>{
+          router.push({
+            uri: 'pages/SingleImageCallBack',
+          });
+        })
+        Button($r('app.string.Multiple_CallBack')).margin({top:10}).onClick(()=>{
+          router.push({
+            uri: 'pages/MultipleImageCallBack',
+          });
+        })
         Button($r('app.string.Test_multiple_images')).margin({top:10}).onClick(()=>{
           router.push({
             uri: 'pages/TestCommonImage',

entry/src/main/ets/pages/MultipleImageCallBack.ets

@@ -0,0 +1,151 @@
+/*
+ * 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,ImageKnifeOption } from '@ohos/libraryimageknife';
+import { CommonDataSource } from './model/CommonDataSource'
+
+@Entry
+@Component
+struct MultipleImageCallBack {
+  @State hotCommendList: CommonDataSource<string> = new CommonDataSource<string>([])
+  @State componentIndex: number = 0
+  @State startIndex: number = 0
+  @State successIndex: number = 0
+  @State failIndex: number = 0
+  @State cancelJobIndex: number = 0
+  @State cancelLoadIndex: number = 0
+  @State memoryIndex: number = 0
+  @State fileCacheIndex: number = 0
+  @State netIndex: number = 0
+  @State checkText: string = ''
+  private data: Array<string> = []
+
+  aboutToAppear(): void {
+    for (let index = 0; index < 100; index++) {
+      this.data.push(`https://img-blog.csdn.net/20140514114029140?${index}`)
+    }
+    this.hotCommendList.addData(this.hotCommendList.totalCount(), this.data)
+  }
+
+  build() {
+    Column() {
+      Row() {
+        Column() {
+          Text('图片总数：' + this.componentIndex)
+          Text('开始回调：' + this.startIndex)
+          Text('成功回调：' + this.successIndex)
+          Text('失败回调：' + this.failIndex)
+          Text('队列取消回调：' + this.cancelJobIndex)
+          Text('加载取消回调：' + this.cancelLoadIndex)
+          Text('内存数量：' + this.memoryIndex)
+          Text('文件数量：' + this.fileCacheIndex)
+          Text('网络数量：' + this.netIndex)
+        }.width('50%')
+        Column() {
+          Button('check')
+            .onClick(()=>{
+              this.checkText = ''
+              if (this.componentIndex !== this.startIndex + this.cancelJobIndex) {
+                this.checkText = this.checkText + '图片总数！=开始+队列取消，'
+              }
+              if(this.startIndex !== this.successIndex + this.failIndex + this.cancelLoadIndex) {
+                this.checkText = this.checkText + '开始回调！=成功+失败+加载取消，'
+              }
+              if(this.successIndex !== this.memoryIndex + this.fileCacheIndex + this.netIndex) {
+                this.checkText = this.checkText + '成功回调！=内存+文件+网络，'
+              }
+              if(this.componentIndex !== this.successIndex + this.failIndex + this.cancelJobIndex + this.cancelLoadIndex) {
+                this.checkText = this.checkText + '图片总数！=成功+失败+加载取消+队列取消，'
+              }
+              if(this.checkText == '') {
+                this.checkText = 'check正确'
+              }
+            })
+          Text(this.checkText)
+        }.width('50%')
+      }.width('100%')
+      Column() {
+        WaterFlow() {
+          LazyForEach(this.hotCommendList, (item: string,index: number) => {
+            FlowItem() {
+              Column() {
+                Text(index + '')
+                ImageComponent({
+                  imageKnifeOption: {
+                    loadSrc: item,
+                    placeholderSrc: $r('app.media.loading'),
+                    errorholderSrc: $r('app.media.failed'),
+                    onLoadListener: {
+                      onLoadStart:()=>{
+                        this.startIndex++
+                        console.log('image load multiple loadStart:' + this.startIndex)
+                      },
+                      onLoadSuccess:(pixelmap,imageData,request)=>{
+                        this.successIndex++
+                        let memory = request?.imageKnifeData?.timeInfo?.memoryCheckEndTime ? 1 : 0
+                        let fileCache = request?.imageKnifeData?.timeInfo?.diskCheckEndTime ? 1 : 0
+                        let net = request?.imageKnifeData?.timeInfo?.netRequestEndTime ? 1 : 0
+                        memory = memory - fileCache
+                        fileCache = fileCache - net
+                        this.memoryIndex = this.memoryIndex + memory
+                        this.fileCacheIndex = this.fileCacheIndex + fileCache
+                        this.netIndex = this.netIndex + net
+                        console.log('image load multiple loadSuccess:' + this.successIndex)
+                      },
+                      onLoadFailed:()=>{
+                        this.failIndex++
+                        console.log('image load multiple loadFail:' + this.failIndex)
+                      },
+                      onLoadCancel:(message,request)=>{
+                        let flag = request?.imageKnifeData?.type ? true : false
+                        if (flag) {
+                          this.cancelLoadIndex++
+                        } else {
+                          this.cancelJobIndex++
+                        }
+                        console.log('image load multiple cancelJobIndex:' + this.cancelJobIndex,'cancelLoadIndex' + this.cancelLoadIndex)
+                      }
+                    }
+                  },index:this.componentIndex
+                }).width('50%').height(160)
+              }
+            }.height(200)
+            .backgroundColor('#95efd2')
+          }, (item: string) => item)
+        }
+        .cachedCount(0)
+        .columnsTemplate('1fr 1fr')
+        .columnsGap(10)
+        .rowsGap(5)
+        .backgroundColor(0xFAEEE0)
+        .width('100%')
+      }
+      .height('80%')
+    }.width('100%')
+    .height('100%')
+  }
+}
+@Component
+struct ImageComponent {
+  @State imageKnifeOption: ImageKnifeOption = new ImageKnifeOption()
+  @Link index: number
+  aboutToAppear(): void {
+    this.index++
+  }
+  build() {
+    ImageKnifeComponent({
+      imageKnifeOption: this.imageKnifeOption
+    })
+  }
+}

entry/src/main/ets/pages/SingleImageCallBack.ets

@@ -0,0 +1,126 @@
+/*
+ * 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,ImageKnifeOption } from '@ohos/libraryimageknife';
+import { CommonDataSource } from './model/CommonDataSource'
+
+@Entry
+@Component
+struct SingleImageCallBack {
+  @State hotCommendList: CommonDataSource<string> = new CommonDataSource<string>([])
+  @State componentIndex: number = 0
+  @State startIndex: number = 0
+  @State successIndex: number = 0
+  @State failIndex: number = 0
+  @State cancelJobIndex: number = 0
+  @State cancelLoadIndex: number = 0
+  @State memoryIndex: number = 0
+  @State fileCacheIndex: number = 0
+  @State netIndex: number = 0
+  @State checkText: string = ''
+  build() {
+    Column() {
+      Row() {
+        Column() {
+          Text('图片总数：' + this.componentIndex)
+          Text('开始回调：' + this.startIndex)
+          Text('成功回调：' + this.successIndex)
+          Text('失败回调：' + this.failIndex)
+          Text('队列取消回调：' + this.cancelJobIndex)
+          Text('加载取消回调：' + this.cancelLoadIndex)
+          Text('内存数量：' + this.memoryIndex)
+          Text('文件数量：' + this.fileCacheIndex)
+          Text('网络数量：' + this.netIndex)
+        }.width('50%')
+        Column() {
+          Button('check')
+            .onClick(()=>{
+              this.checkText = ''
+              if (this.componentIndex !== this.startIndex + this.cancelJobIndex) {
+                this.checkText = this.checkText + '图片总数！=开始+队列取消，'
+              }
+              if(this.startIndex !== this.successIndex + this.failIndex + this.cancelLoadIndex) {
+                this.checkText = this.checkText + '开始回调！=成功+失败+加载取消，'
+              }
+              if(this.successIndex !== this.memoryIndex + this.fileCacheIndex + this.netIndex) {
+                this.checkText = this.checkText + '成功回调！=内存+文件+网络，'
+              }
+              if(this.componentIndex !== this.successIndex + this.failIndex + this.cancelJobIndex + this.cancelLoadIndex) {
+                this.checkText = this.checkText + '图片总数！=成功+失败+加载取消+队列取消，'
+              }
+              if(this.checkText == '') {
+                this.checkText = 'check正确'
+              }
+            })
+          Text(this.checkText)
+        }.width('50%')
+      }.width('100%')
+      Column() {
+        ImageComponent({
+          imageKnifeOption: {
+            loadSrc: 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
+            placeholderSrc: $r('app.media.loading'),
+            errorholderSrc: $r('app.media.failed'),
+            onLoadListener: {
+              onLoadStart: () => {
+                this.startIndex++
+                console.log('image load multiple loadStart:' + this.startIndex)
+              },
+              onLoadSuccess: (pixelmap, imageData, request) => {
+                this.successIndex++
+                let memory = request?.imageKnifeData?.timeInfo?.memoryCheckEndTime ? 1 : 0
+                let fileCache = request?.imageKnifeData?.timeInfo?.diskCheckEndTime ? 1 : 0
+                let net = request?.imageKnifeData?.timeInfo?.netRequestEndTime ? 1 : 0
+                memory = memory - fileCache
+                fileCache = fileCache - net
+                this.memoryIndex = this.memoryIndex + memory
+                this.fileCacheIndex = this.fileCacheIndex + fileCache
+                this.netIndex = this.netIndex + net
+                console.log('image load multiple loadSuccess:' + this.successIndex)
+              },
+              onLoadFailed: () => {
+                this.failIndex++
+                console.log('image load multiple loadFail:' + this.failIndex)
+              },
+              onLoadCancel: (message,request) => {
+                let flag = request?.imageKnifeData?.type ? true : false
+                if (flag) {
+                  this.cancelLoadIndex++
+                } else {
+                  this.cancelJobIndex++
+                }
+                console.log('image load multiple cancelJobIndex:' + this.cancelJobIndex,'cancelLoadIndex' + this.cancelLoadIndex)
+              }
+            }
+          },index:this.componentIndex
+        }).width(300).height(300)
+      }
+      .height('80%')
+    }.width('100%')
+    .height('100%')
+  }
+}
+@Component
+struct ImageComponent {
+  @State imageKnifeOption: ImageKnifeOption = new ImageKnifeOption()
+  @Link index: number
+  aboutToAppear(): void {
+    this.index++
+  }
+  build() {
+    ImageKnifeComponent({
+      imageKnifeOption: this.imageKnifeOption
+    })
+  }
+}

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

@@ -655,6 +655,14 @@
     {
       "name": "Auto_ImageFit",
       "value": "ImageFit.Auto:Auto ImageFit Height"
+    },
+    {
+      "name": "Single_CallBack",
+      "value": "Single image callback"
+    },
+    {
+      "name": "Multiple_CallBack",
+      "value": "Multiple image callback"
     }
   ]
 }

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

@@ -38,6 +38,8 @@
     "pages/TestImageKnifeCallbackPage",
     "pages/TestListImageKnifeCallbackPage",
     "pages/DownSamplePage",
-    "pages/AutoImageFit"
+    "pages/AutoImageFit",
+    "pages/SingleImageCallBack",
+    "pages/MultipleImageCallBack"
   ]
 }

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

@@ -651,6 +651,14 @@
     {
       "name": "Auto_ImageFit",
       "value": "ImageFit.Auto:自适用图片高度"
+    },
+    {
+      "name": "Single_CallBack",
+      "value": "单个图片回调"
+    },
+    {
+      "name": "Multiple_CallBack",
+      "value": "多张图片回调"
     }
   ]
 }

library/src/main/ets/ImageKnifeDispatcher.ets

@@ -373,7 +373,7 @@ export class ImageKnifeDispatcher {
         }
         if (requestWithSource.source === ImageKnifeRequestSource.SRC &&
           requestWithSource.request.imageKnifeOption.errorholderSrc !== undefined) {
-
+          requestWithSource.request.requestState = ImageKnifeRequestState.PROGRESS
           if (this.showFromMemomry(requestWithSource.request, requestWithSource.request.imageKnifeOption.errorholderSrc,
             ImageKnifeRequestSource.ERROR_HOLDER) === false) {
             this.getAndShowImage(requestWithSource.request, requestWithSource.request.imageKnifeOption.errorholderSrc,

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 | ImageContent | undefined = undefined
+  @State pixelMap: PixelMap | string | ImageContent | undefined = ImageContent.EMPTY
   @State syncLoad: boolean = false
   @State adaptiveWidth: Length = '100%'
   @State adaptiveHeight: Length = '100%'
@@ -150,6 +150,8 @@ export struct ImageKnifeComponent {
             return //针对reuse场景，不显示历史图片
           }
           this.pixelMap = pixelMap
+          LogUtil.debug('image load showPixelMap:' + this.request?.imageKnifeOption.loadSrc + ', componentId = ' +
+          this.getUniqueId() + ',size:' + JSON.stringify(size))
           if (typeof this.pixelMap !== 'string') {
             if (this.imageKnifeOption.objectFit === ImageFit.Auto && this.isImageFitAutoResize == false) {
               this.adaptiveHeight = this.currentWidth * size.height / size.width