caishi
/
ImageKnife
forked from floraachy/ImageKnife
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

!215 【ImageKnife】加载图片支持自定义网络栈和图片加载组件 

Merge pull request !215 from zhanghanyong/master
This commit is contained in:
openharmony_ci 2024-04-23 08:26:42 +00:00 committed by Gitee
parent 906bfe55f1 9ff235a856
commit 5fdc066846
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
14 changed files with 392 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -10,6 +10,7 @@
- imageKnife支持heic测试demo独立页面展示
- drawLifeCycle支持gif图
- ImageKnife支持根据自定义key获取已缓存的图片
- ImageKnife加载图片支持自定义网络栈和图片加载组件
## 2.1.2-rc.12
- 新增gif播放次数功能

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

@ -404,6 +404,14 @@ struct IndexFunctionDemo {
router.pushUrl({ url: 'pages/testImageKnifeNetPlaceholder' });
}).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/testCustomDataFetchClientWithPage' });
}).margin({ top: 5, left: 3 })
}.width('100%').height(60).backgroundColor(Color.Pink)
}
}
.width('100%')

237
entry/src/main/ets/pages/testCustomDataFetchClientWithPage.ets Normal file
View File

@ -0,0 +1,237 @@
/*
* 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 {
CustomDataFetchClient,
DataFetchResult,
DownloadClient,
ImageKnifeComponent,
ImageKnifeGlobal,
ImageKnifeOption,
LogUtil,
ScaleType
} from '@ohos/libraryimageknife';
import http from '@ohos.net.http';
class CommonDataSource <T> implements IDataSource {
private dataArray: T[] = []
private listeners: DataChangeListener[] = []
constructor(element: []) {
this.dataArray = element
}
public getData(index: number) {
return this.dataArray[index]
}
public totalCount(): number {
return this.dataArray.length
}
public addData(index: number, data: T[]): void {
this.dataArray = this.dataArray.concat(data)
this.notifyDataAdd(index)
}
unregisterDataChangeListener(listener: DataChangeListener): void {
const pos = this.listeners.indexOf(listener);
if (pos >= 0) {
this.listeners.splice(pos, 1);
}
}
registerDataChangeListener(listener: DataChangeListener): void {
if (this.listeners.indexOf(listener) < 0) {
this.listeners.push(listener)
}
}
notifyDataAdd(index: number): void {
this.listeners.forEach((listener: DataChangeListener) => {
listener.onDataAdd(index)
})
}
}
@Entry
@Component
struct TestCustomDataFetchClientWithPage {
@State hotCommendList: CommonDataSource<string> = new CommonDataSource<string>([])
@State singleImageKnifeOption: ImageKnifeOption =
{
loadSrc: $r('app.media.icon'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
};
@State isSingleImageVisible: boolean = true;
@State isAllImageVisible: boolean = false;
@State isCustom: boolean = false;
private data: Array<string> = [
"http://img2.xkhouse.com/bbs/hfhouse/data/attachment/forum/corebbs/2009-11/2009113011534566298.jpg",
"http://a.hiphotos.baidu.com/image/pic/item/e824b899a9014c087eb617650e7b02087af4f464.jpg"
]
private addData: Array<string> = [
"http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg",
"http://h.hiphotos.baidu.com/image/pic/item/902397dda144ad340668b847d4a20cf430ad851e.jpg"
]
private cancelData: Array<string> = [
"http://b.hiphotos.baidu.com/image/pic/item/359b033b5bb5c9ea5c0e3c23d139b6003bf3b374.jpg",
"http://a.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a292d2472199d25bc315d607c7c.jpg"
]
aboutToAppear(): void {
this.hotCommendList.addData(this.hotCommendList.totalCount(), this.data)
LogUtil.log('TestCustomDataFetch about to appear.')
}
build() {
Scroll() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Button("单个图片").margin(16).onClick(() => {
LogUtil.log('TestCustomDataFetch click single.');
this.isSingleImageVisible = true;
this.isAllImageVisible = false;
ImageKnifeGlobal.getInstance().getImageKnife()?.replaceDataFetch(new CustomDataFetchClient());
this.singleImageKnifeOption = {
loadSrc: 'http://e.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f7e41f5cfe760e0cf3d6cad6ee.jpg',
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
customGetImage: custom
}
})
Button("全部图片").margin(16).onClick(() => {
LogUtil.log('TestCustomDataFetch click all.');
this.isSingleImageVisible = false;
this.isAllImageVisible = true;
ImageKnifeGlobal.getInstance().getImageKnife()?.replaceDataFetch(new CustomDataFetchClient());
this.hotCommendList.addData(this.hotCommendList.totalCount(), this.addData)
})
Button("取消自定义全部图片").margin(16).onClick(() => {
LogUtil.log('TestCustomDataFetch click cancel.');
this.isSingleImageVisible = false;
this.isAllImageVisible = true;
ImageKnifeGlobal.getInstance().getImageKnife()?.replaceDataFetch(new DownloadClient());
this.hotCommendList.addData(this.hotCommendList.totalCount(), this.cancelData)
})
}
// 单个图片使用自定义网络栈
ImageKnifeComponent({ imageKnifeOption: this.singleImageKnifeOption })
.width(200)
.height(200)
.margin({ top: 50 })
.visibility(this.isSingleImageVisible ? Visibility.Visible : Visibility.None)
// 全部图片使用自定义网络栈
Column() {
Grid() {
LazyForEach(this.hotCommendList, (item: string) => {
GridItem() {
ImageKnifeComponent({
imageKnifeOption: {
loadSrc: item,
placeholderSrc: $r('app.media.icon'),
errorholderSrc: $r('app.media.icon_failed'),
placeholderScaleType: ScaleType.CENTER_CROP,
mainScaleType: ScaleType.CENTER_CROP,
}
}).width('100%').height('100%')
}.width('40%').height(200)
}, (item: string) => JSON.stringify(item))
}
.columnsTemplate('1fr 1fr')
.columnsGap(8)
.rowsGap(10)
.width('100%')
.hitTestBehavior(HitTestMode.None)
.maxCount(10)
}.margin({ top: 5 })
.visibility(this.isAllImageVisible ? Visibility.Visible : Visibility.None)
}
}
.width('100%')
.height('100%')
}
}
@Concurrent
async function custom(context: Context, loadSrc: string): Promise<DataFetchResult> {
let result: DataFetchResult = new DataFetchResult();
try {
let arrayBuffers = new Array<ArrayBuffer>();
let httpRequest = http.createHttp()
httpRequest.on('headersReceive', (header: Object) => {
// 跟服务器连接成功准备下载
})
httpRequest.on('dataReceive', (data: ArrayBuffer) => {
// 下载数据流多次返回
arrayBuffers.push(data);
})
httpRequest.on('dataEnd', () => {
// 下载完毕
})
const resultCode = await httpRequest.requestInStream(loadSrc as string,
{
method: http.RequestMethod.GET,
expectDataType: http.HttpDataType.ARRAY_BUFFER,
connectTimeout: 60000, // 可选 默认60000ms
readTimeout: 0, // 可选, 默认为60000ms
usingProtocol: http.HttpProtocol.HTTP1_1, // 可选,协议类型默认值由系统自动指定
usingCache: false
}).catch((err: Error) => {
result.error = 'TestCustomDataFetchClientWithPage requestInStream error.' + JSON.stringify(err);
})
if (resultCode == 200) {
//let combineArray = this.combineArrayBuffers(arrayBuffers);
// 计算多个ArrayBuffer的总字节大小
let totalByteLength = 0;
for (const arrayBuffer of arrayBuffers) {
totalByteLength += arrayBuffer.byteLength;
}
// 创建一个新的ArrayBuffer
const combinedArrayBuffer = new ArrayBuffer(totalByteLength);
// 创建一个Uint8Array来操作新的ArrayBuffer
const combinedUint8Array = new Uint8Array(combinedArrayBuffer);
// 依次复制每个ArrayBuffer的内容到新的ArrayBuffer中
let offset = 0;
for (const arrayBuffer of arrayBuffers) {
const sourceUint8Array = new Uint8Array(arrayBuffer);
combinedUint8Array.set(sourceUint8Array, offset);
offset += sourceUint8Array.length;
}
result.data = combinedArrayBuffer;
} else {
result.error = 'TestCustomDataFetchClientWithPage error. resultCode = ' + resultCode;
}
console.log('TestCustomDataFetch single onComplete, code = ' + resultCode + ',length = ' + result.data?.byteLength);
} catch (error) {
result.error = 'TestCustomDataFetchClientWithPage error' + error.stack;
}
return result;
}

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

@ -54,6 +54,7 @@
"pages/testStopPlayingGifPage",
"pages/testImageKnifeDataFetch",
"pages/testImageKnifeHeic",
"pages/testImageKnifeNetPlaceholder"
"pages/testImageKnifeNetPlaceholder",
"pages/testCustomDataFetchClientWithPage"
]
}

2
library/index.ets
View File

@ -110,6 +110,8 @@ export {IDataFetch} from './src/main/ets/components/imageknife/networkmanage/IDa
export {ICache} from './src/main/ets/components/imageknife/requestmanage/ICache'
export { FileTypeUtil } from './src/main/ets/components/imageknife/utils/FileTypeUtil'
export { ParseImageUtil } from './src/main/ets/components/imageknife/utils/ParseImageUtil'
export { DownloadClient } from './src/main/ets/components/imageknife/networkmanage/DownloadClient';
export { CustomDataFetchClient } from './src/main/ets/components/imageknife/networkmanage/CustomDataFetchClient';
/**
* svg parse

2
library/src/main/ets/components/imageknife/ImageKnife.ets
View File

@ -680,6 +680,7 @@ export class ImageKnife {
errorholderSrc: this.transformResource(request.errorholderSrc) as PixelMap | MResource | undefined,
retryholderSrc:this.transformResource(request.retryholderSrc) as PixelMap | MResource | undefined,
fallbackSrc: this.transformResource(request.fallbackSrc) as PixelMap | MResource | undefined,
customGetImage: request.customGetImage
}
return data;
}
@ -940,6 +941,7 @@ async function taskExecute(sendData:SendableData,taskData:TaskParams): Promise<P
newRequestOption.isCacheable = sendData.getIsCacheable();
//设置磁盘缓存路径
newRequestOption.diskMemoryCachePath = sendData.getDiskMemoryCachePath();
newRequestOption.customGetImage = taskData.customGetImage;
if (displayProgress) {
newRequestOption.addProgressListener({
asyncSuccess: (percentValue: number) => {

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

@ -216,7 +216,6 @@ export struct ImageKnifeComponent {
return false;
}
})
let realSize:Size = {
width: this.context.width,
height: this.context.height
@ -312,6 +311,9 @@ export struct ImageKnifeComponent {
this.runNextFunction(this.displayRetryholder,data)
}})
}
if (this.imageKnifeOption.customGetImage) {
request.customGetImage = this.imageKnifeOption.customGetImage;
}
}
configHspContext(request: RequestOption){

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

@ -27,6 +27,7 @@ import { RoundCorner } from './transform/RoundedCornersTransformation'
import { ObjectKey } from './ObjectKey'
import common from '@ohos.app.ability.common'
import { Priority } from './RequestOption'
import { DataFetchResult } from './networkmanage/DataFetchResult'
export interface CropCircleWithBorder{
border: number,
@ -145,6 +146,9 @@ export class ImageKnifeOption {
context?: common.UIAbilityContext;
// sizeAnimate?: AnimateParam 由业务自定义不再支持
// 设置是否使用应用自定义的方式加载图片
customGetImage?: (context: Context, src: string) => Promise<DataFetchResult>;
constructor() {
}

3
library/src/main/ets/components/imageknife/RequestOption.ets
View File

@ -59,6 +59,7 @@ import { DiskLruCache } from '../cache/DiskLruCache'
import { SparkMD5 } from '../3rd_party/sparkmd5/spark-md5'
import { FileUtils } from '../cache/FileUtils'
import util from '@ohos.util'
import { DataFetchResult } from './networkmanage/DataFetchResult'
export interface Size {
width: number,
@ -149,6 +150,8 @@ export class RequestOption {
fallbackCacheKey: string = "";
// 自定义缓存关键字
signature?: ObjectKey;
// 设置是否使用应用自定义的方式加载图片
customGetImage?: (context: Context, src: string) => Promise<DataFetchResult>;
// 下载原始文件地址
downloadFilePath: string = "";
//磁盘缓存文件路径

2
library/src/main/ets/components/imageknife/TaskParams.ets
View File

@ -16,6 +16,7 @@ import { ObjectKey } from './ObjectKey';
import { Priority, Size } from '../imageknife/RequestOption'
import common from '@ohos.app.ability.common'
import { MResource } from './utils/MResource';
import { DataFetchResult } from './networkmanage/DataFetchResult';
export class TaskParams {
headers: Map<string, Object> = new Map<string, Object>();
@ -27,4 +28,5 @@ export class TaskParams {
errorholderSrc: PixelMap | MResource | undefined = undefined;
retryholderSrc: PixelMap | MResource | undefined = undefined;
fallbackSrc: PixelMap | MResource | undefined = undefined;
customGetImage?: (context: Context, loadSrc: string) => Promise<DataFetchResult>;
}

113
library/src/main/ets/components/imageknife/networkmanage/CustomDataFetchClient.ets Normal file
View File

@ -0,0 +1,113 @@
/*
* 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 { IDataFetch } from '../networkmanage/IDataFetch'
import { RequestOption } from '../RequestOption'
import { RequestData } from './RequestData'
import { ImageKnifeGlobal } from '../ImageKnifeGlobal'
import common from '@ohos.app.ability.common'
import http from '@ohos.net.http'
import { DataFetchResult } from './DataFetchResult'
@Sendable
export class CustomDataFetchClient implements IDataFetch {
async loadData(request: RequestOption) {
let result: DataFetchResult = new DataFetchResult();
if (!request || typeof request.loadSrc !== 'string') {
result.error = 'CustomDataFetchClient request or loadSrc error.';
return result;
}
// 自定义单个图片的网络栈
if (request.customGetImage) {
return await request.customGetImage(ImageKnifeGlobal.getInstance()
.getHapContext() as common.UIAbilityContext, request.loadSrc);
}
// 所有图片的网络栈
try {
let httpRequest = http.createHttp()
let arrayBuffers = new Array<ArrayBuffer>();
httpRequest.on('headersReceive', (header: Object) => {
// 跟服务器连接成功准备下载
if (request.progressFunc) {
// 进度条为0
request.progressFunc.asyncSuccess(0)
}
})
httpRequest.on('dataReceive', (data: ArrayBuffer) => {
// 下载数据流多次返回
arrayBuffers.push(data);
})
httpRequest.on('dataReceiveProgress', (data: RequestData) => {
// 下载进度
if (data != undefined && (typeof data.receiveSize == 'number') && (typeof data.totalSize == 'number')) {
let percent = Math.round(((data.receiveSize * 1.0) / (data.totalSize * 1.0)) * 100)
if (request.progressFunc) {
request.progressFunc.asyncSuccess(percent)
}
}
})
httpRequest.on('dataEnd', () => {
// 下载完毕
})
const headerObj: Record<string, Object> = {}
request.headers.forEach((value, key) => {
headerObj[key] = value
})
const data = await httpRequest.requestInStream(request.loadSrc as string, {
header: headerObj,
method: http.RequestMethod.GET,
expectDataType: http.HttpDataType.ARRAY_BUFFER,
connectTimeout: 60000, // 可选 默认60000ms
readTimeout: 0, // 可选, 默认为60000ms
usingProtocol: http.HttpProtocol.HTTP1_1, // 可选,协议类型默认值由系统自动指定
usingCache: false
}).catch((err: Error) => {
result.error = 'CustomDataFetchClient has error, http code = ' + JSON.stringify(err);
})
if (data == 200) {
result.data = this.combineArrayBuffers(arrayBuffers);
} else {
result.error = 'CustomDataFetchClient resultCode error, code = ' + data;
}
console.log('TestCustomDataFetch all onComplete, code = ' + data + ',length = ' + result.data?.byteLength);
} catch (err) {
result.error = 'CustomDataFetchClient catch err request uuid =' + request.uuid;
}
return result;
}
combineArrayBuffers(arrayBuffers: ArrayBuffer[]): ArrayBuffer {
// 计算多个ArrayBuffer的总字节大小
let totalByteLength = 0;
for (const arrayBuffer of arrayBuffers) {
totalByteLength += arrayBuffer.byteLength;
}
// 创建一个新的ArrayBuffer
const combinedArrayBuffer = new ArrayBuffer(totalByteLength);
// 创建一个Uint8Array来操作新的ArrayBuffer
const combinedUint8Array = new Uint8Array(combinedArrayBuffer);
// 依次复制每个ArrayBuffer的内容到新的ArrayBuffer中
let offset = 0;
for (const arrayBuffer of arrayBuffers) {
const sourceUint8Array = new Uint8Array(arrayBuffer);
combinedUint8Array.set(sourceUint8Array, offset);
offset += sourceUint8Array.length;
}
return combinedArrayBuffer;
}
}

17
library/src/main/ets/components/imageknife/networkmanage/DownloadClient.ets
View File

@ -35,11 +35,7 @@ export class DownloadClient implements IDataFetch {
async loadData(request: RequestOption): Promise<DataFetchResult> {
if (typeof request.loadSrc == 'string') {
let fileDir:string = (ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).filesDir as string;
let cacheDir:string = (ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).cacheDir as string
if (request.loadSrc.startsWith(fileDir) ||
request.loadSrc.startsWith(cacheDir)) {
if (this.isLocalLoadSrc(ImageKnifeGlobal.getInstance().getHapContext(), request.loadSrc)) {
// 本地沙盒
return this.localFileClient.loadData(request)
} else if (request.loadSrc.startsWith('datashare://') || request.loadSrc.startsWith('file://')) {
@ -54,4 +50,15 @@ export class DownloadClient implements IDataFetch {
return result;
}
}
isLocalLoadSrc(context: Object | undefined, loadSrc: string): boolean {
if (context != undefined) {
let fileDir: string = (context as common.UIAbilityContext).filesDir as string;
let cacheDir: string = (context as common.UIAbilityContext).cacheDir as string
if (loadSrc.startsWith(fileDir) || loadSrc.startsWith(cacheDir)) {
return true;
}
}
return false;
}
}

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

@ -70,6 +70,7 @@ export class HttpDownloadClient implements IDataFetch {
} else {
result.error = `HttpDownloadClient has error, http code = ` + JSON.stringify(data);
}
console.log('TestCustomDataFetch http onComplete, code = ' + data + ',length = ' + result.data?.byteLength);
} catch (err) {
result.error ='HttpDownloadClient catch err request uuid =' + request.uuid;
}

2
sharedlibrary/src/main/ets/Index.ets
View File

@ -110,6 +110,8 @@ export {IDataFetch} from '@ohos/imageknife'
export {ICache} from '@ohos/imageknife'
export { FileTypeUtil } from '@ohos/imageknife'
export { ParseImageUtil } from '@ohos/imageknife'
export { DownloadClient } from '@ohos/imageknife'
export { CustomDataFetchClient } from '@ohos/imageknife'
/**
* svg parse