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

子线程网络请求和自定义网络改为异步请求、复用场景清空组件内容 

Signed-off-by: zgf <zenggaofeng2@h-partners.com>
This commit is contained in:
zgf 2024-10-24 17:42:38 +08:00
parent 7f51e9164e
commit a34e20acfa
24 changed files with 527 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
CHANGELOG.md
View File

@ -1,3 +1,12 @@
## 3.2.0-rc.0
- Rollback the old version V1 decorator. V2 decorator will be provided in version 4.x
- The sub-thread network request is changed to asynchronous, thereby increasing the number of concurrent sub-thread network requests
- Set the concurrency through the setMaxRequests interface under the ImageKnife class
- aboutToRecycle life cycle clear image content
## 3.0.3
- Released version 3.0.3
## 3.0.3-rc.0 ## 3.0.3-rc.0
- Custom network method to add request header parameters - Custom network method to add request header parameters

62
README.md
View File

@ -56,12 +56,12 @@ await ImageKnife.getInstance().initFileCache(context, 256, 256 * 1024 * 1024)
``` ```
ImageKnifeComponent({ ImageKnifeComponent({
ImageKnifeOption: new ImageKnifeOption({ ImageKnifeOption:{
loadSrc: $r("app.media.app_icon"), loadSrc: $r("app.media.app_icon"),
placeholderSrc: $r("app.media.loading"), placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"), errorholderSrc: $r("app.media.app_icon"),
objectFit: ImageFit.Auto objectFit: ImageFit.Auto
}) }
}).width(100).height(100) }).width(100).height(100)
``` ```
@ -69,12 +69,12 @@ ImageKnifeComponent({
``` ```
ImageKnifeComponent({ ImageKnifeComponent({
ImageKnifeOption: new ImageKnifeOption({ ImageKnifeOption: {
loadSrc: this.localFile, loadSrc: this.localFile,
placeholderSrc: $r("app.media.loading"), placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"), errorholderSrc: $r("app.media.app_icon"),
objectFit: ImageFit.Auto objectFit: ImageFit.Auto
}) }
}).width(100).height(100) }).width(100).height(100)
``` ```
@ -82,12 +82,12 @@ ImageKnifeComponent({
``` ```
ImageKnifeComponent({ ImageKnifeComponent({
ImageKnifeOption: new ImageKnifeOption({ ImageKnifeOption: {
loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png", loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
placeholderSrc: $r("app.media.loading"), placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"), errorholderSrc: $r("app.media.app_icon"),
objectFit: ImageFit.Auto objectFit: ImageFit.Auto
}) }
}).width(100).height(100) }).width(100).height(100)
``` ```
@ -95,13 +95,13 @@ ImageKnifeComponent({
``` ```
ImageKnifeComponent({ ImageKnifeComponent({
ImageKnifeOption: new ImageKnifeOption({ ImageKnifeOption: {
loadSrc: "https://file.atomgit.com/uploads/user/1704857786989_8994.jpeg", loadSrc: "https://file.atomgit.com/uploads/user/1704857786989_8994.jpeg",
placeholderSrc: $r("app.media.loading"), placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"), errorholderSrc: $r("app.media.app_icon"),
objectFit: ImageFit.Auto, objectFit: ImageFit.Auto,
customGetImage: custom customGetImage: custom
}) }
}).width(100).height(100) }).width(100).height(100)
// Custom implementation of the image acquisition method, such as custom network download。 // Custom implementation of the image acquisition method, such as custom network download。
@ -117,33 +117,33 @@ async function custom(context: Context, src: string | PixelMap | Resource): Prom
``` ```
ImageKnifeComponent({ ImageKnifeComponent({
ImageKnifeOption: new ImageKnifeOption({ ImageKnifeOption: {
loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png", loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
progressListener:(progress:number)=>{console.info("ImageKinfe:: call back progress = " + progress)} progressListener:(progress:number)=>{console.info("ImageKinfe:: call back progress = " + progress)}
}) }
}).width(100).height(100) }).width(100).height(100)
``` ```
#### 6. Setting Border Options #### 6. Setting Border Options
``` ```
ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption( ImageKnifeComponent({ ImageKnifeOption:
{ {
loadSrc: $r("app.media.rabbit"), loadSrc: $r("app.media.rabbit"),
border: {radius:50} border: {radius:50}
}) }
}).width(100).height(100) }).width(100).height(100)
``` ```
#### 7. Setting Image Transformation Options #### 7. Setting Image Transformation Options
``` ```
ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption( ImageKnifeComponent({ ImageKnifeOption:
{ {
loadSrc: $r("app.media.rabbit"), loadSrc: $r("app.media.rabbit"),
border: {radius:50}, border: {radius:50},
transformation: new BlurTransformation(3) transformation: new BlurTransformation(3)
}) }
}).width(100).height(100) }).width(100).height(100)
``` ```
Multiple combined transformation usages: Multiple combined transformation usages:
@ -153,14 +153,14 @@ let transformations: collections.Array<PixelMapTransformation> = new collections
transformations.push(new BlurTransformation(5)); transformations.push(new BlurTransformation(5));
transformations.push(new BrightnessTransformation(0.2)); transformations.push(new BrightnessTransformation(0.2));
ImageKnifeComponent({ ImageKnifeComponent({
imageKnifeOption: new ImageKnifeOption({ imageKnifeOption: {
loadSrc: $r('app.media.pngSample'), loadSrc: $r('app.media.pngSample'),
placeholderSrc: $r("app.media.loading"), placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"), errorholderSrc: $r("app.media.app_icon"),
objectFit: ImageFit.Contain, objectFit: ImageFit.Contain,
border: { radius: { topLeft: 50, bottomRight: 50 } }, // Rounded corner settings border: { radius: { topLeft: 50, bottomRight: 50 } }, // Rounded corner settings
transformation: transformations.length > 0 ? new MultiTransTransformation(transformations) : undefined // Graphic transformation group transformation: transformations.length > 0 ? new MultiTransTransformation(transformations) : undefined // Graphic transformation group
}) }
}).width(300) }).width(300)
.height(300) .height(300)
.rotate ({angle: 90}) // Rotate by 90 degrees. .rotate ({angle: 90}) // Rotate by 90 degrees.
@ -171,12 +171,12 @@ Other transformation-related properties can be stacked to achieve combined trans
Example of circular cropping transformation: Example of circular cropping transformation:
``` ```
ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption( ImageKnifeComponent({ ImageKnifeOption:
{ {
loadSrc: $r('app.media.pngSample'), loadSrc: $r('app.media.pngSample'),
objectFit: ImageFit.Cover, objectFit: ImageFit.Cover,
border: { radius: 150 } border: { radius: 150 }
}) }
}).width(300) }).width(300)
.height(300) .height(300)
``` ```
@ -184,12 +184,12 @@ ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption(
Example of Circular cropping with border transformation: Example of Circular cropping with border transformation:
``` ```
ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption( ImageKnifeComponent({ ImageKnifeOption:
{ {
loadSrc: $r('app.media.pngSample'), loadSrc: $r('app.media.pngSample'),
objectFit: ImageFit.Cover, objectFit: ImageFit.Cover,
border: { radius: 150, color: Color.Red, width: 5 } border: { radius: 150, color: Color.Red, width: 5 }
}) }
}).width(300) }).width(300)
.height(300) .height(300)
``` ```
@ -198,9 +198,9 @@ Example of contrast filtering transformation:
``` ```
ImageKnifeComponent({ ImageKnifeComponent({
imageKnifeOption: new ImageKnifeOption({ imageKnifeOption: {
loadSrc: $r('app.media.pngSample') loadSrc: $r('app.media.pngSample')
}) }
}).width(300) }).width(300)
.height(300) .height(300)
.contrast(12) .contrast(12)
@ -210,9 +210,9 @@ Example of rotation transformation:
``` ```
ImageKnifeComponent({ ImageKnifeComponent({
imageKnifeOption: new ImageKnifeOption({ imageKnifeOption:({
loadSrc: $r('app.media.pngSample') loadSrc: $r('app.media.pngSample')
}) }
}).width(300) }).width(300)
.height(300) .height(300)
.rotate({angle:90}) .rotate({angle:90})
@ -222,7 +222,7 @@ ImageKnifeComponent({
#### 8. Listening for Image Loading Success and Failure #### 8. Listening for Image Loading Success and Failure
``` ```
ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption( ImageKnifeComponent({ ImageKnifeOption:
{ {
loadSrc: $r("app.media.rabbit"), loadSrc: $r("app.media.rabbit"),
onLoadListener:{ onLoadListener:{
@ -241,27 +241,27 @@ ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
console.info(err) console.info(err)
} }
} }
}) }
}).width(100).height(100) }).width(100).height(100)
``` ```
#### 9. Use of syncLoad #### 9. Use of syncLoad
**syncLoad** sets whether to load the image synchronously. By default, the image is loaded asynchronously. When loading a small image, you are advised to set **syncLoad** to **true** so that the image loading can be quickly completed on the main thread. **syncLoad** sets whether to load the image synchronously. By default, the image is loaded asynchronously. When loading a small image, you are advised to set **syncLoad** to **true** so that the image loading can be quickly completed on the main thread.
``` ```
ImageKnifeComponent({ ImageKnifeComponent({
imageKnifeOption:new ImageKnifeOption({ imageKnifeOption:{
loadSrc:$r("app.media.pngSample"), loadSrc:$r("app.media.pngSample"),
placeholderSrc:$r("app.media.loading") placeholderSrc:$r("app.media.loading")
}),syncLoad:true },syncLoad:true
}) })
``` ```
#### 10. Use of ImageKnifeAnimatorComponent #### 10. Use of ImageKnifeAnimatorComponent
``` ```
ImageKnifeAnimatorComponent({ ImageKnifeAnimatorComponent({
imageKnifeOption:new ImageKnifeOption({ imageKnifeOption:{
loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658", loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
placeholderSrc:$r('app.media.loading'), placeholderSrc:$r('app.media.loading'),
errorholderSrc:$r('app.media.failed') errorholderSrc:$r('app.media.failed')
}),animatorOption:this.animatorOption },animatorOption:this.animatorOption
}).width(300).height(300).backgroundColor(Color.Orange).margin({top:30}) }).width(300).height(300).backgroundColor(Color.Orange).margin({top:30})
``` ```
#### Reuse Scenario #### Reuse Scenario
@ -359,7 +359,7 @@ Method 2: Set the third-party HAR as a dependency in the **oh-package.json5** fi
This project has been verified in the following version: This project has been verified in the following version:
DevEco Studio: 5.0 Canary3 (5.0.3.502), SDK: API 12 (5.0.0.31) DevEco Studio: NEXT Beta1-5.0.3.806, SDK: API12 Release(5.0.0.66)
## How to Contribute ## How to Contribute

