ImageKnife提供图片加载成功/失败的事件

Signed-off-by: 任伟x <renwei79@h-partners.com>

CHANGELOG.md

@@ -4,6 +4,7 @@
 - 新增putCache写入缓存接口
 - 修复入参为pixelMap图片不显示问题
 - 网络请求减少拼接操作，修复网络加载速度慢
+- 提供图片加载成功/失败的事件
 
 ## 3.0.0-rc.3
 - 将请求默认并行从64调整到8，减少对taskpool execute内存消耗

README.md

@@ -153,7 +153,7 @@ ImageKnifeComponent({ ImageKnifeOption:
 ### ImageKnifeOption参数列表
 
 | 参数名称                  | 入参内容                                              | 功能简介            |
-|-----------------------|--------------------------------|-----------------|
+|-----------------------|---------------------------------------------------|-----------------|
 | loadSrc               | string、PixelMap、Resource                          | 主图展示            |
 | placeholderSrc        | PixelMap、Resource                                 | 占位图图展示（可选）      |
 | errorholderSrc        | PixelMap、Resource                                 | 错误图展示（可选）       |
@@ -170,6 +170,7 @@ ImageKnifeComponent({ ImageKnifeOption:
 | signature             | String                                            | 自定义缓存关键字（可选）    | 
 | headerOption          | Array<HeaderOptions>                              | 设置请求头（可选）       |
 | transformation        | PixelMapTransformation                            | 图片变换（可选）        |
+| onLoadListener        | onLoadSuccess: (data: string | PixelMap | undefined) => void、onLoadFailed: (err: string) => void| 监听图片加载成功与失败     |
 
 ### ImageKnife接口
 

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

@@ -108,6 +108,12 @@ struct Index {
 
       })
 
+      Button('测试图片加载成功/失败事件').margin({top:10}).onClick(()=>{
+        router.push({
+          uri: 'pages/LoadStatePage',
+        })
+      })
+
     }
     .width('100%')
 

entry/src/main/ets/pages/LoadStatePage.ets

@@ -0,0 +1,74 @@
+/*
+ * 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/imageknife"
+import matrix4 from '@ohos.matrix4'
+
+@Entry
+@Component
+struct LoadStatePage {
+  @State matrix1: object = matrix4.identity().scale({ x: 1, y: 1 })
+  @State ImageKnifeOption: ImageKnifeOption = {
+    loadSrc: $r("app.media.rabbit"),
+    placeholderSrc: $r("app.media.loading"),
+    errorholderSrc: $r("app.media.app_icon"),
+    objectFit: ImageFit.Contain,
+    onLoadListener: {
+      onLoadFailed: (err) => {
+        console.error("Load Failed Reason: " + err);
+      },
+      onLoadSuccess: (data) => {
+        return data;
+      },
+    },
+    border: { radius: 50 }
+  }
+
+  build() {
+    Column() {
+      Text('测试失败场景请先关闭网络，并保证本地没有此网络图片的缓存')
+        .margin({ top: 20 })
+      Row() {
+        Button('测试失败/成功场景')
+          .onClick(() => {
+            this.ImageKnifeOption = {
+              loadSrc: "https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
+              placeholderSrc: $r("app.media.loading"),
+              errorholderSrc: $r("app.media.app_icon"),
+              objectFit: ImageFit.Contain,
+              onLoadListener: {
+                onLoadFailed: (err) => {
+                  console.error("Load Failed Reason: " + err);
+                },
+                onLoadSuccess: (data) => {
+                  console.info("Load Successful: " + data);
+                  return data;
+                },
+              },
+              border: { radius: 50 }
+            }
+          })
+      }
+      .margin({ top: 20 })
+
+      ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption }).height(200).width(200)
+        .transform(this.matrix1)
+        .margin({ top: 20 })
+
+    }
+
+    .width('100%')
+    .height('100%')
+  }
+}

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

@@ -14,6 +14,7 @@
     "pages/TestHeader",
     "pages/ImageTransformation",
     "pages/ObjectFitPage",
-    "pages/TestWriteCacheStage"
+    "pages/TestWriteCacheStage",
+    "pages/LoadStatePage"
   ]
 }

library/src/main/ets/ImageKnifeDispatcher.ets

@@ -151,6 +151,9 @@ export class ImageKnifeDispatcher {
       let requestJobResult = res as RequestJobResult
       let pixelmap = requestJobResult === undefined ? undefined : requestJobResult.pixelMap
       if (pixelmap === undefined) {
+        if (currentRequest.imageKnifeOption.onLoadListener && currentRequest.imageKnifeOption.onLoadListener.onLoadFailed && requestJobResult.loadFail) {
+          currentRequest.imageKnifeOption.onLoadListener.onLoadFailed(requestJobResult.loadFail);
+        }
         if (requestList !== undefined) {
           requestList.forEach((requestWithSource: ImageKnifeRequestWithSource) => {
             if (requestWithSource.source === ImageKnifeRequestSource.SRC && currentRequest.imageKnifeOption.errorholderSrc !== undefined) {
@@ -165,6 +168,7 @@ export class ImageKnifeDispatcher {
         else {
           LogUtil.log("error: no requestlist need to draw for key = " + memoryKey)
         }
+        return;
       }
       // 保存文件缓存
       if (requestJobResult.bufferSize > 0 && currentRequest.imageKnifeOption.writeCacheStrategy !== CacheStrategy.Memory) {
@@ -202,6 +206,9 @@ export class ImageKnifeDispatcher {
 
           if (requestWithSource.source == ImageKnifeRequestSource.SRC) {
             requestWithSource.request.requestState = ImageKnifeRequestState.COMPLETE
+            if(currentRequest.imageKnifeOption.onLoadListener && currentRequest.imageKnifeOption.onLoadListener.onLoadSuccess) {
+              currentRequest.imageKnifeOption.onLoadListener.onLoadSuccess(ImageKnifeData.source);
+            }
           } else if (requestWithSource.source == ImageKnifeRequestSource.ERROR_HOLDER) {
             requestWithSource.request.requestState = ImageKnifeRequestState.ERROR
           }
@@ -251,6 +258,7 @@ export class ImageKnifeDispatcher {
 async function requestJob(request: RequestJobRequest): Promise<RequestJobResult | undefined> {
   let resBuf: ArrayBuffer | undefined
   let bufferSize: number = 0
+  let loadError: string = '';
 
   class RequestData {
     receiveSize: number = 2000
@@ -322,6 +330,7 @@ async function requestJob(request: RequestJobRequest): Promise<RequestJobResult
               resBuf = combineArrayBuffers(arrayBuffers)
             }
           }).catch((err: Error) => {
+            loadError = err.message;
             LogUtil.error("requestInStream ERROR : err = " + JSON.stringify(err));
           });
 
@@ -334,8 +343,10 @@ async function requestJob(request: RequestJobRequest): Promise<RequestJobResult
         }
         else {
           LogUtil.log("success get image from filecache for key = " + fileKey);
+          loadError = "success get image from filecache for key = " + fileKey;
         }
       } else { //从本地文件获取
+        try {
           let stat = fs.statSync(request.src);
           if (stat.size > 0) {
             let file = fs.openSync(request.src, fs.OpenMode.READ_ONLY);
@@ -343,6 +354,13 @@ async function requestJob(request: RequestJobRequest): Promise<RequestJobResult
             fs.readSync(file.fd, resBuf);
             fs.closeSync(file);
           }
+        } catch (err) {
+          if (typeof err == 'string') {
+            loadError = err;
+          } else {
+            loadError = err.message;
+          }
+        }
       }
     } else if ((request.src as Resource).id !== undefined) { //从资源文件获取
       let res = request.src as Resource;
@@ -362,7 +380,12 @@ async function requestJob(request: RequestJobRequest): Promise<RequestJobResult
 
 
   if (resBuf == undefined) {
-    return undefined
+    return {
+      pixelMap: undefined,
+      bufferSize: 0,
+      fileKey: '',
+      loadFail: loadError,
+    }
   }
 
   let fileTypeUtil = new FileTypeUtil();

library/src/main/ets/ImageKnifeOption.ets

@@ -59,8 +59,13 @@ export class ImageKnifeOption {
   progressListener?: (progress: number)=>void;
 
   transformation?: PixelMapTransformation
+  onLoadListener?: OnLoadCallBack | undefined;
 
   constructor() {
 
   }
 }
+export interface OnLoadCallBack {
+  onLoadSuccess?: (data: string | PixelMap | undefined) => void;
+  onLoadFailed?: (err: string) => void;
+}

library/src/main/ets/model/ImageKnifeData.ets

@@ -58,6 +58,7 @@ export interface RequestJobResult {
   pixelMap: PixelMap | string | undefined
   bufferSize: number
   fileKey: string
+  loadFail?: string,
 }
 
 /**

library/src/test/ImageKnifeOption.test.ets

@@ -0,0 +1,63 @@
+/*
+ * 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 { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium';
+import { ImageKnifeOption} from '../main/ets/ImageKnifeOption';
+
+export default function imageKnifeOptionTest() {
+  describe('imageKnifeOptionTest',() => {
+    // Defines a test suite. Two parameters are supported: test suite name and test suite function.
+    beforeAll(() => {
+      // Presets an action, which is performed only once before all test cases of the test suite start.
+      // This API supports only one parameter: preset action function.
+    });
+    beforeEach(() => {
+      // Presets an action, which is performed before each unit test case starts.
+      // The number of execution times is the same as the number of test cases defined by **it**.
+      // This API supports only one parameter: preset action function.
+    });
+    afterEach(() => {
+      // Presets a clear action, which is performed after each unit test case ends.
+      // The number of execution times is the same as the number of test cases defined by **it**.
+      // This API supports only one parameter: clear action function.
+    });
+    afterAll(() => {
+      // Presets a clear action, which is performed after all test cases of the test suite end.
+      // This API supports only one parameter: clear action function.
+    });
+    it('onLoadListener', 0, () => {
+      let a = 'abc';
+      let b: string = '';
+      let ImageKnifeOption: ImageKnifeOption = {
+        loadSrc: $r("app.media.rabbit"),
+        onLoadListener: {
+          onLoadFailed: (err) => {
+            console.error("Load Failed Reason: " + err);
+          },
+          onLoadSuccess: (data) => {
+            if(typeof data == 'string') {
+              return b = data;
+            }
+            return data;
+          },
+        },
+      }
+      if (ImageKnifeOption.onLoadListener && ImageKnifeOption.onLoadListener.onLoadSuccess && ImageKnifeOption.onLoadListener.onLoadFailed) {
+        ImageKnifeOption.onLoadListener.onLoadSuccess(a);
+        ImageKnifeOption.onLoadListener.onLoadFailed(a);
+      }
+      expect(a).assertEqual(b);
+    });
+  });
+}

library/src/test/List.test.ets

@@ -1,5 +1,7 @@
+import imageKnifeOptionTest from './ImageKnifeOption.test';
 import localUnitTest from './LocalUnit.test';
 
 export default function testsuite() {
   localUnitTest();
+  imageKnifeOptionTest();
 }