OpenHarmony三方组件：ImageKnife

npm install @ohos/imageknife --save

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

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

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

}

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

arkWorker.parentPort.onmessage = gifHandler;

{
"apiType": 'stageMode',
"buildOption": {
"sourceOption": {
"workers": [
"./src/main/ets/pages/workers/gifParseWorker.ts",
]
}
},
"targets": [
{
"name": "default",
},
{
"name": "ohosTest",
}
]
}

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

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

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)

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

request.skipMemoryCache(    true)

/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多线程测试