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

Merge pull request !260 from 任伟x/master

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## 2.2.0-rc.3
 - 修复错误图绘制完后变成占位图
+- 提供图片加载成功/失败的事件
 
 ## 2.2.0-rc.2
 - ImageKnife支持下采样

README.md

@@ -154,7 +154,7 @@ ImageKnifeGlobal.getInstance().getImageKnife()?.replaceDataFetch(new CustomDataF
 | mainScaleType                | ScaleType                                                                                                                                                                                                | 设置主图展示样式（可选）                                  |
 | strategy                     | DiskStrategy                                                                                                                                                                                             | 设置磁盘缓存策略（可选）                                  |
 | dontAnimateFlag              | boolean                                                                                                                                                                                                  | gif加载展示一帧（可选）                                 |
-| placeholderSrc               | string\ (占位图不支持gif图且不支持网络下载功能)                                                                                                                                                                           | PixelMap\                                      |Resource                                   | 占位图数据源                        |
+| placeholderSrc               | string\ (占位图不支持gif图且不支持网络下载功能)                                                                                                                                                                           | PixelMap\                                     |Resource                                   | 占位图数据源                        |
 | placeholderScaleType         | ScaleType                                                                                                                                                                                                | 设置占位图展示样式（可选）                                 |
 | errorholderSrc               | PixelMap\                                                                                                                                                                                                | Resource                                      | 错误占位图数据源                    |
 | errorholderSrcScaleType      | ScaleType                                                                                                                                                                                                | 设置失败占位图展示样式（可选）                               |
@@ -177,7 +177,8 @@ ImageKnifeGlobal.getInstance().getImageKnife()?.replaceDataFetch(new CustomDataF
 | imageSmoothingEnabled        | boolean                                                                                                                                                                                                  | 抗锯齿是否开启属性配置，设置为false时，imageSmoothingQuality失效 |
 | imageSmoothingQuality        | AntiAliasing                                                                                                                                                                                             | 抗锯齿属性配置                                       |
 | autoPlay                     | boolean                                                                                                                                                                                                  | GIF播放暂停控制（可选）                                 |
-| customGetImage               | (Context, string)                                                                                                                                                                                        | 设置是否使用应用自定义的方式加载图片（可选）                                |
+| customGetImage               | (Context, string)                                                                                                                                                                                        | 设置是否使用应用自定义的方式加载图片（可选）                        |
+| onLoadListener               | onLoadSuccess: (data: string | PixelMap | Resource | undefined) => void;onLoadFailed: (err: string) => void;                                                                                                                                                                                        | 监听图片加载成功/失败                                |
 
 其他参数只需要在ImageKnifeOption对象上按需添加即可。
 

entry/src/main/ets/pages/imageknifeTestCaseIndex.ets

@@ -425,6 +425,14 @@ struct IndexFunctionDemo {
               router.pushUrl({ url: 'pages/testCustomDataFetchClientWithPage' });
             }).margin({ top: 5, left: 3 })
         }.width('100%').height(60).backgroundColor(Color.Pink)
+
+        Text('测试监听加载成功/失败').fontSize(15)
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          Button('测试监听加载成功/失败')
+            .onClick(() => {
+              router.pushUrl({ url: 'pages/testImageKnifeLoadState' });
+            }).margin({ top: 5, left: 3 })
+        }.width('100%').height(60).backgroundColor(Color.Pink)
       }
     }
     .width('100%')

entry/src/main/ets/pages/testImageKnifeLoadState.ets

