diff --git a/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets b/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets index 5683d4d..f895a0b 100644 --- a/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets +++ b/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets @@ -248,6 +248,17 @@ struct IndexFunctionDemo { router.pushUrl({ url: "pages/testGifLoadWithWorkerPage" }); }).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/testManyNetImageLoadWithPage" }); + }).margin({ top: 5, left: 3 }) + Button("测试多张gif加载位置") + .onClick(() => { + router.pushUrl({ url: "pages/testManyGifLoadWithPage" }); + }).margin({ top: 5, left: 3 }) + }.width('100%').height(60).backgroundColor(Color.Pink) } } .width('100%') diff --git a/entry/src/main/ets/pages/testManyGifLoadWithPage.ets b/entry/src/main/ets/pages/testManyGifLoadWithPage.ets new file mode 100644 index 0000000..89ad8a1 --- /dev/null +++ b/entry/src/main/ets/pages/testManyGifLoadWithPage.ets @@ -0,0 +1,108 @@ +/* + * Copyright (C) 2023 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 { ImageKnife, ImageKnifeComponent, ImageKnifeGlobal, ImageKnifeOption } from "@ohos/imageknife" +import worker from '@ohos.worker'; + +let gifUrl = "https://gw.alicdn.com/tfs/TB1E3H5t8Bh1e4jSZFhXXcC9VXa-198-198.gif" + +let data: string[] = [ + 'https://media.giphy.com/media/hVgagDPf1IRFK/giphy.gif', + 'https://placehold.co/600x400/000000/FFFFFF/png', + 'https://s1.aigei.com/src/img/gif/92/922f58ca46c34b3e9947ddd4dc17ec32.gif?imageMogr2/auto-orient/thumbnail/!282x282r/gravity/Center/crop/282x282/quality/85/&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:YRYJJynbOC0Z_Nl7HunjuRr4-Vk=', + 'https://placehold.co/600x400/000000/orange/png', + 'https://s1.aigei.com/src/img/gif/6c/6c907924ef1546d3a593fae3e78b97f6.gif?imageMogr2/auto-orient/thumbnail/!282x282r/gravity/Center/crop/282x282/quality/85/&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:PozGIimx0mj5m69DQ0Z6qWn7mA0=', + 'https://placehold.co/600x400/000000/orange/png?text=Hello+World' +] + +@Entry +@Component +struct TestManyGifLoadWithPage { + private globalGifWorker?: worker.ThreadWorker = undefined + @State p1: PixelMap | undefined = undefined + @State p2: PixelMap | undefined = undefined + @State workerOption: ImageKnifeOption = { + loadSrc: $r('app.media.icon'), + placeholderSrc: $r('app.media.icon_loading'), + errorholderSrc: $r('app.media.icon_failed') + }; + + build() { + Column() { + Text('gif Demo').align(Alignment.Center).fontSize(25).margin(10).fontWeight(FontWeight.Bolder) + Row() { + Column() { + Button('use Origin Image').align(Alignment.Center).fontSize(10).margin(2) + Image(gifUrl).width('100%').height(100).backgroundColor(Color.Blue).objectFit(ImageFit.Contain) + }.width('50%').backgroundColor(Color.Orange) + + Column() { + Button('use ImageKnifeComponent').align(Alignment.Center).fontSize(10).margin(2) + ImageKnifeComponent({ imageKnifeOption: { loadSrc: gifUrl } }) + .width('100%') + .height(100) + .backgroundColor(Color.Orange) + }.width('50%').backgroundColor(Color.Blue) + } + + Row() { + Column() { + Button('use Worker').align(Alignment.Center).fontSize(10).margin(2) + .onClick(() => { + this.workerOption = { + loadSrc: gifUrl, + placeholderSrc: $r('app.media.icon_loading'), + errorholderSrc: $r('app.media.icon_failed') + } + }) + ImageKnifeComponent({ imageKnifeOption: this.workerOption }) + .width('100%') + .height(100) + .backgroundColor(Color.Blue) + }.width('50%').backgroundColor(Color.Orange) + + Column() { + Button('logs').align(Alignment.Center).fontSize(10).margin(2) + Text('logs').width('100%').height(100).backgroundColor(Color.Orange) + }.width('50%').backgroundColor(Color.Blue) + } + + Grid() { + ForEach(data, (url: string) => { + GridItem(){ + ImageKnifeComponent({imageKnifeOption:{ + loadSrc:url + }}).backgroundColor(0x38393D).width(150).height(100) + } + }) + }.rowsGap(2) + .columnsGap(2) + }.width('100%').height('100%').backgroundColor(0xF1F3F5) + } + aboutToAppear(){ + this.globalGifWorker = new worker.ThreadWorker('entry/ets/workers/GifLoadWorker.ts',{ + type:'classic', + name:'ImageKnifeParseGIF' + }) + let imageKnife:ImageKnife | undefined = ImageKnifeGlobal.getInstance().getImageKnife() + if(imageKnife != undefined){ + imageKnife?.setGifWorker(this.globalGifWorker) + } + } + aboutToDisappear(){ + if(this.globalGifWorker){ + this.globalGifWorker.terminate() + } + } +} \ No newline at end of file diff --git a/entry/src/main/ets/pages/testManyNetImageLoadWithPage.ets b/entry/src/main/ets/pages/testManyNetImageLoadWithPage.ets new file mode 100644 index 0000000..180e286 --- /dev/null +++ b/entry/src/main/ets/pages/testManyNetImageLoadWithPage.ets @@ -0,0 +1,108 @@ +/* + * Copyright (C) 2023 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 { ScaleType, ImageKnifeComponent } from "@ohos/imageknife" + +class CommonDataSource 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 TestManyNetImageLoadWithPage { + @State hotCommendList:CommonDataSource = new CommonDataSource([]) + private data:Array = [ + 'http://s.yingshidq.com.cn/cover/longbms/2023/08/11/2159934215_1248_702.jpeg', + 'http://s.yingshidq.com.cn/imags/poster/2022/08/02/165937334218556809.jpeg', + 'http://s.yingshidq.com.cn/cover/longbms/2023/08/10/4350315060_640_360.jpeg', + 'http://s.yingshidq.com.cn/cover/longbms/2023/08/10/3835072893_1248_702.jpeg', + 'http://s.yingshidq.com.cn/cover/longbms/2023/08/10/2821936016_1248_702.jpeg', + 'http://s.yingshidq.com.cn/cover/longbms/2023/08/11/1311714870_1248_702.jpeg', + 'http://s.yingshidq.com.cn/cover/longbms/2023/08/10/4421772097_1248_702.jpeg', + 'http://s.yingshidq.com.cn/cover/longbms/2023/09/05/5898334347_400_225.png', + 'http://s.yingshidq.com.cn/imags/poster/2022/12/06/167031399911862707.jpeg', + 'http://s.yingshidq.com.cn/cover/longbms/2023/08/11/1405851829_1248_702.jpeg', + 'http://s.yingshidq.com.cn/cover/longbms/2023/08/10/3796501624_1248_702.jpeg', + 'http://s.yingshidq.com.cn/cover/longbms/2023/08/10/4202181519_1248_702.jpeg', + 'http://s.yingshidq.com.cn/cover/longbms/2023/08/11/1449894622_1248_702.jpeg', + 'http://s.yingshidq.com.cn/cover/longbms/2023/08/10/3756558151_1248_702.jpeg' + ] + aboutToAppear() { + this.hotCommendList.addData(this.hotCommendList.totalCount(),this.data) + } + + build() { + Scroll() { + Column() { + Grid() { + LazyForEach(this.hotCommendList, (item: string) => { + GridItem() { + ImageKnifeComponent({ + imageKnifeOption: { + loadSrc: item, + placeholderSrc: $r('app.media.icon_loading'), + mainScaleType: ScaleType.CENTER_CROP, + placeholderScaleType: ScaleType.CENTER_CROP + } + }).width('100%').height('100%') + }.width('45%').height(200) + }, (item: string) => JSON.stringify(item)) + } + .columnsTemplate('1fr 1fr') + .columnsGap(8) + .rowsGap(10) + .width('100%') + .hitTestBehavior(HitTestMode.None) + .maxCount(10) + }.margin({ top: 5 }) + } + } +} \ No newline at end of file diff --git a/entry/src/main/resources/base/profile/main_pages.json b/entry/src/main/resources/base/profile/main_pages.json index 87811b4..cd0199c 100644 --- a/entry/src/main/resources/base/profile/main_pages.json +++ b/entry/src/main/resources/base/profile/main_pages.json @@ -31,6 +31,8 @@ "pages/testSingleFrameGifPage", "pages/testGifLoadWithWorkerPage", "pages/OptionTestPage", - "pages/SignatureTestPage" + "pages/SignatureTestPage", + "pages/testManyNetImageLoadWithPage", + "pages/testManyGifLoadWithPage" ] } \ No newline at end of file