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-11 10:10:59 +08:00
parent 8d00a54a4f
commit cbc4dd3783
10 changed files with 203 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

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

37
README.md
View File

@ -152,24 +152,25 @@ ImageKnifeComponent({ ImageKnifeOption:
### ImageKnifeOption参数列表
| 参数名称 | 入参内容 | 功能简介 |
|-----------------------|--------------------------------|-----------------|
| loadSrc | string、PixelMap、Resource | 主图展示 |
| placeholderSrc | PixelMap、Resource | 占位图图展示（可选） |
| errorholderSrc | PixelMap、Resource | 错误图展示（可选） |
| objectFit | ImageFit | 主图填充效果（可选） |
| placeholderObjectFit | ImageFit | 占位图填充效果（可选） |
| errorholderObjectFit | ImageFit | 错误图填充效果（可选） |
| writeCacheStrategy | CacheStrategyType | 写入缓存策略(可选) |
| onlyRetrieveFromCache | boolean | 是否跳过网络和本地请求（可选） |
| customGetImage | (context: Context, src: string | 自定义下载图片（可选） | | Resource | 错误占位图数据源 |
| border | BorderOptions | 边框圆角（可选） |
| priority | taskpool.Priority | 加载优先级（可选） |
| context | common.UIAbilityContext | 上下文（可选） |
| progressListener | (progress: number)=>void | 进度（可选） |
| signature | String | 自定义缓存关键字（可选） |
| headerOption | Array<HeaderOptions> | 设置请求头（可选） |
| transformation | PixelMapTransformation | 图片变换（可选） |
| 参数名称 | 入参内容 | 功能简介 |
|-----------------------|---------------------------------------------------|-----------------|
| loadSrc | string、PixelMap、Resource | 主图展示 |
| placeholderSrc | PixelMap、Resource | 占位图图展示（可选） |
| errorholderSrc | PixelMap、Resource | 错误图展示（可选） |
| objectFit | ImageFit | 主图填充效果（可选） |
| placeholderObjectFit | ImageFit | 占位图填充效果（可选） |
| errorholderObjectFit | ImageFit | 错误图填充效果（可选） |
| writeCacheStrategy | CacheStrategyType | 写入缓存策略(可选) |
| onlyRetrieveFromCache | boolean | 是否跳过网络和本地请求（可选） |
| customGetImage | (context: Context, src: string | 自定义下载图片（可选） | | Resource | 错误占位图数据源 |
| border | BorderOptions | 边框圆角（可选） |
| priority | taskpool.Priority | 加载优先级（可选） |
| context | common.UIAbilityContext | 上下文（可选） |
| progressListener | (progress: number)=>void | 进度（可选） |
| signature | String | 自定义缓存关键字（可选） |
| headerOption | Array<HeaderOptions> | 设置请求头（可选） |
| transformation | PixelMapTransformation | 图片变换（可选） |
| onLoadListener | onLoadSuccess: (data: string | PixelMap | undefined) => void、onLoadFailed: (err: string) => void| 监听图片加载成功与失败 |
### ImageKnife接口

6
entry/src/main/ets/pages/Index.ets
View File

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

74
entry/src/main/ets/pages/LoadStatePage.ets Normal file
View File

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

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

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

37
library/src/main/ets/ImageKnifeDispatcher.ets
View File

@ -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,14 +343,23 @@ 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 { //从本地文件获取
let stat = fs.statSync(request.src);
if (stat.size > 0) {
let file = fs.openSync(request.src, fs.OpenMode.READ_ONLY);
resBuf = new ArrayBuffer(stat.size);
fs.readSync(file.fd, resBuf);
fs.closeSync(file);
try {
let stat = fs.statSync(request.src);
if (stat.size > 0) {
let file = fs.openSync(request.src, fs.OpenMode.READ_ONLY);
resBuf = new ArrayBuffer(stat.size);
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) { //从资源文件获取
@ -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();

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

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

1
library/src/main/ets/model/ImageKnifeData.ets
View File

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

63
library/src/test/ImageKnifeOption.test.ets Normal file
View File

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

2
library/src/test/List.test.ets
View File

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