@@ -0,0 +1,76 @@
+/*
+ * 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'
+
+@Entry
+@Component
+struct testImageKnifeCache {
+  @State imageKnifeOption: ImageKnifeOption =
+    {
+      loadSrc: $r('app.media.icon'),
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+    };
+
+  build() {
+    Scroll() {
+      Column() {
+        Text('测试失败场景时关闭掉网络').fontSize(15);
+        Row() {
+          Button('测试加载成功/失败监听')
+            .onClick(() => {
+              this.imageKnifeOption =
+                {
+                  loadSrc: 'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658',
+                  placeholderSrc: $r('app.media.icon_loading'),
+                  errorholderSrc: $r('app.media.icon_failed'),
+                  onLoadListener: {
+                    onLoadSuccess: (data) => {
+                      console.log('Load Successful: ' + data);
+                      return data;
+                    },
+                    onLoadFailed: (err) => {
+                      console.error('Load Failed Reason: ' + err);
+                    }
+                  }
+                }
+            })
+        }
+
+        Text('网络图').fontSize(15);
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
+          .width(200)
+          .height(200)
+          .backgroundColor(Color.Orange)
+      }
+      .alignItems(HorizontalAlign.Center)
+      .width('100%')
+    }
+    .width('100%')
+    .height('100%')
+  }
+
+  aboutToAppear() {
+
+  }
+
+  aboutToDisappear() {
+
+  }
+
+  onBackPress() {
+
+  }
+}

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

@@ -58,6 +58,7 @@
     "pages/testImageKnifeNetPlaceholder",
     "pages/testCustomDataFetchClientWithPage",
     "pages/testReuseAblePages",
-    "pages/downsamplingPage"
+    "pages/downsamplingPage",
+    "pages/testImageKnifeLoadState"
   ]
 }

entry/src/ohosTest/ets/test/List.test.ets

@@ -22,6 +22,7 @@ import ImageKnifeTest from './imageknife.test'
 import DiskLruCacheTest from './diskLruCache.test'
 import SendableDataTest from './SendableData.test'
 import DefaultJobQueueTest from './DefaultJobQueueTest.test';
+import ImageKnifeOptionTest from './imageknifeOption.test';
 
 export default function testsuite() {
   abilityTest()
@@ -34,4 +35,5 @@ export default function testsuite() {
   SendableDataTest();
   DefaultJobQueueTest();
   CustomDataFetchClientTest();
+  ImageKnifeOptionTest();
 }

entry/src/ohosTest/ets/test/imageknifeOption.test.ets

@@ -0,0 +1,64 @@
+/*
+ * 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 '@ohos/imageknife'
+
+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: 'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658',
+        onLoadListener: {
+          onLoadSuccess: (data) => {
+            if (typeof data == 'string') {
+              b = data;
+            }
+            return data;
+          },
+          onLoadFailed: (err) => {
+            console.log('Load Failed Reason: '+err);
+          }
+        }
+      }
+      if(imageKnifeOption.onLoadListener && imageKnifeOption.onLoadListener.onLoadSuccess && imageKnifeOption.onLoadListener.onLoadFailed) {
+        imageKnifeOption.onLoadListener.onLoadSuccess(a);
+        imageKnifeOption.onLoadListener.onLoadFailed(a);
+      }
+      expect(a).assertEqual(b);
+    })
+  })
+}

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

@@ -217,6 +217,23 @@ export struct ImageKnifeComponent {
     request.load(this.imageKnifeOption.loadSrc)
       .addListener({ callback: (err:BusinessError|string, data:ImageKnifeData) => {
         LogUtil.log('VISIBLE: ImageKnifeComponent request.load callback, err: ' + err);
+        if (err != "" && this.imageKnifeOption.onLoadListener && this.imageKnifeOption.onLoadListener.onLoadFailed) {
+          this.imageKnifeOption.onLoadListener.onLoadFailed(err as string);
+        } else if (err === "" && this.imageKnifeOption.onLoadListener && this.imageKnifeOption.onLoadListener.onLoadSuccess) {
+          let loadData: string | PixelMap | Resource | undefined = undefined;
+          if (data.isPixelMap() && data.drawPixelMap) {
+            loadData = data.drawPixelMap.imagePixelMap;
+          } else if (data.isGIFFrame() && data.drawGIFFrame && data.drawGIFFrame.imageGIFFrames) {
+            loadData = data.drawGIFFrame.imageGIFFrames.toString();
+          } else if (data.isResource() && data.drawResource) {
+            loadData = data.drawResource.imageResource;
+          } else if (data.isString() && data.drawString) {
+            loadData = data.drawString.imageString;
+          }
+          if (loadData) {
+            this.imageKnifeOption.onLoadListener.onLoadSuccess(loadData);
+          }
+        }
         if(data.isGIFFrame()) {
           this.isGif = true
         } else {

library/src/main/ets/components/imageknife/ImageKnifeOption.ets

@@ -68,6 +68,10 @@ export interface HeaderOptions {
   key: string;
   value: string;
 }
+export interface OnLoadCallBack {
+  onLoadSuccess?: (data: string | PixelMap | Resource | undefined) => void;
+  onLoadFailed?: (err: string) => void;
+}
 
 @Observed
 export class ImageKnifeOption {
@@ -152,6 +156,7 @@ export class ImageKnifeOption {
 
   // 设置是否使用应用自定义的方式加载图片
   customGetImage?: (context: Context, src: string) => Promise<DataFetchResult>;
+  onLoadListener?: OnLoadCallBack | undefined;
 
   constructor() {
 

library/src/main/ets/components/imageknife/networkmanage/HttpDownloadClient.ets

@@ -67,8 +67,6 @@ export class HttpDownloadClient implements IDataFetch {
        })
        if ( data == 200) {
          result.data = this.combineArrayBuffers(arrayBuffers);
-       } else {
-         result.error = `HttpDownloadClient has error, http code = ` + JSON.stringify(data);
        }
        console.log('TestCustomDataFetch http onComplete, code = ' + data + ',length = ' + result.data?.byteLength);
      } catch (err) {