floraachy
/
ImageKnife
mirror of https://gitee.com/openharmony-tpc/ImageKnife.git
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

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

Signed-off-by: 任伟x <renwei79@h-partners.com>
This commit is contained in:
任伟x 2024-05-15 10:47:24 +08:00
parent 39f97e0a41
commit 275ee6bc0a
10 changed files with 178 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

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

1
README.md
View File

@ -178,6 +178,7 @@ ImageKnifeGlobal.getInstance().getImageKnife()?.replaceDataFetch(new CustomDataF
| imageSmoothingQuality | AntiAliasing | 抗锯齿属性配置 |
| autoPlay | boolean | GIF播放暂停控制（可选） |
| customGetImage | (Context, string) | 设置是否使用应用自定义的方式加载图片（可选） |
| onLoadListener | onLoadSuccess: (data: string | PixelMap | Resource | undefined) => void;onLoadFailed: (err: string) => void; | 监听图片加载成功/失败 |
其他参数只需要在ImageKnifeOption对象上按需添加即可。

8
entry/src/main/ets/pages/imageknifeTestCaseIndex.ets
View File

@ -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%')

76
entry/src/main/ets/pages/testImageKnifeLoadState.ets Normal file
View File

@ -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() {
}
}

3
entry/src/main/resources/base/profile/main_pages.json
View File

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

2
entry/src/ohosTest/ets/test/List.test.ets
View File

@ -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();
}

64
entry/src/ohosTest/ets/test/imageknifeOption.test.ets Normal file
View File

@ -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);
})
})
}

17
library/src/main/ets/components/imageknife/ImageKnifeComponent.ets
View File

@ -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 {

5
library/src/main/ets/components/imageknife/ImageKnifeOption.ets
View File

@ -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() {

2
library/src/main/ets/components/imageknife/networkmanage/HttpDownloadClient.ets
View File

@ -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) {