62
README_zh.md
View File

@ -56,12 +56,12 @@ await ImageKnife.getInstance().initFileCache(context, 256, 256 * 1024 * 1024)
``` ```
ImageKnifeComponent({ ImageKnifeComponent({
ImageKnifeOption: new ImageKnifeOption({ ImageKnifeOption: {
loadSrc: $r("app.media.app_icon"), loadSrc: $r("app.media.app_icon"),
placeholderSrc: $r("app.media.loading"), placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"), errorholderSrc: $r("app.media.app_icon"),
objectFit: ImageFit.Auto objectFit: ImageFit.Auto
}) }
}).width(100).height(100) }).width(100).height(100)
``` ```
@ -69,12 +69,12 @@ ImageKnifeComponent({
``` ```
ImageKnifeComponent({ ImageKnifeComponent({
ImageKnifeOption: new ImageKnifeOption({ ImageKnifeOption: {
loadSrc: this.localFile, loadSrc: this.localFile,
placeholderSrc: $r("app.media.loading"), placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"), errorholderSrc: $r("app.media.app_icon"),
objectFit: ImageFit.Auto objectFit: ImageFit.Auto
}) }
}).width(100).height(100) }).width(100).height(100)
``` ```
@ -82,12 +82,12 @@ ImageKnifeComponent({
``` ```
ImageKnifeComponent({ ImageKnifeComponent({
ImageKnifeOption: new ImageKnifeOption({ ImageKnifeOption: {
loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png", loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
placeholderSrc: $r("app.media.loading"), placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"), errorholderSrc: $r("app.media.app_icon"),
objectFit: ImageFit.Auto objectFit: ImageFit.Auto
}) }
}).width(100).height(100) }).width(100).height(100)
``` ```
@ -95,13 +95,13 @@ ImageKnifeComponent({
``` ```
ImageKnifeComponent({ ImageKnifeComponent({
ImageKnifeOption: new ImageKnifeOption({ ImageKnifeOption: {
loadSrc: "https://file.atomgit.com/uploads/user/1704857786989_8994.jpeg", loadSrc: "https://file.atomgit.com/uploads/user/1704857786989_8994.jpeg",
placeholderSrc: $r("app.media.loading"), placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"), errorholderSrc: $r("app.media.app_icon"),
objectFit: ImageFit.Auto, objectFit: ImageFit.Auto,
customGetImage: custom customGetImage: custom
}) }
}).width(100).height(100) }).width(100).height(100)
// 自定义实现图片获取方法，如自定义网络下载 // 自定义实现图片获取方法，如自定义网络下载
@ -117,33 +117,33 @@ async function custom(context: Context, src: string | PixelMap | Resource): Prom
``` ```
ImageKnifeComponent({ ImageKnifeComponent({
ImageKnifeOption: new ImageKnifeOption({ ImageKnifeOption: {
loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png", loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
progressListener:(progress:number)=>{console.info("ImageKinfe:: call back progress = " + progress)} progressListener:(progress:number)=>{console.info("ImageKinfe:: call back progress = " + progress)}
}) }
}).width(100).height(100) }).width(100).height(100)
``` ```
#### 6.支持option传入border，设置边框，圆角 #### 6.支持option传入border，设置边框，圆角
``` ```
ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption( ImageKnifeComponent({ ImageKnifeOption:
{ {
loadSrc: $r("app.media.rabbit"), loadSrc: $r("app.media.rabbit"),
border: {radius:50} border: {radius:50}
}) }
}).width(100).height(100) }).width(100).height(100)
``` ```
#### 7.支持option图片变换 #### 7.支持option图片变换
``` ```
ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption( ImageKnifeComponent({ ImageKnifeOption:
{ {
loadSrc: $r("app.media.rabbit"), loadSrc: $r("app.media.rabbit"),
border: {radius:50}, border: {radius:50},
transformation: new BlurTransformation(3) transformation: new BlurTransformation(3)
}) }
}).width(100).height(100) }).width(100).height(100)
``` ```
多种组合变换用法 多种组合变换用法
@ -153,14 +153,14 @@ let transformations: collections.Array<PixelMapTransformation> = new collections
transformations.push(new BlurTransformation(5)); transformations.push(new BlurTransformation(5));
transformations.push(new BrightnessTransformation(0.2)); transformations.push(new BrightnessTransformation(0.2));
ImageKnifeComponent({ ImageKnifeComponent({
imageKnifeOption: new ImageKnifeOption({ imageKnifeOption: {
loadSrc: $r('app.media.pngSample'), loadSrc: $r('app.media.pngSample'),
placeholderSrc: $r("app.media.loading"), placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"), errorholderSrc: $r("app.media.app_icon"),
objectFit: ImageFit.Contain, objectFit: ImageFit.Contain,
border: { radius: { topLeft: 50, bottomRight: 50 } }, // 圆角设置 border: { radius: { topLeft: 50, bottomRight: 50 } }, // 圆角设置
transformation: transformations.length > 0 ? new MultiTransTransformation(transformations) : undefined // 图形变换组 transformation: transformations.length > 0 ? new MultiTransTransformation(transformations) : undefined // 图形变换组
}) }
}).width(300) }).width(300)
.height(300) .height(300)
.rotate({ angle: 90 }) // 旋转90度 .rotate({ angle: 90 }) // 旋转90度
@ -171,12 +171,12 @@ ImageKnifeComponent({
圆形裁剪变换示例 圆形裁剪变换示例
``` ```
ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption( ImageKnifeComponent({ ImageKnifeOption:
{ {
loadSrc: $r('app.media.pngSample'), loadSrc: $r('app.media.pngSample'),
objectFit: ImageFit.Cover, objectFit: ImageFit.Cover,
border: { radius: 150 } border: { radius: 150 }
}) }
}).width(300) }).width(300)
.height(300) .height(300)
``` ```
@ -184,12 +184,12 @@ ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption(
圆形裁剪带边框变换示例 圆形裁剪带边框变换示例
``` ```
ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption( ImageKnifeComponent({ ImageKnifeOption:
{ {
loadSrc: $r('app.media.pngSample'), loadSrc: $r('app.media.pngSample'),
objectFit: ImageFit.Cover, objectFit: ImageFit.Cover,
border: { radius: 150, color: Color.Red, width: 5 } border: { radius: 150, color: Color.Red, width: 5 }
}) }
}).width(300) }).width(300)
.height(300) .height(300)
``` ```
@ -198,9 +198,9 @@ ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption(
``` ```
ImageKnifeComponent({ ImageKnifeComponent({
imageKnifeOption: new ImageKnifeOption({ imageKnifeOption: {
loadSrc: $r('app.media.pngSample') loadSrc: $r('app.media.pngSample')
}) }
}).width(300) }).width(300)
.height(300) .height(300)
.contrast(12) .contrast(12)
@ -210,9 +210,9 @@ ImageKnifeComponent({
``` ```
ImageKnifeComponent({ ImageKnifeComponent({
imageKnifeOption: new ImageKnifeOption({ imageKnifeOption: {
loadSrc: $r('app.media.pngSample') loadSrc: $r('app.media.pngSample')
}) }
}).width(300) }).width(300)
.height(300) .height(300)
.rotate({angle:90}) .rotate({angle:90})
@ -222,7 +222,7 @@ ImageKnifeComponent({
#### 8.监听图片加载成功与失败 #### 8.监听图片加载成功与失败
``` ```
ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption( ImageKnifeComponent({ ImageKnifeOption:
{ {
loadSrc: $r("app.media.rabbit"), loadSrc: $r("app.media.rabbit"),
onLoadListener:{ onLoadListener:{
@ -241,27 +241,27 @@ ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
console.info(err) console.info(err)
} }
} }
}) }
}).width(100).height(100) }).width(100).height(100)
``` ```
#### 9.ImageKnifeComponent - syncLoad #### 9.ImageKnifeComponent - syncLoad
设置是否同步加载图片，默认是异步加载。建议加载尺寸较小的Resource图片时将syncLoad设为true，因为耗时较短，在主线程上执行即可 设置是否同步加载图片，默认是异步加载。建议加载尺寸较小的Resource图片时将syncLoad设为true，因为耗时较短，在主线程上执行即可
``` ```
ImageKnifeComponent({ ImageKnifeComponent({
imageKnifeOption:new ImageKnifeOption({ imageKnifeOption:{
loadSrc:$r("app.media.pngSample"), loadSrc:$r("app.media.pngSample"),
placeholderSrc:$r("app.media.loading") placeholderSrc:$r("app.media.loading")
}),syncLoad:true },syncLoad:true
}) })
``` ```
#### 10.ImageKnifeAnimatorComponent 示例 #### 10.ImageKnifeAnimatorComponent 示例
``` ```
ImageKnifeAnimatorComponent({ ImageKnifeAnimatorComponent({
imageKnifeOption:new ImageKnifeOption({ imageKnifeOption: {
loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658", loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
placeholderSrc:$r('app.media.loading'), placeholderSrc:$r('app.media.loading'),
errorholderSrc:$r('app.media.failed') errorholderSrc:$r('app.media.failed')
}),animatorOption:this.animatorOption },animatorOption:this.animatorOption
}).width(300).height(300).backgroundColor(Color.Orange).margin({top:30}) }).width(300).height(300).backgroundColor(Color.Orange).margin({top:30})
``` ```
#### 复用场景 #### 复用场景
@ -361,7 +361,7 @@ ImageKnifeAnimatorComponent({
## 约束与限制 ## 约束与限制
在下述版本验证通过： 在下述版本验证通过：
DevEco Studio 5.0 Canary3（5.0.3.502）--SDK:API12 (5.0.0.31) DevEco Studio: NEXT Beta1-5.0.3.806, SDK: API12 Release(5.0.0.66)
## 贡献代码 ## 贡献代码

78
entry/src/main/ets/pages/CustomNetImagePage.ets Normal file
View File

@ -0,0 +1,78 @@
/*
* 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 { InfoItem } from './model/DataSourcePrefetching';
import { PageViewModel } from './model/PageViewModel';
import { ImageKnifeComponent, ImageKnife } from '@ohos/libraryimageknife';
import { CommonDataSource, GetSession } from './model/CommonDataSource';
import { rcp } from '@kit.RemoteCommunicationKit';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
export struct CustomNetImagePage {
@State hotCommendList:CommonDataSource<InfoItem> = new CommonDataSource<InfoItem>([])
aboutToAppear(): void {
ImageKnife.getInstance().setMaxRequests(32)
this.hotCommendList.addData(this.hotCommendList.totalCount(),PageViewModel.getItems())
}
aboutToDisappear(): void {
ImageKnife.getInstance().setMaxRequests(8)
}
build() {
Column() {
WaterFlow() {
LazyForEach(this.hotCommendList,(item: InfoItem)=>{
FlowItem() {
Column(){
ImageKnifeComponent({
imageKnifeOption: {
loadSrc: item.albumUrl,
placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.failed"),
customGetImage:custom
}
}).width("50%").height(200)
}
}.height(200)
.backgroundColor("#95efd2")
},(item: string) => item)
}.columnsTemplate("1fr 1fr")
.columnsGap(10)
.rowsGap(5)
.backgroundColor(0xFAEEE0)
.width("100%").height("100%")
}
}
}
// 自定义下载方法
@Concurrent
async function custom(context: Context, src: string | PixelMap | Resource,headers?: Record<string,Object>): Promise<ArrayBuffer | undefined> {
return new Promise((resolve,reject)=>{
if (typeof src == "string") {
let session = GetSession.session
let req = new rcp.Request(src,"GET");
session.fetch(req).then((response)=>{
if(response.statusCode == 200) {
let buffer = response.body
resolve(buffer)
} else {
reject("rcp code:"+response.statusCode)
}
}).catch((err:BusinessError)=>{
reject("error rcp src:"+src+",err:"+JSON.stringify(err))
})
}
})
}

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

@ -45,11 +45,21 @@ struct Index {
uri: 'pages/PrefetchAndCacheCount', uri: 'pages/PrefetchAndCacheCount',
}); });
}) })
Button($r('app.string.request_concurrency')).margin({top:10}).onClick(()=>{
router.push({
uri: 'pages/SetMaxRequestPage',
});
})
Button($r('app.string.Test_multiple_images')).margin({top:10}).onClick(()=>{ Button($r('app.string.Test_multiple_images')).margin({top:10}).onClick(()=>{
router.push({ router.push({
uri: 'pages/TestCommonImage', uri: 'pages/TestCommonImage',
}); });
}) })
Button($r('app.string.Customize_RCP_network')).margin({top:10}).onClick(()=>{
router.push({
uri: 'pages/CustomNetImagePage',
});
})
Button($r('app.string.Test_Task_error')).margin({top:10}).onClick(()=>{ Button($r('app.string.Test_Task_error')).margin({top:10}).onClick(()=>{
router.push({ router.push({
uri: 'pages/TestTaskResourcePage', uri: 'pages/TestTaskResourcePage',

2
entry/src/main/ets/pages/LoadStatePage.ets
View File

@ -109,7 +109,7 @@ struct LoadStatePage {
} }
// 自定义下载方法 // 自定义下载方法
@Concurrent @Concurrent
async function custom(context: Context, src: string | PixelMap | Resource): Promise<ArrayBuffer | undefined> { async function custom(context: Context, src: string | PixelMap | Resource,headers?: Record<string,Object>): Promise<ArrayBuffer | undefined> {
console.info("ImageKnife:: custom download：" + src) console.info("ImageKnife:: custom download：" + src)
// 举例写死从本地文件读取，也可以自己请求网络图片 // 举例写死从本地文件读取，也可以自己请求网络图片
return undefined return undefined

55
entry/src/main/ets/pages/MaxRequest1.ets Normal file
View File

@ -0,0 +1,55 @@
/*
* 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,ImageKnife } from '@ohos/libraryimageknife';
import { CommonDataSource } from './model/CommonDataSource';
@Entry
@Component
struct MaxRequest1 {
@State hotCommendList:CommonDataSource<string> = new CommonDataSource<string>([])
private data: Array<string> = []
aboutToAppear(): void {
ImageKnife.getInstance().setMaxRequests(8)
for (let index = 0; index < 200; index++) {
this.data.push(`https://img-blog.csdn.net/20140514114029140?${index}`)
}
this.hotCommendList.addData(this.hotCommendList.totalCount(),this.data)
}
build() {
Column() {
WaterFlow() {
LazyForEach(this.hotCommendList,(item: string)=>{
FlowItem() {
Column(){
ImageKnifeComponent({
imageKnifeOption: {
loadSrc: item,
placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.failed"),
}
}).width("50%").height(160)
}
}.height(200)
.backgroundColor("#95efd2")
},(item: string) => item)
}.columnsTemplate("1fr 1fr")
.cachedCount(8)
.columnsGap(10)
.rowsGap(5)
.backgroundColor(0xFAEEE0)
.width("100%").height("100%")
}
}
}

55
entry/src/main/ets/pages/MaxRequest2.ets Normal file
View File

@ -0,0 +1,55 @@
/*
* 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,ImageKnife } from '@ohos/libraryimageknife';
import { CommonDataSource } from './model/CommonDataSource';
@Entry
@Component
struct MaxRequest2 {
@State hotCommendList:CommonDataSource<string> = new CommonDataSource<string>([])
private data: Array<string> = []
aboutToAppear(): void {
ImageKnife.getInstance().setMaxRequests(20)
for (let index = 200; index < 400; index++) {
this.data.push(`https://img-blog.csdn.net/20140514114029140?${index}`)
}
this.hotCommendList.addData(this.hotCommendList.totalCount(),this.data)
}
build() {
Column() {
WaterFlow() {
LazyForEach(this.hotCommendList,(item: string)=>{
FlowItem() {
Column(){
ImageKnifeComponent({
imageKnifeOption: {
loadSrc: item,
placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.failed"),
}
}).width("50%").height(160)
}
}.height(200)
.backgroundColor("#95efd2")
},(item: string) => item)
}.columnsTemplate("1fr 1fr")
.cachedCount(20)
.columnsGap(10)
.rowsGap(5)
.backgroundColor(0xFAEEE0)
.width("100%").height("100%")
}
}
}

55
entry/src/main/ets/pages/MaxRequest3.ets Normal file
View File

@ -0,0 +1,55 @@
/*
* 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,ImageKnife } from '@ohos/libraryimageknife';
import { CommonDataSource } from './model/CommonDataSource';
@Entry
@Component
struct MaxRequest3 {
@State hotCommendList:CommonDataSource<string> = new CommonDataSource<string>([])
private data: Array<string> = []
aboutToAppear(): void {
ImageKnife.getInstance().setMaxRequests(32)
for (let index = 400; index < 600; index++) {
this.data.push(`https://img-blog.csdn.net/20140514114029140?${index}`)
}
this.hotCommendList.addData(this.hotCommendList.totalCount(),this.data)
}
build() {
Column() {
WaterFlow() {
LazyForEach(this.hotCommendList,(item: string)=>{
FlowItem() {
Column(){
ImageKnifeComponent({
imageKnifeOption: {
loadSrc: item,
placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.failed"),
}
}).width("50%").height(160)
}
}.height(200)
.backgroundColor("#95efd2")
},(item: string) => item)
}.columnsTemplate("1fr 1fr")
.cachedCount(40)
.columnsGap(10)
.rowsGap(5)
.backgroundColor(0xFAEEE0)
.width("100%").height("100%")
}
}
}

23
entry/src/main/ets/pages/SetMaxRequestPage.ets Normal file
View File

@ -0,0 +1,23 @@
import { router } from '@kit.ArkUI'
@Entry
@Component
struct SetMaxRequestPage {
build() {
Column() {
Button("maxRequest = 8")
.onClick(()=>{
router.pushUrl({url:"pages/MaxRequest1"})
})
Button("maxRequest = 20")
.onClick(()=>{
router.pushUrl({url:"pages/MaxRequest2"})
}).margin({top:20})
Button("maxRequest = 32")
.onClick(()=>{
router.pushUrl({url:"pages/MaxRequest2"})
}).margin({top:20})
}.width("100%")
.height("100%")
}
}

5
entry/src/main/ets/pages/SingleImage.ets
View File

@ -128,10 +128,11 @@ struct SingleImage {
// 自定义下载方法 // 自定义下载方法
@Concurrent @Concurrent
async function custom(context: Context, src: string | PixelMap | Resource,headers?: Record<string, Object>): Promise<ArrayBuffer | undefined> { async function custom(context: Context, src: string | PixelMap | Resource,headers?: Record<string,Object>): Promise<ArrayBuffer | undefined> {
let refer = headers!["refer"] as string let refer = headers!["refer"] as string
console.info("ImageKnife:: custom download：" + src,"refer:"+refer) console.info("ImageKnife:: custom download：" + src,"refer:"+refer)
// 举例写死从本地文件读取，也可以自己请求网络图片 // 举例写死从本地文件读取，也可以自己请求网络图片
return context.resourceManager.getMediaContentSync($r("app.media.startIcon").id).buffer as ArrayBuffer let buffer = context.resourceManager.getMediaContentSync($r("app.media.startIcon").id).buffer as ArrayBuffer
return buffer
} }

5
entry/src/main/ets/pages/TestSetCustomImagePage.ets
View File

@ -60,8 +60,9 @@ struct TestSetCustomImagePage {
} }
} }
@Concurrent @Concurrent
async function custom(context: Context, src: string | PixelMap | Resource): Promise<ArrayBuffer | undefined> { async function custom(context: Context, src: string | PixelMap | Resource,headers?: Record<string,Object>): Promise<ArrayBuffer | undefined> {
console.info("ImageKnife:: custom download：" + src) console.info("ImageKnife:: custom download：" + src)
// 举例写死从本地文件读取，也可以自己请求网络图片 // 举例写死从本地文件读取，也可以自己请求网络图片
return context.resourceManager.getMediaContentSync($r("app.media.pngSample").id).buffer as ArrayBuffer let buffer = context.resourceManager.getMediaContentSync($r("app.media.pngSample").id).buffer as ArrayBuffer
return buffer
} }

6
entry/src/main/ets/pages/model/CommonDataSource.ets
View File

@ -12,6 +12,9 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import { statfs } from '@kit.CoreFileKit'
import { rcp } from '@kit.RemoteCommunicationKit'
export class CommonDataSource <T> implements IDataSource { export class CommonDataSource <T> implements IDataSource {
private dataArray: T[] = [] private dataArray: T[] = []
private listeners: DataChangeListener[] = [] private listeners: DataChangeListener[] = []
@ -51,4 +54,7 @@ export class CommonDataSource <T> implements IDataSource {
listener.onDataAdd(index) listener.onDataAdd(index)
}) })
} }
}
export class GetSession {
static session:rcp.Session = rcp.createSession()
} }

8
entry/src/main/resources/base/element/string.json
View File

@ -503,6 +503,14 @@
{ {
"name": "disk", "name": "disk",
"value": "Disk" "value": "Disk"
},
{
"name": "Customize_RCP_network",
"value": "Customize RCP network request"
},
{
"name": "request_concurrency",
"value": "Set request concurrency"
} }
] ]
} }

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

@ -31,6 +31,11 @@
"pages/PrefetchAndPreload", "pages/PrefetchAndPreload",
"pages/TestCacheDataPage", "pages/TestCacheDataPage",
"pages/TestChangeColorPage", "pages/TestChangeColorPage",
"pages/TestLoadCancelListenerPage" "pages/TestLoadCancelListenerPage",
"pages/CustomNetImagePage",
"pages/SetMaxRequestPage",
"pages/MaxRequest1",
"pages/MaxRequest2",
"pages/MaxRequest3"
] ]
} }

8
entry/src/main/resources/zh_CN/element/string.json
View File

@ -499,6 +499,14 @@
{ {
"name": "disk", "name": "disk",
"value": "磁盘" "value": "磁盘"
},
{
"name": "Customize_RCP_network",
"value": "自定义rcp网络请求"
},
{
"name": "request_concurrency",
"value": "设置请求并发度"
} }
] ]
} }

2
library/oh-package.json5
View File

@ -14,7 +14,7 @@
"main": "index.ets", "main": "index.ets",
"repository": "https://gitee.com/openharmony-tpc/ImageKnife", "repository": "https://gitee.com/openharmony-tpc/ImageKnife",
"type": "module", "type": "module",
"version": "3.0.3-rc.0", "version": "3.2.0-rc.0",
"dependencies": { "dependencies": {
"@ohos/gpu_transform": "^1.0.2" "@ohos/gpu_transform": "^1.0.2"
}, },

6
library/src/main/ets/ImageKnife.ets
View File

@ -38,7 +38,7 @@ export class ImageKnife {
private _isRequestInSubThread: boolean = true; private _isRequestInSubThread: boolean = true;
//定义全局网络请求header map //定义全局网络请求header map
headerMap: Map<string, Object> = new Map<string, Object>(); headerMap: Map<string, Object> = new Map<string, Object>();
customGetImage: ((context: Context, src: string | PixelMap | Resource) => Promise<ArrayBuffer | undefined>) | undefined = undefined customGetImage: ((context: Context, src: string | PixelMap | Resource,headers?: Record<string,Object>) => Promise<ArrayBuffer | undefined>) | undefined = undefined
public static getInstance(): ImageKnife { public static getInstance(): ImageKnife {
if (!ImageKnife.instance) { if (!ImageKnife.instance) {
ImageKnife.instance = new ImageKnife(); ImageKnife.instance = new ImageKnife();
@ -482,10 +482,10 @@ export class ImageKnife {
* 全局设置自定义下载 * 全局设置自定义下载
* @param customGetImage 自定义请求函数 * @param customGetImage 自定义请求函数
*/ */
setCustomGetImage(customGetImage?: (context: Context, src: string | PixelMap | Resource,headers?: Record<string, Object>) => Promise<ArrayBuffer | undefined>) { setCustomGetImage(customGetImage?: (context: Context, src: string | PixelMap | Resource,headers?: Record<string,Object>) => Promise<ArrayBuffer | undefined>) {
this.customGetImage = customGetImage this.customGetImage = customGetImage
} }
getCustomGetImage(): undefined | ((context: Context, src: string | PixelMap | Resource,headers?: Record<string, Object>) => Promise<ArrayBuffer | undefined>){ getCustomGetImage(): undefined | ((context: Context, src: string | PixelMap | Resource,headers?: Record<string,Object>) => Promise<ArrayBuffer | undefined>){
return this.customGetImage return this.customGetImage
} }
} }

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

@ -189,6 +189,16 @@ export class ImageKnifeDispatcher {
if(request.customGetImage == undefined) { if(request.customGetImage == undefined) {
request.customGetImage = ImageKnife.getInstance().getCustomGetImage() request.customGetImage = ImageKnife.getInstance().getCustomGetImage()
} }
emitter.on(Constants.CALLBACK_EMITTER + memoryKey,(data)=>{
emitter.off(Constants.CALLBACK_EMITTER + memoryKey)
let res = data?.data?.value as RequestJobResult | undefined
this.doTaskCallback(res, requestList!, currentRequest, memoryKey, imageSrc, requestSource,isAnimator);
if (isWatchProgress){
emitter.off(Constants.PROGRESS_EMITTER + memoryKey)
}
LogUtil.log("ImageKnife_DataTime_getAndShowImage_execute.end:"+currentRequest.imageKnifeOption.loadSrc)
LogUtil.log("ImageKnife_DataTime_getAndShowImage.end:"+currentRequest.imageKnifeOption.loadSrc)
})
if (ImageKnife.getInstance().isRequestInSubThread){ if (ImageKnife.getInstance().isRequestInSubThread){
// 启动线程下载和解码主图 // 启动线程下载和解码主图
LogUtil.log("ImageKnife_DataTime_getAndShowImage_Task.start:" + currentRequest.imageKnifeOption.loadSrc) LogUtil.log("ImageKnife_DataTime_getAndShowImage_Task.start:" + currentRequest.imageKnifeOption.loadSrc)
@ -202,13 +212,14 @@ export class ImageKnifeDispatcher {
LogUtil.log("ImageKnife_DataTime_getAndShowImage_execute.start(subthread):" + currentRequest.imageKnifeOption.loadSrc) LogUtil.log("ImageKnife_DataTime_getAndShowImage_execute.start(subthread):" + currentRequest.imageKnifeOption.loadSrc)
taskpool.execute(task).then((res: Object) => { taskpool.execute(task).then((res: Object) => {
this.doTaskCallback(res as RequestJobResult | undefined, requestList!, currentRequest, memoryKey, imageSrc, requestSource,isAnimator); // this.doTaskCallback(res as RequestJobResult | undefined, requestList!, currentRequest, memoryKey, imageSrc, requestSource,isAnimator);
if (isWatchProgress){ // if (isWatchProgress){
emitter.off(Constants.PROGRESS_EMITTER + memoryKey) // emitter.off(Constants.PROGRESS_EMITTER + memoryKey)
} // }
LogUtil.log("ImageKnife_DataTime_getAndShowImage_execute.end:"+currentRequest.imageKnifeOption.loadSrc) // LogUtil.log("ImageKnife_DataTime_getAndShowImage_execute.end:"+currentRequest.imageKnifeOption.loadSrc)
LogUtil.log("ImageKnife_DataTime_getAndShowImage.end:"+currentRequest.imageKnifeOption.loadSrc) // LogUtil.log("ImageKnife_DataTime_getAndShowImage.end:"+currentRequest.imageKnifeOption.loadSrc)
}).catch((err: BusinessError) => { }).catch((err: BusinessError) => {
emitter.off(Constants.CALLBACK_EMITTER + memoryKey)
LogUtil.error("Fail to requestJob in sub thread src=" + imageSrc + " err=" + err) LogUtil.error("Fail to requestJob in sub thread src=" + imageSrc + " err=" + err)
LogUtil.log("ImageKnife_DataTime_getAndShowImage.end:" + currentRequest.imageKnifeOption.loadSrc) LogUtil.log("ImageKnife_DataTime_getAndShowImage.end:" + currentRequest.imageKnifeOption.loadSrc)
if (isWatchProgress){ if (isWatchProgress){
@ -219,11 +230,12 @@ export class ImageKnifeDispatcher {
}) })
} else { //主线程请求 } else { //主线程请求
LogUtil.log("ImageKnife_DataTime_getAndShowImage_execute.start(mainthread):" + currentRequest.imageKnifeOption.loadSrc) LogUtil.log("ImageKnife_DataTime_getAndShowImage_execute.start(mainthread):" + currentRequest.imageKnifeOption.loadSrc)
requestJob(request, requestList).then((res: RequestJobResult | undefined) => { requestJob(request, requestList).then(() => {
this.doTaskCallback(res, requestList!, currentRequest, memoryKey, imageSrc, requestSource,isAnimator); // this.doTaskCallback(res, requestList!, currentRequest, memoryKey, imageSrc, requestSource,isAnimator);
LogUtil.log("ImageKnife_DataTime_getAndShowImage_execute.end:"+currentRequest.imageKnifeOption.loadSrc) // LogUtil.log("ImageKnife_DataTime_getAndShowImage_execute.end:"+currentRequest.imageKnifeOption.loadSrc)
LogUtil.log("ImageKnife_DataTime_getAndShowImage.end:"+currentRequest.imageKnifeOption.loadSrc) // LogUtil.log("ImageKnife_DataTime_getAndShowImage.end:"+currentRequest.imageKnifeOption.loadSrc)
}).catch((err: BusinessError) => { }).catch((err: BusinessError) => {
emitter.off(Constants.CALLBACK_EMITTER + memoryKey)
LogUtil.error("Fail to requestJob in main thread src=" + imageSrc + " err=" + err) LogUtil.error("Fail to requestJob in main thread src=" + imageSrc + " err=" + err)
LogUtil.log("ImageKnife_DataTime_getAndShowImage.end:" + currentRequest.imageKnifeOption.loadSrc) LogUtil.log("ImageKnife_DataTime_getAndShowImage.end:" + currentRequest.imageKnifeOption.loadSrc)
this.executingJobMap.remove(memoryKey); this.executingJobMap.remove(memoryKey);
@ -392,44 +404,15 @@ export class ImageKnifeDispatcher {
* @returns * @returns
*/ */
@Concurrent @Concurrent
async function requestJob(request: RequestJobRequest, requestList?: List<ImageKnifeRequestWithSource>): Promise<RequestJobResult | undefined> { async function requestJob(request: RequestJobRequest, requestList?: List<ImageKnifeRequestWithSource>) {
LogUtil.log("ImageKnife_DataTime_requestJob.start:" + request.src + " requestSource=" + request.requestSource) LogUtil.log("ImageKnife_DataTime_requestJob.start:" + request.src + " requestSource=" + request.requestSource)
let src = typeof request.src == "number" ? request.resName != undefined ? request.resName : request.src + "" : request.src let src = typeof request.src == "number" ? request.resName != undefined ? request.resName : request.src + "" : request.src
// 生成文件缓存key // 生成文件缓存key
let fileKey = request.engineKey.generateFileKey(src, request.signature, request.isAnimator) let fileKey = request.engineKey.generateFileKey(src, request.signature, request.isAnimator)
//获取图片资源 //获取图片资源
let resBuf: ArrayBuffer ImageKnifeLoader.execute(request,requestList,fileKey)
try {
LogUtil.log("ImageKnife_DataTime_requestJob.getImageArrayBuffer.start:" + request.src)
resBuf = await ImageKnifeLoader.getImageArrayBuffer(request, requestList, fileKey)
LogUtil.log("ImageKnife_DataTime_requestJob.getImageArrayBuffer.end:" + request.src)
} catch (error) {
LogUtil.error("ImageKnife_DataTime_requestJob.end: getImageArrayBuffer error " + request.src + " err=" + error)
return ImageKnifeLoader.makeEmptyResult(error)
}
// 获取图片类型
let typeValue = new FileTypeUtil().getFileType(resBuf);
if(typeValue == null) {
LogUtil.log("ImageKnife_DataTime_requestJob.end: getFileType is null " + request.src)
return ImageKnifeLoader.makeEmptyResult("request is not a valid image source")
}
// 解析图片
LogUtil.log("ImageKnife_DataTime_requestJob.parseImage.start:" + request.src)
let result: RequestJobResult = await ImageKnifeLoader.parseImage(resBuf, typeValue, fileKey, request)
LogUtil.log("ImageKnife_DataTime_requestJob.parseImage.end:" + request.src)
// 图形变化
if (request.requestSource === ImageKnifeRequestSource.SRC && request.transformation !== undefined && result?.pixelMap !== undefined && typeof result.pixelMap !== 'string') {
LogUtil.log("ImageKnife_DataTime_requestJob.transform.start:" + request.src)
result.pixelMap = await request.transformation?.transform(request.context, result.pixelMap, request.componentWidth, request.componentHeight);
LogUtil.log("ImageKnife_DataTime_requestJob.transform.end:" + request.src)
}
LogUtil.log("ImageKnife_DataTime_requestJob.end:" + request.src)
return result
} }

174
library/src/main/ets/ImageKnifeLoader.ets
View File

@ -28,6 +28,7 @@ import emitter from '@ohos.events.emitter';
import image from '@ohos.multimedia.image'; import image from '@ohos.multimedia.image';
import { RequestJobResult } from './model/ImageKnifeData' import { RequestJobResult } from './model/ImageKnifeData'
import util from '@ohos.util'; import util from '@ohos.util';
import { FileTypeUtil } from './utils/FileTypeUtil';
class RequestData { class RequestData {
receiveSize: number = 2000 receiveSize: number = 2000
@ -38,38 +39,52 @@ class RequestData {
* ImageKnifeDispatcher 抽取出来的方法，因@Concurrent只能import方法，故抽取到另一个类 * ImageKnifeDispatcher 抽取出来的方法，因@Concurrent只能import方法，故抽取到另一个类
*/ */
export class ImageKnifeLoader { export class ImageKnifeLoader {
static async parseImage(resBuf: ArrayBuffer, typeValue: string, fileKey: string, static execute(request: RequestJobRequest, requestList: List<ImageKnifeRequestWithSource> | undefined, fileKey: string){
request: RequestJobRequest): Promise<RequestJobResult> { ImageKnifeLoader.getImageArrayBuffer(request,requestList,fileKey)
}
static async parseImage(resBuf: ArrayBuffer, fileKey: string,
request: RequestJobRequest) {
let typeValue = new FileTypeUtil().getFileType(resBuf);
if(typeValue == null) {
LogUtil.log("ImageKnife_DataTime_requestJob.end: getFileType is null " + request.src)
ImageKnifeLoader.makeEmptyResult(request,"request is not a valid image source")
return
}
if(request.isAnimator) { if(request.isAnimator) {
return ImageKnifeLoader.parseForAnimatorComponent(resBuf ,typeValue ,fileKey, request) ImageKnifeLoader.parseForAnimatorComponent(resBuf ,typeValue ,fileKey, request)
return
} }
if (typeValue === 'gif' || typeValue === 'webp') { if (typeValue === 'gif' || typeValue === 'webp') {
return ImageKnifeLoader.parseAnimatorImage(resBuf ,typeValue ,fileKey , request) ImageKnifeLoader.parseAnimatorImage(resBuf ,typeValue ,fileKey , request)
return
} else if(typeValue == "svg") { } else if(typeValue == "svg") {
return ImageKnifeLoader.parseSvgImage(resBuf ,typeValue ,fileKey , request) ImageKnifeLoader.parseSvgImage(resBuf ,typeValue ,fileKey , request)
return
} }
return ImageKnifeLoader.parseNormalImage(resBuf, typeValue, fileKey, request) ImageKnifeLoader.parseNormalImage(resBuf, typeValue, fileKey, request)
} }
static makeEmptyResult(error: string): RequestJobResult{ static makeEmptyResult(request:RequestJobRequest,error: string){
return { let res: RequestJobResult = {
pixelMap: undefined, pixelMap: undefined,
bufferSize: 0, bufferSize: 0,
fileKey: '', fileKey: '',
loadFail: error, loadFail: error,
} }
emitter.emit(Constants.CALLBACK_EMITTER + request.memoryKey, { data: { "value": res } })
} }
static async parseNormalImage(resBuf: ArrayBuffer, typeValue: string, fileKey: string, request: RequestJobRequest):Promise<RequestJobResult> { static async parseNormalImage(resBuf: ArrayBuffer, typeValue: string, fileKey: string, request: RequestJobRequest) {
let resPixelmap: PixelMap | undefined = undefined let resPixelmap: PixelMap | undefined = undefined
let decodingOptions: image.DecodingOptions = { let decodingOptions: image.DecodingOptions = {
editable: request.requestSource === ImageKnifeRequestSource.SRC && request.transformation !== undefined ? true : false, editable: request.requestSource === ImageKnifeRequestSource.SRC && request.transformation !== undefined ? true : false,
} }
let imageSource: image.ImageSource = image.createImageSource(resBuf) let imageSource: image.ImageSource = image.createImageSource(resBuf)
if (imageSource === undefined){ if (imageSource === undefined){
return ImageKnifeLoader.makeEmptyResult("image.createImageSource failed") ImageKnifeLoader.makeEmptyResult(request,"image.createImageSource failed")
return
} }
let size = (await imageSource.getImageInfo()).size let size = (await imageSource.getImageInfo()).size
@ -79,23 +94,35 @@ export class ImageKnifeLoader {
imageSource.release() imageSource.release()
}).catch((error: BusinessError) => { }).catch((error: BusinessError) => {
imageSource.release() imageSource.release()
return ImageKnifeLoader.makeEmptyResult(JSON.stringify(error)) ImageKnifeLoader.makeEmptyResult(request,JSON.stringify(error))
return
}) })
if (request.requestSource === ImageKnifeRequestSource.SRC && request.transformation !== undefined && resPixelmap !== undefined) {
return { LogUtil.log("ImageKnife_DataTime_requestJob.transform.start:" + request.src)
resPixelmap = await request.transformation?.transform(request.context, resPixelmap, request.componentWidth, request.componentHeight);
LogUtil.log("ImageKnife_DataTime_requestJob.transform.end:" + request.src)
}
try {
resPixelmap?.setTransferDetached(true)
} catch (e) {
LogUtil.error("PixelMap setTransferDetached err:"+JSON.stringify(e))
}
let res: RequestJobResult = {
pixelMap: resPixelmap, pixelMap: resPixelmap,
bufferSize: resBuf.byteLength, bufferSize: resBuf.byteLength,
fileKey: fileKey, fileKey: fileKey,
size:size, size:size,
type:typeValue type:typeValue
}; }
emitter.emit(Constants.CALLBACK_EMITTER + request.memoryKey, { data: { "value": res } })
} }
static async parseSvgImage(resBuf: ArrayBuffer, typeValue: string, fileKey: string, static async parseSvgImage(resBuf: ArrayBuffer, typeValue: string, fileKey: string,
request: RequestJobRequest): Promise<RequestJobResult> { request: RequestJobRequest) {
let resPixelmap: PixelMap | undefined = undefined let resPixelmap: PixelMap | undefined = undefined
let imageSource: image.ImageSource = image.createImageSource(resBuf) let imageSource: image.ImageSource = image.createImageSource(resBuf)
if (imageSource === undefined){ if (imageSource === undefined){
return ImageKnifeLoader.makeEmptyResult("image.createImageSource failed") ImageKnifeLoader.makeEmptyResult(request,"image.createImageSource failed")
return
} }
let size = (await imageSource.getImageInfo()).size let size = (await imageSource.getImageInfo()).size
@ -114,23 +141,30 @@ export class ImageKnifeLoader {
.then((pixelmap: PixelMap) => { .then((pixelmap: PixelMap) => {
resPixelmap = pixelmap resPixelmap = pixelmap
imageSource.release() imageSource.release()
try {
resPixelmap.setTransferDetached(true)
} catch (e) {
LogUtil.error("PixelMap setTransferDetached err:"+JSON.stringify(e))
}
}).catch((error: BusinessError) => { }).catch((error: BusinessError) => {
imageSource.release() imageSource.release()
return ImageKnifeLoader.makeEmptyResult(JSON.stringify(error)) ImageKnifeLoader.makeEmptyResult(request,JSON.stringify(error))
return
}) })
let res: RequestJobResult = {
return {
pixelMap: resPixelmap, pixelMap: resPixelmap,
bufferSize: resBuf.byteLength, bufferSize: resBuf.byteLength,
fileKey: fileKey, fileKey: fileKey,
type:typeValue type:typeValue
}; }
emitter.emit(Constants.CALLBACK_EMITTER + request.memoryKey, { data: { "value": res } })
} }
static async parseAnimatorImage(resBuf: ArrayBuffer, typeValue: string, static async parseAnimatorImage(resBuf: ArrayBuffer, typeValue: string,
fileKey: string,request: RequestJobRequest): Promise<RequestJobResult> { fileKey: string,request: RequestJobRequest) {
let imageSource: image.ImageSource = image.createImageSource(resBuf) let imageSource: image.ImageSource = image.createImageSource(resBuf)
if (imageSource === undefined){ if (imageSource === undefined){
return ImageKnifeLoader.makeEmptyResult("image.createImageSource failed") ImageKnifeLoader.makeEmptyResult(request,"image.createImageSource failed")
return
} }
let frameCount = await imageSource.getFrameCount() let frameCount = await imageSource.getFrameCount()
@ -140,22 +174,25 @@ export class ImageKnifeLoader {
if(frameCount == undefined || frameCount == 1) { if(frameCount == undefined || frameCount == 1) {
} else { } else {
let base64str = "data:image/" + typeValue + ";base64," + new util.Base64Helper().encodeToStringSync(new Uint8Array(resBuf)) let base64str = "data:image/" + typeValue + ";base64," + new util.Base64Helper().encodeToStringSync(new Uint8Array(resBuf))
return { let res: RequestJobResult = {
pixelMap: base64str, pixelMap: base64str,
bufferSize: resBuf.byteLength, bufferSize: resBuf.byteLength,
fileKey: fileKey, fileKey: fileKey,
size:size, size:size,
type:typeValue type:typeValue
}; }
emitter.emit(Constants.CALLBACK_EMITTER + request.memoryKey, { data: { "value": res } })
return
} }
return ImageKnifeLoader.parseNormalImage(resBuf, typeValue, fileKey, request) ImageKnifeLoader.parseNormalImage(resBuf, typeValue, fileKey, request)
} }
// 为AnimatorComponent解析动图 // 为AnimatorComponent解析动图
static async parseForAnimatorComponent(resBuf: ArrayBuffer, typeValue: string, fileKey: string,request: RequestJobRequest): Promise<RequestJobResult> { static async parseForAnimatorComponent(resBuf: ArrayBuffer, typeValue: string, fileKey: string,request: RequestJobRequest) {
if (typeValue === 'gif' || typeValue === 'webp') { if (typeValue === 'gif' || typeValue === 'webp') {
let imageSource: image.ImageSource = image.createImageSource(resBuf); let imageSource: image.ImageSource = image.createImageSource(resBuf);
if (imageSource === undefined){ if (imageSource === undefined){
return ImageKnifeLoader.makeEmptyResult("image.createImageSource failed") ImageKnifeLoader.makeEmptyResult(request,"image.createImageSource failed")
return
} }
let decodingOptions: image.DecodingOptions = { let decodingOptions: image.DecodingOptions = {
editable: request.requestSource === ImageKnifeRequestSource.SRC && request.transformation !== undefined ? true : false, editable: request.requestSource === ImageKnifeRequestSource.SRC && request.transformation !== undefined ? true : false,
@ -179,9 +216,10 @@ export class ImageKnifeLoader {
}) })
}).catch((error: BusinessError) => { }).catch((error: BusinessError) => {
imageSource.release() imageSource.release()
return ImageKnifeLoader.makeEmptyResult(JSON.stringify(error)) ImageKnifeLoader.makeEmptyResult(request,JSON.stringify(error))
return
}) })
return { let res: RequestJobResult = {
pixelMap: "", pixelMap: "",
bufferSize: resBuf.byteLength, bufferSize: resBuf.byteLength,
fileKey: fileKey, fileKey: fileKey,
@ -189,8 +227,9 @@ export class ImageKnifeLoader {
pixelMapList, pixelMapList,
delayList delayList
} }
emitter.emit(Constants.CALLBACK_EMITTER + request.memoryKey, { data: { "value": res } })
} else { } else {
return ImageKnifeLoader.makeEmptyResult("ImageKnifeAnimatorComponent组件仅支持动态图") ImageKnifeLoader.makeEmptyResult(request,"ImageKnifeAnimatorComponent组件仅支持动态图")
} }
} }
static getHeaderObj(request:RequestJobRequest){ static getHeaderObj(request:RequestJobRequest){
@ -206,32 +245,44 @@ export class ImageKnifeLoader {
} }
return headerObj return headerObj
} }
static FileCacheParseImage(request:RequestJobRequest,resBuf:ArrayBuffer,fileKey:string){
// 保存文件缓存
if (resBuf !== undefined && request.writeCacheStrategy !== CacheStrategy.Memory) {
LogUtil.log("ImageKnife_DataTime_requestJob_saveFileCacheOnlyFile.start:"+request.src)
FileCache.saveFileCacheOnlyFile(request.context, fileKey, resBuf , request.fileCacheFolder)
LogUtil.log("ImageKnife_DataTime_requestJob_saveFileCacheOnlyFile.end:"+request.src)
}
ImageKnifeLoader.parseImage(resBuf,fileKey,request)
}
// 获取图片资源 // 获取图片资源
static async getImageArrayBuffer(request: RequestJobRequest, requestList: List<ImageKnifeRequestWithSource> | undefined,fileKey:string): Promise<ArrayBuffer> { static async getImageArrayBuffer(request: RequestJobRequest, requestList: List<ImageKnifeRequestWithSource> | undefined,fileKey:string) {
let resBuf: ArrayBuffer | undefined let resBuf: ArrayBuffer | undefined
let loadError: string = ""
// 判断自定义下载 // 判断自定义下载
if (request.customGetImage !== undefined && request.requestSource == ImageKnifeRequestSource.SRC && typeof request.src == "string") { if (request.customGetImage !== undefined && request.requestSource == ImageKnifeRequestSource.SRC && typeof request.src == "string") {
// 先从文件缓存获取 // 先从文件缓存获取
resBuf = FileCache.getFileCacheByFile(request.context, fileKey , request.fileCacheFolder) resBuf = FileCache.getFileCacheByFile(request.context, fileKey , request.fileCacheFolder)
if (resBuf === undefined) { if (resBuf === undefined) {
LogUtil.log("start customGetImage src=" + request.src) LogUtil.log("start customGetImage src=" + request.src)
const headerObj: Record<string, Object> = ImageKnifeLoader.getHeaderObj(request)
try { try {
const headerObj: Record<string, Object> = ImageKnifeLoader.getHeaderObj(request) request.customGetImage(request.context, request.src, headerObj)
resBuf = await request.customGetImage(request.context, request.src,headerObj) .then((buffer)=>{
LogUtil.log("end customGetImage src=" + request.src) if(buffer != undefined) {
} catch (err) { ImageKnifeLoader.FileCacheParseImage(request,buffer,fileKey)
throw new Error('customGetImage loadFile failed! err = ' + err) } else {
} loadError = "customGetImage loadFail undefined"
if (resBuf === undefined) { ImageKnifeLoader.makeEmptyResult(request,loadError)
throw new Error('customGetImage loadFile failed!') }
} }).catch((err:string)=>{
// 保存文件缓存 ImageKnifeLoader.makeEmptyResult(request,err)
if (request.writeCacheStrategy !== CacheStrategy.Memory) { })
LogUtil.log("ImageKnife_DataTime_requestJob_saveFileCacheOnlyFile.start:" + request.src) } catch (e) {
FileCache.saveFileCacheOnlyFile(request.context, fileKey, resBuf, request.fileCacheFolder) loadError = "customGetImage loadFail failed"
LogUtil.log("ImageKnife_DataTime_requestJob_saveFileCacheOnlyFile.end:" + request.src) ImageKnifeLoader.makeEmptyResult(request,loadError + e)
} }
LogUtil.log("end customGetImage src=" + request.src)
return
} }
} }
else { else {
@ -284,25 +335,23 @@ export class ImageKnifeLoader {
// header: new Header('application/json') // header: new Header('application/json')
}); });
await promise.then((data: number) => { promise.then((data: number) => {
if (data == 200 || data == 206 || data == 204) { if (data == 200 || data == 206 || data == 204) {
resBuf = combineArrayBuffers(arrayBuffers) resBuf = combineArrayBuffers(arrayBuffers)
ImageKnifeLoader.FileCacheParseImage(request,resBuf,fileKey)
} else { } else {
throw new Error("HttpDownloadClient has error, http code =" + JSON.stringify(data)) loadError = "HttpDownloadClient has error, http code =" + JSON.stringify(data)
ImageKnifeLoader.makeEmptyResult(request,loadError)
} }
}).catch((err: Error) => { }).catch((err: Error) => {
throw new Error("HttpDownloadClient download ERROR : err = " + JSON.stringify(err)) loadError = "HttpDownloadClient download ERROR : err = " + JSON.stringify(err)
ImageKnifeLoader.makeEmptyResult(request,loadError)
}); });
LogUtil.log("HttpDownloadClient.end:" + request.src) LogUtil.log("HttpDownloadClient.end:" + request.src)
// 保存文件缓存 return
if (resBuf !== undefined && request.writeCacheStrategy !== CacheStrategy.Memory) {
LogUtil.log("ImageKnife_DataTime_requestJob_saveFileCacheOnlyFile.start:"+request.src)
FileCache.saveFileCacheOnlyFile(request.context, fileKey, resBuf , request.fileCacheFolder)
LogUtil.log("ImageKnife_DataTime_requestJob_saveFileCacheOnlyFile.end:"+request.src)
}
} }
else { else {
throw new Error('onlyRetrieveFromCache,do not fetch image src = ' + request.src) loadError = 'onlyRetrieveFromCache,do not fetch image src = ' + request.src
} }
} else if (request.src.startsWith('datashare://') || request.src.startsWith('file://')) { } else if (request.src.startsWith('datashare://') || request.src.startsWith('file://')) {
await fs.open(request.src, fs.OpenMode.READ_ONLY).then(async (file) => { await fs.open(request.src, fs.OpenMode.READ_ONLY).then(async (file) => {
@ -312,13 +361,13 @@ export class ImageKnifeLoader {
resBuf = buf; resBuf = buf;
fs.closeSync(file.fd); fs.closeSync(file.fd);
}).catch((err:BusinessError) => { }).catch((err:BusinessError) => {
throw new Error('LoadDataShareFileClient fs.read err happened uri=' + request.src + " err.msg=" + err?.message + " err.code=" + err?.code) loadError = 'LoadDataShareFileClient fs.read err happened uri=' + request.src + " err.msg=" + err?.message + " err.code=" + err?.code
}) })
}).catch((err:BusinessError) => { }).catch((err:BusinessError) => {
throw new Error('LoadDataShareFileClient fs.stat err happened uri=' + request.src + " err.msg=" + err?.message + " err.code=" + err?.code) loadError = 'LoadDataShareFileClient fs.stat err happened uri=' + request.src + " err.msg=" + err?.message + " err.code=" + err?.code
}) })
}).catch((err:BusinessError) => { }).catch((err:BusinessError) => {
throw new Error('LoadDataShareFileClient fs.open err happened uri=' + request.src + " err.msg=" + err?.message + " err.code=" + err?.code) loadError = 'LoadDataShareFileClient fs.open err happened uri=' + request.src + " err.msg=" + err?.message + " err.code=" + err?.code
}) })
} else { //从本地文件获取 } else { //从本地文件获取
try { try {
@ -330,7 +379,7 @@ export class ImageKnifeLoader {
fs.closeSync(file); fs.closeSync(file);
} }
} catch (err) { } catch (err) {
throw new Error(err) loadError = err
} }
} }
} else if (typeof request.src == "number") { //从资源文件获取 } else if (typeof request.src == "number") { //从资源文件获取
@ -354,8 +403,9 @@ export class ImageKnifeLoader {
} }
if (resBuf === undefined){ if (resBuf === undefined){
throw new Error('getImageArrayBuffer undefined') ImageKnifeLoader.makeEmptyResult(request,loadError)
return
} }
return resBuf ImageKnifeLoader.parseImage(resBuf,fileKey,request)
} }
} }

