OpenHarmony三方组件：ImageKnife

npm install @ohos/imageknife --save
1.

import AbilityStage from "@ohos.application.AbilityStage"
import {ImageKnife} from '@ohos/imageknife'

export default     class MyAbilityStage     extends AbilityStage {
onCreate() {
        // 初始化全局ImageKnife实例，在AbilityStage.ts中调用ImageKnife.with(this.context)进行初始化
globalThis.ImageKnife = ImageKnife.    with(this.context)
}
}
1.
2.
3.
4.
5.
6.
7.
8.
9.

import {ImageKnifeComponent} from '@ohos/imageknife'
import {ImageKnifeOption} from '@ohos/imageknife'
@Entry
@Component
struct Index {
@State imageKnifeOption1: ImageKnifeOption =
{ // 加载一张本地的jpg资源（必选）
      loadSrc: $r('app.media.jpgSample'),
      // 占位图使用本地资源icon_loading（可选）
      placeholderSrc: $r('app.media.icon_loading'),
      // 失败占位图使用本地资源icon_failed（可选）
      errorholderSrc: $r('app.media.icon_failed')
};
build() {
Scroll() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
.width(300) // 自定义组件支持通用属性链式调用，可以直接设置宽高
.height(300)
}
}
.width('100%')
.height('100%')
}
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

import router from '@system.router';
import {
ImageKnifeComponent,
ImageKnifeOption,
} from '@ohos/imageknife'
import ArkWorker from '@ohos.worker'
@Entry
@Component
struct IndexFunctionDemo {
  private globalGifWorker:    any =     undefined
@State imageKnifeOption: ImageKnifeOption =
{
      loadSrc: $r('app.media.gifSample'),
      placeholderSrc: $r('app.media.icon_loading'),
      errorholderSrc: $r('app.media.icon_failed')
};

build() {
Scroll() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text("简单示例：加载一张gif图片").fontSize(15)
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
.width(300) // 自定义组件支持通用属性链式调用，可以直接设置宽高
.height(300)
}
}
.width('100%')
.height('100%')
}

aboutToAppear() {
  // 页面初始化创建worker
    this.globalGifWorker = new ArkWorker.Worker('entry/ets/pages/workers/gifParseWorker.ts', {
      type: 'classic',
      name: 'ImageKnifeParseGIF'
})
    // gif解析在子线程,请在页面构建后创建worker,注入imageknife
globalThis.ImageKnife.setGifWorker(this.globalGifWorker)
}
aboutToDisappear(){
   // 页面销毁 销毁worker
   if(this.globalGifWorker){
      this.globalGifWorker.terminate();
}
}

}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.

import arkWorker from '@ohos.worker';
import { gifHandler } from '@ohos/imageknife/GifWorker'

arkWorker.parentPort.onmessage = gifHandler;
1.
2.
3.
4.

{
"apiType": 'stageMode',
"buildOption": {
"sourceOption": {
"workers": [
"./src/main/ets/pages/workers/gifParseWorker.ts",
]
}
},
"targets": [
{
"name": "default",
},
{
"name": "ohosTest",
}
]
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

import {ImageKnifeComponent} from '@ohos/imageknife'
import {ImageKnifeOption} from '@ohos/imageknife'
import {ImageKnifeDrawFactory} from '@ohos/imageknife'
@Entry
@Component
struct Index {
@State imageKnifeOption1: ImageKnifeOption =
{ // 加载一张本地的jpg资源（必选）
      loadSrc: $r('app.media.jpgSample'),
      // 组件宽设置为300，高设置为300（必选）
      size: { width: '300', height: '300' },
      // 占位图使用本地资源icon_loading（可选）
      placeholderSrc: $r('app.media.icon_loading'),
      // 失败占位图使用本地资源icon_failed（可选）
      errorholderSrc: $r('app.media.icon_failed'),
      // 绘制圆角30，边框5，边框"#ff00ff".用户自定义绘制（可选）
      drawLifeCycle:ImageKnifeDrawFactory.createRoundLifeCycle(5,"#ff00ff",30)
};


build() {
Scroll() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
}
}
.width('100%')
.height('100%')
}
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.

import AbilityStage from '@ohos.application.AbilityStage'
import { ImageKnife,ImageKnifeDrawFactory} from '@ohos/imageknife'

import ArkWorker from '@ohos.worker'