3
library/src/main/ets/components/ImageKnifeComponent.ets
View File

@ -24,7 +24,7 @@ import { DefaultEngineKey } from '../key/DefaultEngineKey';
@Component @Component
export struct ImageKnifeComponent { export struct ImageKnifeComponent {
@Watch('watchImageKnifeOption') @ObjectLink imageKnifeOption: ImageKnifeOption; @Watch('watchImageKnifeOption') @ObjectLink imageKnifeOption: ImageKnifeOption;
@State pixelMap: PixelMap | string | undefined = undefined @State pixelMap: PixelMap | string | ImageContent | undefined = undefined
@State syncLoad: boolean = false @State syncLoad: boolean = false
@State adaptiveWidth: Length = '100%' @State adaptiveWidth: Length = '100%'
@State adaptiveHeight: Length = '100%' @State adaptiveHeight: Length = '100%'
@ -68,6 +68,7 @@ export struct ImageKnifeComponent {
} }
aboutToRecycle() { aboutToRecycle() {
this.pixelMap = ImageContent.EMPTY
this.clearLastRequest() this.clearLastRequest()
} }
/** /**

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

@ -91,7 +91,7 @@ export interface RequestJobRequest {
allHeaders: Map<string, Object>, allHeaders: Map<string, Object>,
componentWidth: number, componentWidth: number,
componentHeight: number, componentHeight: number,
customGetImage?: (context: Context, src: string | PixelMap | Resource ,headers?: Record<string, Object>) => Promise<ArrayBuffer | undefined>, customGetImage?: (context: Context, src: string | PixelMap | Resource,headers?: Record<string,Object>) => Promise<ArrayBuffer | undefined>,
onlyRetrieveFromCache?: boolean onlyRetrieveFromCache?: boolean
requestSource: ImageKnifeRequestSource requestSource: ImageKnifeRequestSource
transformation?: PixelMapTransformation transformation?: PixelMapTransformation

2
library/src/main/ets/model/ImageKnifeOption.ets
View File

@ -61,7 +61,7 @@ export class ImageKnifeOption {
placeholderObjectFit?: ImageFit placeholderObjectFit?: ImageFit
// 错误图填充效果 // 错误图填充效果
errorholderObjectFit?: ImageFit errorholderObjectFit?: ImageFit
customGetImage?: (context: Context, src: string | PixelMap | Resource,headers?: Record<string, Object>) => Promise<ArrayBuffer | undefined> customGetImage?: (context: Context, src: string | PixelMap | Resource,headers?: Record<string,Object>) => Promise<ArrayBuffer | undefined>
border?: BorderOptions border?: BorderOptions
// 缓存策略 // 缓存策略
writeCacheStrategy?: CacheStrategy writeCacheStrategy?: CacheStrategy

1
library/src/main/ets/utils/Constants.ets
View File

@ -14,4 +14,5 @@
*/ */
export class Constants { export class Constants {
public static PROGRESS_EMITTER: string = "progressEmitter" public static PROGRESS_EMITTER: string = "progressEmitter"
public static CALLBACK_EMITTER: string = "callBackEmitter"
} }