export default     class MyAbilityStage     extends AbilityStage {
onCreate() {
globalThis.ImageKnife = ImageKnife.    with(this.context);
        // 全局配置网络加载进度条
globalThis.ImageKnife.setDefaultLifeCycle(ImageKnifeDrawFactory.createProgressLifeCycle("#10a5ff", 0.5))
}
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

let request = new RequestOption();
（必传）
request.load("图片url")
  （可选 整个request监听回调）
.addListener((err, data) => {
	// data 是ImageKnifeData对象if(data.isPixelMap()){
	// 这样就获取到了目标PixelMap    let pixelmap = data.drawPixleMap.imagePixelMap;
}
    return     false;
})
 
    let compSize = {
    width: this.currentWidth,
    height:this.currentHeight
}
  // （必传）这里setImageViewSize函数必传组件大小，因为涉及到图片变换效果都需要适配图像源和组件大小。
request.setImageViewSize(compSize)
 // 最后使用ImageKnife的call函数调用request即可
globalThis.ImageKnife.call(request)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

request.placeholder(this.imageKnifeOption.placeholderSrc, (data) => {
console.log('request.placeholder callback')
  this.displayPlaceholder(data)
})
1.
2.
3.
4.

request.skipMemoryCache(    true)
1.

/imageknife/src/
- main/ets/components
    - cache                  # 缓存相关内容
       - diskstrategy        # 缓存策略
       - key                 # 缓存key生成策略
       - Base64.ets          # Base64算法
       - CustomMap.ets       # 自定义Map封装
       - DiskCacheEntry.ets  # 磁盘缓存entry
       - DiskLruCache.ets    # 磁盘LRU缓存策略
       - FileReader.ets      # 文件读取相关
       - FileUtils.ets       # 文件工具类
       - LruCache.ets        # 内存LRU缓存策略
       - Md5.ets             # MD5算法
       
    - imageknife             # imageknife主要内容
       - compress            # 压缩相关
       - constants           # 常量相关
       - entry               # 部分数据结构
       - holder              # 占位图相关解析
       - interface           # 接口相关
       - networkmanage       # 网络相关
       - pngj                # pngj相关
       - requestmanage       # imageknife请求相关
       - resourcemanage      # 本地资源解析相关
       - transform           # 图片变换相关
       - utils               # 工具类相关
       - ImageKnife.ets            # imageknife门面，app持久化类
       - ImageKnifeData.ets        # 数据封装
       - ImageKnifeComponent.ets   # 自定义控件封装
       - ImageKnifeDrawFactory.ets # IDrawLifeCycle用户自定义实现
       - ImageKnifeOption.ets      # 用户传参数封装
       - RequestOption.ets         # 用户设置参数封装
       
/entry/src/
- main/ets/MainAbility     
    - pages                                    # 测试page页面列表
       - basicTestFeatureAbilityPage.ets       # 测试列表加载
       - basicTestFileIOPage.ets               # 测试fileio
       - basicTestMediaImage.ets               # 测试媒体image
       - basicTestResourceManagerPage.ets      # 测试本地资源解析
       - compressPage.ets                      # 压缩页面
       - cropImagePage2.ets                    # 手势裁剪页面
       - frescoImageTestCasePage.ets           # 测试属性动画组件切换
       - frescoRetryTestCasePage.ets           # 测试ImageKnifeComponent加载失败重试
       - gifTestCasePage.ets				   # 测试gif解析页面
       - svgTestCasePage.ets				   # 测试svg解析页面
       - imageknifeTestCaseIndex.ets           # 测试用例页面入口
       - index.ets                             # 程序入口页面
       - loadNetworkTestCasePage.ets           # 网络加载测试
       - loadResourceTestCasePage.ets          # 本地加载测试
       - showErrorholderTestCasePage.ets       # 加载失败占位图测试
       - storageTestDiskLruCache.ets           # 磁盘缓存测试
       - storageTestLruCache.ets               # 内存缓存测试
       - testAllCacheInfoPage.ets              # 所有缓存信息获取测试
       - testGifDontAnimatePage.ets            # gif加载静态图片测试
       - testImageKnifeOptionChangedPage.ets   # 数据切换测试
       - testImageKnifeOptionChangedPage2.ets  # 数据切换测试,部分变换
       - testImageKnifeOptionChangedPage3.ets  # 数据切换测试,组件动画
       - testImageKnifeOptionChangedPage4.ets  # 数据切换测试,内容动画
       - testImageKnifeOptionChangedPage5.ets  # 数据切换测试,ImageKnifeDrawFactory封装圆角圆环边框等
       - testPreloadPage.ets                   # 预加载测试
       - transformPixelMapPage.ets             # 所有类型变换测试
       
    - gifParseWorker.ts     # gifworker子线程解析
    - worker1.js            # worker多线程测试
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.