388 changed files with 25355 additions and 11551 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,11 +1,10 @@
 /node_modules
-/oh_modules
 /local.properties
 /.idea
 **/build
-/.hvigor
-.cxx
+/oh_modules/
+/.hvigor/
+/oh-package-lock.json5
 /.clangd
 /.clang-format
 /.clang-tidy
-**/.test
--- a/.gitmodules
+++ b/.gitmodules
@ -1,3 +0,0 @@
-[submodule "gpu_transform/src/main/cpp/boundscheck/third_party_bounds_checking_function"]
-	path = gpu_transform/src/main/cpp/boundscheck/third_party_bounds_checking_function
-	url = https://gitee.com/openharmony/third_party_bounds_checking_function.git
--- a/AppScope/app.json5
+++ b/AppScope/app.json5
@ -3,7 +3,7 @@
    "bundleName": "com.openharmony.imageknife",
    "vendor": "example",
    "versionCode": 1000000,
-    "versionName": "3.0.0-rc.0",
+    "versionName": "2.1.2-rc.0",
    "icon": "$media:app_icon",
    "label": "$string:app_name",
    "distributedNotificationEnabled": true
--- a/AppScope/resources/base/media/app_icon.png
+++ b/AppScope/resources/base/media/app_icon.png
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,182 +1,9 @@
-## 3.1.1-rc.1
- Photo reduction sampling
-## 3.1.1-rc.0
- 重构代码：抽取ImageKnifeDispatcher子线程requestJob相关代码到ImageKnifeLoader中，降低函数复杂度
-## 3.1.0
- 部分静态webp图片有delay属性导致识别成动图,改用getFrameCount识别
- 修复加载错误图后未去请求排队队列中的请求
- 子线程本地Resource参数类型转换成number
- 修改使用hilog记录日志，默认打开debug级别的日志
- file格式图片，fd同步close
- 解码pixelMap默认不可编辑，图形变化可编辑
- 修改网络请求超时设置
-
-## 3.1.0-rc.2
- 修复宽高不等svg图片显示有毛边
-
-## 3.1.0-rc.1
- ImageKnifeAnimatorComponent新增开始、结束、暂停的回调事件
- 文件缓存数量负数和超过INT最大值时默认为INT最大值
-
-## 3.1.0-rc.0
- ComponentV2装饰器适配
- imageKnifeOption={...}用法改为new ImageKnifeOption({...})
- animatorOption={...}用法改为new AnimatorOption({...})
-
-## 3.0.1
- 修复animatorOption属性设置初始化值失效
- 网络请求code为206、204时返回arraybuffer
- ImageKnifeComponent显示非必要文件缓存初始化
- 修复webp静态图无法设置图形变换
-
-## 3.0.1-rc.2
- 修复自定义下载失败无失败回调
- 增加全局配置自定义下载接口
- 修复主图相同，错误图不同导致只显示一个错误图
- heic格式图片文件魔数从第五位开始匹配
-
-## 3.0.1-rc.1
- 新增ImageKnifeAnimatorComponent控制动图组件
- 修复部分heif图无法解码
-
-## 3.0.1-rc.0
- 文件缓存设置最大缓存数量改为无限制
-
-## 3.0.0
- 修复图形变换的闪退问题
- 自定义下载customGetImage改为仅主图支持
- 修改网络请求requestInStream配置优先返回arraybuffer
- 新增ColorFilter属性
-
-## 3.0.0-rc.9
- 修复Resource类型$r(变量无法)加载
- 成功回调增加图片格式
- Image组件增加onComplete回调
- 修复404链接无返回错误信息
- onLoadListener增加请求取消回调
-
-## 3.0.0-rc.8
- svg解码单位改为px
- 修复预加载接口preLoadCache传ImageKnifeOption失效
- 文件缓存初始化接口新增目录参数
- 占位图从内存获取提前到判断队列前面
- 图片改为不可拖拽
- 修复getCacheImage默认内存获取后不返回数据
- 成功回调返回GIF图宽高
-
-## 3.0.0-rc.7
- 修复成功回调获取不到宽高
- 新增svg图片解码
- 新增媒体图片file://格式
- 修复头像超过设备高度图片闪动问题-消息列表底部头像闪动问题
-
-## 3.0.0-rc.6
- 支持多种组合变换
- 支持全局配置是否在子线程请求加载图片，默认在子线程
- 文件缓存初始化增加默认值
- 预加载接口新增返回加载错误信息
- 加载队列改为使用堆Stack
- fileType图片格式新增heic格式
-
-## 3.0.0-rc.5
- 图片加载事件增加请求开始的回调,以及修复有缓存时，没有回调的bug
- 修复对已销毁组件不再下发请求的逻辑
- 加载图片流程添加日志
- 子线程写入文件缓存获取buffer优化
- 成功回调增加返回图片分辨率宽高
- 内存缓存时将pixelMap进行release释放
- 提供清理缓存能力
-
-## 3.0.0-rc.4
- 支持hsp多包图片资源
- 新增putCache写入缓存接口
- 修复入参为pixelMap图片不显示问题
- 网络请求减少拼接操作，修复网络加载速度慢
- 提供图片加载成功/失败的事件
-
-## 3.0.0-rc.3
- 将请求默认并行从64调整到8，减少对taskpool execute内存消耗
- 补充option参数：placeholderObjectFit，errorholderObjectFit分别支持占位图填充效果和错误图填充效果
-
-## 3.0.0-rc.2
- 新增支持使用一个或多个图片变换，如模糊，高亮等
-
-## 3.0.0-rc.1
- 新增从内存或文件缓存获取图片数据接口getCacheImage
- 新增图片预加载preLoadCache并返回文件缓存路径
- ImageKnifeOption新增writeCacheStrategy存入策略(只存入内存或文件缓存)
- ImageKnifeOption新增onlyRetrieveFromCache仅用缓存加载
- 新增单个和全局请求头
- 补齐自定key特性
- 获取组件宽高改用onSizeChange （需要API12）
-
-## 3.0.0-rc.0
- 使用Image组件替换Canvas组件渲染，并重构大部分的实现逻辑，提升渲染性能
-
-较2.x版本增强点：
- 使用Image组件代替Canvas组件渲染
- 重构Dispatch分发逻辑，支持控制并发请求数，支持请求排队队列的优先级
- 支持通过initMemoryCache自定义策略内存缓存策略和大小。
- 支持option自定义实现图片获取/网络下载
- 继承Image的能力，支持option传入border，设置边框，圆角
- 继承Image的能力，支持option传入objectFit设置图片缩放
- 修复发送消息时最近的两条消息头像闪动的问题
-
-缺失特性
- 不支持drawLifeCycle接口，通过canvas自会图片
- mainScaleType，border等参数，新版本与系统Image保持一致
- gif/webp动图播放与控制
- signature自定义key的实现
- 支持进行图片变换: 支持图像像素源图片变换效果。
- 抗锯齿相关参数
-
-## 2.2.0-rc.2
- ImageKnife支持heic图片修改demo，按钮控制组件是否展示
- ImageKnife控制可视化区域图片
-
-## 2.2.0-rc.1
- 修改ImageKnife跳过网络,点击默认,图片没有传入宽高,无显示bug
- ImageKnife支持根据自定义key获取已缓存的图片
- ImageKnife加载图片支持自定义网络栈和图片加载组件
- 适配复用场景触发懒加载onDataReloaded
- ImageKnife控制重要图片请求加载优先级
-
-## 2.2.0-rc.0
- 修复自定义DataFetch接口实现不生效问题
- 修改磁盘缓存到子线程
- 更新SDK到API12
- 适配Sendable内存共享优化
- 修改全局请求头覆盖request请求头
- imageKnife支持heic测试demo独立页面展示
- drawLifeCycle支持gif图
-
-## 2.1.2
- 修改ImageKnife跳过网络，从内存中获取图片 cacheType参数未使用bug
- 新增WEBP图片解析能力。
- 新增gif图片支持暂停播放功能
-
-## 2.1.2-rc.12
- 新增gif播放次数功能
- 新增磁盘预加载返回文件路径接口prefetchToDiskCache
- 新增跳过网络判断缓存或者磁盘中是否存在图片接口isUrlExist
- 删除多余操作磁盘记录读写
- 清除定时器改为Gif图时清除
- uuid改为util.generateRandomUUID()
-
 ## 2.1.2-rc.11
- 修复设置磁盘容量最大值出现闪退
 - 修复概率出现jscrash问题
 - 修复进度条问题
 - 修复单帧gif图片加载失败
 - removeRunning删除running队列log设置开关
- ImageKnife新增图片宽高自适应功能
- 修复onlyRetrieveFromCache属性(仅磁盘和内存获取资源)失效
- 修改拼写错误
- 新增多线程优先级
- 修复复用场景下图片闪动以及概率错位
- 获取组件宽高改为使用CanvasRenderingContext2D对象获取宽高，并修复改变字体大小导致部分图片消失
- 修复获取不到磁盘缓存文件问题
- 修复获取不到网络请求错误回调问题
+- 绘制图片调用getImageInfo改用同步接口getImageInfoSync

 ## 2.1.2-rc.10
 - 修复部分gif图片识别成静态图
@ -386,12 +213,12 @@

  新增

-  -  1.onClick事件属性
+  -  1.onClick事件属性 

-  删除
+  删除 

-  - 1.size(设置大小)
-  - 2.sizeAnimated 显式动画
+  - 1.size(设置大小) 
+  - 2.sizeAnimated 显式动画 
  - 3.backgroundColor背景色
  - 4.margin 组件外间距 等属性,删除的属性将由通用属性提供支持,可支持在ImageKnifeComponent自定义组件上链式调用
 ## 1.0.4
--- a/OAT.xml
+++ b/OAT.xml
@ -1,21 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!-- Copyright (c) 2021 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.
-
-    This is the configuration file template for OpenHarmony OSS Audit Tool, please copy it to your project root dir and modify it refer to OpenHarmony/tools_oat/README.
-
-->
 <configuration>
 <oatconfig>
    <filefilterlist>
@ -27,7 +10,7 @@
            <filteritem type="filename" name="hvigorw" desc="hvigorw配置文件，DevEco Studio自动生成，不手动修改"/>
            <filteritem type="filename" name="hvigorw.bat" desc="hvigorw配置文件，DevEco Studio自动生成，不手动修改"/>
            <filteritem type="filename" name="hvigor-wrapper.js" desc="hvigorw配置文件，DevEco Studio自动生成，不手动修改"/>
-            <filteritem type="filepath" name="library/src/main/ets/3rd_party/.*" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
+            <filteritem type="filepath" name="library/src/main/ets/components/3rd_party/.*" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
        </filefilter>
        <filefilter name="defaultPolicyFilter" desc="Filters for compatibility，license header policies">
            <filteritem type="filename" name="hvigorfile.*" desc="hvigor配置文件，DevEco Studio自动生成，不手动修改"/>
@ -37,7 +20,7 @@
            <filteritem type="filename" name="hvigorw" desc="hvigorw配置文件，DevEco Studio自动生成，不手动修改"/>
            <filteritem type="filename" name="hvigorw.bat" desc="hvigorw配置文件，DevEco Studio自动生成，不手动修改"/>
            <filteritem type="filename" name="hvigor-wrapper.js" desc="hvigorw配置文件，DevEco Studio自动生成，不手动修改"/>
-            <filteritem type="filepath" name="library/src/main/ets/3rd_party/.*" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
+            <filteritem type="filepath" name="library/src/main/ets/components/3rd_party/.*" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
        </filefilter>
        <filefilter name="binaryFileTypePolicyFilter" desc="Filters for binary file policies">
            <filteritem type="filename" name="*.dpg" desc="dpg图片格式文件,用于展示示例"/>
@ -51,7 +34,7 @@
            <filteritem type="filename" name="*.json5" desc="hvigor配置文件"/>
        </filefilter>
        <filefilter name="defaultFilter" desc="Files not to check">
-            <filteritem type="filepath" name="library/src/main/ets/3rd_party/.*" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
+            <filteritem type="filepath" name="library/src/main/ets/components/3rd_party/.*" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
        </filefilter>
    </filefilterlist>
 </oatconfig>
--- a/README.OpenSource
+++ b/README.OpenSource
@ -2,9 +2,9 @@
    {
        "Name": "glide",
        "License": "Apache License 2.0",
-        "License File": "LICENSE",
+        "License File": "https://github.com/bumptech/glide/blob/master/LICENSE",
        "Version Number": "4.13.1",
-        "Owner" : "xiafeng@huawei.com",
+        "Owner" : "bumptech",
        "Upstream URL": "https://github.com/bumptech/glide",
        "Description": "An image loading and caching library  focused on smooth scrolling"
    },
@ -12,9 +12,9 @@
  {
        "Name": "glide-transformations",
        "License": "Apache License 2.0",
-        "License File": "LICENSE",
+        "License File": "https://github.com/wasabeef/glide-transformations/blob/main/LICENSE",
        "Version Number": "4.3.0",
-        "Owner" : "xiafeng@huawei.com",
+        "Owner" : "wasabeef",
        "Upstream URL": "https://github.com/wasabeef/glide-transformations",
        "Description": "  An  transformation library providing a variety of image transformations for Glide. "
    },
@ -22,9 +22,9 @@
  {
        "Name": "fresco",
        "License": "MIT License",
-        "License File": "LICENSE",
+        "License File": "https://github.com/facebook/fresco/blob/main/LICENSE",
        "Version Number": "2.6.0",
-        "Owner" : "xiafeng@huawei.com",
+        "Owner" : "facebook",
        "Upstream URL": "https://github.com/facebook/fresco",
        "Description": " An  library for managing images and the memory they use. "
    },
@ -32,9 +32,9 @@
  {
        "Name": "UPNG.js",
        "License": "MIT License",
-        "License File": "LICENSE",
+        "License File": "https://github.com/photopea/UPNG.js/blob/master/LICENSE",
        "Version Number": "1.0.0",
-        "Owner" : "xiafeng@huawei.com",
+        "Owner" : "photopea",
        "Upstream URL": "https://github.com/photopea/UPNG.js",
        "Description": "  Fast and advanced PNG (APNG) decoder and encoder (lossy / lossless)  "
    },
@ -42,9 +42,9 @@
  {
        "Name": "Luban",
        "License": "Apache License 2.0",
-        "License File": "LICENSE",
+        "License File": "https://github.com/Curzibn/Luban/blob/master/LICENSE",
        "Version Number": "1.1.8",
-        "Owner" : " xiafeng@huawei.com",
+        "Owner" : " Curzibn",
        "Upstream URL": "https://github.com/Curzibn/Luban",
        "Description": " Luban(鲁班)—Image compression with efficiency very close to WeChat Moments/可能是最接近微信朋友圈的图片压缩算法  "
    },
@ -54,16 +54,16 @@
        "License": "Apache License 2.0",
        "License File": "https://github.com/Yalantis/uCrop/blob/develop/README.md",
        "Version Number": "2.2.8",
-        "Owner" : " xiafeng@huawei.com",
+        "Owner" : " Yalantis",
        "Upstream URL": "https://github.com/Yalantis/uCrop",
        "Description": " Image Cropping Library "
    },
    {
        "Name": "js-spark-md5",
        "License": "MIT",
-        "License File": "LICENSE",
+        "License File": "https://github.com/satazor/js-spark-md5/blob/master/LICENSE",
        "Version Number": "v3.0.2",
-        "Owner" : "xiafeng@huawei.com",
+        "Owner" : "satazor",
        "Upstream URL": "https://github.com/satazor/js-spark-md5",
        "Description": "Lightning fast normal and incremental md5 for javascript"
    }
--- a/README.md
+++ b/README.md
@ -1,396 +1,577 @@
 # ImageKnife

-ImageKnife is a specially crafted image loading and caching library for OpenHarmony, optimized for efficiency, lightness, and simplicity.
+**专门为OpenHarmony打造的一款图像加载缓存库，致力于更高效、更轻便、更简单。**

-## Introduction
+## 简介

-This project is a self-developed version for OpenHarmony, inspired by the open-source [Glide](https://github.com/bumptech/glide) library. It sports the following features:
+本项目基于开源库 [Glide](https://github.com/bumptech/glide) 进行OpenHarmony的自研版本：

- Customizable memory cache strategy with adjustable cache size (default LRU)
- Disk L2 cache for downloaded images
- Custom implementation for image acquisition and network downloading
- Listening for progress of network downloads through callbacks
- Image options for borders and rounded corners
- Image scaling with **objectFit**, including auto-adapting height
- Image scaling through transformation
- Concurrent request management with priority queuing
- No requests made for images whose lifecycle has been destroyed
- Custom cache keys
- Custom HTTP request headers
- **writeCacheStrategy** for controlling cache storage (memory or file)
- Preloading images with **preLoadCache**
- Loading images exclusively from cache with **onlyRetrieveFromCache**
- Support for image transformations such as blurring and highlighting
+- 支持内存缓存，使用LRUCache算法，对图片数据进行内存缓存。
+- 支持磁盘缓存，对于下载图片会保存一份至磁盘当中。
+- 支持进行图片变换: 支持图像像素源图片变换效果。
+- 支持用户配置参数使用:(
+  例如：配置是否开启一级内存缓存，配置磁盘缓存策略，配置仅使用缓存加载数据，配置图片变换效果，配置占位图，配置加载失败占位图等)。
+- 推荐使用ImageKnifeComponent组件配合ImageKnifeOption参数来实现功能。
+- 支持用户自定义配置实现能力参考ImageKnifeComponent组件中对于入参ImageKnifeOption的处理。

-Planned features:
+<img src="screenshot/gif1.gif" width="50%"/>

- Memory downsampling optimization to save memory usage
- Support for custom image decoding
-
-Note: The 3.x version has been significantly restructured from the 2.x version, mainly in the following aspects:
-
- Use of the **Image** component instead of the **Canvas** component for rendering
- Refactored dispatch logic to control the number of concurrent requests and support priority in request queuing
- Support for custom memory cache strategies and sizes through **initMemoryCache**
- Support for custom implementation of image acquisition/network downloading through options
-
-Therefore, there are some differences in APIs and capabilities, which mainly include the following:
-
- The **drawLifeCycle** API is not supported; images are drawn manually through the canvas.
- In the new version, parameters such as **mainScaleType** and **border** are consistent with the system **Image** component.
- GIF/WebP animation playback and control (implemented by **ImageAnimator**).
- Anti-aliasing related parameters.
-
-## How to Install
+## 下载安装

 ```
 ohpm install @ohos/imageknife
-
-// If file caching is required, initialize the file cache in advance.
-await ImageKnife.getInstance().initFileCache(context, 256, 256 * 1024 * 1024)
 ```

-## How to Use
+## 使用说明  

-#### 1. Displaying a Local Resource Image
+### 1.依赖配置
+在entry\src\main\ets\entryability\EntryAbility.ts中做如下配置初始化全局ImageKnife实例：

-```
-ImageKnifeComponent({
-  ImageKnifeOption: new ImageKnifeOption({
-    loadSrc: $r("app.media.app_icon"),
-    placeholderSrc: $r("app.media.loading"),
-    errorholderSrc: $r("app.media.app_icon"),
-    objectFit: ImageFit.Auto
-  })
-}).width(100).height(100)
-```
+```typescript
+import UIAbility from '@ohos.app.ability.UIAbility';
+import window from '@ohos.window';
+import { ImageKnife } from '@ohos/imageknife'

-#### 2. Displaying a File from Local Context Files
-
-```
-ImageKnifeComponent({
-  ImageKnifeOption: new ImageKnifeOption({
-    loadSrc: this.localFile,
-    placeholderSrc: $r("app.media.loading"),
-    errorholderSrc: $r("app.media.app_icon"),
-    objectFit: ImageFit.Auto
-  })
-}).width(100).height(100)
-```
-
-#### 3. Displaying a Network Image
-
-```
-ImageKnifeComponent({
-  ImageKnifeOption: new ImageKnifeOption({
-    loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
-    placeholderSrc: $r("app.media.loading"),
-    errorholderSrc: $r("app.media.app_icon"),
-    objectFit: ImageFit.Auto
-  })
-}).width(100).height(100)
-```
-
-#### 4. Downloading an Image with Custom Options
-
-```
-ImageKnifeComponent({
-  ImageKnifeOption: new ImageKnifeOption({
-    loadSrc: "https://file.atomgit.com/uploads/user/1704857786989_8994.jpeg",
-    placeholderSrc: $r("app.media.loading"),
-    errorholderSrc: $r("app.media.app_icon"),
-    objectFit: ImageFit.Auto,
-    customGetImage: custom
- })
-}).width(100).height(100)
-
-// Custom implementation of the image acquisition method, such as custom network download。
-@Concurrent
-async function custom(context: Context, src: string | PixelMap | Resource): Promise<ArrayBuffer | undefined> {
-  console.info("ImageKnife:: custom download: " + src)
-  // Example of hardcoding to read from a local file. You can also request a network image.
-  return context.resourceManager.getMediaContentSync($r("app.media.bb").id).buffer as ArrayBuffer
+export default class EntryAbility extends UIAbility {
+  onWindowStageCreate(windowStage: window.WindowStage) {
+    windowStage.loadContent('pages/Index', (err, data) => {
+    });
+    // 初始化全局ImageKnife 
+    ImageKnife.with(this.context);
+  	// 后续访问ImageKnife请通过:ImageKnifeGlobal.getInstance().getImageKnife()方式
+  }
 }
 ```

-#### 5. Listening for Network Download Progress
+### 2.加载普通图片

-```
-ImageKnifeComponent({
-  ImageKnifeOption: new ImageKnifeOption({
-    loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
-    progressListener:(progress:number)=>{console.info("ImageKinfe:: call back progress = " + progress)}
-  })
-}).width(100).height(100)
+接下来我们来写个简单实例看看:
+
+```extendtypescript
+import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/imageknife'
+
+@Entry
+@Component
+struct Index {
+  @State message: string = 'Hello World'
+  @State option: ImageKnifeOption = {
+    loadSrc: $r('app.media.icon')
+  }
+
+  build() {
+      Row() {
+        Column() {
+          Text(this.message)
+            .fontSize(50)
+            .fontWeight(FontWeight.Bold)
+          ImageKnifeComponent({ imageKnifeOption: this.option })
+            .width(300)
+            .height(300)
+        }.width('100%')
+      }.height('100%')
+  }
+}
 ```

-#### 6. Setting Border Options
+非常简单，仅需定义一个ImageKnifeOption数据对象，然后在你需要的UI位置，加入ImageKnifeComponent自定义组件就可以加载出一张图像了。

-```
-ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
-{
-   loadSrc: $r("app.media.rabbit"),
-   border: {radius:50}
-  })
-}).width(100).height(100)
-```
+### 3.加载SVG图片

-#### 7. Setting Image Transformation Options
+加载svg其实和普通流程没有区别,只要将 `loadSrc: $r('app.media.jpgSample'),` `改成一张 loadSrc: $r('app.media.svgSample'),`
+svg类型图片即可。

-```
-ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
-{
-   loadSrc: $r("app.media.rabbit"),
-   border: {radius:50},
-   transformation: new BlurTransformation(3)
-  })
-}).width(100).height(100)
-```
-Multiple combined transformation usages:

-```
-let transformations: collections.Array<PixelMapTransformation> = new collections.Array<PixelMapTransformation>();
-transformations.push(new BlurTransformation(5));
-transformations.push(new BrightnessTransformation(0.2));
-ImageKnifeComponent({
-  imageKnifeOption: new ImageKnifeOption({
-  loadSrc: $r('app.media.pngSample'),
-  placeholderSrc: $r("app.media.loading"),
-  errorholderSrc: $r("app.media.app_icon"),
-  objectFit: ImageFit.Contain,
-  border: { radius: { topLeft: 50, bottomRight: 50 } }, // Rounded corner settings
-  transformation: transformations.length > 0 ? new MultiTransTransformation(transformations) : undefined // Graphic transformation group
-})
-}).width(300)
-  .height(300)
-  .rotate ({angle: 90}) // Rotate by 90 degrees.
-  .contrast(12) // Contrast filter
-```
-Other transformation-related properties can be stacked to achieve combined transformation effects.
+### 4.加载GIF图片

-Example of circular cropping transformation:
+加载GIF其实和普通流程也没有区别只要将 `loadSrc: $r('app.media.jpgSample'),` `改成一张 loadSrc: $r('app.media.gifSample'),`
+GIF图片即可。

-```
-ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption(
-  {
-  loadSrc: $r('app.media.pngSample'),
-  objectFit: ImageFit.Cover,
-  border: { radius: 150 }
-})
-}).width(300)
-  .height(300)
-```
-
-Example of Circular cropping with border transformation:
+### 5.自定义Key
+因为通常改变标识符比较困难或者根本不可能，所以ImageKnife也提供了 签名 API 来混合（你可以控制的）额外数据到你的缓存键中。
+签名(signature)适用于媒体内容，也适用于你可以自行维护的一些版本元数据。

+将签名传入加载请求
+```extendtypescript
+imageKnifeOption = {
+                loadSrc: 'https://aahyhy.oss-cn-beijing.aliyuncs.com/blue.jpg',
+                signature: new ObjectKey(new Date().getTime().toString())
+              }
 ```
-ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption(
-  {
-  loadSrc: $r('app.media.pngSample'),
-  objectFit: ImageFit.Cover,
-  border: { radius: 150, color: Color.Red, width: 5 }
-})
-}).width(300)
-  .height(300)
-```
+详细样例请参考SignatureTestPage文件

-Example of contrast filtering transformation:
+代码示例

-```
-ImageKnifeComponent({
-  imageKnifeOption: new ImageKnifeOption({
-    loadSrc: $r('app.media.pngSample')
-  })
-}).width(300)
-  .height(300)
-  .contrast(12)
-```
+## 进阶使用

-Example of rotation transformation:
+如果简单的加载一张图像无法满足需求，我们可以看看ImageKnifeOption这个类提供了哪些扩展能力。

-```
-ImageKnifeComponent({
-  imageKnifeOption: new ImageKnifeOption({
-    loadSrc: $r('app.media.pngSample')
-  })
-}).width(300)
-  .height(300)
-  .rotate({angle:90})
-  .backgroundColor(Color.Pink)
-```
+### ImageKnifeOption参数列表

-#### 8. Listening for Image Loading Success and Failure
+| 参数名称                     | 入参内容                                                     | 功能简介                                          |
+| ---------------------------- | ------------------------------------------------------------ |-----------------------------------------------|
+| loadSrc                      | string\| PixelMap\                                     |Resource                                   | 图片数据源                          |
+| mainScaleType                | ScaleType                                                    | 设置主图展示样式（可选）                                  |
+| strategy                     | DiskStrategy                                                 | 设置磁盘缓存策略（可选）                                  |
+| dontAnimateFlag              | boolean                                                      | gif加载展示一帧（可选）                                 |
+| placeholderSrc               | PixelMap\| Resource                                      | 占位图数据源                        |
+| placeholderScaleType         | ScaleType                                                    | 设置占位图展示样式（可选）                                 |
+| errorholderSrc               | PixelMap\| Resource                                      | 错误占位图数据源                    |
+| errorholderSrcScaleType      | ScaleType                                                    | 设置失败占位图展示样式（可选）                               |
+| retryholderSrc               | PixelMap\| Resource                                      | 重试占位图数据源                    |
+| retryholderScaleType         | ScaleType                                                    | 设置重试占位图展示样式（可选）                               |
+| thumbSizeMultiplier          | number  范围(0,1]                                            | 设置缩略图占比（可选）                                   |
+| thumbSizeDelay               | number                                                       | 设置缩略图展示时间（可选）                                 |
+| thumbSizeMultiplierScaleType | ScaleType                                                    | 设置缩略图展示样式（可选）                                 |
+| displayProgress              | boolean                                                      | 设置是否展示下载进度条（可选）                               |
+| canRetryClick                | boolean                                                      | 设置重试图层是否点击重试（可选）                              |
+| onlyRetrieveFromCache        | boolean                                                      | 仅使用缓存加载数据（可选）                                 |
+| isCacheable                  | boolean                                                      | 是否开启一级内存缓存（可选）                                |
+| gif                          | {<br/>    // 返回一周期动画gif消耗的时间<br/>    loopFinish?: (loopTime?) => void<br/>    // gif播放速率相关<br/>    speedFactory?: number<br/>    // 直接展示gif第几帧数据<br/>    seekTo?: number<br/>  } | GIF播放控制能力（可选）                                 |
+| transformation               | BaseTransform<PixelMap>                                      | 单个变换（可选）                                      |
+| transformations              | Array<BaseTransform<PixelMap>>                               | 多个变换,目前仅支持单个变换（可选）                            |
+| allCacheInfoCallback         | IAllCacheInfoCallback                                        | 输出缓存相关内容和信息（可选）                               |
+| signature                    | ObjectKey                                                    | 自定key（可选）                                     |
+| **drawLifeCycle**            | **IDrawLifeCycle**                                           | **用户自定义实现绘制方案（可选）**                           |
+| imageSmoothingEnabled        | boolean                                        | 抗锯齿是否开启属性配置，设置为false时，imageSmoothingQuality失效 |
+| imageSmoothingQuality        | AntiAliasing                                         | 抗锯齿属性配置                                       |

-```
-ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
-{
-   loadSrc: $r("app.media.rabbit"),
-   onLoadListener:{
-    onLoadStart:()=>{
-     this.starTime = new Date().getTime()
-     console.info("Load start: ");
-    },
-    onLoadFailed: (err) => {
-     console.error("Load Failed Reason: " + err + "  cost " + (new Date().getTime() - this.starTime) + " milliseconds");
-    },
-    onLoadSuccess: (data, imageData) => {
-     console.info("Load Successful: cost " + (new Date().getTime() - this.starTime) + " milliseconds");
-     return data;
-    },
-    onLoadCancel(err){
-      console.info(err)
+其他参数只需要在ImageKnifeOption对象上按需添加即可。
+
+这里我们着重讲一下**自定义实现绘制方案**。为了增强绘制扩展能力，目前ImageKnifeComponent使用了Canvas的渲染能力作为基础。在此之上为了抽象组件绘制表达。我将图像的状态使用了
+**IDrawLifeCycle绘制生命周期进行表达**，
+
+大致流程 展示占位图->展示网络加载进度->展示缩略图->展示主图->展示重试图层->展示失败占位图
+
+<img src="screenshot/png1.png" width="100%"/>
+
+ImageKnifeComponent内部，责任链实现。 用户参数设置->全局参数设置->自定义组件内部设置
+
+采用责任链的好处是，用户可以通过自定义绘制，重新绘制图层。如果不想绘制也可以通过预制回调获取绘制流程信息。
+
+<img src="screenshot/png2.png" width="70%"/>
+
+### 场景1:默认的展示不满足需求，需要加个圆角效果。
+
+代码如下:
+
+```typescript
+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'),
+      // 占位图使用本地资源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(300) 
+            .height(300)
+          }
+        }
+        .width('100%')
+        .height('100%')
    }
-   }
-  })
-}).width(100).height(100)
+}
 ```
-#### 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.
-```
-ImageKnifeComponent({
-        imageKnifeOption:new ImageKnifeOption({
-          loadSrc:$r("app.media.pngSample"),
-          placeholderSrc:$r("app.media.loading")
-        }),syncLoad:true
-      })
-```
-#### 10. Use of ImageKnifeAnimatorComponent
-```
-ImageKnifeAnimatorComponent({
-        imageKnifeOption:new ImageKnifeOption({
-          loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
-          placeholderSrc:$r('app.media.loading'),
-          errorholderSrc:$r('app.media.failed')
-        }),animatorOption:this.animatorOption
-      }).width(300).height(300).backgroundColor(Color.Orange).margin({top:30})
-```
-#### 11.图片降采样 示例
-```
-ImageKnifeComponent({
-        imageKnifeOption:new ImageKnifeOption({
-          loadSrc:$r("app.media.pngSample"),
-          placeholderSrc:$r('app.media.loading'),
-          errorholderSrc:$r('app.media.failed'),
-          downsampleOf: DownsampleStrategy.NONE
-        }),animatorOption:this.animatorOption
-      }).width(300).height(300)
-```
-#### Reuse Scenario
-Clear the component content in the **aboutToRecycle** lifecycle and trigger image loading through watch observeration.
-## Available APIs
-### ImageKnife
-| Component                   | Parameter                        | Description    |
-| --------------------------- | -------------------------------- | ------------ |
-| ImageKnifeComponent         | ImageKnifeOption                 | Image display component.|
-| ImageKnifeAnimatorComponent | ImageKnifeOption, AnimatorOption| Animated image control component.|

-### AnimatorOption
-| Parameter  | Type       | Description                                |
-| ---------- | --------------- | ---------------------------------------- |
-| state      | AnimationStatus | Playback status. Optional.                        |
-| iterations | number          | Number of playback times. Optional.                        |
-| reverse    | boolean         | Playback order. Optional.                        |
-| onStart    | ()=>void        | Triggered when the animation starts. Optional.              |
-| onFinish   | ()=>void        | Triggered when the animation finishes or stops. Optional.|
-| onPause    | ()=>void        | Triggered when the animation pauses. Optional.              |
-| onCancel   | ()=>void        | Triggered when the animation is canceled, that is, when it is reset to its initial state. Optional.          |
-| onRepeat   | ()=>void        | Triggered when the animation repeats. Optional.              |
+`ImageKnifeDrawFactory.createRoundLifeCycle(5,"#ff00ff",30)`
+我们深入查看源码可以发现，实际上是对IDrawLifeCycle接口的部分实现，这里我介绍一下IDrawLifeCycle。

-### ImageKnifeOption
+*
+*IDrawLifeCycle的返回值代表事件是否被消费，如果被消费接下来组件内部就不会处理，如果没被消费就会传递到下一个使用者。目前消费流程（用户自定义->
+全局配置定义->组件内部默认定义）**

-| Parameter             | Type                                             | Description                      |
-| --------------------- | ----------------------------------------------------- | ------------------------------ |
-| loadSrc               | string, PixelMap, Resource                           | Main image.                      |
-| placeholderSrc        | PixelMap, Resource                                   | Placeholder image. Optional.          |
-| errorholderSrc        | PixelMap, Resource                                   | Error image. Optional.            |
-| objectFit             | ImageFit                                              | How the main image is resized to fit its container. Optional.          |
-| placeholderObjectFit  | ImageFit                                              | How the placeholder image is resized to fit its container. Optional.        |
-| errorholderObjectFit  | ImageFit                                              | How the error image is resized to fit its container. Optional.        |
-| writeCacheStrategy    | CacheStrategyType                                     | Cache writing strategy. Optional.            |
-| onlyRetrieveFromCache | boolean                                               | Whether to skip network and local requests. Optional.|
-| customGetImage        | (context: Context, src: string                        | Custom image download. Optional.        |
-| border                | BorderOptions                                         | Border corner. Optional.              |
-| priority              | taskpool.Priority                                     | Load priority. Optional.            |
-| context               | common.UIAbilityContext                               | Context. Optional.                |
-| progressListener      | (progress: number)=>void                              | Progress. Optional.                  |
-| signature             | String                                                | Custom cache signature. Optional.      |
-| headerOption          | Array\<HeaderOptions>                                 | Request headers. Optional.            |
-| transformation        | PixelMapTransformation                                | Image transformation. Optional.              |
-| drawingColorFilter    | ColorFilter                                           | Drawing color filter. Optional.            |
-| onComplete            | (event:EventImage \| undefined)=>void              | Callback for image loading completion. Optional. |
-| onLoadListener        | onLoadStart:()=>void,onLoadSuccess:(data:string\|Pixelmap)=>void                       | Callback for image loading events. Optional. |
-| downsampleOf          | DownsampleStrategy                                    | 降采样(可选)                  |
-### 降采样类型
-| 类型                  | 相关描述              |
-|---------------------|-------------------|
-| NONE                | 不进行降采样            |
-| AT_MOST             | 请求尺寸大于实际尺寸不进行放大   |
-| FIT_CENTER_MEMORY          | 两边自适应内存优先             |
-| FIT_CENTER_QUALITY          | 两边自适应质量优先             |
-| CENTER_OUTSIDE_MEMORY       | 宽高缩放比最大的比例，进行缩放适配内存优先 |
-| CENTER_OUTSIDE_QUALITY       | 宽高缩放比最大的比例，进行缩放适配质量优先 |
-| AT_LEAST      | 根据宽高的最小的比例，进行适配   |
-### ImageKnife
+所以我们在当数据是一张PixelMap的时候（目前jpg png bmp webp
+svg返回的都是PixelMap，gif返回GIFFrame数组），我们返回了true。消费了事件，代表这个绘制流程用户自定义完成。

-| Parameter         | Type                                                    | Description                  |
-| ----------------- | ------------------------------------------------------------ | -------------------------- |
-| initMemoryCache   | newMemoryCache: IMemoryCache                                 | Initializes a custom memory cache strategy.        |
-| initFileCache     | context: Context, size: number, memory: number               | Initializes the file cache size and quantity  |
-| preLoadCache      | loadSrc: string I ImageKnifeOption                           | Preloads and returns the file cache path.  |
-| getCacheImage     | loadSrc: string, cacheType: CacheStrategy = CacheStrategy.Default, signature?: string) | Obtains resources from memory or file cache.|
-| addHeader         | key: string, value: Object                                   | Adds a global HTTP request header.        |
-| setHeaderOptions  | Array<HeaderOptions>                                         | Sets global HTTP request headers.        |
-| deleteHeader      | key: string                                                  | Deletes a global HTTP request header.        |
-| setCustomGetImage | customGetImage?: (context: Context, src: string              | PixelMap                   |
-| setEngineKeyImpl  | IEngineKey                                                   | Sets a global cache key generation strategy.   |
-| putCacheImage     | url: string, pixelMap: PixelMap, cacheType: CacheStrategy = CacheStrategy.Default, signature?: string | Writes to the memory disk cache.          |
-| removeMemoryCache | url: string                                                  | Removes an entry from the memory cache.          |
-| removeFileCache   | url: string                                                  | Removes an entry from the file cache.          |
-### Graphics tRansformation Types (GPUImage Dependency Required)
+<img src="screenshot/gif2.gif" width="50%"/>

-| Type                    | Description                     |
-| ------------------------ | ----------------------------- |
-| BlurTransformation       | Blurs the image.                     |
-| BrightnessTransformation | Applies a brightness filter.                   |
-| CropSquareTransformation | Crops the image to a square.                   |
-| CropTransformation       | Crops the image to a custom rectangle.               |
-| GrayScaleTransformation  | Applies a grayscale filter.                 |
-| InvertTransformation     | Applies an inversion filter.                   |
-| KuwaharaTransformation   | Applies a Kuwahara filter (requires **GPUImage**).  |
-| MaskTransformation       | Applies a mask.                         |
-| PixelationTransformation | Applies a pixelation filter (requires **GPUImage**).|
-| SepiaTransformation      | Applies a sepia filter (requires **GPUImage**).|
-| SketchTransformation     | Applies a sketch filter (requires **GPUIImage**).  |
-| SwirlTransformation      | Applies a swirl filter (requires **GPUImage**).  |
-| ToonTransformation       | Applies a cartoon filter (requires **GPUImage**).  |
-| VignetterTransformation  | Applies a vignette filter (requires **GPUImage**).  |
+由于IDrawLifeCycle实现较为冗长，我们封装了ImageKnifeDrawFactory工厂，提供了网络下载百分比效果、圆角、椭圆添加边框等能力。下面我们就再看看使用工厂封装之后的场景代码。

-## Downloading and Installing the GPUImage Dependency
-Method 1: In the **Terminal** window, run the following command to install the third-party HAR. DevEco Studio will automatically add the HAR as a dependency to the **oh-package.json5** file of the project.
-```
-    ohpm install @ohos/gpu_transform
-```
-Method 2: Set the third-party HAR as a dependency in the **oh-package.json5** file of the project. The following is a configuration example:
-```
-    "dependencies": {
-      "@ohos/gpu_transform": "^1.0.2"
+### 场景2: 网络下载百分比效果展示
+
+当进行加载网络图片时，可能需要展示网络下载百分比动画。但是默认的动画又不能满足需求，这个时候我们就需要自定义网络下载百分比效果。代码如下:
+
+```typescript
+import UIAbility from '@ohos.app.ability.UIAbility';
+import window from '@ohos.window';
+import { ImageKnifeGlobal,ImageKnife,ImageKnifeDrawFactory,LogUtil } from '@ohos/imageknife'
+import abilityAccessCtrl,{Permissions} from '@ohos.abilityAccessCtrl';
+export default class EntryAbility extends UIAbility {
+    onWindowStageCreate(windowStage: window.WindowStage) {
+        //.. 删除不必要代码
+        windowStage.loadContent('pages/index', (err, data) => {
+        });
+       	// 初始化ImageKnifeGlobal和ImageKnife
+        ImageKnife.with(this.context);
+        // 全局配置网络加载进度条 使用ImageKnifeGlobal.getInstance().getImageKnife()访问ImageKnife
+ImageKnifeGlobal.getInstance().getImageKnife().setDefaultLifeCycle(ImageKnifeDrawFactory.createProgressLifeCycle("#10a5ff", 0.5))
    }
+}
 ```
-## Constraints

-This project has been verified in the following version:
+这里大家可能会问，为什么会将这个IDrawLifeCycle放在AbilityStage里面实现？

-DevEco Studio: 5.0 Canary3 (5.0.3.502), SDK: API 12 (5.0.0.31)
+这是因为网络下载百分比进度很多时候都是全局通用，如果有需要全局配置的自定义展示方案。推荐在AbilityStage里面，往ImageKnife的setDefaultLifeCycle函数中注入，即可将ImageKnifeComponent中的默认绘制方案替换。

-## How to Contribute
+在这里我们实现的效果如下图所示。

-If you find any problem during the use, submit an [Issue](https://gitee.com/openharmony-tpc/ImageKnife/issues) or a [PR](https://gitee.com/openharmony-tpc/ImageKnife/issues) to us.
+<img src="screenshot/gif3.gif" width="50%"/>

-## License
+## 高级用法

-This project is licensed under [Apache License 2.0](https://gitee.com/openharmony-tpc/ImageKnife/blob/master/LICENSE).
+以上简单使用和进阶使用都是经过一层自定义组件封装之后形成的，RequestOption封装成了ImageKnifeOption,绘制部分封装成了自定义组件ImageKnifeComponent。

-## Known Issues
+如果用户其实并不关心绘制部分，或者说想用自己的通用方案对自定义组件ImageKnifeComponent重构都是可以的。

- The **ImageFit** attribute cannot be set for the **ImageKnifeAnimator** component.
- The **border** attribute of the **ImageKnifeAnimator** component cannot make the image rounded corners.
+下面我们会着重指导用户如何复用图片加载逻辑，重构自定义组件ImageKnifeComponent。
+
+首先我们先看看RequestOption构建的内容,如下所示:
+
+### 数据加载
+
+#### RequestOption构建:
+
+请查阅下文接口内容：[RequestOption接口方法](#requestoption用户配置参数)
+
+了解了RequestOption的参数内容后，我们可以参考ImageKnifeComponent组件代码进行分析。
+
+**从`imageKnifeExecute()`函数入口，首先我们需要构建一个RequestOption对象，`let request = new RequestOption()`,
+接下来就是按需配置request对象的内容，最后使用 `ImageKnifeGlobal.getInstance().getImageKnife()?.call(request)`发送request执行任务即可。**
+
+是不是很简单，而其实最重要的内容是就是:  **按需配置request对象的内容** 为了更好理解，我举例说明一下:
+
+#### 场景一: 简单加载一张图片
+
+```
+let request = new RequestOption();
+// (必传)
+request.load("图片url")
+  // (可选 整个request监听回调)
+	.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+	// data 是ImageKnifeData对象
+	if(data.isPixelMap()){
+	// 这样就获取到了目标PixelMap
+	let pixelmap = data.drawPixleMap.imagePixelMap;
+	}
+    return false;
+  })
+ 
+  let compSize:Size = {
+    width: this.currentWidth,
+    height:this.currentHeight
+  }
+  // (必传)这里setImageViewSize函数必传组件大小，因为涉及到图片变换效果都需要适配图像源和组件大小
+ request.setImageViewSize(compSize)
+ // 最后使用ImageKnife的call函数调用request即可
+ let imageKnife:ImageKnife|undefined = ImageKnifeGlobal.getInstance().getImageKnife();
+ if(imageKnife != undefined){
+ 	imageKnife.call(request)
+ }
+
+```
+
+**其他场景，可以按需加载**
+
+比如我需要配置 **占位图** 只需要 在request对象创建好之后,调用 **placeholder** 函数即可
+
+```
+request.placeholder(this.imageKnifeOption.placeholderSrc, (data) => {
+  console.log('request.placeholder callback')
+  this.displayPlaceholder(data)
+})
+```
+
+再比如 我对缓存配置有要求，我要禁用内存缓存，调用 **skipMemoryCache** 函数即可
+
+```
+request.skipMemoryCache(true)
+```
+
+这里只是简单介绍部分使用，更多的内容请参考 **按需加载** 原则，并且可以参考ImageKnifeComponent源码或者根据文档自行探索实现。
+
+## 接口说明
+
+### RequestOption用户配置参数
+
+| 方法名                                                       | 入参                                                         | 接口描述                                                 |
+| ------------------------------------------------------------ | ------------------------------------------------------------ | -------------------------------------------------------- |
+| load(src: string \| PixelMap \|Resource)                     | src:string\|PixelMap\|Resource                               | 用户加载图片源                                           |
+| setImageViewSize(imageSize: {   width: number,   height: number }) | imageSize:{width: number, height: number }                   | 传入显示图片组件的大小，变换的时候需要作为参考           |
+| diskCacheStrategy(strategy: DiskStrategy)                    | strategy:DiskStrategy                                        | 配置磁盘缓存策略  NONE SOURCE RESULT  ALL  AUTOMATIC     |
+| placeholder(src: PixelMap\|Resource, func?: AsyncSuccess<ImageKnifeData>) | src: PixelMap\|Resource, func?: AsyncSuccess<ImageKnifeData> | 占位图，占位图回调数据ImageKnifeData                     |
+| errorholder(src: PixelMap\|Resource, func?: AsyncSuccess<ImageKnifeData>) | src: PixelMap\|Resource, func?: AsyncSuccess<ImageKnifeData> | 错误占位图，错误占位图回调数据ImageKnifeData             |
+| retryholder(src: PixelMap\|Resource, func?: AsyncSuccess<ImageKnifeData>) | src: PixelMap\|Resource, func?: AsyncSuccess<ImageKnifeData> | 重试占位图，重试占位图回调数据ImageKnifeData             |
+| addListener(func: AsyncCallback<ImageKnifeData>)             | func: AsyncCallback<ImageKnifeData>                          | 配置整个监听回调，数据正常加载返回，加载失败返回错误信息 |
+| thumbnail(sizeMultiplier:number, func?: AsyncSuccess<ImageKnifeData>) | sizeMultiplier:number, func?: AsyncSuccess<ImageKnifeData>   | 设置缩略图比例，缩略图返回后，加载并展示缩略图           |
+| addProgressListener(func?: AsyncSuccess<number>)             | func?: AsyncSuccess<number>                                  | 设置网络下载百分比监听，返回数据加载百分比数值           |
+| addAllCacheInfoCallback(func: IAllCacheInfoCallback)         | func: IAllCacheInfoCallback                                  | 设置获取所有缓存信息监听                                 |
+| skipMemoryCache(skip: boolean)                               | skip: boolean                                                | 配置是否跳过内存缓存                                     |
+| retrieveDataFromCache(flag: boolean)                         | flag: boolean                                                | 配置仅从缓存中加载数据                                   |
+| signature                                                    | ObjectKey                                                    | 自定义key                                                |
+
+同时支持[图片变换相关](#图片变换相关)接口。
+
+### ImageKnife 启动器/门面类
+
+| 方法名                          | 入参                   | 接口描述                           |
+| ------------------------------- | ---------------------- | ---------------------------------- |
+| call(request: RequestOption)    | request: RequestOption | 根据用户配置参数具体执行加载流程   |
+| preload(request: RequestOption) | request: RequestOption | 根据用户配置参数具体执行预加载流程 |
+| pauseRequests()                 |                        | 全局暂停请求                       |
+| resumeRequests()                |                        | 全局恢复暂停                       |
+
+### 缓存策略相关
+
+| 使用方法                                       | 类型        | 策略描述                 |
+|--------------------------------------------|-----------|----------------------|
+| request.diskCacheStrategy(new ALL())       | ALL       | 表示既缓存原始图片，也缓存转换过后的图片 |
+| request.diskCacheStrategy(new AUTOMATIC()) | AUTOMATIC | 表示尝试对本地和远程图片使用适合的策略  |
+| request.diskCacheStrategy(new DATA())      | DATA      | 表示只缓存原始图片            |
+| request.diskCacheStrategy(new NONE())      | NONE      | 表示不缓存任何内容            |
+| request.diskCacheStrategy(new RESOURCE())  | RESOURCE  | 表示只缓存转换过后的图片         |
+
+### AntiAliasing类型展示效果
+
+| 使用方法                    | 类型     | 策略描述        |
+|-------------------------|--------|-------------|
+| AntiAliasing.FIT_HIGH   | String | 图像抗锯齿设置为高画质 |
+| AntiAliasing.FIT_MEDIUM | String | 图像抗锯齿设置为中画质 |
+| AntiAliasing.FIT_LOW    | String | 图像抗锯齿设置为低画质 |
+
+### ScaleType类型展示效果
+
+| 使用方法                    | 类型  | 策略描述                              |
+|-------------------------|-----|-----------------------------------|
+| ScaleType.FIT_START     | int | 图像位于用户设置组件左上角显示,图像会缩放至全部展示        |
+| ScaleType.FIT_END       | int | 图像位于用户设置组件右下角显示,图像会缩放至全部展示        |
+| ScaleType.FIT_CENTER    | int | 图像位于用户设置组件居中,图像会缩放至全部展示           |
+| ScaleType.CENTER        | int | 图像居中展示,不缩放                        |
+| ScaleType.CENTER_CROP   | int | 图像的宽高长度,短的部分缩放至组件大小,超出的全部裁剪       |
+| ScaleType.FIT_XY        | int | 图像拉伸至组件大小                         |
+| ScaleType.CENTER_INSIDE | int | 如果图像大于组件则执行FIT_CENTER,小于组件则CENTER |
+| ScaleType.NONE          | int | 如果不想适配，直接展示原图大小                   |
+
+### 图片变换相关
+
+| 使用方法                           | 类型                                 | 相关描述                           |
+|--------------------------------|------------------------------------|--------------------------------|
+| request.centerCrop()           | CenterCrop                         | 可以根据图片文件，目标显示大小，进行对应centerCrop |
+| request.centerInside()         | CenterInside                       | 可以根据图片文件，目标显示大小，进行对应centerInside |
+| request.fitCenter()            | FitCenter                          | 可以根据图片文件，目标显示大小，进行对应fitCenter  |
+| request.blur()                 | BlurTransformation                 | 模糊处理(图片分辨率较大建议传递第二个参数将图片进行缩小)  |
+| request.brightnessFilter()     | BrightnessFilterTransformation     | 亮度滤波器                          |
+| request.contrastFilter()       | ContrastFilterTransformation       | 对比度滤波器                         |
+| request.cropCircle()           | CropCircleTransformation           | 圆形剪裁显示                         |
+| request.cropCircleWithBorder() | CropCircleWithBorderTransformation | 圆环展示                           |
+| request.cropSquare()           | CropSquareTransformation           | 正方形剪裁                          |
+| request.crop()                 | CropTransformation                 | 自定义矩形剪裁                        |
+| request.grayscale()            | GrayscaleTransformation            | 灰度级转换                          |
+| request.invertFilter()         | InvertFilterTransformation         | 反转滤波器                          |
+| request.pixelationFilter()     | PixelationFilterTransformation     | 像素化滤波器                         |
+| request.rotateImage()          | RotateImageTransformation          | 图片旋转                           |
+| request.roundedCorners()       | RoundedCornersTransformation       | 圆角剪裁                           |
+| request.sepiaFilter()          | SepiaFilterTransformation          | 乌墨色滤波器                         |
+| request.sketchFilter()         | SketchFilterTransformation         | 素描滤波器                          |
+| request.mask()                 | MaskTransformation                 | 遮罩                             |
+| request.swirlFilter()          | SwirlFilterTransformation          | 扭曲滤波器                          |
+| request.kuwaharaFilter()       | KuwaharaFilterTransform            | 桑原滤波器                          |
+| request.toonFilter()           | ToonFilterTransform                | 动画滤波器                          |
+| request.vignetteFilter()       | VignetteFilterTransform            | 装饰滤波器                          |
+
+<img src="screenshot/gif4.gif" width="50%"/>
+
+### setLruCacheSize
+
+setLruCacheSize(size: number,memory:number): void
+
+设置图片文件缓存的大小上限，size单位为张数，memory单位为字节，提升再次加载同源图片的加载速度，特别是对网络图源会有较明显提升。
+如果不设置则默认为100张，100MB。缓存采用内置的LRU策略。
+size为0则代表不限制缓存张数，memory为0则代表不限制缓存大小。
+建议根据应用实际需求，设置合理缓存上限，数字过大可能导致内存占用过高，可能导致OOM异常。
+
+**参数：**
+
+| 参数名 | 类型 | 必填 | 说明                      |
+| -------- | -------- | -------- |-------------------------|
+| size | number | 是 | 图片文件的缓存张数，单位为张。只支持正整数，0 |
+| memory | number | 是 | 图片文件的缓存大小，单位为字节。只支持正数，0 |
+
+**示例：**
+```ts
+//EntryAbility.ets
+import { InitImageKnife } from '...imageknife'
+export default class EntryAbility extends UIAbility {
+  onWindowStageCreate(windowStage: window.WindowStage) { 
+    InitImageKnife.init(this.context);
+    let imageKnife: ImageKnife | undefined = ImageKnifeGlobal.getInstance().getImageKnife()
+    if (imageKnife != undefined) {
+      //设置全局内存缓存大小张数
+      imageKnife.setLruCacheSize(100, 100 * 1204 * 1024)
+    }
+  }
+}
+```
+
+
+## 约束与限制
+
+在下述版本验证通过：
+DevEco Studio 4.1（4.1.3.520）--SDK:API11（ 4.1.0.63）
+DevEco Studio 4.1（4.1.3.418）--SDK:API11（ 4.1.0.56）
+DevEco Studio 4.1（4.1.3.322）--SDK:API11（ 4.1.0.36）
+DevEco Studio 4.0（4.0.3.700）--SDK:API10（ 4.0.10.15）
+
+HSP场景适配:
+
+在使用ImageKnifeComponent进行加载图片时, 提供的ImageKnifeOption配置类新增了可选参数context, 在HSP场景下需要传入正确的context, 才能保证三方库后续正确获取Resource资源。
+
+在使用RquestOption进行加载图片时, 提供的RquestOption配置类新增了接口`setModuleContext(moduleCtx:common.UIAbilityContext)`, 在HSP场景下需要传入正确的context, 才能保证三方库后续正确获取Resource资源。
+
+非HSP场景不影响原功能, ImageKnifeOption配置类新增的可选参数context可以不传, RquestOption配置类新增的接口可以不调用。
+
+## 目录结构
+
+```
+/library/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     
+    - entryability
+      - CustomEngineKeyImpl.ets
+      - EntryAbility.ts
+    - pages                                    # 测试page页面列表
+       - basicTestFeatureAbilityPage.ets       # 测试列表加载
+       - basicTestFileIOPage.ets               # 测试fileio
+       - basicTestMediaImage.ets               # 测试媒体image
+       - basicTestResourceManagerPage.ets      # 测试本地资源解析
+       - compressPage.ets                      # 压缩页面
+       - cropImagePage2.ets                    # 手势裁剪页面
+       - frescoImageTestCasePage.ets           # 测试属性动画组件切换
+       - frescoRetryTestCasePage.ets           # 测试ImageKnifeComponent加载失败重试
+       - svgTestCasePage.ets				   # 测试svg解析页面
+       - imageknifeTestCaseIndex.ets           # 测试用例页面入口
+       - index.ets                             # 程序入口页面
+       - loadNetworkTestCasePage.ets           # 网络加载测试
+       - loadResourceTestCasePage.ets          # 本地加载测试
+       - showErrorholderTestCasePage.ets       # 加载失败占位图测试
+       - SignatureTestPage.ets                 # 自定义key测试
+       - storageTestDiskLruCache.ets           # 磁盘缓存测试
+       - storageTestLruCache.ets               # 内存缓存测试
+       - testAllCacheInfoPage.ets              # 所有缓存信息获取测试
+       - testImageKnifeOptionChangedPage.ets   # 数据切换测试
+       - testImageKnifeOptionChangedPage2.ets  # 数据切换测试,部分变换
+       - testImageKnifeOptionChangedPage3.ets  # 数据切换测试,组件动画
+       - testImageKnifeOptionChangedPage4.ets  # 数据切换测试,内容动画
+       - testImageKnifeOptionChangedPage5.ets  # 数据切换测试,ImageKnifeDrawFactory封装圆角圆环边框等
+       - testPreloadPage.ets                   # 预加载测试
+       - transformPixelMapPage.ets             # 所有类型变换测试  
+       - testSingleFrameGifPage.ets            # 单帧gif加载测试
+  
+       - OptionTestPage.ets                    # 图片缓存测试
+       - testManyGifLoadWithPage               # 测试gif加载页面
+    -workers
+      - upngWorkerTestCase.ets    # png子线程解析
+      - upngWorkerDepend.ts       # png子线程解析具体执行
+```
+
+## 贡献代码
+
+使用过程中发现任何问题都可以提 [issue](https://gitee.com/openharmony-tpc/ImageKnife/issues)
+给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/openharmony-tpc/ImageKnife/issues) 。
+
+## 开源协议
+
+本项目基于 [Apache License 2.0](https://gitee.com/openharmony-tpc/ImageKnife/blob/master/LICENSE) ，请自由的享受和参与开源。
+
+## 遗留问题
+
+1.目前只支持一种图片变换效果。
+
+2.目前svg和gif动图不支持变换效果。
+
+## 补充说明
+### SVG标签说明
+使用版本为(SVG)1.1,当前支持的标签列表有：
+- a
+- circla
+- clipPath
+- defs
+- ellipse
+- feBlend
+- feColorMatrix
+- feComposite
+- feDiffuseLighting
+- feDisplacementMap
+- feDistantLight
+- feFlood
+- feGaussianBlur
+- feImage
+- feMorphology
+- feOffset
+- fePointLight
+- feSpecularLighting
+- feSpotLight
+- feTurbulence
+- filter
+- g
+- image
+- line
+- linearGradient
+- mask
+- path
+- pattern
+- polygon
+- polyline
+- radialGradient
+- rect
+- stop
+- svg
+- text
+- textPath
+- tspan
+- use
--- a/README_zh.md
+++ b/README_zh.md
@ -1,375 +0,0 @@
-# ImageKnife
-
-**专门为OpenHarmony打造的一款图像加载缓存库，致力于更高效、更轻便、更简单。**
-
-## 简介
-
-本项目参考开源库 [Glide](https://github.com/bumptech/glide) 进行OpenHarmony的自研版本：
-
- 支持自定义内存缓存策略，支持设置内存缓存的大小(默认LRU策略)。
- 支持磁盘二级缓存，对于下载图片会保存一份至磁盘当中。
- 支持自定义实现图片获取/网络下载
- 支持监听网络下载回调进度
- 继承Image的能力，支持option传入border，设置边框，圆角
- 继承Image的能力，支持option传入objectFit设置图片缩放，包括objectFit为auto时根据图片自适应高度
- 支持通过设置transform缩放图片
- 并发请求数量，支持请求排队队列的优先级
- 支持生命周期已销毁的图片，不再发起请求
- 自定义缓存key
- 自定义http网络请求头
- 支持writeCacheStrategy控制缓存的存入策略(只存入内存或文件缓存)
- 支持preLoadCache预加载图片
- 支持onlyRetrieveFromCache仅用缓存加载
- 支持使用一个或多个图片变换，如模糊，高亮等
-
-待实现特性
-
- 内存降采样优化，节约内存的占用
- 支持自定义图片解码
-
-注意：3.x版本相对2.x版本做了重大的重构，主要体现在：
-
- 使用Image组件代替Canvas组件渲染
- 重构Dispatch分发逻辑，支持控制并发请求数，支持请求排队队列的优先级
- 支持通过initMemoryCache自定义策略内存缓存策略和大小
- 支持option自定义实现图片获取/网络下载
-
-因此API及能力上，目前有部分差异，主要体现在：
-
- 不支持drawLifeCycle接口，通过canvas自会图片
- mainScaleType，border等参数，新版本与系统Image保持一致
- gif/webp动图播放与控制(ImageAnimator实现)
- 抗锯齿相关参数
-
-## 下载安装
-
-```
-ohpm install @ohos/imageknife
-
-// 如果需要用文件缓存，需要提前初始化文件缓存
-await ImageKnife.getInstance().initFileCache(context, 256, 256 * 1024 * 1024)
-```
-
-## 使用说明
-
-#### 1.显示本地资源图片
-
-```
-ImageKnifeComponent({
-  ImageKnifeOption: new ImageKnifeOption({
-    loadSrc: $r("app.media.app_icon"),
-    placeholderSrc: $r("app.media.loading"),
-    errorholderSrc: $r("app.media.app_icon"),
-    objectFit: ImageFit.Auto
-  })
-}).width(100).height(100)
-```
-
-#### 2.显示本地context files下文件
-
-```
-ImageKnifeComponent({
-  ImageKnifeOption: new ImageKnifeOption({
-    loadSrc: this.localFile,
-    placeholderSrc: $r("app.media.loading"),
-    errorholderSrc: $r("app.media.app_icon"),
-    objectFit: ImageFit.Auto
-  })
-}).width(100).height(100)
-```
-
-#### 3.显示网络图片
-
-```
-ImageKnifeComponent({
-  ImageKnifeOption: new ImageKnifeOption({
-    loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
-    placeholderSrc: $r("app.media.loading"),
-    errorholderSrc: $r("app.media.app_icon"),
-    objectFit: ImageFit.Auto
-  })
-}).width(100).height(100)
-```
-
-#### 4.自定义下载图片
-
-```
-ImageKnifeComponent({
-  ImageKnifeOption: new ImageKnifeOption({
-    loadSrc: "https://file.atomgit.com/uploads/user/1704857786989_8994.jpeg",
-    placeholderSrc: $r("app.media.loading"),
-    errorholderSrc: $r("app.media.app_icon"),
-    objectFit: ImageFit.Auto,
-    customGetImage: custom
- })
-}).width(100).height(100)
-
-// 自定义实现图片获取方法，如自定义网络下载
-@Concurrent
-async function custom(context: Context, src: string | PixelMap | Resource): Promise<ArrayBuffer | undefined> {
-  console.info("ImageKnife::  custom download：" + src)
-  // 举例写死从本地文件读取，也可以自己请求网络图片
-  return context.resourceManager.getMediaContentSync($r("app.media.bb").id).buffer as ArrayBuffer
-}
-```
-
-#### 5.监听网络下载进度
-
-```
-ImageKnifeComponent({
-  ImageKnifeOption: new ImageKnifeOption({
-    loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
-    progressListener:(progress:number)=>{console.info("ImageKinfe:: call back progress = " + progress)}
-  })
-}).width(100).height(100)
-```
-
-#### 6.支持option传入border，设置边框，圆角
-
-```
-ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
-{
-   loadSrc: $r("app.media.rabbit"),
-   border: {radius:50}
-  })
-}).width(100).height(100)
-```
-
-#### 7.支持option图片变换
-
-```
-ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
-{
-   loadSrc: $r("app.media.rabbit"),
-   border: {radius:50},
-   transformation: new BlurTransformation(3)
-  })
-}).width(100).height(100)
-```
-多种组合变换用法
-
-```
-let transformations: collections.Array<PixelMapTransformation> = new collections.Array<PixelMapTransformation>();
-transformations.push(new BlurTransformation(5));
-transformations.push(new BrightnessTransformation(0.2));
-ImageKnifeComponent({
-  imageKnifeOption: new ImageKnifeOption({
-  loadSrc: $r('app.media.pngSample'),
-  placeholderSrc: $r("app.media.loading"),
-  errorholderSrc: $r("app.media.app_icon"),
-  objectFit: ImageFit.Contain,
-  border: { radius: { topLeft: 50, bottomRight: 50 } }, // 圆角设置
-  transformation: transformations.length > 0 ? new MultiTransTransformation(transformations) : undefined // 图形变换组
-})
-}).width(300)
-  .height(300)
-  .rotate({ angle: 90 }) // 旋转90度
-  .contrast(12) // 对比度滤波器
-```
-其它变换相关属性，可叠加实现组合变换效果
-
-圆形裁剪变换示例
-
-```
-ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption(
-  {
-  loadSrc: $r('app.media.pngSample'),
-  objectFit: ImageFit.Cover,
-  border: { radius: 150 }
-})
-}).width(300)
-  .height(300)
-```
-
-圆形裁剪带边框变换示例
-
-```
-ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption(
-  {
-  loadSrc: $r('app.media.pngSample'),
-  objectFit: ImageFit.Cover,
-  border: { radius: 150, color: Color.Red, width: 5 }
-})
-}).width(300)
-  .height(300)
-```
-
-对比度滤波变换示例
-
-```
-ImageKnifeComponent({
-  imageKnifeOption: new ImageKnifeOption({
-    loadSrc: $r('app.media.pngSample')
-  })
-}).width(300)
-  .height(300)
-  .contrast(12)
-```
-
-旋转变换示例
-
-```
-ImageKnifeComponent({
-  imageKnifeOption: new ImageKnifeOption({
-    loadSrc: $r('app.media.pngSample')
-  })
-}).width(300)
-  .height(300)
-  .rotate({angle:90})
-  .backgroundColor(Color.Pink)
-```
-
-#### 8.监听图片加载成功与失败
-
-```
-ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
-{
-   loadSrc: $r("app.media.rabbit"),
-   onLoadListener:{
-    onLoadStart:()=>{
-     this.starTime = new Date().getTime()
-     console.info("Load start: ");
-    },
-    onLoadFailed: (err) => {
-     console.error("Load Failed Reason: " + err + "  cost " + (new Date().getTime() - this.starTime) + " milliseconds");
-    },
-    onLoadSuccess: (data, imageData) => {
-     console.info("Load Successful: cost " + (new Date().getTime() - this.starTime) + " milliseconds");
-     return data;
-    },
-    onLoadCancel(err){
-      console.info(err)
-    }
-   }
-  })
-}).width(100).height(100)
-```
-#### 9.ImageKnifeComponent - syncLoad
-设置是否同步加载图片，默认是异步加载。建议加载尺寸较小的Resource图片时将syncLoad设为true，因为耗时较短，在主线程上执行即可
-```
-ImageKnifeComponent({
-        imageKnifeOption:new ImageKnifeOption({
-          loadSrc:$r("app.media.pngSample"),
-          placeholderSrc:$r("app.media.loading")
-        }),syncLoad:true
-      })
-```
-#### 10.ImageKnifeAnimatorComponent 示例
-```
-ImageKnifeAnimatorComponent({
-        imageKnifeOption:new ImageKnifeOption({
-          loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
-          placeholderSrc:$r('app.media.loading'),
-          errorholderSrc:$r('app.media.failed')
-        }),animatorOption:this.animatorOption
-      }).width(300).height(300).backgroundColor(Color.Orange).margin({top:30})
-```
-#### 复用场景
-在aboutToRecycle生命周期清空组件内容；通过watch监听触发图片的加载。
-## 接口说明
-### ImageKnife组件
-| 组件名称                        | 入参内容                            | 功能简介   |
-|-----------------------------|---------------------------------|--------|
-| ImageKnifeComponent         | ImageKnifeOption                | 图片显示组件 |
-| ImageKnifeAnimatorComponent | ImageKnifeOption、AnimatorOption | 动图控制组件 |
-
-### AnimatorOption参数列表
-| 参数名称       | 入参内容            | 功能简介     |
-|------------|-----------------|----------|
-| state      | AnimationStatus | 播放状态（可选） |
-| iterations | number          | 播放次数（可选） |
-| reverse    | boolean         | 播放顺序（可选） |
-| onStart    | ()=>void        | 动画开始播放时触发（可选） |
-| onFinish    | ()=>void          | 动画播放完成时或者停止播放时触发（可选） |
-| onPause    | ()=>void         | 动画暂停播放时触发（可选） |
-| onCancel   | ()=>void          | 动画返回最初状态时触发（可选） |
-| onRepeat    | ()=>void         | 动画重复播放时触发（可选） |
-
-### ImageKnifeOption参数列表
-
-| 参数名称                  | 入参内容                                                  | 功能简介            |
-|-----------------------|-------------------------------------------------------|-----------------|
-| loadSrc               | string、PixelMap、Resource                              | 主图展示            |
-| placeholderSrc        | PixelMap、Resource                                     | 占位图图展示（可选）      |
-| errorholderSrc        | PixelMap、Resource                                     | 错误图展示（可选）       |
-| objectFit             | ImageFit                                              | 主图填充效果（可选）      |
-| placeholderObjectFit  | ImageFit                                              | 占位图填充效果（可选）     |
-| errorholderObjectFit  | ImageFit                                              | 错误图填充效果（可选）     |
-| writeCacheStrategy    | CacheStrategyType                                     | 写入缓存策略(可选)      |
-| onlyRetrieveFromCache | boolean                                               | 是否跳过网络和本地请求（可选） |
-| customGetImage        | (context: Context, src: string                        | 自定义下载图片（可选）     |                                                                                                                                                                              | Resource                                      | 错误占位图数据源                    |
-| border                | BorderOptions                                         | 边框圆角（可选）        |
-| priority              | taskpool.Priority                                     | 加载优先级（可选）       | 
-| context               | common.UIAbilityContext                               | 上下文（可选）         |
-| progressListener      | (progress: number)=>void                              | 进度（可选）          |
-| signature             | String                                                | 自定义缓存关键字（可选）    | 
-| headerOption          | Array<HeaderOptions>                                  | 设置请求头（可选）       |
-| transformation        | PixelMapTransformation                                | 图片变换（可选）        |
-| drawingColorFilter    | ColorFilter | drawing.ColorFilter                     | 图片变换（可选）        |
-| onComplete            | (event:EventImage | undefined) => voi                 | 颜色滤镜效果（可选）        |
-| onLoadListener        | onLoadStart: () => void、onLoadSuccess: (data: string | PixelMap | undefined) => void、onLoadFailed: (err: string) => void| 监听图片加载成功与失败     |
-
-### ImageKnife接口
-
-| 参数名称             | 入参内容                                                                                                  | 功能简介          |
-|------------------|-------------------------------------------------------------------------------------------------------|---------------|
-| initMemoryCache  | newMemoryCache: IMemoryCache                                                                          | 自定义内存缓存策略     |
-| initFileCache    | context: Context, size: number, memory: number                                                        | 初始化文件缓存数量和大小  |
-| preLoadCache     | loadSrc: string I ImageKnifeOption                                                                    | 预加载并返回文件缓存路径  |
-| getCacheImage    | loadSrc: string, cacheType: CacheStrategy = CacheStrategy.Default, signature?: string)                | 从内存或文件缓存中获取资源 |
-| addHeader        | key: string, value: Object                                                                            | 全局添加http请求头   |
-| setHeaderOptions | Array<HeaderOptions>                                                                                  | 全局设置http请求头   |
-| deleteHeader     | key: string                                                                                           | 全局删除http请求头   |
-| setCustomGetImage | customGetImage?: (context: Context, src: string | PixelMap | Resource) => Promise<ArrayBuffer | undefined>   | 全局设置自定义下载 |
-| setEngineKeyImpl | IEngineKey                                                                                            | 全局配置缓存key生成策略 |
-| putCacheImage    | url: string, pixelMap: PixelMap, cacheType: CacheStrategy = CacheStrategy.Default, signature?: string | 写入内存磁盘缓存      |
-| removeMemoryCache| url: string | ImageKnifeOption                                                                       | 清理指定内存缓存      |
-| removeFileCache  | url: string | ImageKnifeOption                                                                                           | 清理指定磁盘缓存      |
-### 图形变换类型（需要为GPUImage添加依赖项）
-
-| 类型                               | 相关描述                      |
-| ---------------------------------- | ----------------------------- |
-| BlurTransformation                 | 模糊处理                      |
-| BrightnessTransformation           | 亮度滤波器                    |
-| CropSquareTransformation           | 正方形剪裁                    |
-| CropTransformation                 | 自定义矩形剪裁                |
-| GrayScaleTransformation            | 灰度级滤波器                  |
-| InvertTransformation               | 反转滤波器                    |
-| KuwaharaTransformation             | 桑原滤波器（使用GPUIImage）   |
-| MaskTransformation                 | 遮罩                          |
-| PixelationTransformation           | 像素化滤波器（使用GPUIImage） |
-| SepiaTransformation                | 乌墨色滤波器（使用GPUIImage） |
-| SketchTransformation               | 素描滤波器（使用GPUIImage）   |
-| SwirlTransformation                | 扭曲滤波器（使用GPUIImage）   |
-| ToonTransformation                 | 动画滤波器（使用GPUIImage）   |
-| VignetterTransformation            | 装饰滤波器（使用GPUIImage）   |
-
-## 下载安装GPUImage依赖
-方法一：在Terminal窗口中，执行如下命令安装三方包，DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。
-```
-    ohpm install @ohos/gpu_transform
-```
-方法二： 在工程的oh-package.json5中设置三方包依赖，配置示例如下：
-```
-    "dependencies": {
-      "@ohos/gpu_transform": "^1.0.2"
-    }
-```
-## 约束与限制
-
-在下述版本验证通过：  
-DevEco Studio 5.0 Canary3（5.0.3.502）--SDK:API12 (5.0.0.31)
-
-## 贡献代码
-
-使用过程中发现任何问题都可以提 [issue](https://gitee.com/openharmony-tpc/ImageKnife/issues)
-，当然，也非常欢迎发 [PR](https://gitee.com/openharmony-tpc/ImageKnife/pulls) 共建。
-
-## 开源协议
-
-本项目基于 [Apache License 2.0](https://gitee.com/openharmony-tpc/ImageKnife/blob/master/LICENSE) ，请自由的享受和参与开源。
-
-## 遗留问题
-
- ImageKnifeAnimator组件无法设置ImageFit属性
- ImageKnifeAnimator组件设置border属性无法将图片变为圆角
--- a/build-profile.json5
+++ b/build-profile.json5
@ -1,19 +1,16 @@
 {
  "app": {
-    "signingConfigs": [
-
-    ],
    "products": [
      {
        "name": "default",
        "signingConfig": "default",
-        "compileSdkVersion": 12,
-        "compatibleSdkVersion": 12
+        "compileSdkVersion": 10,
+        "compatibleSdkVersion": 10
      }
    ],
    "buildModeSet": [
      {
-        "name": "debug",
+        "name": "debug"
      },
      {
        "name": "release"
@ -52,6 +49,18 @@
          ]
        }
      ]
+    },
+    {
+      "name": "sharedlibrary2",
+      "srcPath": "./sharedlibrary2",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
    }
  ]
 }
--- a/entry/.gitignore
+++ b/entry/.gitignore
@ -1,6 +1,5 @@
 /node_modules
-/oh_modules
 /.preview
 /build
-/.cxx
-/.test
+/oh_modules/
+/oh-package-lock.json5
--- a/entry/build-profile.json5
+++ b/entry/build-profile.json5
@ -1,28 +1,15 @@
 {
-  "apiType": "stageMode",
+  "apiType": 'stageMode',
  "buildOption": {
-    "arkOptions": {
-      // "apPath": "./modules.ap"  /* Profile used for profile-guided optimization (PGO), a compiler optimization technique to improve app runtime performance. */
+    "sourceOption": {
+      "workers": [
+        "./src/main/ets/workers/upngWorkerTestCase.ets"
+      ]
    }
  },
-  "buildOptionSet": [
-    {
-      "name": "release",
-      "arkOptions": {
-        "obfuscation": {
-          "ruleOptions": {
-            "enable": true,
-            "files": [
-              "./obfuscation-rules.txt"
-            ]
-          }
-        }
-      }
-    },
-  ],
  "targets": [
    {
-      "name": "default"
+      "name": "default",
    },
    {
      "name": "ohosTest",
--- a/entry/hvigorfile.js
+++ b/entry/hvigorfile.js
@ -0,0 +1,2 @@
+// Script for compiling build behavior. It is built in the build plug-in and cannot be modified currently.
+module.exports = require('@ohos/hvigor-ohos-plugin').hapTasks
--- a/entry/hvigorfile.ts
+++ b/entry/hvigorfile.ts
@ -1,6 +0,0 @@
-import { hapTasks } from '@ohos/hvigor-ohos-plugin';
-
-export default {
-    system: hapTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
-    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
-}
--- a/entry/obfuscation-rules.txt
+++ b/entry/obfuscation-rules.txt
@ -1,18 +0,0 @@
-# Define project specific obfuscation rules here.
-# You can include the obfuscation configuration files in the current module's build-profile.json5.
-#
-# For more details, see
-#   https://gitee.com/openharmony/arkcompiler_ets_frontend/blob/master/arkguard/README.md
-
-# Obfuscation options:
-# -disable-obfuscation: disable all obfuscations
-# -enable-property-obfuscation: obfuscate the property names
-# -enable-toplevel-obfuscation: obfuscate the names in the global scope
-# -compact: remove unnecessary blank spaces and all line feeds
-# -remove-log: remove all console.* statements
-# -print-namecache: print the name cache that contains the mapping from the old names to new names
-# -apply-namecache: reuse the given cache file
-
-# Keep options:
-# -keep-property-name: specifies property names that you want to keep
-# -keep-global-name: specifies names that you want to keep in the global scope
--- a/entry/oh-package.json5
+++ b/entry/oh-package.json5
@ -1,13 +1,14 @@
 {
+  "license": "Apache License 2.0",
+  "devDependencies": {},
  "name": "entry",
-  "version": "1.0.0",
-  "description": "Please describe the basic information.",
-  "main": "",
-  "author": "",
-  "license": "",
+  "description": "example description",
+  "repository": {},
+  "version": "2.1.2-rc.11",
  "dependencies": {
    "@ohos/libraryimageknife": "file:../sharedlibrary",
+    "@ohos/sharedlibrary2": "file:../sharedlibrary2",
+    "@ohos/disklrucache": "^2.0.2-rc.0",
    "@ohos/imageknife": "file:../library"
  }
 }
-
--- a/entry/src/main/ets/common/CustomEngineKeyImpl.ets
+++ b/entry/src/main/ets/common/CustomEngineKeyImpl.ets
@ -1,65 +0,0 @@
-/*
- * 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 { DownsampleStrategy } from '@ohos/imageknife';
-import { IEngineKey, ImageKnifeOption, PixelMapTransformation,SparkMD5 ,ImageKnifeRequestSource} from '@ohos/libraryimageknife';
-
-//全局自定义key demo
-@Sendable
-export class CustomEngineKeyImpl implements IEngineKey {
-  // 生成内存缓存key
-  generateMemoryKey(loadSrc: string | PixelMap | Resource, requestSource: ImageKnifeRequestSource,
-    imageKnifeOption: ImageKnifeOption,isAnimator?: boolean, width?: number, height?: number): string {
-    let key = ""
-    if(imageKnifeOption.signature == "aaa" && typeof loadSrc == "string") {
-      let num = loadSrc.indexOf("?")
-      let src = loadSrc.substring(0,num)
-      key = "loadSrc=" + src
-    } else {
-      key = (isAnimator == true ? "Animator=" : "loadSrc==") + (typeof loadSrc == "string" ? loadSrc : JSON.stringify(loadSrc)) + ";"
-    }
-    if (requestSource === ImageKnifeRequestSource.SRC) {
-      if (imageKnifeOption.signature !== undefined && imageKnifeOption.signature !== "") {
-        key += "signature=" + imageKnifeOption.signature + ";"
-      }
-      if (imageKnifeOption.transformation) {
-        key += "transformation=" + this.getTransformation(imageKnifeOption.transformation) + ";"
-      }
-        if ((imageKnifeOption.downsampleOf !== DownsampleStrategy.NONE && imageKnifeOption.downsampleOf !== undefined)) {
-        key += "downsampleOf" + imageKnifeOption.downsampleOf +"width="+width+"height="+ height
-      }
-    }
-    return key
-  }
-
-  // 生成文件缓存key
-  generateFileKey(loadSrc: string | PixelMap | Resource, signature?: string,isAnimator?: boolean): string {
-    let src = ""
-    if(signature == "aaa" && typeof loadSrc == "string") {
-      let num = loadSrc.indexOf("?")
-      let key = loadSrc.substring(0,num)
-      src = "loadSrc=" + key
-    } else {
-      src = (isAnimator == true ? "Animator=" : "loadSrc==") + (typeof loadSrc == "string" ? loadSrc : JSON.stringify(loadSrc)) + ";"
-    }
-    if (signature !== undefined && signature !== "") {
-      src += "signature=" + signature + ";"
-    }
-    return SparkMD5.hashBinary(src)
-  }
-
-  private getTransformation(transformation: PixelMapTransformation): string {
-    return transformation.getName()
-  }
-}
--- a/entry/src/main/ets/common/GlobalContext.ets
+++ b/entry/src/main/ets/common/GlobalContext.ets
@ -1,37 +0,0 @@
-/*
- * 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.
- */
-
-export class GlobalContext {
-  private constructor() {
-  }
-
-  private static instance: GlobalContext;
-  private _objects = new Map<string, Object>();
-
-  public static getContext(): GlobalContext {
-    if (!GlobalContext.instance) {
-      GlobalContext.instance = new GlobalContext();
-    }
-    return GlobalContext.instance;
-  }
-
-  getObject(value: string): Object | undefined {
-    return this._objects.get(value);
-  }
-
-  setObject(key: string, objectClass: Object): void {
-    this._objects.set(key, objectClass);
-  }
-}
--- a/entry/src/main/ets/entryability/CustomEngineKeyImpl.ets
+++ b/entry/src/main/ets/entryability/CustomEngineKeyImpl.ets
@ -0,0 +1,76 @@
+/*
+ * 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 { EngineKeyFactories, EngineKeyInterface, RequestOption } from '@ohos/libraryimageknife'
+import { ObjectKey } from '@ohos/libraryimageknife';
+
+export class CustomEngineKeyImpl implements EngineKeyInterface {
+  redefineUrl: (loadSrc: string) => string;
+  addOtherInfo: string = "Version=1.0.0;"
+
+  constructor() {
+    this.redefineUrl = this.urlNeedClearToken;
+  }
+
+  // request只读
+  generateMemoryCacheKey(loadSrc: string, size: string, transformed: string, dontAnimate: boolean, signature: ObjectKey): string {
+    return EngineKeyFactories.createMemoryCacheKey(loadSrc, size, transformed, dontAnimate, signature, this.redefineUrl, this.addOtherInfo);
+  }
+
+  generateTransformedDiskCacheKey(loadSrc: string, size: string, transformed: string, dontAnimate: boolean, signature: ObjectKey): string {
+    return EngineKeyFactories.createTransformedDiskCacheKey(loadSrc, size, transformed, dontAnimate, signature, this.redefineUrl, this.addOtherInfo);
+  }
+
+  generateOriginalDiskCacheKey(loadSrc: string, signature: ObjectKey): string {
+    return EngineKeyFactories.createOriginalDiskCacheKey(loadSrc, signature, this.redefineUrl, this.addOtherInfo);
+  }
+
+
+  // 需求场景: 请求图片可能 请求中存在token需要清除， 可以把输入的url清除token后作为key的一部分，这样token发生变化也能命中缓存。
+  urlNeedClearToken = (url: string) => {
+    if (this.isHttpRequest(url)) {
+      return this.clearToken(url)
+    } else {
+      return url;
+    }
+  }
+
+  isHttpRequest(loadSrc: string) {
+    if (typeof loadSrc == "string" && loadSrc.toLowerCase().startsWith("http")) {
+      return true;
+    }
+    return false;
+  }
+
+  // 清除url里面中携带的token
+  clearToken(url: string): string {
+    let retUrl = url.replace(this.findTokenParam(url), "")
+    return retUrl;
+  }
+
+  // 网络图片加载 可能因为Token问题导致缓存失效
+  findTokenParam(url: string): string {
+    let tokenParam = "";
+    let tokenKeyIndex = url.indexOf("?token=") >= 0 ? url.indexOf("?token=") : url.indexOf("&token=");
+    if (tokenKeyIndex != -1) {
+      let nextAndIndex = url.indexOf("&", tokenKeyIndex + 1);
+      if (nextAndIndex != -1) {
+        tokenParam = url.substring(tokenKeyIndex + 1, nextAndIndex + 1);
+      } else {
+        tokenParam = url.substring(tokenKeyIndex);
+      }
+    }
+    return tokenParam;
+  }
+}
--- a/entry/src/main/ets/entryability/EntryAbility.ets
+++ b/entry/src/main/ets/entryability/EntryAbility.ets
@ -1,80 +1,59 @@
 /*
- * Copyright (C) 2024 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the 'License');
+ * 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,
+ * 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 AbilityConstant from '@ohos.app.ability.AbilityConstant';
-import hilog from '@ohos.hilog';
 import UIAbility from '@ohos.app.ability.UIAbility';
-import Want from '@ohos.app.ability.Want';
+import hilog from '@ohos.hilog';
 import window from '@ohos.window';
-import { ImageKnife, InitImageKnife, LogUtil } from '@ohos/libraryimageknife';
-import { CustomEngineKeyImpl } from '../common/CustomEngineKeyImpl';
+import { InitImageKnife, ImageKnifeGlobal, ImageKnife, ImageKnifeDrawFactory, LogUtil } from '@ohos/libraryimageknife'
+import { CustomEngineKeyImpl } from './CustomEngineKeyImpl'
 import abilityAccessCtrl, { Permissions } from '@ohos.abilityAccessCtrl';
 import { BusinessError } from '@ohos.base'

 export default class EntryAbility extends UIAbility {
-  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
-    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
-  }
-
-  onDestroy(): void {
-    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
-  }
-
-  async onWindowStageCreate(windowStage: window.WindowStage): Promise<void> {
+  onWindowStageCreate(windowStage: window.WindowStage) {
    // Main window is created, set main page for this ability
-    // let list: Array<Permissions> = ['ohos.permission.READ_IMAGEVIDEO', 'ohos.permission.WRITE_IMAGEVIDEO'];
-    // let permissionRequestResult: Object;
-    // let atManager = abilityAccessCtrl.createAtManager();
-    // atManager.requestPermissionsFromUser(this.context, list, (err: BusinessError, result: Object) => {
-    //   if (err) {
-    //
-    //   } else {
-    //     permissionRequestResult = result;
-    //
-    //   }
-    // })
+    let list: Array<Permissions> = ['ohos.permission.MEDIA_LOCATION', 'ohos.permission.READ_MEDIA'];
+    let permissionRequestResult: Object;
+    let atManager = abilityAccessCtrl.createAtManager();
+    atManager.requestPermissionsFromUser(this.context, list, (err: BusinessError, result: Object) => {
+      if (err) {

-    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
+      } else {
+        permissionRequestResult = result;

-    // 初始化ImageKnife的文件缓存
-    await InitImageKnife.init(this.context)
-    ImageKnife.getInstance().setEngineKeyImpl(new CustomEngineKeyImpl())
-    // 全局配置请求头
-    ImageKnife.getInstance().addHeader('refer', "http://1.94.37.200:7070/AntiTheftChain/downloadImage");
-    ImageKnife.getInstance().deleteHeader('refer');
-
-    windowStage.loadContent('pages/Index', (err, data) => {
-      if (err.code) {
-        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
-        return;
      }
-      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
+    })
+
+    windowStage.loadContent('pages/index', (err: BusinessError, data: void) => {
    });
-  }

-  onWindowStageDestroy(): void {
-    // Main window is destroyed, release UI related resources
-    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
-  }
+    InitImageKnife.init(this.context);

-  onForeground(): void {
-    // Ability has brought to foreground
-    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
-  }
-
-  onBackground(): void {
-    // Ability has back to background
-    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
+    let imageKnife: ImageKnife | undefined = ImageKnifeGlobal.getInstance().getImageKnife()
+    if (imageKnife != undefined) {
+      // 全局配置网络加载进度条
+      imageKnife
+        .setDefaultLifeCycle(ImageKnifeDrawFactory.createProgressLifeCycle("#10a5ff", 0.5))
+      // 全局配置缓存key
+      imageKnife.setEngineKeyImpl(new CustomEngineKeyImpl())
+      // 设置全局内存缓存大小张数
+      imageKnife.setLruCacheSize(100, 100 * 1204 * 1024)
+      // 全局配置请求头
+      imageKnife.addHeader('refer', "http://1.94.37.200:7070/AntiTheftChain/downloadImage");
+      imageKnife.deleteHeader('refer');
+    }
+    // 开启ImageKnife所有级别日志开关
+    LogUtil.mLogLevel = LogUtil.ALL
  }
 }
--- a/entry/src/main/ets/pages/CacheRuleChangedPage.ets
+++ b/entry/src/main/ets/pages/CacheRuleChangedPage.ets
@ -0,0 +1,104 @@
+/*
+ * Copyright (C) 2021 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,
+  ImageKnifeOption,
+  RotateImageTransformation,
+  RoundedCornersTransformation
+} from '@ohos/libraryimageknife'
+
+@Entry
+@Component
+struct CacheRuleChangedPage {
+  @State progresshint: string = "输出加载百分比回调信息"
+  @State imageKnifeOption1: ImageKnifeOption =
+    {
+      loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
+
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+      displayProgress: true
+    };
+  @State ImageKnifeOption: ImageKnifeOption =
+    {
+      loadSrc: "https://hbimg.huabanimg.com/0ef60041445edcfd6b38d20e19024b2cd9281dcc3525a4-Vy8fYO_fw658/format/webp",
+
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+      displayProgress: true
+    };
+  @State imageKnifeOption3: ImageKnifeOption =
+    {
+      loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
+
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+      displayProgress: true
+    };
+  @State imageKnifeOption4: ImageKnifeOption =
+    {
+      loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
+
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+      displayProgress: true,
+    };
+  @State imageKnifeOption5: ImageKnifeOption =
+    {
+      loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp?mama=sdafsfasdfsdfsdaf&baba=sdfsafsafsd",
+
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+      displayProgress: true,
+    };
+
+  build() {
+    Scroll() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+
+        Text('下图默认加载网络图片不带?token=').margin({ top: 20 })
+        Button('点击加载网络图片?token=').margin({ top: 5 }).onClick(() => {
+
+          this.imageKnifeOption4 = {
+            loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB?token=fsdafsfsafsafsdaf111111",
+            placeholderSrc: $r('app.media.icon_loading'),
+            errorholderSrc: $r('app.media.icon_failed'),
+            displayProgress: true,
+          }
+        })
+
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 })
+          .width(300)
+          .height(300)
+
+        Text('下图默认加载网络图片不带&token=').margin({ top: 20 })
+
+        Button('点击加载网络图片&token=').margin({ top: 5 }).onClick(() => {
+          this.imageKnifeOption5 = {
+            loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp?mama=sdafsfasdfsdfsdaf&token=fsdafsfsafsafsdaf111111&baba=sdfsafsafsd",
+            placeholderSrc: $r('app.media.icon_loading'),
+            errorholderSrc: $r('app.media.icon_failed'),
+            displayProgress: true,
+          }
+        })
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption5 })
+          .width(300)
+          .height(300)
+      }
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
--- a/entry/src/main/ets/pages/DownSamplePage.ets
+++ b/entry/src/main/ets/pages/DownSamplePage.ets
@ -1,214 +0,0 @@
-/*
- * 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 { DownsampleStrategy, ImageKnifeOption, } from '@ohos/imageknife';
-import { ImageKnifeComponent } from '@ohos/libraryimageknife';
-import { image } from '@kit.ImageKit';
-import { BusinessError } from '@kit.BasicServicesKit';
-import { Downsampler } from '@ohos/imageknife/src/main/ets/downsampling/Downsampler';
-import { FileTypeUtil } from '@ohos/imageknife/src/main/ets/utils/FileTypeUtil';
-
-@Entry
-@ComponentV2
-struct DownSamplePage {
-  @Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
-    loadSrc: $r('app.media.startIcon'),
-    placeholderSrc: $r("app.media.loading"),
-    errorholderSrc: $r("app.media.app_icon"),
-    objectFit: ImageFit.Contain
-  })
-  isBrightness: boolean = false
-  @Local beforeSampling: number = 0
-  @Local afterSampling: number = 0
-  @Local SamplingList: SamplingType[] = [
-
-    new SamplingType(7, "AT_LEAST"),
-    new SamplingType(1, "AT_MOST"),
-
-    new SamplingType(2, "FIT_CENTER_MEMORY"),
-    new SamplingType(4, "FIT_CENTER_QUALITY"),
-    new SamplingType(5, "CENTER_OUTSIDE_MEMORY"),
-    new SamplingType(6, "CENTER_OUTSIDE_QUALITY"),
-    new SamplingType(0, "NONE"),
-
-  ]
-  @Local checked: boolean = false
-
-  updateImageKnifeOption(value: string) {
-    if (value === 'NONE') {
-      this.imageKnifeOption = new ImageKnifeOption({
-        loadSrc: $r('app.media.pngSample'),
-        placeholderSrc: $r("app.media.loading"),
-        errorholderSrc: $r("app.media.app_icon"),
-        objectFit: ImageFit.Contain,
-        downsampleOf: DownsampleStrategy.NONE
-      })
-      this.originalPixMap($r('app.media.pngSample'))
-      this.afterSamplingFunc($r('app.media.pngSample'))
-    } else if (value === 'AT_MOST') {
-      this.imageKnifeOption = new ImageKnifeOption({
-        loadSrc: $r('app.media.pngSample'),
-        placeholderSrc: $r("app.media.loading"),
-        errorholderSrc: $r("app.media.app_icon"),
-        objectFit: ImageFit.Contain,
-        downsampleOf: DownsampleStrategy.AT_MOST
-      })
-      this.originalPixMap($r('app.media.pngSample'))
-      this.afterSamplingFunc($r('app.media.pngSample'))
-    } else if (value === 'FIT_CENTER_MEMORY') {
-      this.imageKnifeOption = new ImageKnifeOption({
-        loadSrc: $r('app.media.pngSample'),
-        placeholderSrc: $r("app.media.loading"),
-        errorholderSrc: $r("app.media.app_icon"),
-        objectFit: ImageFit.Contain,
-        downsampleOf: DownsampleStrategy.FIT_CENTER_MEMORY
-      })
-      this.originalPixMap($r('app.media.pngSample'))
-      this.afterSamplingFunc($r('app.media.pngSample'))
-    } else if (value === 'FIT_CENTER_QUALITY') {
-      this.imageKnifeOption = new ImageKnifeOption({
-        loadSrc: $r('app.media.pngSample'),
-        placeholderSrc: $r("app.media.loading"),
-        errorholderSrc: $r("app.media.app_icon"),
-        objectFit: ImageFit.Contain,
-        downsampleOf: DownsampleStrategy.FIT_CENTER_QUALITY
-      })
-      this.originalPixMap($r('app.media.pngSample'))
-      this.afterSamplingFunc($r('app.media.pngSample'))
-    } else if (value === 'CENTER_OUTSIDE_MEMORY') {
-      this.imageKnifeOption = new ImageKnifeOption({
-        loadSrc: $r('app.media.pngSample'),
-        placeholderSrc: $r("app.media.loading"),
-        errorholderSrc: $r("app.media.app_icon"),
-        objectFit: ImageFit.Contain,
-        downsampleOf: DownsampleStrategy.CENTER_OUTSIDE_MEMORY
-      })
-      this.originalPixMap($r('app.media.pngSample'))
-      this.afterSamplingFunc($r('app.media.pngSample'))
-    } else if (value === 'CENTER_OUTSIDE_QUALITY') {
-      this.imageKnifeOption = new ImageKnifeOption({
-        loadSrc: $r('app.media.pngSample'),
-        placeholderSrc: $r("app.media.loading"),
-        errorholderSrc: $r("app.media.app_icon"),
-        objectFit: ImageFit.Contain,
-        downsampleOf: DownsampleStrategy.CENTER_OUTSIDE_QUALITY
-      })
-      this.originalPixMap($r('app.media.pngSample'))
-      this.afterSamplingFunc($r('app.media.pngSample'))
-    } else {
-      this.imageKnifeOption = new ImageKnifeOption({
-        loadSrc: $r('app.media.pngSample'),
-        placeholderSrc: $r("app.media.loading"),
-        errorholderSrc: $r("app.media.app_icon"),
-        objectFit: ImageFit.Contain,
-        downsampleOf: DownsampleStrategy.AT_LEAST
-      })
-      this.originalPixMap($r('app.media.pngSample'))
-      this.afterSamplingFunc($r('app.media.pngSample'))
-    }
-  }
-
-  async afterSamplingFunc(imgs: Resource) {
-    let img: Uint8Array = await getContext(this).resourceManager.getMediaContent(imgs);
-    let imageSource: image.ImageSource = image.createImageSource(img.buffer.slice(0));
-    let fileTypeUtil = new FileTypeUtil();
-    let typeValue = fileTypeUtil.getFileType(img.buffer.slice(0)) as string;
-    let decodingOptions: image.DecodingOptions = {
-      editable: true,
-      desiredPixelFormat: 3,
-    }
-    let imageInfo = await imageSource.getImageInfo()
-
-    if (this.imageKnifeOption.downsampleOf !== DownsampleStrategy.NONE){
-      let reqSize =
-        new Downsampler().calculateScaling(typeValue, imageInfo.size.width, imageInfo.size.height, 300,
-          300, this.imageKnifeOption.downsampleOf)
-      decodingOptions = {
-        editable: true,
-        desiredSize: {
-          width: reqSize.width,
-          height: reqSize.height
-        }
-      }
-    }
-
-    // 创建pixelMap
-    imageSource.createPixelMap(decodingOptions).then((pixelMap: image.PixelMap) => {
-      this.afterSampling = pixelMap.getPixelBytesNumber()
-    }).catch((err: BusinessError) => {
-      console.error("Failed to create PixelMap")
-    });
-  }
-
-  async originalPixMap(imgs: Resource,) {
-    let img: Uint8Array = await getContext(this).resourceManager.getMediaContent(imgs);
-    let imageSource: image.ImageSource = image.createImageSource(img.buffer.slice(0));
-    let decodingOptions: image.DecodingOptions = {
-      editable: true,
-      desiredPixelFormat: 3,
-    }
-    // 创建pixelMap
-    imageSource.createPixelMap(decodingOptions).then((pixelMap: image.PixelMap) => {
-      this.beforeSampling = pixelMap.getPixelBytesNumber()
-    }).catch((err: BusinessError) => {
-      console.error("Failed to create PixelMap")
-    });
-  }
-  getResourceString(res:Resource){
-    return getContext().resourceManager.getStringSync(res.id)
-  }
-  build() {
-    Scroll() {
-      Column() {
-        ForEach(this.SamplingList, (item: SamplingType, index) => {
-          Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
-            Radio({ value: item.value + 'radio', group: 'radioGroup' })
-              .height(50)
-              .width(50)
-              .checked(this.checked)
-              .onClick(() => {
-                this.updateImageKnifeOption(item.value)
-              })
-            Text(this.getResourceString($r('app.string.Sampling_pecification'))+ item.value).fontSize(20)
-          }
-        }, (item: SamplingType) => JSON.stringify(item))
-        Column() {
-          Text(`${this.getResourceString($r('app.string.Unreal_samples'))}：${this.beforeSampling}`).fontSize(20)
-          Text(`${ this.getResourceString($r('app.string.After_the_sampling'))}：${this.afterSampling}`).fontSize(20)
-        }
-
-        ImageKnifeComponent({
-          imageKnifeOption: this.imageKnifeOption
-        })
-          .height(300)
-          .width(300)
-          .borderWidth(1)
-          .borderColor(Color.Pink)
-      }
-
-    }
-    .height('100%')
-    .width('100%')
-  }
-}
-
-class SamplingType {
-  key: number
-  value: string
-
-  constructor(key: number, value: string) {
-    this.key = key
-    this.value = value
-  }
-}
--- a/entry/src/main/ets/pages/ImageAnimatorPage.ets
+++ b/entry/src/main/ets/pages/ImageAnimatorPage.ets
@ -1,93 +0,0 @@
-/*
- * 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 { AnimatorOption, ImageKnifeAnimatorComponent,ImageKnifeOption } from "@ohos/libraryimageknife"
-
-@Entry
-@ComponentV2
-struct ImageAnimatorPage {
-  @Local animatorOption: AnimatorOption = new AnimatorOption({
-    state: AnimationStatus.Running,
-    iterations: -1,
-    onFinish:()=>{
-      console.log("ImageKnifeAnimatorComponent animatorOption onFinish")
-    },
-    onStart:()=>{
-      console.log("ImageKnifeAnimatorComponent animatorOption onStart")
-    },
-    onPause:()=>{
-      console.log("ImageKnifeAnimatorComponent animatorOption onPause")
-    },
-    onCancel:()=>{
-      console.log("ImageKnifeAnimatorComponent animatorOption onCancel")
-    },
-    onRepeat:()=>{
-      console.log("ImageKnifeAnimatorComponent animatorOption onRepeat")
-    }
-  })
-  @Local animatorOption1: AnimatorOption = new AnimatorOption({
-    state: AnimationStatus.Initial
-  })
-  @Local animatorOption2: AnimatorOption = new AnimatorOption({
-    state: AnimationStatus.Initial,
-    reverse: true
-  })
-  build() {
-    Column(){
-      Flex(){
-        Button($r('app.string.Play')).onClick(()=>{
-          this.animatorOption.state = AnimationStatus.Running
-        })
-        Button($r('app.string.Pause')).onClick(()=>{
-          this.animatorOption.state = AnimationStatus.Paused
-        })
-        Button($r('app.string.Stop')).onClick(()=>{
-          this.animatorOption.state = AnimationStatus.Stopped
-        })
-        Button($r('app.string.Infinite_loop')).onClick(()=>{
-          this.animatorOption.iterations = -1
-        })
-        Button($r('app.string.Play_once')).onClick(()=>{
-          this.animatorOption.iterations = 1
-        })
-        Button($r('app.string.Play_twice')).onClick(()=>{
-          this.animatorOption.iterations = 2
-        })
-      }
-      ImageKnifeAnimatorComponent({
-        imageKnifeOption:new ImageKnifeOption({
-          loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
-          placeholderSrc:$r('app.media.loading'),
-          errorholderSrc:$r('app.media.failed')
-        }),animatorOption:this.animatorOption
-      }).width(200).height(200).backgroundColor(Color.Orange).margin({top:30})
-      Text($r('app.string.Display_the_first_frame')).fontSize(20)
-      ImageKnifeAnimatorComponent({
-        imageKnifeOption:new ImageKnifeOption({
-          loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
-          placeholderSrc:$r('app.media.loading'),
-          errorholderSrc:$r('app.media.failed')
-        }),animatorOption:this.animatorOption1
-      }).width(200).height(200).backgroundColor(Color.Orange).margin({top:30})
-      Text($r('app.string.Display_the_last_frame')).fontSize(20)
-      ImageKnifeAnimatorComponent({
-        imageKnifeOption:new ImageKnifeOption({
-          loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
-          placeholderSrc:$r('app.media.loading'),
-          errorholderSrc:$r('app.media.failed')
-        }),animatorOption:this.animatorOption2
-      }).width(200).height(200).backgroundColor(Color.Orange).margin({top:30})
-    }.width("100%").height("100%")
-  }
-}
--- a/entry/src/main/ets/pages/ImageTransformation.ets
+++ b/entry/src/main/ets/pages/ImageTransformation.ets
@ -1,432 +0,0 @@
-/*
- * 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 {
-  BlurTransformation,
-  BrightnessTransformation,
-  CropSquareTransformation,
-  CropTransformation,
-  GrayScaleTransformation,
-  ImageKnifeComponent,
-  ImageKnifeOption,
-  InvertTransformation,
-  KuwaharaTransformation,
-  MaskTransformation,
-  MultiTransTransformation,
-  PixelationTransformation,
-  PixelMapTransformation,
-  SepiaTransformation,
-  SketchTransformation,
-  SwirlTransformation,
-  ToonTransformation,
-  VignetterTransformation
-} from '@ohos/libraryimageknife';
-import { collections } from '@kit.ArkTS'
-
-@Entry
-@ComponentV2
-struct ImageTransformation {
-  @Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
-    loadSrc: $r('app.media.pngSample'),
-    placeholderSrc: $r("app.media.loading"),
-    errorholderSrc: $r("app.media.app_icon"),
-    objectFit: ImageFit.Contain
-  })
-  @Local isRound: boolean = false;
-  @Local isContrast: boolean = false;
-  @Local isRotate: boolean = false;
-  isBlur: boolean = false
-  isBrightness: boolean = false
-  isGrayScale: boolean = false;
-  isInvert: boolean = false;
-  isToon: boolean = false;
-  isCropCircle: boolean = false;
-  isCropCircleWithBorder: boolean = false;
-  isKuwahara: boolean = false;
-  isPixelation: boolean = false;
-  isSketch: boolean = false;
-  isSwirl: boolean = false;
-  isVignetter: boolean = false;
-  isCropSquare: boolean = false;
-  isCropTop: boolean = false;
-  isCropCenter: boolean = false;
-  isCropBottom: boolean = false;
-  isMask: boolean = false;
-  isSepia: boolean = false;
-
-  build() {
-    Scroll() {
-      Column() {
-        Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
-          Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
-            .selectedColor(0x39a2db)
-            .shape(CheckBoxShape.ROUNDED_SQUARE)
-            .onChange((value: boolean) => {
-              this.isBlur = value;
-              this.updateImageKnifeOption();
-            })
-            .width(30)
-            .height(30)
-          Text($r('app.string.Blur_effect')).fontSize(20)
-        }
-
-        Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
-          Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
-            .selectedColor(0x39a2db)
-            .shape(CheckBoxShape.ROUNDED_SQUARE)
-            .onChange((value: boolean) => {
-              this.isBrightness = value;
-              this.updateImageKnifeOption();
-            })
-            .width(30)
-            .height(30)
-          Text($r('app.string.Highlighting_effect')).fontSize(20)
-        }
-
-        Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
-          Checkbox({ name: 'checkbox3', group: 'checkboxGroup' })
-            .selectedColor(0x39a2db)
-            .shape(CheckBoxShape.ROUNDED_SQUARE)
-            .onChange((value: boolean) => {
-              this.isGrayScale = value;
-              this.updateImageKnifeOption();
-            })
-            .width(30)
-            .height(30)
-          Text($r('app.string.Ashing_effect')).fontSize(20)
-        }
-
-        Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
-          Checkbox({ name: 'checkbox4', group: 'checkboxGroup' })
-            .selectedColor(0x39a2db)
-            .shape(CheckBoxShape.ROUNDED_SQUARE)
-            .onChange((value: boolean) => {
-              this.isInvert = value;
-              this.updateImageKnifeOption();
-            })
-            .width(30)
-            .height(30)
-          Text($r('app.string.Inverse_effect')).fontSize(20)
-        }
-
-        Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
-          Checkbox({ name: 'checkbox5', group: 'checkboxGroup' })
-            .selectedColor(0x39a2db)
-            .shape(CheckBoxShape.ROUNDED_SQUARE)
-            .onChange((value: boolean) => {
-              this.isToon = value;
-              this.updateImageKnifeOption();
-            })
-            .width(30)
-            .height(30)
-          Text($r('app.string.Animation_filter_effect')).fontSize(20)
-        }
-
-        Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
-          Checkbox({ name: 'checkbox6', group: 'checkboxGroup' })
-            .selectedColor(0x39a2db)
-            .shape(CheckBoxShape.ROUNDED_SQUARE)
-            .onChange((value: boolean) => {
-              this.isCropCircle = value;
-              this.updateImageKnifeOption();
-            })
-            .width(30)
-            .height(30)
-          Text($r('app.string.Crop_circular_effect')).fontSize(20)
-        }
-
-        Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
-          Checkbox({ name: 'checkbox7', group: 'checkboxGroup' })
-            .selectedColor(0x39a2db)
-            .shape(CheckBoxShape.ROUNDED_SQUARE)
-            .onChange((value: boolean) => {
-              this.isCropCircleWithBorder = value;
-              this.updateImageKnifeOption();
-            })
-            .width(30)
-            .height(30)
-          Text($r('app.string.Crop_circular_with_border_effect')).fontSize(20)
-        }
-
-        Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
-          Checkbox({ name: 'checkbox8', group: 'checkboxGroup' })
-            .selectedColor(0x39a2db)
-            .shape(CheckBoxShape.ROUNDED_SQUARE)
-            .onChange((value: boolean) => {
-              this.isContrast = value;
-            })
-            .width(30)
-            .height(30)
-          Text($r('app.string.Contrast_effect')).fontSize(20)
-        }
-
-        Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
-          Checkbox({ name: 'checkbox9', group: 'checkboxGroup' })
-            .selectedColor(0x39a2db)
-            .shape(CheckBoxShape.ROUNDED_SQUARE)
-            .onChange((value: boolean) => {
-              this.isSepia = value;
-              this.updateImageKnifeOption();
-            })
-            .width(30)
-            .height(30)
-          Text($r('app.string.Black_ink_filtering_effect')).fontSize(20)
-        }
-
-        Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
-          Checkbox({ name: 'checkbox10', group: 'checkboxGroup' })
-            .selectedColor(0x39a2db)
-            .shape(CheckBoxShape.ROUNDED_SQUARE)
-            .onChange((value: boolean) => {
-              this.isRotate = value;
-            })
-            .width(30)
-            .height(30)
-          Text($r('app.string.Rotate')).fontSize(20)
-        }
-
-        Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
-          Checkbox({ name: 'checkbox11', group: 'checkboxGroup' })
-            .selectedColor(0x39a2db)
-            .shape(CheckBoxShape.ROUNDED_SQUARE)
-            .onChange((value: boolean) => {
-              this.isRound = value;
-              this.updateImageKnifeOption();
-            })
-            .width(30)
-            .height(30)
-          Text($r('app.string.Corners')).fontSize(20)
-        }
-
-        Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
-          Checkbox({ name: 'checkbox12', group: 'checkboxGroup' })
-            .selectedColor(0x39a2db)
-            .shape(CheckBoxShape.ROUNDED_SQUARE)
-            .onChange((value: boolean) => {
-              this.isKuwahara = value;
-              this.updateImageKnifeOption();
-            })
-            .width(30)
-            .height(30)
-          Text($r('app.string.Kuwahara_Filter_effect')).fontSize(20)
-        }
-
-        Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
-          Checkbox({ name: 'checkbox13', group: 'checkboxGroup' })
-            .selectedColor(0x39a2db)
-            .shape(CheckBoxShape.ROUNDED_SQUARE)
-            .onChange((value: boolean) => {
-              this.isPixelation = value;
-              this.updateImageKnifeOption();
-            })
-            .width(30)
-            .height(30)
-          Text($r('app.string.Pixelated_Filter_effect')).fontSize(20)
-        }
-
-        Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
-          Checkbox({ name: 'checkbox14', group: 'checkboxGroup' })
-            .selectedColor(0x39a2db)
-            .shape(CheckBoxShape.ROUNDED_SQUARE)
-            .onChange((value: boolean) => {
-              this.isSketch = value;
-              this.updateImageKnifeOption();
-            })
-            .width(30)
-            .height(30)
-          Text($r('app.string.Sketch_Filter_effect')).fontSize(20)
-        }
-
-        Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
-          Checkbox({ name: 'checkbox15', group: 'checkboxGroup' })
-            .selectedColor(0x39a2db)
-            .shape(CheckBoxShape.ROUNDED_SQUARE)
-            .onChange((value: boolean) => {
-              this.isSwirl = value;
-              this.updateImageKnifeOption();
-            })
-            .width(30)
-            .height(30)
-          Text($r('app.string.Distortion_Filter_effect')).fontSize(20)
-        }
-
-        Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
-          Checkbox({ name: 'checkbox16', group: 'checkboxGroup' })
-            .selectedColor(0x39a2db)
-            .shape(CheckBoxShape.ROUNDED_SQUARE)
-            .onChange((value: boolean) => {
-              this.isVignetter = value;
-              this.updateImageKnifeOption();
-            })
-            .width(30)
-            .height(30)
-          Text($r('app.string.Decorative_Filter_effect')).fontSize(20)
-        }
-
-        Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
-          Checkbox({ name: 'checkbox17', group: 'checkboxGroup' })
-            .selectedColor(0x39a2db)
-            .shape(CheckBoxShape.ROUNDED_SQUARE)
-            .onChange((value: boolean) => {
-              this.isCropSquare = value;
-              this.updateImageKnifeOption();
-            })
-            .width(30)
-            .height(30)
-          Text($r('app.string.Square_cutting_effect')).fontSize(20)
-        }
-
-        Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
-          Checkbox({ name: 'checkbox18', group: 'checkboxGroup' })
-            .selectedColor(0x39a2db)
-            .shape(CheckBoxShape.ROUNDED_SQUARE)
-            .onChange((value: boolean) => {
-              this.isCropTop = value;
-              this.updateImageKnifeOption();
-            })
-            .width(30)
-            .height(30)
-          Text($r('app.string.Top_cutting_effect')).fontSize(20)
-        }
-
-        Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
-          Checkbox({ name: 'checkbox19', group: 'checkboxGroup' })
-            .selectedColor(0x39a2db)
-            .shape(CheckBoxShape.ROUNDED_SQUARE)
-            .onChange((value: boolean) => {
-              this.isCropCenter = value;
-              this.updateImageKnifeOption();
-            })
-            .width(30)
-            .height(30)
-          Text($r('app.string.Middle_cutting_effect')).fontSize(20)
-        }
-
-        Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
-          Checkbox({ name: 'checkbox20', group: 'checkboxGroup' })
-            .selectedColor(0x39a2db)
-            .shape(CheckBoxShape.ROUNDED_SQUARE)
-            .onChange((value: boolean) => {
-              this.isCropBottom = value;
-              this.updateImageKnifeOption();
-            })
-            .width(30)
-            .height(30)
-          Text($r('app.string.Bottom_cutting_effect')).fontSize(20)
-        }
-
-        Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
-          Checkbox({ name: 'checkbox21', group: 'checkboxGroup' })
-            .selectedColor(0x39a2db)
-            .shape(CheckBoxShape.ROUNDED_SQUARE)
-            .onChange((value: boolean) => {
-              this.isMask = value;
-              this.updateImageKnifeOption();
-            })
-            .width(30)
-            .height(30)
-          Text($r('app.string.Mask_effect')).fontSize(20)
-        }
-
-        if (this.isContrast) {
-          ImageKnifeComponent({
-            imageKnifeOption: this.imageKnifeOption
-          })
-            .width(300)
-            .height(300)
-            .rotate({ angle: this.isRotate ? 90 : 0 })
-            .contrast(12)
-            .backgroundColor(Color.Pink)
-        } else {
-          ImageKnifeComponent({
-            imageKnifeOption: this.imageKnifeOption
-          }).width(300)
-            .height(300)
-            .rotate({ angle: this.isRotate ? 90 : 0 })
-            .backgroundColor(Color.Pink)
-        }
-      }
-    }
-    .height('100%')
-    .width('100%')
-  }
-
-  updateImageKnifeOption() {
-    let transformations: collections.Array<PixelMapTransformation> = new collections.Array<PixelMapTransformation>()
-    if (this.isBlur) {
-      transformations.push(new BlurTransformation(5));
-    }
-    if (this.isBrightness) {
-      transformations.push(new BrightnessTransformation(0.2));
-    }
-    if (this.isGrayScale) {
-      transformations.push(new GrayScaleTransformation());
-    }
-    if (this.isInvert) {
-      transformations.push(new InvertTransformation());
-    }
-    if (this.isToon) {
-      transformations.push(new ToonTransformation(0.3, 10.0));
-    }
-    if (this.isKuwahara) {
-      transformations.push(new KuwaharaTransformation(10));
-    }
-    if (this.isPixelation) {
-      transformations.push(new PixelationTransformation(5.0));
-    }
-    if (this.isSketch) {
-      transformations.push(new SketchTransformation());
-    }
-    if (this.isSwirl) {
-      transformations.push(new SwirlTransformation(200, 1.0, [0.5, 0.5]));
-    }
-    if (this.isVignetter) {
-      transformations.push(new VignetterTransformation([0.5, 0.5], [0.0, 0.0, 0.0], [0.3, 0.75]));
-    }
-    if (this.isCropSquare) {
-      transformations.push(new CropSquareTransformation());
-    }
-    if (this.isCropTop) {
-      transformations.push(new CropTransformation(25, 25, 0));
-    }
-    if (this.isCropCenter) {
-      transformations.push(new CropTransformation(25, 25, 1));
-    }
-    if (this.isCropBottom) {
-      transformations.push(new CropTransformation(25, 25, 2));
-    }
-    if (this.isSepia) {
-      transformations.push(new SepiaTransformation());
-    }
-    if (this.isMask) {
-      transformations.push(new MaskTransformation($r('app.media.mask_starfish')));
-    }
-    this.imageKnifeOption = new ImageKnifeOption({
-      loadSrc: $r('app.media.pngSample'),
-      placeholderSrc: $r("app.media.loading"),
-      errorholderSrc: $r("app.media.app_icon"),
-      objectFit: ImageFit.Contain,
-      border: { radius: this.isRound ? { topLeft: 50, bottomRight: 50 } : 0 },
-      transformation: transformations.length > 0 ? new MultiTransTransformation(transformations) : undefined
-    })
-    if (this.isCropCircle) {
-      this.imageKnifeOption.objectFit = ImageFit.Cover;
-      this.imageKnifeOption.border = { radius: 150 };
-    }
-    if (this.isCropCircleWithBorder) {
-      this.imageKnifeOption.objectFit = ImageFit.Cover;
-      this.imageKnifeOption.border = { radius: 150, color: Color.Red, width: 5 };
-    }
-  }
-}
--- a/entry/src/main/ets/pages/Index.ets
+++ b/entry/src/main/ets/pages/Index.ets
@ -1,186 +0,0 @@
-/*
- * 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 router from '@system.router';
-
-@Entry
-@ComponentV2
-struct Index {
-  getResourceString(res: Resource) {
-    return getContext().resourceManager.getStringSync(res.id)
-  }
-
-  aboutToAppear(): void {
-
-  }
-
-  build() {
-    Scroll() {
-      Column() {
-        Button($r('app.string.Test_ImageAnimator')).onClick(() => {
-          router.push({
-            uri: 'pages/ImageAnimatorPage',
-          });
-        })
-        Button($r('app.string.Test_multiple_images')).margin({ top: 10 }).onClick(() => {
-          router.push({
-            uri: 'pages/TestCommonImage',
-          });
-        })
-        Button(this.getResourceString($r('app.string.Multiple_images')) + " + reuse + LazyForeach")
-          .margin({ top: 10 })
-          .onClick(() => {
-            router.push({
-              uri: 'pages/UserPage',
-
-            });
-          })
-        Button($r('app.string.Test_SingleImage')).margin({ top: 10 }).onClick(() => {
-          router.push({
-            uri: 'pages/SingleImage',
-
-          });
-        })
-        Button($r('app.string.Image_Downsampling_Functionality')).margin({top:10}).onClick(()=>{
-          router.push({
-            uri: 'pages/DownSamplePage',
-          });
-        })
-        Button($r('app.string.Display_long_image')).margin({ top: 10 }).onClick(() => {
-          router.push({
-            uri: 'pages/LongImagePage',
-
-          });
-        })
-        Button($r('app.string.Image_Transformation')).margin({ top: 10 }).onClick(() => {
-          router.push({
-            uri: 'pages/ImageTransformation',
-
-          });
-
-        })
-        Button($r('app.string.Test_media_URL')).margin({ top: 10 }).onClick(() => {
-          router.push({
-            uri: 'pages/dataShareUriLoadPage',
-
-          });
-        })
-        Button($r('app.string.Different_ObjectFit')).margin({ top: 10 }).onClick(() => {
-          router.push({
-            uri: 'pages/ObjectFitPage',
-
-          });
-
-        })
-        Button($r('app.string.Custom_cache_key')).margin({ top: 10 }).onClick(() => {
-          router.push({
-            uri: 'pages/SignatureTestPage',
-
-          });
-        })
-        Button($r('app.string.Test_image_loading_success_or_failure_events')).margin({ top: 10 }).onClick(() => {
-          router.push({
-            uri: 'pages/LoadStatePage',
-          })
-        })
-        Button($r('app.string.Image_scaling')).margin({ top: 10 }).onClick(() => {
-          router.push({
-            uri: 'pages/TransformPage',
-
-          });
-        })
-
-        Button($r('app.string.Test_HSP')).margin({ top: 10 }).onClick(() => {
-          router.push({
-            uri: 'pages/TestHspPreLoadImage',
-
-          });
-        })
-
-        Button($r('app.string.Test_custom_download')).margin({ top: 10 }).onClick(() => {
-          router.push({
-            uri: 'pages/TestSetCustomImagePage',
-
-          });
-        })
-
-        Button(this.getResourceString($r('app.string.Message_list')) + " + List").margin({ top: 10 }).onClick(() => {
-          router.push({
-            uri: 'pages/TestImageFlash',
-
-          });
-        })
-
-        Button($r('app.string.Preloading_images_to_cache')).margin({ top: 10 }).onClick(() => {
-          router.push({
-            uri: 'pages/TestPrefetchToFileCache',
-
-          });
-        })
-        Button($r('app.string.Retrieve_image_display_from_cache')).margin({ top: 10 }).onClick(() => {
-          router.push({
-            uri: 'pages/TestIsUrlExist',
-
-          });
-        })
-        Button($r('app.string.Test_single_request_header')).margin({ top: 10 }).onClick(() => {
-          router.push({
-            uri: 'pages/TestHeader',
-
-          });
-        })
-        Button($r('app.string.Test_write_cache_strategy')).margin({ top: 10 }).onClick(() => {
-          router.push({
-            uri: 'pages/TestWriteCacheStage',
-
-          });
-        })
-
-
-        Button($r('app.string.Test_removing_image_cache_interface')).margin({ top: 10 }).onClick(() => {
-          router.push({
-            uri: 'pages/TestRemoveCache',
-          });
-        })
-        Button($r('app.string.Test_error_image_display')).margin({ top: 10 }).onClick(() => {
-          router.push({
-            uri: 'pages/TestErrorHolderPage',
-
-          });
-        })
-        Button($r('app.string.Test_Task_error')).margin({ top: 10 }).onClick(() => {
-          router.push({
-            uri: 'pages/TestTaskResourcePage',
-          });
-        })
-        Button($r('app.string.test_cache_btn')).margin({ top: 10 }).onClick(() => {
-          router.push({
-            uri: 'pages/TestCacheDataPage',
-          });
-        })
-        Button($r('app.string.test_change_color_btn')).margin({ top: 10 }).onClick(() => {
-          router.push({
-            uri: 'pages/TestChangeColorPage',
-          });
-        })
-        Button($r('app.string.test_cancel_callback_btn')).margin({ top: 10 }).onClick(() => {
-          router.push({
-            uri: 'pages/TestLoadCancelListenerPage',
-          });
-        })
-      }
-    }.width('100%')
-    .height('100%')
-  }
-}
--- a/entry/src/main/ets/pages/ListPage.ets
+++ b/entry/src/main/ets/pages/ListPage.ets
@ -1,42 +0,0 @@
-/*
- * 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, ImageKnifeOption } from '@ohos/libraryimageknife';
-
-@Entry
-@ComponentV2
-struct ListPage {
-
-  private data: string[] = []
-  @Local ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption({ loadSrc: $r('app.media.startIcon')})
-
-
-  aboutToAppear(): void {
-    for (let i = 0; i < 1000; i++) {
-      this.data.push(i.toString())
-    }
-  }
-
-  build() {
-    Row() {
-      List({ space: 10 }) {
-        ForEach(this.data, (item: string) => {
-          ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption }).height(200).width(200)
-        }, (item: string) => item)
-      }
-      .width('100%')
-    }
-    .height('100%')
-  }
-}
--- a/entry/src/main/ets/pages/LoadStatePage.ets
+++ b/entry/src/main/ets/pages/LoadStatePage.ets
@ -1,116 +0,0 @@
-/*
- * 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, ImageKnifeOption } from "@ohos/libraryimageknife"
-import matrix4 from '@ohos.matrix4'
-
-@Entry
-@ComponentV2
-struct LoadStatePage {
-
-  starTime:number = new Date().getTime()
-
-  @Local ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
-    loadSrc: $r("app.media.rabbit"),
-    placeholderSrc: $r("app.media.loading"),
-    errorholderSrc: $r("app.media.app_icon"),
-    objectFit: ImageFit.Contain,
-    onLoadListener: {
-      onLoadFailed: (err) => {
-        console.error("Load Failed Reason: " + err);
-      },
-      onLoadSuccess: (data) => {
-        return data;
-      },
-    },
-    border: { radius: 50 }
-  })
-  @Local imageKnifeOption1: ImageKnifeOption = new ImageKnifeOption({
-    loadSrc: $r('app.media.startIcon')
-  })
-  @Local message: string = ""
-  @Local currentWidth: number = 200
-  @Local currentHeight: number = 200
-  @Local typeValue: string = ""
-  build() {
-    Column() {
-      Text($r('app.string.TIPS'))
-        .margin({ top: 20 })
-      Row() {
-        Button($r('app.string.Test_failure_success'))
-          .onClick(() => {
-            this.ImageKnifeOption = new ImageKnifeOption({
-              loadSrc: "https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
-              placeholderSrc: $r("app.media.loading"),
-              errorholderSrc: $r("app.media.app_icon"),
-              objectFit: ImageFit.Contain,
-              onLoadListener: {
-                onLoadStart:()=>{
-                  this.starTime = new Date().getTime()
-                  console.info("Load start: ");
-                },
-                onLoadFailed: (err) => {
-                  console.error("Load Failed Reason: " + err + "  cost " + (new Date().getTime() - this.starTime) + " milliseconds");
-                },
-                onLoadSuccess: (data,imageData) => {
-                  console.info("Load Successful: cost " + (new Date().getTime() - this.starTime) + " milliseconds");
-                  this.currentWidth = imageData.imageWidth!
-                  this.currentHeight = imageData.imageHeight!
-                  this.typeValue = imageData.type!
-                  return data;
-                },
-              },
-              border: { radius: 50 },
-              onComplete:(event)=>{
-                console.error("Load onComplete width:"+event?.width , " height:"+event?.height , " componentWidth:"+event?.componentWidth," componentHeight:" + event?.componentHeight);
-              }
-            })
-          })
-      }
-      .margin({ top: 20 })
-      Text($r('app.string.image_format',this.typeValue))
-      Text($r('app.string.image_width',this.currentWidth))
-      Text($r('app.string.image_height',this.currentHeight))
-      ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption }).height(this.currentHeight).width(this.currentWidth)
-        .margin({ top: 20 })
-      Button($r('app.string.Custom_download_failed')).onClick(()=>{
-        this.imageKnifeOption1 = new ImageKnifeOption({
-          loadSrc: "abc",
-          placeholderSrc:$r('app.media.loading'),
-          errorholderSrc:$r('app.media.failed'),
-          customGetImage:custom,
-          onLoadListener: {
-            onLoadFailed:(err)=>{
-              this.message = "err:" + err
-            }
-          }
-        })
-      }).margin({ top: 20 })
-      Text(this.message).fontSize(20).margin({ top: 20 })
-      ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).height(this.currentHeight).width(this.currentWidth)
-        .margin({ top: 20 })
-    }
-
-    .width('100%')
-    .height('100%')
-  }
-
-}
-// 自定义下载方法
-@Concurrent
-async function custom(context: Context, src: string | PixelMap | Resource): Promise<ArrayBuffer | undefined> {
-  console.info("ImageKnife::  custom download：" + src)
-  // 举例写死从本地文件读取，也可以自己请求网络图片
-  return undefined
-}
--- a/entry/src/main/ets/pages/LongImagePage.ets
+++ b/entry/src/main/ets/pages/LongImagePage.ets
@ -1,39 +0,0 @@
-/*
- * 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,ImageKnifeOption } from '@ohos/libraryimageknife'
-
-@Entry
-@ComponentV2
-struct LongImagePage {
-
-  build() {
-    Scroll() {
-
-     // Image("https://wx2.sinaimg.cn/mw690/006HyQKGgy1hnqp08dw09j30u04twu0x.jpg").objectFit(ImageFit.Auto).height(300)
-
-   // Image($r("app.media.aaa")).objectFit(ImageFit.Auto).width(200)
-      ImageKnifeComponent({
-        imageKnifeOption: new ImageKnifeOption({
-          loadSrc:"https://wx2.sinaimg.cn/mw690/006HyQKGgy1hnqp08dw09j30u04twu0x.jpg",
-          //src:$r("app.media.aaa"),
-          placeholderSrc: $r("app.media.loading"),
-          errorholderSrc: $r("app.media.failed"),
-          objectFit: ImageFit.Auto
-        })
-      })
-    }
-    .height('100%') .width('100%')
-  }
-}
--- a/entry/src/main/ets/pages/ObjectFitPage.ets
+++ b/entry/src/main/ets/pages/ObjectFitPage.ets
@ -1,71 +0,0 @@
-/*
- * 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 { ImageKnife, ImageKnifeComponent, ImageKnifeOption } from '@ohos/libraryimageknife'
-
-@Entry
-@ComponentV2
-struct ObjectFitPage {
-  @Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
-    loadSrc: $r("app.media.app_icon"),
-    placeholderSrc: $r("app.media.loading"),
-    errorholderSrc: $r("app.media.app_icon"),
-    objectFit: ImageFit.Fill
-  })
-
-  build() {
-    Column() {
-
-      Button($r('app.string.Main_image_Fill')).onClick(()=>{
-        this.imageKnifeOption = new ImageKnifeOption({
-          loadSrc: $r("app.media.app_icon"),
-          placeholderSrc: $r("app.media.loading"),
-          errorholderSrc: $r("app.media.app_icon"),
-          objectFit: ImageFit.Fill
-        })
-      })
-
-      Button($r('app.string.Maintain_proportion_filling')).margin({top:10}).onClick(async () => {
-        ImageKnife.getInstance().removeAllMemoryCache()
-        await ImageKnife.getInstance().removeAllFileCache()
-
-        this.imageKnifeOption = new ImageKnifeOption({
-          loadSrc: "https://wx2.sinaimg.cn/mw690/006HyQKGgy1hnqp08dw09j30u04twu0x.jpg",
-          placeholderSrc: $r("app.media.app_icon"),
-          errorholderSrc: $r("app.media.app_icon"),
-          objectFit: ImageFit.Fill,
-          placeholderObjectFit: ImageFit.Contain
-        })
-      })
-
-
-      Button($r('app.string.Error_graph_None')).margin({top:10}).onClick(() => {
-        this.imageKnifeOption = new ImageKnifeOption({
-          loadSrc: "http://xxxxx",
-          placeholderSrc: $r("app.media.loading"),
-          errorholderSrc: $r("app.media.app_icon"),
-          objectFit: ImageFit.Fill,
-          errorholderObjectFit: ImageFit.None
-        })
-      })
-
-      ImageKnifeComponent({
-        imageKnifeOption: this.imageKnifeOption
-      }).width(300).height(200).border({width:1}).margin({top:50})
-
-    }
-    .height('100%')
-    .width('100%')
-  }
-}
--- a/entry/src/main/ets/pages/OptionTestPage.ets
+++ b/entry/src/main/ets/pages/OptionTestPage.ets
@ -0,0 +1,79 @@
+/*
+ * Copyright (C) 2022 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, ImageKnifeOption,NONE,DiskStrategy } from '@ohos/libraryimageknife'
+
+@Entry
+@Component
+struct OptionTestPage {
+  @State imageKnifeOption1: ImageKnifeOption =
+    {
+      loadSrc: $r('app.media.icon'),
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+    };
+  @State imageKnifeOption2: ImageKnifeOption =
+    {
+      loadSrc: $r('app.media.icon'),
+      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("示例加载图片不进行缓存").fontSize(15)
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          Button("加载")
+            .onClick(() => {
+              let setting:DiskStrategy = new NONE();
+              this.imageKnifeOption1 = {
+                loadSrc: 'https://img-blog.csdn.net/20140514114029140',
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                onlyRetrieveFromCache: false,
+                isCacheable: false,
+                strategy: setting
+              }
+            }).margin({ top: 5, left: 3 })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
+        }.width('100%').backgroundColor(Color.Pink)
+
+        Text("示例：加载图片进行缓存").fontSize(15)
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          Button("加载")
+            .onClick(() => {
+              let setting2:DiskStrategy = new NONE();
+              this.imageKnifeOption2 = {
+                loadSrc: 'https://img-blog.csdn.net/20140514114029140',
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                onlyRetrieveFromCache: true,
+                isCacheable: true,
+                strategy: setting2
+              }
+            }).margin({ top: 5, left: 3 })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }).width(300).height(300)
+        }.width('100%').backgroundColor(Color.Pink)
+
+
+      }
+
+    }.width('100%')
+    .height('100%')
+
+  }
+}
--- a/entry/src/main/ets/pages/RequestOptionLoadImage.ets
+++ b/entry/src/main/ets/pages/RequestOptionLoadImage.ets
@ -0,0 +1,109 @@
+/*
+ * 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 image from '@ohos.multimedia.image'
+import {
+  ImageKnifeData,
+  RequestOption,
+  Size,
+  ImageKnife,
+  ImageKnifeGlobal,
+  ImageKnifeComponent,
+  ObjectKey
+} from '@ohos/libraryimageknife'
+import { BusinessError } from '@ohos.base'
+
+const TAG = "TEST-"
+let timeId = -1
+
+@Entry
+@Component
+struct RequestOptionLoadImage {
+  @State pixelMap: PixelMap | undefined = undefined
+
+  load(src: string | image.PixelMap | Resource) {
+    clearTimeout(timeId)
+    let request = new RequestOption()
+    //*requestOption调用*
+    request.addHeader('refer', 'http://1.94.37.200:7070/AntiTheftChain/downloadImage');
+    //通过时间戳去清除缓存
+    request.signature = new ObjectKey(new Date().getTime().toString())
+    request.load(src)
+      .addListener({ callback: (err: BusinessError | string, data: ImageKnifeData) => {
+        if (data.isPixelMap()) {
+          if (data.drawPixelMap) {
+            let pixelmap = data.drawPixelMap.imagePixelMap
+            if (pixelmap) {
+              this.pixelMap = pixelmap
+            }
+          }
+        }
+        if (data.isGIFFrame()) {
+          let index: number = 0
+          if (data.drawGIFFrame) {
+            if (data.drawGIFFrame.imageGIFFrames) {
+              let renderGif = () => {
+                if (data.drawGIFFrame) {
+                  if (data.drawGIFFrame.imageGIFFrames) {
+                    let pixelmap = data.drawGIFFrame.imageGIFFrames[index].drawPixelMap
+                    let delay = data.drawGIFFrame.imageGIFFrames[index].delay
+                    if (pixelmap) {
+                      this.pixelMap = pixelmap
+                    }
+                    index++;
+                    if (index == data.drawGIFFrame.imageGIFFrames.length - 1) {
+                      index = 0
+                    }
+                    timeId = setTimeout(renderGif, data!.drawGIFFrame!.imageGIFFrames![index].delay)
+                  }
+                }
+              }
+              renderGif()
+            }
+          }
+        }
+        if (err) {
+          console.log(TAG + "error:" + JSON.stringify(err));
+        }
+        return false
+      }
+      })
+    let compSize: Size = {
+      width: 300,
+      height: 300
+    }
+    request.setImageViewSize(compSize)
+    let imageknife: ImageKnife | undefined = ImageKnifeGlobal.getInstance().getImageKnife()
+    if (imageknife != undefined) {
+      imageknife.call(request)
+    }
+  }
+
+  build() {
+    Scroll() {
+      Column() {
+        Text("RequestOption加载图片").fontSize(25)
+        Button("加载网络gif").onClick(() => {
+          this.load("https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658")
+        })
+        Button("加载静态图").onClick(() => {
+          this.load($r('app.media.pngSample'))
+        })
+        ImageKnifeComponent({ imageKnifeOption: {
+          loadSrc: this.pixelMap as image.PixelMap
+        } }).width(300).height(300).borderWidth(3)
+      }
+    }
+  }
+}
--- a/entry/src/main/ets/pages/SignatureTestPage.ets
+++ b/entry/src/main/ets/pages/SignatureTestPage.ets
@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2024 Huawei Device Co., Ltd.
+ * Copyright (C) 2021 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
@ -12,49 +12,54 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/libraryimageknife';

+import { ImageKnifeComponent, ImageKnifeOption, NONE, DiskStrategy } from '@ohos/libraryimageknife'
+import { ObjectKey } from '@ohos/libraryimageknife';

@Entry
-@ComponentV2
+@Component
 struct SignatureTestPage {
-  @Local imageKnifeOption1: ImageKnifeOption =new ImageKnifeOption(
+  @State imageKnifeOption1: ImageKnifeOption =
    {
      loadSrc: $r('app.media.icon'),
-      placeholderSrc:$r("app.media.loading"),
-    });
-  @Local imageKnifeOption2: ImageKnifeOption =new ImageKnifeOption(
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+    };
+  @State imageKnifeOption2: ImageKnifeOption =
    {
      loadSrc: $r('app.media.icon'),
-      placeholderSrc:$r("app.media.loading"),
-    });
+      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($r('app.string.The_key_fixed_1')).fontSize(15)
+        Text("Signature固定为 1").fontSize(15)
        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Button($r('app.string.Load'))
+          Button("加载")
            .onClick(() => {
-              this.imageKnifeOption1 = new ImageKnifeOption({
+              this.imageKnifeOption1 = {
                loadSrc: 'https://img-blog.csdn.net/20140514114029140',
-                placeholderSrc:$r("app.media.loading"),
-                signature: "1"
-              })
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                signature: new ObjectKey("1")
+              }
            }).margin({ top: 5, left: 3 })
          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
        }.width('100%').backgroundColor(Color.Pink)

-        Text($r('app.string.The_key_changes_timestamp')).fontSize(15)
+        Text("设置Signature，每次为时间戳").fontSize(15)
        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Button($r('app.string.Load'))
+          Button("加载")
            .onClick(() => {
-              this.imageKnifeOption2 = new ImageKnifeOption({
+              this.imageKnifeOption2 = {
                loadSrc: 'https://img-blog.csdn.net/20140514114029140',
-                placeholderSrc:$r("app.media.loading"),
-                signature: new Date().getTime().toString()
-              })
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                signature: new ObjectKey(new Date().getTime().toString())
+              }
            }).margin({ top: 5, left: 3 })
          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }).width(300).height(300)
        }.width('100%').backgroundColor(Color.Pink)
@ -66,7 +71,7 @@ struct SignatureTestPage {
  }

  aboutToAppear() {
-    console.log("唯一标识页面：" + new Date().getTime().toString())
+    console.log("唯一标识页面：" + new ObjectKey(new Date().getTime().toString()).getKey())

  }
 }
--- a/entry/src/main/ets/pages/SingleImage.ets
+++ b/entry/src/main/ets/pages/SingleImage.ets
@ -1,132 +0,0 @@
-/*
- * 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,BlurTransformation,ImageKnifeOption } from '@ohos/libraryimageknife';
-import fs from '@ohos.file.fs';
-import image from '@ohos.multimedia.image';
-import { common2D, drawing } from '@kit.ArkGraphics2D';
-
-@Entry
-@ComponentV2
-struct SingleImage {
-  resource: string = "app.media.svgSample"
-  scroller: Scroller = new Scroller;
-  localFile: string = getContext(this).filesDir + "/icon.png"
-  @Local pixelMap:PixelMap | undefined = undefined;
-  @Local DrawingColorFilter: ColorFilter | undefined = undefined
-  private color: common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 };
-  aboutToAppear(): void {
-    // 拷贝本地文件
-    let icon: Uint8Array = getContext(this).resourceManager.getMediaContentSync($r("app.media.startIcon"));
-    let file = fs.openSync(this.localFile, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE);
-    fs.writeSync(file.fd, icon.buffer);
-    fs.fsyncSync(file.fd);
-    fs.closeSync(file);
-    this.changePic(getContext().resourceManager.getMediaContentSync( $r("app.media.aaa"))
-      .buffer as ArrayBuffer);
-
-
-  }
-
-  build() {
-    Scroll(this.scroller) {
-      Column() {
-        Text($r('app.string.Local_SVG'))
-          .fontSize(30)
-          .fontWeight(FontWeight.Bold)
-        ImageKnifeComponent({
-          imageKnifeOption: new ImageKnifeOption({
-            loadSrc: $r("app.media.svgSample"),
-            placeholderSrc: $r("app.media.loading"),
-            errorholderSrc: $r("app.media.failed"),
-            objectFit: ImageFit.Contain
-          })
-        }).width(100).height(100)
-          .onClick(()=>{
-            this.DrawingColorFilter = drawing.ColorFilter.createBlendModeColorFilter(this.color, drawing.BlendMode.SRC_IN);
-          })
-        Text($r('app.string.Under_context_file'))
-          .fontSize(30)
-          .fontWeight(FontWeight.Bold)
-        ImageKnifeComponent({
-          imageKnifeOption: new ImageKnifeOption({
-            loadSrc: this.localFile,
-            placeholderSrc: $r("app.media.loading"),
-            errorholderSrc: $r("app.media.failed"),
-            objectFit: ImageFit.Contain
-          })
-        }).width(100).height(100)
-        Text($r('app.string.Network_images'))
-          .fontSize(30)
-          .fontWeight(FontWeight.Bold)
-        ImageKnifeComponent({
-          imageKnifeOption: new ImageKnifeOption({
-            loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
-            placeholderSrc: $r("app.media.loading"),
-            errorholderSrc: $r("app.media.failed"),
-            objectFit: ImageFit.Contain,
-            progressListener:(progress:number)=>{console.info("ImageKnife:: call back progress = " + progress)}
-          })
-        }).width(100).height(100)
-        Text($r('app.string.Custom_network_download'))
-          .fontSize(30)
-          .fontWeight(FontWeight.Bold)
-        ImageKnifeComponent({
-          imageKnifeOption: new ImageKnifeOption({
-            loadSrc: "https://file.atomgit.com/uploads/user/1704857786989_8994.jpeg",
-            placeholderSrc: $r("app.media.loading"),
-            errorholderSrc: $r("app.media.failed"),
-            objectFit: ImageFit.Contain,
-            customGetImage: custom,
-            transformation: new BlurTransformation(10)
-          })
-        }).width(100).height(100)
-        Text($r('app.string.PixelMap_loads_images'))
-          .fontSize(30)
-          .fontWeight(FontWeight.Bold)
-        ImageKnifeComponent({
-          imageKnifeOption: new ImageKnifeOption({
-            loadSrc: this.pixelMap!,
-            placeholderSrc: $r("app.media.loading"),
-            errorholderSrc: $r("app.media.failed"),
-            objectFit: ImageFit.Contain,
-          })
-        }).width(100).height(100)
-      }
-      .width('100%')
-    }
-    .height('100%')
-  }
-
-  changePic(buffer: ArrayBuffer){
-    let imageSource: image.ImageSource = image.createImageSource(buffer);
-    if (imageSource) {
-      let decodingOptions: image.DecodingOptions = {
-        editable: true,
-      }
-      imageSource.createPixelMap(decodingOptions,(err,pixelMap)=>{
-        this.pixelMap = pixelMap;
-      })
-    }
-  }
-}
-
-// 自定义下载方法
-@Concurrent
-async function custom(context: Context, src: string | PixelMap | Resource): Promise<ArrayBuffer | undefined> {
-  console.info("ImageKnife::  custom download：" + src)
-  // 举例写死从本地文件读取，也可以自己请求网络图片
-  return context.resourceManager.getMediaContentSync($r("app.media.startIcon").id).buffer as ArrayBuffer
-}
-
--- a/entry/src/main/ets/pages/TestCacheDataPage.ets
+++ b/entry/src/main/ets/pages/TestCacheDataPage.ets
@ -1,140 +0,0 @@
-/*
- * 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 { ImageKnife, CacheStrategy, ImageKnifeComponent, ImageKnifeOption } from '@ohos/imageknife';
-
-@Entry
-@ComponentV2
-struct TestCacheDataPage {
-  @Local cacheUpLimit: number = 0;
-  @Local currentNum: number = 0;
-  @Local currentSize: number = 0;
-  @Local currentWidth: number = 200
-  @Local currentHeight: number = 200
-  @Local markersLimitText: string = getContext(this).resourceManager.getStringSync($r('app.string.memory'))
-  @Local markersNumText: string = getContext(this).resourceManager.getStringSync($r('app.string.memory'))
-  @Local markersSizeText: string = getContext(this).resourceManager.getStringSync($r('app.string.memory'))
-  @Local ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
-    loadSrc: "",
-    objectFit: ImageFit.Contain,
-    onLoadListener: {
-      onLoadFailed: (err) => {
-        console.error("Load Failed Reason: " + err);
-      },
-      onLoadSuccess: (data) => {
-        return data;
-      },
-    },
-    border: { radius: 50 }
-  })
-
-  aboutToAppear(): void {
-    ImageKnife.getInstance().initFileCache(getContext(this), 256, 256 * 1024 * 1024, "ImageKnifeCache1")
-  }
-
-  build() {
-    Column() {
-
-      ImageKnifeComponent(
-        { imageKnifeOption: this.ImageKnifeOption })
-        .height(this.currentHeight)
-        .width(this.currentWidth)
-        .margin({ top: 10 })
-
-      Button($r('app.string.load_memory'))
-        .onClick(() => {
-          this.ImageKnifeOption = new ImageKnifeOption({
-            loadSrc: "https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/3e/v3/LqRoLI-PRSu9Nqa8KdJ-pQ/dSqskBpSR9eraAMn7NBdqA.jpg",
-            objectFit: ImageFit.Contain,
-            writeCacheStrategy: CacheStrategy.Memory,
-            border: { radius: 50 },
-          })
-        })
-      Button($r('app.string.load_disk'))
-        .onClick(() => {
-          this.ImageKnifeOption = new ImageKnifeOption({
-            loadSrc: "https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/56/v3/8MdhfSsCSMKj4sA6okUWrg/5uBx56tLTUO3RYQl-E5JiQ.jpg",
-            objectFit: ImageFit.Contain,
-            writeCacheStrategy: CacheStrategy.File,
-            border: { radius: 50 },
-          })
-        })
-      Text($r('app.string.cur_cache_limit', this.markersLimitText, this.cacheUpLimit))
-        .fontSize(20)
-        .margin({ bottom: 8 });
-      Text($r('app.string.cur_cache_image_num', this.markersNumText, this.currentNum))
-        .fontSize(20)
-        .margin({ bottom: 8 });
-      Text($r('app.string.cur_cache_size', this.markersSizeText, this.currentSize)).fontSize(20).margin({ bottom: 20 });
-
-      Button($r('app.string.get_cur_memory_limit')).onClick(() => {
-        let result = ImageKnife.getInstance().getCacheUpperLimit(CacheStrategy.Memory);
-        this.markersLimitText = getContext(this).resourceManager.getStringSync($r('app.string.memory'))
-        if (result) {
-          this.cacheUpLimit = result / (1024 * 1024);
-        } else {
-          this.cacheUpLimit = 0;
-        }
-      }).margin({ bottom: 8 });
-      Button($r('app.string.get_img_number_of_cache')).onClick(() => {
-        let result = ImageKnife.getInstance().getCurrentPicturesNum(CacheStrategy.Memory);
-        this.markersNumText = getContext(this).resourceManager.getStringSync($r('app.string.memory'))
-        if (result) {
-          this.currentNum = result;
-        } else {
-          this.currentNum = 0;
-        }
-      }).margin({ bottom: 8 });
-      Button($r('app.string.get_cur_memory_size')).onClick(() => {
-        let result = ImageKnife.getInstance().getCurrentCacheSize(CacheStrategy.Memory);
-        this.markersSizeText = getContext(this).resourceManager.getStringSync($r('app.string.memory'))
-        if (result) {
-          this.currentSize = result / (1024 * 1024);
-        } else {
-          this.currentSize = 0;
-        }
-      }).margin({ bottom: 8 });
-
-      Button($r('app.string.get_cur_disk_limit')).onClick(() => {
-        let result = ImageKnife.getInstance().getCacheUpperLimit(CacheStrategy.File);
-        this.markersLimitText = getContext(this).resourceManager.getStringSync($r('app.string.disk'))
-        if (result) {
-          this.cacheUpLimit = result / (1024 * 1024);
-        } else {
-          this.cacheUpLimit = 0;
-        }
-      }).margin({ bottom: 8 });
-      Button($r('app.string.get_img_number_of_disk')).onClick(() => {
-        let result = ImageKnife.getInstance().getCurrentPicturesNum(CacheStrategy.File);
-        this.markersNumText = getContext(this).resourceManager.getStringSync($r('app.string.disk'))
-        if (result) {
-          this.currentNum = result;
-        } else {
-          this.currentNum = 0;
-        }
-      }).margin({ bottom: 8 });
-      Button($r('app.string.get_cur_disk_size')).onClick(() => {
-        let result = ImageKnife.getInstance().getCurrentCacheSize(CacheStrategy.File);
-        this.markersSizeText = getContext(this).resourceManager.getStringSync($r('app.string.disk'))
-        if (result) {
-          this.currentSize = result / (1024 * 1024);
-        } else {
-          this.currentSize = 0;
-        }
-      }).margin({ bottom: 8 });
-    }
-    .height('100%').width('100%').margin({ top: 50 })
-  }
-}
--- a/entry/src/main/ets/pages/TestChangeColorPage.ets
+++ b/entry/src/main/ets/pages/TestChangeColorPage.ets
@ -1,112 +0,0 @@
-/*
- * 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 { drawing, common2D } from '@kit.ArkGraphics2D';
-import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/imageknife';
-
-@Entry
-@Component
-struct TestChangeColorPage {
-  private imageOne: Resource = $r('app.media.ic_test_change_color_png');
-  private imageTwo: Resource = $r('app.media.ic_test_change_color_png');
-  @State src: Resource = this.imageOne
-  @State src2: Resource = this.imageTwo
-  @State color: common2D.Color = {
-    alpha: 255,
-    red: 255,
-    green: 1,
-    blue: 1
-  };
-  @State DrawingColorFilterFirst: ColorFilter | undefined = undefined
-
-  build() {
-    Column() {
-      Text($r('app.string.select_color_btn')).margin({ top: 20 })
-      Row() {
-        Button($r('app.string.red')).backgroundColor(Color.Red).margin(5).onClick(() => {
-          this.color = {
-            alpha: 255,
-            red: 255,
-            green: 1,
-            blue: 1
-          };
-        })
-        Button($r('app.string.yellow')).backgroundColor(Color.Yellow).margin(5).onClick(() => {
-          this.color = {
-            alpha: 255,
-            red: 255,
-            green: 255,
-            blue: 1
-          };
-        })
-        Button($r('app.string.green')).backgroundColor(Color.Green).margin(5).onClick(() => {
-          this.color = {
-            alpha: 255,
-            red: 1,
-            green: 255,
-            blue: 1
-          };
-        })
-        Button($r('app.string.blue')).backgroundColor(Color.Blue).margin(5).onClick(() => {
-          this.color = {
-            alpha: 255,
-            red: 1,
-            green: 1,
-            blue: 255
-          };
-        })
-      }
-      .width('100%')
-      .height(50)
-      .justifyContent(FlexAlign.Center)
-
-      Text($r('app.string.master_image')).margin({ top: 20 })
-      ImageKnifeComponent({
-        imageKnifeOption: new ImageKnifeOption({
-          loadSrc: this.src
-        })
-      }).width(110).height(110)
-
-      Text($r('app.string.click_img_to_change_color')).margin({ top: 30 })
-      ImageKnifeComponent({
-        imageKnifeOption: new ImageKnifeOption({
-          loadSrc: this.src,
-          drawingColorFilter: this.DrawingColorFilterFirst
-        })
-      })
-        .onClick(() => {
-          this.DrawingColorFilterFirst =
-            drawing.ColorFilter.createBlendModeColorFilter(this.color, drawing.BlendMode.SRC_IN);
-        }).width(110).height(110)
-
-      Text($r('app.string.test_non_svg_color')).margin({ top: 30 })
-      ImageKnifeComponent({
-        imageKnifeOption: new ImageKnifeOption({
-          loadSrc: $r('app.media.ic_test_change_color_png'),
-          drawingColorFilter: drawing.ColorFilter.createBlendModeColorFilter(this.color, drawing.BlendMode.SRC_IN)
-        })
-      }).width(110).height(110)
-
-      Text($r('app.string.test_svg_color')).margin({ top: 30 })
-      ImageKnifeComponent({
-        imageKnifeOption: new ImageKnifeOption({
-          loadSrc: $r("app.media.ic_test_change_color_svg"),
-          drawingColorFilter: drawing.ColorFilter.createBlendModeColorFilter(this.color, drawing.BlendMode.SRC_IN)
-        })
-      }).width(110).height(110)
-
-    }.width('100%').height('100%')
-  }
-}
--- a/entry/src/main/ets/pages/TestCommonImage.ets
+++ b/entry/src/main/ets/pages/TestCommonImage.ets
@ -1,52 +0,0 @@
-/*
- * 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 ,ImageKnifeOption} from '@ohos/libraryimageknife';
-
-@Entry
-@ComponentV2
-struct TestCommonImage {
-  private data: Array<string> = []
-  aboutToAppear(): void {
-    for (let index = 0; index < 30; index++) {
-      this.data.push(`https://img-blog.csdn.net/20140514114029140?${index}`)
-    }
-  }
-  build() {
-    Column() {
-      WaterFlow() {
-        ForEach(this.data,(item: string)=>{
-          FlowItem() {
-            Column(){
-              ImageKnifeComponent({
-                imageKnifeOption: new ImageKnifeOption({
-                  loadSrc: item,
-                  placeholderSrc: $r("app.media.loading"),
-                  errorholderSrc: $r("app.media.failed"),
-                  objectFit: ImageFit.Contain,
-                  signature: "aaa"
-                })
-              }).width("50%").height(200)
-            }
-          }.height(200)
-          .backgroundColor("#95efd2")
-        },(item: string) => item)
-      }.columnsTemplate("1fr 1fr")
-      .columnsGap(10)
-      .rowsGap(5)
-      .backgroundColor(0xFAEEE0)
-      .width("100%").height("100%")
-    }
-  }
-}
--- a/entry/src/main/ets/pages/TestErrorHolderPage.ets
+++ b/entry/src/main/ets/pages/TestErrorHolderPage.ets
@ -1,47 +0,0 @@
-/*
- * 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,ImageKnifeOption } from '@ohos/libraryimageknife'
-
-@Entry
-@ComponentV2
-struct TestErrorHolderPage {
-
-  build() {
-    Column() {
-      Text("ImageKnifeComponent1").fontSize(20)
-      ImageKnifeComponent({
-        imageKnifeOption: new ImageKnifeOption({
-          loadSrc: "abc",
-          errorholderSrc:$r('app.media.failed')
-        })
-      }).width(200).height(200)
-      Text("ImageKnifeComponent2").fontSize(20)
-      ImageKnifeComponent({
-        imageKnifeOption: new ImageKnifeOption({
-          loadSrc: "abc",
-          errorholderSrc:$r('app.media.startIcon')
-        })
-      }).width(200).height(200)
-      Text("ImageKnifeComponent2").fontSize(20)
-      ImageKnifeComponent({
-        imageKnifeOption: new ImageKnifeOption({
-          loadSrc: "abc",
-          errorholderSrc:$r('app.media.mask_starfish')
-        })
-      }).width(200).height(200)
-    }
-    .height('100%') .width('100%')
-  }
-}
--- a/entry/src/main/ets/pages/TestHeader.ets
+++ b/entry/src/main/ets/pages/TestHeader.ets
@ -1,39 +0,0 @@
-/*
- * 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,ImageKnifeOption } from '@ohos/libraryimageknife'
-
-@Entry
-@ComponentV2
-struct TestPrefetchToFileCachePage {
-  @Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
-    loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
-    placeholderSrc:$r('app.media.loading'),
-    headerOption:[
-      {
-        key:"abc",
-        value:"单个"
-      }
-    ]
-  })
-
-  build() {
-    Column() {
-      ImageKnifeComponent({
-        imageKnifeOption: this.imageKnifeOption
-      }).width(300).height(300)
-    }
-    .height('100%') .width('100%')
-  }
-}
--- a/entry/src/main/ets/pages/TestImageFlash.ets
+++ b/entry/src/main/ets/pages/TestImageFlash.ets
@ -1,137 +0,0 @@
-/*
- * 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,ImageKnifeOption } from '@ohos/libraryimageknife'
-
-@ObservedV2
-export class MsgModel {
-  id: string
-  cId: string
-  body: string
-  status: number
-
-  constructor(id: string, body: string, cId?: string) {
-    this.id = id
-    this.body = body
-    this.status = -1
-    this.cId = cId || ''
-  }
-}
-
-
-// @Reusable
-@ComponentV2
-export struct MsgItem {
-  @Param count: number = 0
-  private data: Array<string> = [
-    "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
-    "http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg",
-    "http://h.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5f2c2a9e953da81cb39db3d1d.jpg",
-    "http://g.hiphotos.baidu.com/image/pic/item/55e736d12f2eb938d5277fd5d0628535e5dd6f4a.jpg",
-    "http://e.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f7e41f5cfe760e0cf3d6cad6ee.jpg",
-    "http://b.hiphotos.baidu.com/image/pic/item/9d82d158ccbf6c81b94575cfb93eb13533fa40a2.jpg",
-    "http://e.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31c1badd5a685d6277f9e2ff81e.jpg",
-    "http://g.hiphotos.baidu.com/image/pic/item/0d338744ebf81a4c87a3add4d52a6059252da61e.jpg",
-    "http://a.hiphotos.baidu.com/image/pic/item/f2deb48f8c5494ee5080c8142ff5e0fe99257e19.jpg",
-    "http://f.hiphotos.baidu.com/image/pic/item/4034970a304e251f503521f5a586c9177e3e53f9.jpg",
-    "http://b.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fbb3586c0168224f4a20a4dd7e.jpg",
-    "http://img2.xkhouse.com/bbs/hfhouse/data/attachment/forum/corebbs/2009-11/2009113011534566298.jpg",
-    "http://a.hiphotos.baidu.com/image/pic/item/e824b899a9014c087eb617650e7b02087af4f464.jpg",
-    "http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg",
-    "http://d.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f119945cbe2fe9925bc317d2a.jpg",
-    "http://h.hiphotos.baidu.com/image/pic/item/902397dda144ad340668b847d4a20cf430ad851e.jpg",
-    "http://b.hiphotos.baidu.com/image/pic/item/359b033b5bb5c9ea5c0e3c23d139b6003bf3b374.jpg",
-    "http://a.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a292d2472199d25bc315d607c7c.jpg",
-    "http://b.hiphotos.baidu.com/image/pic/item/e824b899a9014c08878b2c4c0e7b02087af4f4a3.jpg",
-    "http://g.hiphotos.baidu.com/image/pic/item/6d81800a19d8bc3e770bd00d868ba61ea9d345f2.jpg",
-  ]
-  build(){
-    if (this.count % 2 == 0 && this.count <6){
-      ImageKnifeComponent({
-        imageKnifeOption:new ImageKnifeOption({
-          loadSrc:$r("app.media.startIcon"),
-          placeholderSrc:$r("app.media.loading")
-        }),syncLoad:true
-      })
-    }else if (this.count > 6 && this.count - 6 < this.data.length){
-      ImageKnifeComponent({
-        imageKnifeOption:new ImageKnifeOption({
-          loadSrc:this.data[this.count - 6],
-          placeholderSrc:$r("app.media.loading")
-        }),syncLoad:true
-      })
-    }else {
-      ImageKnifeComponent({
-        imageKnifeOption:new ImageKnifeOption({
-          loadSrc:$r("app.media.pngSample"),
-          placeholderSrc:$r("app.media.loading")
-        }),syncLoad:true
-      })
-    }
-  }
-}
-
-@Entry
-@ComponentV2
-struct ImageTestPage {
-  count : number = 0
-  rCount: number = 0
-  scroller: Scroller = new Scroller()
-  @Local list: MsgModel[] = []
-  @Local imageSize: number =100
-  handAdd(){
-    this.count++
-    const msgItem = new MsgModel('add_id'+this.count, 'addBody'+this.count,'cId'+ this.count)
-    this.list.push(msgItem)
-    setTimeout(()=> {
-      msgItem.status = 1
-    },3000)
-    this.scroller.scrollEdge(Edge.Bottom)
-  }
-
-  build(){
-    Column(){
-      Row(){
-        Button("addItem").onClick(()=> {
-          this.handAdd()
-        })
-        Button("remove").onClick(()=> {
-          this.list.splice(0,1)
-        })
-      }
-      Row(){
-        Text($r('app.string.Click_on_add'))
-          .onClick(()=> {
-            this.imageSize = this.imageSize + 50
-          })
-          .width('50%').backgroundColor(0x88ff0000).textAlign(TextAlign.Center).height(50)
-        Text($r('app.string.Click_on_reduce'))
-          .onClick(()=> {
-            this.imageSize = Math.max(this.imageSize - 50, 0)
-          })
-          .width('50%').backgroundColor(0x88ff0000).textAlign(TextAlign.Center).height(50)
-      }.height(50).width('100%')
-
-      List({space: 20, scroller: this.scroller }) {
-        ForEach(this.list, (item: MsgModel)=> {
-          ListItem(){
-            MsgItem({count : this.count}).width(this.imageSize).height(this.imageSize);
-          }
-        },(item:MsgModel)=> item.id)
-      }.width('100%').height('auto').layoutWeight(1)
-    }
-    .width('100%')
-    .height('100%')
-  }
-}
--- a/entry/src/main/ets/pages/TestIsUrlExist.ets
+++ b/entry/src/main/ets/pages/TestIsUrlExist.ets
@ -1,86 +0,0 @@
-/*
- * 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, ImageKnifeOption, CacheStrategy } from '@ohos/libraryimageknife'
-
-@Entry
-@ComponentV2
-struct TestIsUrlExist {
-  @Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
-    loadSrc: $r('app.media.startIcon'),
-    placeholderSrc: $r('app.media.loading'),
-    errorholderSrc:$r('app.media.failed')
-  })
-  @Local source: PixelMap | string | Resource = $r("app.media.startIcon")
-  @Local source1: PixelMap | string | Resource = $r("app.media.startIcon")
-
-  build() {
-    Column() {
-      Flex() {
-        Button($r('app.string.Preloading_GIF')).onClick(() => {
-          this.imageKnifeOption.loadSrc =
-            "https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658"
-        })
-        Button($r('app.string.Retrieve_GIF_from_memory')).onClick(() => {
-          ImageKnife.getInstance()
-            .getCacheImage("https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
-              CacheStrategy.Memory)
-            .then((data) => {
-              this.source = data !== undefined ? data.source : $r("app.media.startIcon")
-            })
-        })
-        Button($r('app.string.Retrieve_GIF_from_disk')).onClick(() => {
-          ImageKnife.getInstance()
-            .getCacheImage("https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
-              CacheStrategy.File)
-            .then((data) => {
-              this.source1 = data !== undefined ? data.source : $r("app.media.startIcon")
-            })
-        })
-      }
-
-      Flex() {
-        Button($r('app.string.Preloading_static_images')).onClick(() => {
-          this.imageKnifeOption.loadSrc =
-            'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp'
-        })
-        Button($r('app.string.Retrieve_images_from_memory')).onClick(() => {
-          ImageKnife.getInstance()
-            .getCacheImage('https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
-              CacheStrategy.Memory)
-            .then((data) => {
-              this.source = data!.source
-            })
-        })
-        Button($r('app.string.Retrieve_images_from_disk')).onClick(() => {
-          ImageKnife.getInstance()
-            .getCacheImage('https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
-              CacheStrategy.File)
-            .then((data) => {
-              this.source1 = data!.source
-            })
-        })
-      }.margin({ top: 10 })
-
-      ImageKnifeComponent({
-        imageKnifeOption: this.imageKnifeOption
-      }).width(200).height(200).margin({ top: 10 })
-      Image(this.source).margin({ top: 10 })
-        .width(200).height(200)
-      Image(this.source1).margin({ top: 10 })
-        .width(200).height(200)
-    }
-    .height('100%').width('100%')
-  }
-}
--- a/entry/src/main/ets/pages/TestLoadCancelListenerPage.ets
+++ b/entry/src/main/ets/pages/TestLoadCancelListenerPage.ets
@ -1,94 +0,0 @@
-/*
- * 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, ImageKnifeOption } from '@ohos/imageknife';
-
-@Entry
-@ComponentV2
-struct TestLoadCancelListenerPage {
-  @Local currentWidth: number = 200
-  @Local currentHeight: number = 200
-  @Local showChild: boolean = true;
-  @Local text: string = "";
-  @Local ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
-    loadSrc: "",
-    objectFit: ImageFit.Contain,
-    border: { radius: 50 }
-  })
-
-  build() {
-    Column() {
-      Text($r('app.string.onLoadCancel_reason', this.text)).margin(20).fontSize(15)
-      Button($r('app.string.rm_component_of_net'))
-        .margin(20)
-        .onClick(() => {
-          this.ImageKnifeOption = new ImageKnifeOption({
-            loadSrc: "https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/76/v3/EyF6z4FISpCHhae38eEexw/OtyAiu-zSSevNQYvUdtVmA.jpg",
-            objectFit: ImageFit.Contain,
-            onLoadListener: {
-              onLoadStart: () => {
-                this.showChild = false;
-              },
-              onLoadCancel: (res) => {
-                this.text = res
-                console.log("TestLoadCancelListenerPage----onLoadCancel> url:" + res)
-              }
-            },
-            border: { radius: 50 }
-          })
-        })
-
-      Button($r('app.string.component_display'))
-        .margin(20).onClick(() => {
-        this.text = "";
-        this.showChild = true;
-        this.ImageKnifeOption = new ImageKnifeOption({
-          loadSrc: "",
-          objectFit: ImageFit.Contain,
-          border: { radius: 50 }
-        })
-      })
-      Button($r('app.string.rm_component_of_local'))
-        .margin(20)
-        .onClick(() => {
-          this.ImageKnifeOption = new ImageKnifeOption({
-            loadSrc: $r('app.media.loading'),
-            objectFit: ImageFit.Contain,
-            onLoadListener: {
-              onLoadStart: () => {
-                this.showChild = false;
-              },
-              onLoadCancel: (res) => {
-                this.text = res
-                console.log("TestLoadCancelListenerPage----onLoadCancel> url:" + res)
-              }
-            },
-            border: { radius: 50 }
-          })
-        })
-
-      if (this.showChild) {
-        ImageKnifeComponent(
-          { imageKnifeOption: this.ImageKnifeOption })
-          .height(150)
-          .width(150)
-          .backgroundColor(Color.Orange)
-          .margin({ top: 20 })
-      }
-    }
-    .height('100%')
-    .width('100%')
-  }
-}
--- a/entry/src/main/ets/pages/TestPrefetchToFileCache.ets
+++ b/entry/src/main/ets/pages/TestPrefetchToFileCache.ets
@ -1,50 +0,0 @@
-/*
- * 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,ImageKnifeOption } from '@ohos/libraryimageknife'
-
-@Entry
-@ComponentV2
-struct TestPrefetchToFileCachePage {
-  @Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
-    loadSrc:$r('app.media.startIcon'),
-    placeholderSrc:$r('app.media.loading'),
-    errorholderSrc:$r('app.media.failed')
-  })
-  async preload(url:string) {
-    let fileCachePath = await ImageKnife.getInstance().preLoadCache(url)
-    console.log("preload-fileCachePath=="+ fileCachePath)
-  }
-  async preload1(url:string) {
-    let fileCachePath = await ImageKnife.getInstance().preLoadCache(new ImageKnifeOption({ loadSrc: url }))
-    console.log("preload-fileCachePath1=="+ fileCachePath)
-  }
-  build() {
-    Column() {
-      Button($r('app.string.Preloading_images_to_file_cache_using_URL')).margin({top:10}).onClick(async ()=>{
-        await this.preload("https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658")
-      })
-      Button($r('app.string.Preloading_images_to_file_cache_using_option')).margin({top:10}).onClick(async ()=>{
-        await this.preload1("https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658")
-      })
-      Button($r('app.string.Load_image_offline_after_preloading')).margin({top:10}).onClick(()=>{
-        this.imageKnifeOption.loadSrc = "https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658"
-      })
-      ImageKnifeComponent({
-        imageKnifeOption: this.imageKnifeOption
-      }).width(300).height(300).margin({top:30})
-    }
-    .height('100%') .width('100%')
-  }
-}
--- a/entry/src/main/ets/pages/TestRemoveCache.ets
+++ b/entry/src/main/ets/pages/TestRemoveCache.ets
@ -1,126 +0,0 @@
-/*
- * 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, ImageKnifeOption, CacheStrategy } from '@ohos/libraryimageknife'
-
-@Entry
-@ComponentV2
-struct TestRemoveCache {
-  @Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
-    loadSrc: $r('app.media.startIcon'),
-    placeholderSrc: $r('app.media.loading'),
-    errorholderSrc:$r('app.media.failed')
-  })
-  @Local source: PixelMap | string | Resource = $r("app.media.startIcon");
-  @Local source1: PixelMap | string | Resource = $r("app.media.startIcon");
-  @Local url: string = '';
-
-  build() {
-    Column() {
-      Flex() {
-        Button($r('app.string.Preloading_GIF')).onClick(() => {
-          this.imageKnifeOption.loadSrc = "https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658";
-          this.url = "https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658";
-        })
-          .margin({left:10})
-        Button($r('app.string.Retrieve_GIF_from_memory')).onClick(() => {
-          ImageKnife.getInstance()
-            .getCacheImage("https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
-              CacheStrategy.Memory)
-            .then((data) => {
-              this.source = data !== undefined ? data.source : $r("app.media.startIcon");
-            })
-        })
-          .margin({left:10})
-        Button($r('app.string.Retrieve_GIF_from_disk')).onClick(() => {
-          ImageKnife.getInstance()
-            .getCacheImage("https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
-              CacheStrategy.File)
-            .then((data) => {
-              this.source1 = data !== undefined ? data.source : $r("app.media.startIcon");
-            })
-        })
-          .margin({left:10})
-      }
-
-      Flex() {
-        Button($r('app.string.Preloading_static_images')).onClick(() => {
-          this.imageKnifeOption.loadSrc = 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp';
-          this.url = 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp';
-        })
-          .margin({left:10})
-        Button($r('app.string.Retrieve_images_from_memory')).onClick(() => {
-          ImageKnife.getInstance()
-            .getCacheImage('https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
-              CacheStrategy.Memory)
-            .then((data) => {
-              this.source = data!.source;
-            })
-        })
-          .margin({left:10})
-        Button($r('app.string.Retrieve_images_from_disk')).onClick(() => {
-          ImageKnife.getInstance()
-            .getCacheImage('https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
-              CacheStrategy.File)
-            .then((data) => {
-              this.source1 = data!.source;
-            })
-        })
-          .margin({left:10})
-      }.margin({ top: 10 })
-
-      Flex() {
-        Button($r('app.string.Delete_all_caches')).onClick(() => {
-          ImageKnife.getInstance()
-            .removeAllMemoryCache()
-          ImageKnife.getInstance()
-            .removeAllFileCache()
-        })
-          .margin({left:5})
-        Button($r('app.string.Delete_all_memory_caches')).onClick(() => {
-          ImageKnife.getInstance()
-            .removeAllMemoryCache()
-        })
-          .margin({left:5})
-        Button($r('app.string.Delete_all_file_caches')).onClick(() => {
-          ImageKnife.getInstance()
-            .removeAllFileCache()
-        })
-          .margin({left:5})
-      }.margin({ top: 10 })
-
-      Flex() {
-        Button($r('app.string.Delete_all_custom_memory_caches')).onClick(() => {
-          ImageKnife.getInstance()
-            .removeMemoryCache(this.url)
-        })
-          .margin({left:20})
-        Button($r('app.string.Delete_all_custom_file_caches')).onClick(() => {
-          ImageKnife.getInstance()
-            .removeFileCache(this.url)
-        })
-          .margin({left:20})
-      }.margin({ top: 10 })
-
-      ImageKnifeComponent({
-        imageKnifeOption: this.imageKnifeOption
-      }).width(200).height(200).margin({ top: 10 })
-      Image(this.source).margin({ top: 10 })
-        .width(200).height(200)
-      Image(this.source1).margin({ top: 10 })
-        .width(200).height(200)
-    }
-    .height('100%').width('100%')
-  }
-}
--- a/entry/src/main/ets/pages/TestSetCustomImagePage.ets
+++ b/entry/src/main/ets/pages/TestSetCustomImagePage.ets
@ -1,69 +0,0 @@
-/*
- * 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, ImageKnifeOption } from '@ohos/libraryimageknife'
-
-@Entry
-@ComponentV2
-struct TestSetCustomImagePage {
-
-  getResourceString(res:Resource){
-    return getContext().resourceManager.getStringSync(res.id)
-  }
-
-  @Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
-    loadSrc: $r('app.media.startIcon'),
-    placeholderSrc: $r('app.media.loading')
-  })
-  aboutToAppear(): void {
-    ImageKnife.getInstance().setCustomGetImage(custom)
-  }
-  aboutToDisappear(): void {
-    ImageKnife.getInstance().setCustomGetImage()
-  }
-  build() {
-    Column() {
-      Button(this.getResourceString($r('app.string.Custom_network_download')) + " a").onClick(()=>{
-        this.imageKnifeOption = new ImageKnifeOption({
-          loadSrc: "aaa",
-          placeholderSrc: $r('app.media.loading')
-        })
-      })
-      Button(this.getResourceString($r('app.string.Custom_network_download')) + " b").onClick(()=>{
-        this.imageKnifeOption = new ImageKnifeOption({
-          loadSrc: "bbb",
-          placeholderSrc: $r('app.media.loading')
-        })
-      })
-      Button(this.getResourceString($r('app.string.Custom_network_download')) + " c").onClick(()=>{
-        this.imageKnifeOption = new ImageKnifeOption({
-          loadSrc: "ccc",
-          placeholderSrc: $r('app.media.loading')
-        })
-      })
-      ImageKnifeComponent({
-        imageKnifeOption: this.imageKnifeOption
-      }).width(300)
-        .height(300)
-    }
-    .width("100%")
-    .height("100%")
-  }
-}
-@Concurrent
-async function custom(context: Context, src: string | PixelMap | Resource): Promise<ArrayBuffer | undefined> {
-  console.info("ImageKnife::  custom download：" + src)
-  // 举例写死从本地文件读取，也可以自己请求网络图片
-  return context.resourceManager.getMediaContentSync($r("app.media.pngSample").id).buffer as ArrayBuffer
-}
--- a/entry/src/main/ets/pages/TestTaskResourcePage.ets
+++ b/entry/src/main/ets/pages/TestTaskResourcePage.ets
@ -1,79 +0,0 @@
-/*
- * 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, ImageKnifeOption } from "@ohos/libraryimageknife"
-
-@ComponentV2
-export struct ZuImage {
-  @Param @Require src: PixelMap | ResourceStr | string | undefined
-  @Param @Require placeholderSrc: PixelMap | ResourceStr | string | undefined
-  @Local errorholderSrc: PixelMap | ResourceStr | string | undefined
-
-  build() {
-    if (this.src) {
-      //当前版本存在bug
-      ImageKnifeComponent({
-        imageKnifeOption: new ImageKnifeOption({
-          loadSrc: this.src,
-          placeholderSrc: this.placeholderSrc,
-          errorholderSrc: this.errorholderSrc ?? this.placeholderSrc,
-          objectFit: ImageFit.Cover
-        })
-      })
-    } else {
-      Image(this.placeholderSrc)
-        .objectFit(ImageFit.Cover)
-    }
-  }
-}
-
-
-@Entry
-@ComponentV2
-struct TestTaskResourcePage {
-  @Local stateMenus: Array<string> = [
-    "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
-    'https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/bf/v3/lSjrRwFcS-ez6jp1ALSQFg/0n7R7XinSPyrYLqDu_1dfw.jpg',
-    'https://img-blog.csdn.net/20140514114029140',
-    'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
-  ]
-  @Builder
-  _buildItem(item: string) {
-    Column({ space: 8 }) {
-      ZuImage({
-        src: item,
-        placeholderSrc: $r("app.media.loading")
-      }).width(44)
-        .height(44)
-    }
-  }
-  build() {
-
-    Grid() {
-      ForEach(this.stateMenus, (item: string) => {
-        GridItem() {
-          this._buildItem(item)
-        }
-      })
-    }.width("100%")
-    .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
-    .rowsGap(24)
-    .padding({
-      top: 24,
-      bottom: 24,
-      left: 24,
-      right: 24
-    })
-  }
-}
--- a/entry/src/main/ets/pages/TestWriteCacheStage.ets
+++ b/entry/src/main/ets/pages/TestWriteCacheStage.ets
@ -1,74 +0,0 @@
-/*
- * 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,CacheStrategy,ImageKnifeOption } from '@ohos/libraryimageknife'
-
-@Entry
-@ComponentV2
-struct TestWriteCacheStage {
-  @Local imageKnifeOption1: ImageKnifeOption = new ImageKnifeOption({
-    loadSrc:$r('app.media.startIcon'),
-    placeholderSrc:$r('app.media.loading'),
-    errorholderSrc:$r('app.media.failed')
-  })
-  @Local imageKnifeOption2: ImageKnifeOption = new ImageKnifeOption({
-    loadSrc:$r('app.media.startIcon'),
-    placeholderSrc:$r('app.media.loading'),
-    errorholderSrc:$r('app.media.failed')
-  })
-  @Local imageKnifeOption3: ImageKnifeOption = new ImageKnifeOption({
-    loadSrc:$r('app.media.startIcon'),
-    placeholderSrc:$r('app.media.loading'),
-    errorholderSrc:$r('app.media.failed')
-  })
-
-  build() {
-    Column() {
-      Button($r('app.string.Write_memory_and_file')).margin({top:10}).onClick(async ()=>{
-        this.imageKnifeOption1 = new ImageKnifeOption({
-          loadSrc:'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
-          placeholderSrc:$r('app.media.loading'),
-          errorholderSrc:$r('app.media.failed'),
-          writeCacheStrategy:CacheStrategy.Default
-        })
-      })
-      ImageKnifeComponent({
-        imageKnifeOption: this.imageKnifeOption1
-      }).width(200).height(200).margin({top:10})
-      Button($r('app.string.Write_memory')).margin({top:10}).onClick(async ()=>{
-        this.imageKnifeOption2 = new ImageKnifeOption({
-          loadSrc:"https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
-          placeholderSrc:$r('app.media.loading'),
-          errorholderSrc:$r('app.media.failed'),
-          writeCacheStrategy:CacheStrategy.Memory
-        })
-      })
-      ImageKnifeComponent({
-        imageKnifeOption: this.imageKnifeOption2
-      }).width(200).height(200).margin({top:10})
-      Button($r('app.string.Write_file')).margin({top:10}).onClick(async ()=>{
-        this.imageKnifeOption3 = new ImageKnifeOption({
-          loadSrc:'https://img-blog.csdn.net/20140514114029140',
-          placeholderSrc:$r('app.media.loading'),
-          errorholderSrc:$r('app.media.failed'),
-          writeCacheStrategy:CacheStrategy.File
-        })
-      })
-      ImageKnifeComponent({
-        imageKnifeOption: this.imageKnifeOption3
-      }).width(200).height(200).margin({top:10})
-    }
-    .height('100%') .width('100%')
-  }
-}
--- a/entry/src/main/ets/pages/TransformPage.ets
+++ b/entry/src/main/ets/pages/TransformPage.ets
@ -1,51 +0,0 @@
-/*
- * 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, ImageKnifeOption } from "@ohos/libraryimageknife"
-import matrix4 from '@ohos.matrix4'
-
-
-@Entry
-@ComponentV2
-struct TransformPage {
-  private custom_scale:number = 1
-  @Local matrix1:object = matrix4.identity().scale({ x: 1, y: 1 })
-  @Local ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
-    loadSrc: $r("app.media.rabbit"),
-    placeholderSrc: $r("app.media.loading"),
-    errorholderSrc: $r("app.media.app_icon"),
-    objectFit: ImageFit.Contain,
-    border: { radius: 50 }
-  })
-
-  build() {
-    Column() {
-      ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption }).height(200).width(200)
-        .transform(this.matrix1)
-      // Image($r('app.media.rabbit')).objectFit(ImageFit.Contain).height(200).width(200).transform(this.matrix1)
-      Button($r('app.string.Enlarge')).onClick(()=>{
-        this.custom_scale = this.custom_scale * 2
-        this.matrix1 = matrix4.identity().scale({ x: this.custom_scale, y: this.custom_scale })
-      })
-
-      Button($r('app.string.Reduce')).onClick(()=>{
-        this.custom_scale = this.custom_scale / 2
-        this.matrix1 = matrix4.identity().scale({ x: this.custom_scale, y: this.custom_scale })
-      })
-    }
-    .width('100%')
-
-    .height('100%')
-  }
-}
--- a/entry/src/main/ets/pages/User.ets
+++ b/entry/src/main/ets/pages/User.ets
@ -1,104 +0,0 @@
-/*
- * 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, ImageKnifeOption } from '@ohos/libraryimageknife'
-
-// const logger = new imUtils.logger.IMLogger('Avatar')
-@ObservedV2
-export class MyStorage {
-  static instance:MyStorage | undefined = undefined
-  static getInstance(){
-    if(MyStorage.instance == undefined) {
-      MyStorage.instance = new MyStorage()
-    }
-    return MyStorage.instance
-  }
-  @Trace WeLink_Mob_fontSize_multiple: number = 1
-}
-
-@ComponentV2
-export struct UserAvatar {
-  // @Prop userInfo: string = ""
-  imgSize: number = 100
-  radius: number = 12
-  borderSize: number = 0
-  imgSizes: number = 1
-  @Local ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption()
-  scalable: boolean = true;
-  @Local calcImgSize: number = 100
-  @Param userInfo: string = ""
-  @Monitor('userInfo')
-  userInfoUpdate() {
-    // if (uri === 'userInfo' && this.imageKnifeOption.account !== this.userInfo.contactId) return;
-    // // logger.info(`userInfoUpdate uri=${uri} oldAcc=${this.imageKnifeOption.loadSrc} nowAcc=${this.userInfo.externalHeadUrl}`)
-    // if (this.userInfo.externalHeadUrl === this.imageKnifeOption.loadSrc && this.userInfo.infoUpdateTime.getTime()
-    //   .toString() === this.imageKnifeOption?.signature?.getKey()) return;
-    this.ImageKnifeOption = new ImageKnifeOption({
-      //TODO:写死loadSRC，场景：变更组件大小，所有图片不显示
-      loadSrc: this.userInfo,
-      placeholderSrc: $r('app.media.loading'),
-      errorholderSrc: $r('app.media.failed'),
-      border: { radius:20,width:5,color:$r('app.color.start_window_background') },
-      objectFit:ImageFit.Contain
-      // signature: new ObjectKey(this.userInfo.infoUpdateTime.getTime().toString())
-    })
-  }
-  @Local storage: MyStorage = MyStorage.getInstance()
-  @Monitor('storage.WeLink_Mob_fontSize_multiple')
-  updateImgSize() {
-    this.setImageSize()
-  }
-  aboutToAppear(): void {
-    this.userInfoUpdate()
-    this.setImageSize()
-  }
-
-  setImageSize() {
-    if (!this.scalable) {
-      this.calcImgSize = this.imgSize
-    } else if (this.storage.WeLink_Mob_fontSize_multiple < 0.9) {
-      this.calcImgSize = this.imgSize * 0.9
-    } else if (this.storage.WeLink_Mob_fontSize_multiple > 1.6) {
-      this.calcImgSize = this.imgSize * 1.6
-    } else {
-      this.calcImgSize = this.imgSize * this.storage.WeLink_Mob_fontSize_multiple
-    }
-  }
-
-  aboutToReuse(param: ESObject) {
-    this.userInfoUpdate()
-  }
-
-  build() {
-    Row() {
-      // Image(this.imageKnifeOption.loadSrc)
-
-      ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption })
-        .borderRadius(this.radius)
-        .clip(true)
-        .width(this.calcImgSize)
-        .height(this.calcImgSize)
-        .backgroundColor(Color.Pink)
-
-
-
-     // Image(this.userInfo)
-     //  Text((this.imageKnifeOption.loadSrc as string).split('/')[8])
-     //    .position({ x: 0, y: 0 })
-     //    .zIndex(9)
-     //    .fontSize(12)
-     //    .fontColor('#ff0000')
-    }
-  }
-}
--- a/entry/src/main/ets/pages/UserPage.ets
+++ b/entry/src/main/ets/pages/UserPage.ets
@ -1,149 +0,0 @@
-/*
- * 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 { MyStorage, UserAvatar } from './User'
-
-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
-@ComponentV2
-struct Index {
-  @Local hotCommendList:CommonDataSource<string> = new CommonDataSource<string>([])
-  private data:string[] = [
-    "https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/56/v3/8MdhfSsCSMKj4sA6okUWrg/5uBx56tLTUO3RYQl-E5JiQ.jpg",
-    "https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/e2/v3/4zI1Xm_3STmV30aZXWRrKw/6aN7WodDRUiBApgffiLPCg.jpg",
-    "https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/42/v3/2dSQCqERTP2TTPyssOMEbQ/zL1ebnKKQ_ilqTDcwCAkOw.jpg",
-    "https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/78/v3/qQJpAtRGQe2e_VhbGHDgIw/b3zlit99S6GybD3XdNwqJw.jpg",
-    "https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/55/v3/5DZ2LLqYSsK85-shqgLveQ/7ZXcyCWNTvOzQP5FFLBGkg.jpg",
-    "https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/3e/v3/LqRoLI-PRSu9Nqa8KdJ-pQ/dSqskBpSR9eraAMn7NBdqA.jpg",
-    "https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/25/v3/jgB2ekkTRX-3yTYZalnANQ/xff_x9cbSPqb7fbNwgJa7A.jpg",
-    "https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/fb/v3/alXwXLHKSyCAIWt_ydgD2g/BCCuu25TREOitQxM7eYOEw.jpg",
-    "https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/63/v3/qbe6NZkCQyGcITvdWoZBgg/Y-5U1z3GT_yaK8CBD3jkwg.jpg",
-    "https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/16/v3/fm2tO4TsRH6mv_D_nSSd5w/FscLpLwQQ-KuV7oaprFK2Q.jpg",
-    "https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/89/v3/UAUvtPHqRD-GWWANsEC57Q/zcRJCQebQ322Aby4jzmwmQ.jpg",
-    "https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/30/v3/tUUzzx73R4yp8G--lMhuWQ/EBbcu_dLTT-Jj68XAh6mtA.jpg",
-    "https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/76/v3/EyF6z4FISpCHhae38eEexw/OtyAiu-zSSevNQYvUdtVmA.jpg",
-    "https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/37/v3/12rH1yiEQmK9wlOOcy5avQ/RzBXiEBRRqOC7LRkwNj6VA.jpg",
-    "https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/9a/v3/TpRN4AIzRoyUXIqWdKoE0g/ShOnD_tfS46HDbpSWhbCkQ.jpg",
-    "https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/03/v3/H3X17s8eTdS2w56JgbB5jQ/a45sT-j8Sbe8sSQXTzeYvQ.jpg",
-    "https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/10/v3/qaEzwkU0QeKb1yehnP2Xig/q7fxAlgMQKup-HUBayRLGQ.jpg",
-    "https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/96/v3/rMJJoAflTDSWa1z2pHs2wg/8dOqD0GlQBOCL5AvQok9FQ.jpg",
-    "https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/ed/v3/KMO4D6D2QGuVOCLX4AhOFA/ef51xAaLQuK7BsnuD9abog.jpg",
-    "https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/d9/v3/FSZH0aTdSqWxeAaxoPvi0g/RqxPxUCXQFiTMBfKTF9kkw.jpg",
-    "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
-    'https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/bf/v3/lSjrRwFcS-ez6jp1ALSQFg/0n7R7XinSPyrYLqDu_1dfw.jpg',
-    'https://img-blog.csdn.net/20140514114029140',
-    'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
-  ]
-  aboutToAppear(): void {
-    MyStorage.getInstance().WeLink_Mob_fontSize_multiple = 1
-  }
-
-  build() {
-    Column() {
-      Button("bigger").onClick(()=>{
-        MyStorage.getInstance().WeLink_Mob_fontSize_multiple = 1.6
-      })
-      Button("small").onClick(()=>{
-        MyStorage.getInstance().WeLink_Mob_fontSize_multiple = 0.8
-      })
-      List(){
-        // LazyForEach(this.hotCommendList,(item:string)=>{
-        //   ListItem(){
-        //     ReuseImage({
-        //       userInfo:item
-        //     }).width("100%").height("100%").backgroundColor(Color.Yellow)
-        //   }.width(200).height(200).margin({bottom:5})
-        // })
-        Repeat(this.data)
-          .each((repeatItem)=>{
-            ListItem(){
-              ReuseImage({
-                userInfo:repeatItem.item
-              }).width("100%").height("100%").backgroundColor(Color.Yellow)
-            }.width(200).height(200).margin({bottom:5}).key("reuse")
-          })
-          .key(item => item+"reuse")
-          .virtualScroll()
-          .template("1",(repeatItem)=>{
-            ListItem(){
-              ReuseImage({
-                userInfo:repeatItem.item
-              }).width("100%").height("100%").backgroundColor(Color.Yellow)
-            }.width(200).height(200).margin({bottom:5}).key("reuse")
-          })
-      }
-      // .cachedCount(20)
-      .width("100%")
-      .height("100%")
-      .backgroundColor(0xFAEEE0)
-    }.width('100%').height("100%")
-  }
-}
-
-
-// @Reusable
-@ComponentV2
-struct ReuseImage {
-  @Param userInfo:string = ""
-  // aboutToReuse(params: ESObject): void {
-  //   this.userInfo = params.userInfo
-  // }
-
-  build() {
-    Column(){
-      UserAvatar({
-        userInfo:this.userInfo
-      })
-    }.width("100%").height("100%")
-  }
-}
--- a/entry/src/main/ets/pages/basicTestFeatureAbilityPage.ets
+++ b/entry/src/main/ets/pages/basicTestFeatureAbilityPage.ets
@ -0,0 +1,82 @@
+/*
+ * Copyright (C) 2021 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 {ImageKnifeOption,ImageKnifeComponent} from '@ohos/libraryimageknife'
+
+@Entry
+@Component
+struct BasicTestFeatureAbilityPage {
+  @Watch("watchPathChange") @State filePath: string = "查看featureAbility路径";
+
+  watchPathChange() {
+    console.log("watchPathChange")
+  }
+  urls:string[]=[
+   "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
+   "http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg",
+   "http://h.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5f2c2a9e953da81cb39db3d1d.jpg",
+   "http://g.hiphotos.baidu.com/image/pic/item/55e736d12f2eb938d5277fd5d0628535e5dd6f4a.jpg",
+   "http://e.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f7e41f5cfe760e0cf3d6cad6ee.jpg",
+   "http://b.hiphotos.baidu.com/image/pic/item/9d82d158ccbf6c81b94575cfb93eb13533fa40a2.jpg",
+   "http://e.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31c1badd5a685d6277f9e2ff81e.jpg",
+   "http://g.hiphotos.baidu.com/image/pic/item/0d338744ebf81a4c87a3add4d52a6059252da61e.jpg",
+   "http://a.hiphotos.baidu.com/image/pic/item/f2deb48f8c5494ee5080c8142ff5e0fe99257e19.jpg",
+   "http://f.hiphotos.baidu.com/image/pic/item/4034970a304e251f503521f5a586c9177e3e53f9.jpg",
+   "http://b.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fbb3586c0168224f4a20a4dd7e.jpg",
+   "http://img2.xkhouse.com/bbs/hfhouse/data/attachment/forum/corebbs/2009-11/2009113011534566298.jpg",
+   "http://a.hiphotos.baidu.com/image/pic/item/e824b899a9014c087eb617650e7b02087af4f464.jpg",
+   "http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg",
+   "http://d.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f119945cbe2fe9925bc317d2a.jpg",
+   "http://h.hiphotos.baidu.com/image/pic/item/902397dda144ad340668b847d4a20cf430ad851e.jpg",
+   "http://b.hiphotos.baidu.com/image/pic/item/359b033b5bb5c9ea5c0e3c23d139b6003bf3b374.jpg",
+   "http://a.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a292d2472199d25bc315d607c7c.jpg",
+   "http://b.hiphotos.baidu.com/image/pic/item/e824b899a9014c08878b2c4c0e7b02087af4f4a3.jpg",
+   "http://g.hiphotos.baidu.com/image/pic/item/6d81800a19d8bc3e770bd00d868ba61ea9d345f2.jpg",
+  ]
+
+  @State options:Array<ImageKnifeOption> = new Array
+
+  aboutToAppear(){
+    this.options =  this.urls.map<ImageKnifeOption>((url:string)=>{
+      return {
+        loadSrc:url
+      }
+    })
+    console.log('this.options length ='+this.options.length)
+  }
+
+  build() {
+    Stack({ alignContent: Alignment.TopStart }) {
+      Column() {
+        List({ space: 20, initialIndex: 0 }) {
+          ForEach(this.options, (item:ImageKnifeOption) => {
+            ListItem() {
+              ImageKnifeComponent({imageKnifeOption:item}).width(300).height(300)
+            }
+          }, (item:ImageKnifeOption )=> item.loadSrc as string)
+        }
+        .listDirection(Axis.Vertical) // 排列方向
+        .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
+        .edgeEffect(EdgeEffect.None) // 滑动到边缘无效果
+        .chainAnimation(false) // 联动特效关闭
+        .onScrollIndex((firstIndex: number, lastIndex: number) => {
+          console.info('first' + firstIndex)
+          console.info('last' + lastIndex)
+        })
+
+      }.width('100%')
+
+    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
+  }
+}
--- a/entry/src/main/ets/pages/basicTestFileIOPage.ets
+++ b/entry/src/main/ets/pages/basicTestFileIOPage.ets
@ -0,0 +1,157 @@
+/*
+ * Copyright (C) 2021 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 { FileUtils,  ImageKnifeGlobal} from '@ohos/libraryimageknife'
+import resourceManager from '@ohos.resourceManager';
+import { BusinessError } from '@ohos.base'
+import common from '@ohos.app.ability.common';
+@Entry
+@Component
+struct basicTestFileIOPage {
+  @State filePath: string = '查看featureAbility路径';
+  appFilePath = '';
+  appCachePath = '';
+  @State imageHint: string = '文字提醒1'
+  @State imageHint2: string = '文字提醒2'
+  @State imageFile: string = ''
+
+  @State imageRes: Resource = $r('app.media.pngSample')
+  @State imagePixelMap?: PixelMap = undefined
+  @State normalPixelMap: boolean = false;
+  @State normalResource: boolean = false;
+
+  watchPathChange() {
+    console.log('watchPathChange');
+  }
+
+  build() {
+    Scroll() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Text(this.filePath).fontSize(20)
+        Button('featureAbility.getContext().getFilesDir()')
+          .margin({ top: 10 })
+          .onClick(() => {
+
+            let data:string = (ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).filesDir as string;
+            console.log('ImageKnife filesPath = ' + data)
+            this.filePath = data
+            this.appFilePath = data;
+
+          })
+        Button('featureAbility.getContext().getCacheDir()')
+          .margin({ top: 10 })
+          .onClick(() => {
+
+            let data:string = (ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).cacheDir as string;
+            console.log('ImageKnife cachesPath = ' + data)
+            this.filePath = data
+            this.appFilePath = data;
+
+          })
+        Text(this.imageHint)
+        Button('files目录创建Folder1和Folder2 验证statSync mkdirSync')
+          .margin({ top: 10 })
+          .onClick(() => {
+            if(this.appFilePath == '' || this.appFilePath == null){
+              this.imageHint = 'appFilePath未取到值,请按顺序从上往下,从左往右依次测试'
+              return
+            }
+            console.log('files目录创建Folder1和Folder2 验证statSync mkdirSync')
+            try {
+              FileUtils.getInstance()
+                .createFolder(this.appFilePath + '/Folder1');
+              FileUtils.getInstance()
+                .createFolder(this.appFilePath + '/Folder2');
+            }catch (e) {
+              console.log('appFilePath未取到值,请按顺序从上往下,从左往右依次测试:'+JSON.stringify(e))
+            }
+
+          })
+        Button('将media资源存入Folder1 验证writeSync mkdirSync createStreamSync')
+          .margin({ top: 10 })
+          .onClick(() => {
+            console.log('将media资源存入Folder1 验证writeSync mkdirSync createStreamSync')
+            if(this.appFilePath == '' || this.appFilePath == null){
+              this.appFilePath = 'appFilePath未取到值,请按顺序从上往下,从左往右依次测试'
+              return
+            }
+            ((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).resourceManager as resourceManager.ResourceManager)
+              .getMediaContent($r('app.media.gifSample').id)
+              .then(data => {
+                console.log('result.getMedia')
+                console.log('basicTestFileIOPage - 本地加载资源 解析后数据data length= ' + data.byteLength)
+                let arrayBuffer = this.typedArrayToBuffer(data);
+                FileUtils.getInstance().writeFile(this.appFilePath + '/Folder1/jpgSample.gif', arrayBuffer)
+                this.imageFile = 'file://' + this.appFilePath + '/Folder1/jpgSample.gif'
+                console.log('Folder1 imaeFile =' + this.imageFile)
+              })
+              .catch((err:BusinessError) => {
+                console.log('basicTestFileIOPage - 本地加载资源err' + JSON.stringify(err as BusinessError));
+              })
+          })
+        Text(this.imageHint2)
+        Button('copy:Folder1至Folder2， 验证copyFileSync')
+          .margin({ top: 10 })
+          .onClick(() => {
+            console.log('copy:Folder1至Folder2， 验证copyFileSync')
+            if(this.appFilePath == '' || this.appFilePath == null){
+              this.imageHint2 = 'appFilePath未取到值,请按顺序从上往下,从左往右依次测试'
+              return
+            }
+            let filePath1 = this.appFilePath + '/Folder1/jpgSample.gif';
+            let filePath2 = this.appFilePath + '/Folder2/jpgSample.gif';
+            FileUtils.getInstance().createFolder(this.appFilePath + '/Folder1')
+            FileUtils.getInstance().createFolder(this.appFilePath + '/Folder2')
+            FileUtils.getInstance().copyFile(filePath1, filePath2);
+            this.imageFile = 'file://' + this.appFilePath + '/Folder2/jpgSample.gif'
+            console.log('Folder2 imaeFile =' + this.imageFile)
+          })
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          Button('显示空PixelMap')
+            .margin({ left: 10 })
+            .onClick(() => {
+              this.normalPixelMap = true;
+              this.normalResource = false;
+            })
+          Button('显示RES')
+            .margin({ left: 10 })
+            .onClick(() => {
+              this.normalPixelMap = false;
+              this.normalResource = true;
+            })
+          Button('显示String')
+            .margin({ left: 10 })
+            .onClick(() => {
+              this.normalPixelMap = false;
+              this.normalResource = false;
+            })
+        }
+
+
+        Image(this.normalPixelMap ? this.imagePixelMap : (this.normalResource ? this.imageRes : this.imageFile))
+          .width(200)
+          .height(200)
+          .backgroundColor(Color.Pink)
+      }
+      .width('100%')
+      .height('100%')
+    }
+
+  }
+
+  typedArrayToBuffer(array: Uint8Array): ArrayBuffer {
+    return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset)
+  }
+}
--- a/entry/src/main/ets/pages/basicTestMediaImage.ets
+++ b/entry/src/main/ets/pages/basicTestMediaImage.ets
@ -0,0 +1,129 @@
+/*
+ * Copyright (C) 2021 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 featureAbility from '@ohos.ability.featureAbility';
+import { FileUtils } from '@ohos/libraryimageknife'
+import { FileTypeUtil } from '@ohos/libraryimageknife'
+import resourceManager from '@ohos.resourceManager';
+import { Base64 } from '@ohos/libraryimageknife'
+import { ParseImageUtil } from '@ohos/libraryimageknife'
+import { ImageKnifeGlobal } from '@ohos/libraryimageknife'
+import { BusinessError } from '@ohos.base'
+import common from '@ohos.app.ability.common';
+@Entry
+@Component
+struct BasicTestMediaImage {
+  @State imagePixelMap?: PixelMap =  undefined;
+
+  build() {
+    Scroll() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Flex({ direction: FlexDirection.Row }) {
+          Button('本地资源jpg')
+            .onClick(() => {
+              ((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).resourceManager as resourceManager.ResourceManager)
+              .getMediaContent($r('app.media.jpgSample').id)
+                .then(data => {
+                  let arrayBuffer = this.typedArrayToBuffer(data);
+                  let parseImageUtil = new ParseImageUtil();
+                  parseImageUtil.parseImage(arrayBuffer, (pxielmap) => {
+                    this.imagePixelMap = pxielmap;
+                  }, (err:BusinessError|string|undefined) => {
+                  })
+                })
+                .catch((err:BusinessError) => {
+                  console.log('basicTestMediaImage - 本地加载资源err' + JSON.stringify(err));
+                })
+            }).margin({ left: 15 }).backgroundColor(Color.Blue)
+          Button('本地资源png')
+            .onClick(() => {
+              ((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).resourceManager as resourceManager.ResourceManager)
+              .getMediaContent($r('app.media.pngSample').id)
+                .then(data => {
+                  let arrayBuffer = this.typedArrayToBuffer(data);
+                  let parseImageUtil = new ParseImageUtil();
+                  parseImageUtil.parseImage(arrayBuffer, (pxielmap) => {
+                    this.imagePixelMap = pxielmap;
+                  },(err:BusinessError|string|undefined) => {
+                  })
+                })
+                .catch((err:BusinessError) => {
+                  console.log('basicTestMediaImage - 本地加载资源err' + JSON.stringify(err));
+                })
+            }).margin({ left: 15 }).backgroundColor(Color.Blue)
+          Button('本地资源bmp')
+            .onClick(() => {
+              ((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).resourceManager as resourceManager.ResourceManager)
+              .getMediaContent($r('app.media.bmpSample').id)
+                .then(data => {
+                  let arrayBuffer = this.typedArrayToBuffer(data);
+                  let parseImageUtil = new ParseImageUtil();
+                  parseImageUtil.parseImage(arrayBuffer, (pxielmap) => {
+                    this.imagePixelMap = pxielmap;
+                  }, (err:BusinessError|string|undefined) => {
+                  })
+                })
+                .catch((err:BusinessError) => {
+                  console.log('basicTestMediaImage - 本地加载资源err' + JSON.stringify(err));
+                })
+            }).margin({ left: 15 }).backgroundColor(Color.Blue)
+          Button('本地资源webp')
+            .onClick(() => {
+              ((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).resourceManager as resourceManager.ResourceManager)
+              .getMediaContent($r('app.media.jpgSample').id)
+                .then(data => {
+                  let arrayBuffer = this.typedArrayToBuffer(data);
+                  let parseImageUtil = new ParseImageUtil();
+                  parseImageUtil.parseImage(arrayBuffer, (pxielmap) => {
+                    this.imagePixelMap = pxielmap;
+                  }, (err:BusinessError|string|undefined) => {
+                  })
+                })
+                .catch((err:BusinessError)  => {
+                  console.log('basicTestMediaImage - 本地加载资源err' + JSON.stringify(err));
+                })
+            }).margin({ left: 15 }).backgroundColor(Color.Blue)
+          Button('本地资源gif')
+            .onClick(() => {
+              ((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).resourceManager as resourceManager.ResourceManager)
+              .getMediaContent($r('app.media.gifSample').id)
+                .then(data => {
+                  let arrayBuffer = this.typedArrayToBuffer(data);
+                  let parseImageUtil = new ParseImageUtil();
+                  parseImageUtil.parseImage(arrayBuffer, (pxielmap) => {
+                    this.imagePixelMap = pxielmap;
+                  }, (err:BusinessError|string|undefined)  => {
+                  })
+                })
+                .catch((err:BusinessError)  => {
+                  console.log('basicTestMediaImage - 本地加载资源err' + JSON.stringify(err));
+                })
+            }).margin({ left: 15 }).backgroundColor(Color.Blue)
+        }
+        .margin({ top: 15 })
+
+        Image(this.imagePixelMap)
+          .width(300)
+          .height(300)
+          .backgroundColor(Color.Pink)
+      }
+    }
+    .width('100%')
+    .height('100%')
+  }
+
+  typedArrayToBuffer(array: Uint8Array): ArrayBuffer {
+    return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset)
+  }
+}
--- a/entry/src/main/ets/pages/basicTestResourceManagerPage.ets
+++ b/entry/src/main/ets/pages/basicTestResourceManagerPage.ets
@ -0,0 +1,86 @@
+/*
+ * Copyright (C) 2021 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 featureAbility from '@ohos.ability.featureAbility';
+import {FileUtils} from '@ohos/libraryimageknife'
+import {FileTypeUtil} from '@ohos/libraryimageknife'
+import resourceManager from '@ohos.resourceManager';
+import {Base64} from '@ohos/libraryimageknife'
+import {ImageKnifeGlobal} from '@ohos/libraryimageknife'
+import { BusinessError } from '@ohos.base'
+import common from '@ohos.app.ability.common';
+@Entry
+@Component
+struct BasicTestResourceManagerPage {
+  @State fileTypeStr: string = '解析后图片类型';
+
+  build() {
+    Scroll() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Text(this.fileTypeStr).fontSize(20)
+        .width(300).height(200).backgroundColor(Color.Pink)
+        Button('getMedia解析一张jpg图片')
+          .margin({ top: 10 })
+          .onClick(() => {
+            ((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).resourceManager as resourceManager.ResourceManager)
+              .getMediaContent($r('app.media.jpgSample')
+       .id)
+              .then(data => {
+              console.log('basicTestFileIOPage - 本地加载资源 解析后数据data = ' + data)
+              let arrayBuffer = this.typedArrayToBuffer(data);
+              let filetypeUtil = new FileTypeUtil();
+              let fileType = filetypeUtil.getFileType(arrayBuffer);
+                if(fileType != null) {
+                  this.fileTypeStr = fileType;
+                }
+            })
+              .catch((err:BusinessError) => {
+              console.log('basicTestFileIOPage - 本地加载资源err' + JSON.stringify(err));
+            })
+        })
+        Button('getMediaBase64解析一张png图片')
+          .margin({ top: 10 })
+          .onClick(() => {
+            ((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).resourceManager as resourceManager.ResourceManager)
+              .getMediaContentBase64($r('app.media.pngSample')
+            .id)
+              .then(data => {
+                console.log('ParseResClientBase64 - 本地加载资源 解析后数据data')
+              let matchReg = ';base64,';
+              let firstIndex = data.indexOf(matchReg);
+              data = data.substring(firstIndex + matchReg.length, data.length)
+              console.log('ParseResClientBase64 - 本地加载资源 解析后数据剔除非必要数据后data= ' + data)
+              let arrayBuffer = Base64.getInstance()
+                .decode(data);
+              let filetypeUtil = new FileTypeUtil();
+              let fileType = filetypeUtil.getFileType(arrayBuffer);
+                 if(fileType != null) {
+                   this.fileTypeStr = fileType;
+                 }
+            })
+              .catch((err:BusinessError) => {
+              console.log('basicTestFileIOPage - 本地加载资源err' + JSON.stringify(err));
+            })
+        })
+
+      }
+    }
+    .width('100%')
+    .height('100%')
+  }
+
+  typedArrayToBuffer(array: Uint8Array): ArrayBuffer {
+    return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset)
+  }
+}
--- a/entry/src/main/ets/pages/compressPage.ets
+++ b/entry/src/main/ets/pages/compressPage.ets
@ -0,0 +1,152 @@
+/*
+ * Copyright (C) 2021 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} from '@ohos/libraryimageknife'
+import {OnRenameListener} from '@ohos/libraryimageknife'
+import {OnCompressListener} from '@ohos/libraryimageknife'
+import {ImageKnifeGlobal} from '@ohos/libraryimageknife'
+
+@Entry
+@Component
+struct CompressPage {
+  @State mRPixelMap?: PixelMap = undefined;
+  @State mFPixelMap?: PixelMap = undefined;
+  @State mResultText: string= "压缩回调结果"
+  @State mResultPath: string= "压缩路径:"
+  @State mAsyncPath: string= ""
+  @State mAsyncPathHint: string= ""
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
+
+      Column() {
+        Column() {
+          Text("Resource image compress").fontColor(Color.Gray).fontSize(16);
+          Button() {
+            Text("同步压缩").fontSize(13).fontColor(Color.White)
+          }
+          .height(35)
+          .width(120)
+          .margin({ top: 10 })
+          .onClick(() => {
+            this.compressAsyncRecource();
+          });
+          Scroll(){
+            Text(this.mAsyncPathHint).fontSize(13)
+          }
+          .height(55)
+          .width(350)
+
+
+          Image(this.mAsyncPath)
+            .width(200)
+            .height(200)
+            .margin({ top: 10 })
+            .backgroundColor(Color.Pink)
+
+          Button() {
+            Text($r("app.string.resource_image_compress")).fontSize(13).fontColor(Color.White)
+          }
+          .height(35)
+          .width(120)
+          .margin({ top: 10 })
+          .onClick(() => {
+            this.cropressRecource();
+          });
+          Image(this.mRPixelMap == undefined?'': this.mRPixelMap!)
+            .width(200)
+            .height(200)
+            .margin({ top: 10 })
+          Text(this.mResultText).fontColor(Color.Gray).fontSize(16);
+          Text(this.mResultPath).fontColor(Color.Gray).fontSize(16);
+        }.margin({ top: 10 });
+
+        Column() {
+          Text("file image compress").fontColor(Color.Gray).fontSize(16);
+          Button() {
+            Text($r("app.string.file_image_compress")).fontSize(13).fontColor(Color.White)
+          }
+          .height(35)
+          .width(120)
+          .margin({ top: 10 })
+          .onClick(() => {
+          });
+          Image(this.mFPixelMap == undefined ?'':this.mFPixelMap!)
+            .width(200)
+            .height(200)
+            .margin({ top: 10 });
+        }.margin({ top: 10 }).visibility(Visibility.Hidden);
+      }.margin({ bottom: 30 });
+    }.width('100%').height('100%');
+  }
+  private compressAsyncRecource() {
+    let data = new Array<Resource>();
+    data.push($r('app.media.jpgSample'))
+
+    let imageKnife:ImageKnife|undefined = ImageKnifeGlobal.getInstance().getImageKnife()
+    if(imageKnife!=undefined) {
+      imageKnife
+        .compressBuilder()
+        .load(data)
+        .ignoreBy(100)
+        .get()
+        .then((path: string) => {
+          this.mAsyncPathHint = path;
+          this.mAsyncPath = 'file://' + path;
+        });
+    }
+    console.info("asasd start compress end")
+  }
+  private cropressRecource() {
+    let data = new Array<Resource>();
+    data.push($r('app.media.jpgSample'))
+    let rename: OnRenameListener = {
+      reName() {
+        return "test_1.jpg";
+      }
+    }
+
+    let listener: OnCompressListener = {
+      start:()=>{
+        this.mResultText = "start"
+        console.info("asasd start")
+      },
+      onSuccess:(p: PixelMap | null | undefined, path: string)=> {
+        if(p!=null && p!=undefined) {
+          let pack = p;
+          this.mRPixelMap = pack as PixelMap;
+          console.info("asasd success path:" + this.mRPixelMap)
+          this.mResultText = "success";
+          this.mResultPath = path;
+        }
+      },
+      onError:(s: string)=>{
+        console.info("asasd onError:" + s)
+        this.mResultText = "fail";
+      }
+    }
+    console.info("asasd start compress")
+    let imageKnife:ImageKnife|undefined =    ImageKnifeGlobal.getInstance().getImageKnife()
+    if(imageKnife != undefined) {
+      imageKnife
+        .compressBuilder()
+        .load(data)
+        .ignoreBy(100)
+        .setRenameListener(rename)
+        .setCompressListener(listener)
+        .launch();
+    }
+    console.info("asasd start compress end")
+  }
+}
--- a/entry/src/main/ets/pages/cropImagePage2.ets
+++ b/entry/src/main/ets/pages/cropImagePage2.ets
@ -0,0 +1,107 @@
+/*
+ * Copyright (C) 2021 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 { CropImage } from '@ohos/libraryimageknife'
+import { CropOptions } from '@ohos/libraryimageknife'
+import { Crop } from '@ohos/libraryimageknife'
+import { RecourseProvider } from '@ohos/libraryimageknife'
+import { PixelMapCrop,Options } from '@ohos/libraryimageknife'
+import { CropCallback } from '@ohos/libraryimageknife'
+import { FileUtils } from '@ohos/libraryimageknife'
+import { ImageKnifeGlobal } from '@ohos/libraryimageknife'
+import { BusinessError } from '@ohos.base'
+import resourceManager from '@ohos.resourceManager';
+import common from '@ohos.app.ability.common'
+
+@Entry
+@Component
+export struct CropImagePage2 {
+  @State options1: Options = new Options();
+  @State cropTap: boolean = false;
+
+  @State width1: number = 0;
+  @State height1: number = 0;
+  @State _rotate: number = 0;
+  @State _scale: number = 1;
+  private _resource: Resource = $r('app.media.bmpSample');
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private canvasContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  build() {
+    Scroll() {
+      Column() {
+        Button('点击解析图片')
+          .onClick(() => {
+            ((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).resourceManager as resourceManager.ResourceManager)
+              .getMediaContent($r('app.media.bmpSample').id)
+              .then((data:Uint8Array) => {
+                let arrayBuffer = FileUtils.getInstance().uint8ArrayToBuffer(data);
+                let optionx = new Options();
+                optionx.setWidth(800)
+                  .setHeight(800)
+                  .setCropFunction((err:BusinessError|string, pixelmap:PixelMap|null, sx:number, sy:number) => {
+                    console.log('PMC setCropFunction callback')
+                    if (err) {
+                      console.error('PMC crop err =' + err)
+                    } else {
+                      this.width1 = sx * px2vp(1);
+                      this.height1 = sy * px2vp(1);
+                      if(pixelmap != null) {
+                        this.canvasContext.drawImage(pixelmap, 0, 0, this.width1, this.height1)
+                      }
+                    }
+                  })
+                optionx.loadBuffer(arrayBuffer, () => {
+                  this.options1 = optionx;
+                })
+              })
+
+
+          })
+
+        PixelMapCrop({ options: $options1, cropTap: this.cropTap })
+
+        Button('点击裁剪图片')
+          .onClick(() => {
+            this.cropTap = !this.cropTap;
+          })
+
+
+        Canvas(this.canvasContext)
+          .width(this.width1)
+          .height(this.height1)
+          .rotate({
+            z: 1,
+            centerX: this.width1 / 2,
+            centerY: this.height1 / 2,
+            angle: this._rotate
+          })
+          .scale({ x: this._scale, y: this._scale, z: 1.0 })
+          .gesture(GestureGroup(GestureMode.Parallel,
+          RotationGesture({ fingers: 2 }).onActionUpdate((event?: GestureEvent) => {
+            if(event != undefined) {
+              this._rotate = event.angle;
+            }
+          }), PinchGesture({ fingers: 2 }).onActionUpdate((event?: GestureEvent) => {
+            if(event != undefined) {
+              this._scale = event.scale;
+            }
+          })))
+      }
+      .backgroundColor(Color.Brown)
+      .width('100%')
+    }
+
+  }
+}
--- a/entry/src/main/ets/pages/dataShareUriLoadPage.ets
+++ b/entry/src/main/ets/pages/dataShareUriLoadPage.ets
@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2024 Huawei Device Co., Ltd.
+ * 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
@ -12,41 +12,78 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/libraryimageknife'
-import { dataSharePredicates } from '@kit.ArkData';
-import { photoAccessHelper } from '@kit.MediaLibraryKit';
+import mediaLibrary from '@ohos.multimedia.mediaLibrary';
+import { ImageKnifeComponent, ImageKnifeOption, } from '@ohos/libraryimageknife'


@Entry
-@ComponentV2
+@Component
 struct DataShareUriLoadPage {
-  @Local imageKnifeOption1: ImageKnifeOption =
-    new ImageKnifeOption({
+  @State imageKnifeOption1: ImageKnifeOption =
+    {
      loadSrc: $r('app.media.icon'),

-      placeholderSrc: $r('app.media.loading'),
-      errorholderSrc: $r('app.media.failed')
-    });
+      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($r('app.string.Retrieve_media_gallery')).fontSize(15)
+        Text("获取媒体图库的uri用ImageKnife展示").fontSize(15)
        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-          Button($r('app.string.Click_load_Uri'))
-            .onClick(async () => {
-              let photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
-              photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
-              photoSelectOptions.maxSelectNumber = 1;
-              let uris: Array<string> = [];
-              let photoViewPicker = new photoAccessHelper.PhotoViewPicker();
-              let photoSelectResult: photoAccessHelper.PhotoSelectResult = await photoViewPicker.select(photoSelectOptions);
-              uris = photoSelectResult.photoUris;
-              this.imageKnifeOption1 = new ImageKnifeOption({
-                loadSrc: uris[0],
-                placeholderSrc:$r('app.media.loading')
-              })
+          Button("点击加载Uri并展示")
+            .onClick(() => {
+              // 获取mediaLibrary实例，后续用到此实例均采用此处获取的实例
+              const context = getContext(this);
+              let media = mediaLibrary.getMediaLibrary(context);
+
+              let imageType = mediaLibrary.MediaType.IMAGE;
+              // 创建文件获取选项，此处参数为获取image类型的文件资源
+              let imagesFetchOp:mediaLibrary.MediaFetchOptions = {
+                selections: mediaLibrary.FileKey.MEDIA_TYPE + '= ?',
+                selectionArgs: [imageType.toString()],
+              };
+              // 获取文件资源，使用callback方式返回异步结果
+              media.getFileAssets(imagesFetchOp, (error, fetchFileResult) => {
+                // 判断获取的文件资源的检索结果集是否为undefined，若为undefined则接口调用失败
+                if (fetchFileResult == undefined) {
+                  console.log('get fetchFileResult failed with error: ' + error);
+                  return;
+                }
+                // 获取文件检索结果集中的总数
+                const count = fetchFileResult.getCount();
+                // 判断结果集中的数量是否小于0，小于0时表示接口调用失败
+                if (count < 0) {
+                  console.log('get count from fetchFileResult failed, count: ' + count);
+                  return;
+                }
+                // 判断结果集中的数量是否等于0，等于0时表示接口调用成功，但是检索结果集为空，请检查文件获取选项参数配置是否有误和设备中是否存在相应文件
+                if (count == 0) {
+                  console.log('The count of fetchFileResult is zero');
+                  return;
+                }
+                console.log('Get fetchFileResult successfully, count: ' + count);
+                // 获取文件检索结果集中的第一个资源，使用callback方式返回异步结果
+                fetchFileResult.getFirstObject((error, fileAsset) => {
+                  // 检查获取的第一个资源是否为undefined，若为undefined则接口调用失败
+                  if (fileAsset == undefined) {
+                    console.log('get first object failed with error: ' + error);
+                    return;
+                  }
+                  console.log("fileAsset id=" + fileAsset.id + " fileAsset uri=" + fileAsset.uri + " fileAsset displayName=" + fileAsset.displayName)
+
+                  // 加载图库第一张图片的uri
+                  this.imageKnifeOption1 = {
+                    loadSrc: fileAsset.uri,
+                    placeholderSrc: $r('app.media.icon_loading'),
+                    errorholderSrc: $r('app.media.icon_failed')
+                  }
+                  // 释放FetchFileResult实例并使其失效。无法调用其他方法
+                  fetchFileResult.close();
+                });
+              });
            }).margin({ top: 5, left: 3 })
          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
        }.width('100%').backgroundColor(Color.Pink)
--- a/entry/src/main/ets/pages/drawFactoryTestPage.ets
+++ b/entry/src/main/ets/pages/drawFactoryTestPage.ets
@ -0,0 +1,98 @@
+/*
+ * Copyright (C) 2022 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 router from '@system.router';
+import {
+  ImageKnifeComponent,
+  ImageKnifeOption,
+  ImageKnifeDrawFactory,
+  ScaleType
+} from '@ohos/libraryimageknife'
+
+@Entry
+@Component
+struct DrawFactoryTestPage {
+
+  types:Array<ScaleType> = [ScaleType.FIT_START,ScaleType.FIT_END,ScaleType.FIT_CENTER,ScaleType.CENTER,ScaleType.CENTER_CROP,ScaleType.FIT_XY,ScaleType.CENTER_INSIDE,ScaleType.NONE]
+
+
+  @State msg:string = `当前ScaleType${this.types[0]}`
+
+  @State imageKnifeOption1: ImageKnifeOption =
+    {
+      loadSrc:"https://xximg1.meitudata.com/2LqS1vmqv0.png!thumb-w321-webp75",
+      mainScaleType: this.types[0],
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+      drawLifeCycle:ImageKnifeDrawFactory.createOvalLifeCycle(15,'#ff000000')
+    }
+  @State imageKnifeOption2: ImageKnifeOption =
+    {
+      loadSrc:"https://xximg1.meitudata.com/2LqS1vmqv0.png!thumb-w321-webp75",
+      mainScaleType: this.types[0],
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+      drawLifeCycle:ImageKnifeDrawFactory.createRoundLifeCycle(10,'#ff000000',30)
+    }
+
+   count:number = 0;
+
+
+  build() {
+    Scroll() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+
+
+        Text("用例看护DrawFactory").fontSize(15)
+        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          Button(this.msg)
+            .onClick(() => {
+              this.count++;
+              let index=  this.count %  this.types.length;
+              this.msg = `当前ScaleType${this.types[index]}`
+
+              this.imageKnifeOption1 = {
+                loadSrc:"https://xximg1.meitudata.com/2LqS1vmqv0.png!thumb-w321-webp75",
+                mainScaleType: this.types[index],
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                drawLifeCycle:ImageKnifeDrawFactory.createOvalLifeCycle(15,'#ff000000')
+              }
+
+              this.imageKnifeOption2 = {
+                loadSrc:"https://xximg1.meitudata.com/2LqS1vmqv0.png!thumb-w321-webp75",
+                mainScaleType: this.types[index],
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                drawLifeCycle:ImageKnifeDrawFactory.createRoundLifeCycle(10,'#ff000000',30)
+              }
+            }).margin({ top: 15, bottom:15 })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width('100%').height(300).backgroundColor(Color.Orange)
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }).width('100%').height(300).backgroundColor(Color.Orange)
+            .margin({ top: 15, bottom:15 })
+        }
+        .width('100%').height('100%').backgroundColor(Color.Pink)
+
+
+
+
+
+
+      }.width('100%')
+    }
+    .width('100%')
+    .height('100%')
+  }
+
+}
--- a/entry/src/main/ets/pages/frescoRetryTestCasePage.ets
+++ b/entry/src/main/ets/pages/frescoRetryTestCasePage.ets
@ -0,0 +1,78 @@
+/*
+ * Copyright (C) 2021 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} from '@ohos/libraryimageknife'
+import {ImageKnifeOption} from '@ohos/libraryimageknife'
+import {RotateImageTransformation} from '@ohos/libraryimageknife'
+import {RoundedCornersTransformation} from '@ohos/libraryimageknife'
+
+@Entry
+@Component
+struct FrescoImageTestCasePage {
+  @State imageKnifeOption1: ImageKnifeOption =
+    {
+      loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
+
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+      retryholderSrc: $r('app.media.icon_retry'),
+      displayProgress: true,
+      canRetryClick:true
+    };
+  @State ImageKnifeOption: ImageKnifeOption =
+    {
+      loadSrc: "https://hbimg.huabanimg.com/0ef60041445edcfd6b38d20e19024b2cd9281dcc3525a4-Vy8fYO_fw658/format/webp",
+
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+      retryholderSrc: $r('app.media.icon_retry'),
+      displayProgress: true,
+      canRetryClick:true
+    };
+  @State imageKnifeOption3: ImageKnifeOption =
+    {
+      loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
+
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+      retryholderSrc: $r('app.media.icon_retry'),
+      displayProgress: true,
+      canRetryClick:true
+    };
+  @State imageKnifeOption4: ImageKnifeOption =
+    {
+      loadSrc: "https://hbimg.huabanimg.com/testRetryxxxx",
+
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+      retryholderSrc: $r('app.media.icon_retry'),
+      displayProgress: true,
+      canRetryClick:true
+    };
+
+  build() {
+    Scroll() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+//        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
+//        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
+//        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 })
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 })
+          .width(300)
+          .height(300)
+      }
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
--- a/entry/src/main/ets/pages/hspCacheTestPage.ets
+++ b/entry/src/main/ets/pages/hspCacheTestPage.ets
@ -0,0 +1,69 @@
+/*
+ * 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 { ImageKnifeComponent, ImageKnifeOption, FileUtils,ImageKnifeGlobal } from '@ohos/libraryimageknife'
+import common from '@ohos.app.ability.common'
+
+@Entry
+@Component
+struct Index {
+
+
+  @State imageOption1:ImageKnifeOption = {
+    loadSrc: $r('app.media.icon'),
+
+  }
+  @State imageOption2:ImageKnifeOption = {
+    loadSrc: $r('app.media.icon'),
+
+  }
+  @State imageOption3:ImageKnifeOption = {
+    loadSrc: $r('app.media.icon'),
+
+  }
+
+  build() {
+    Scroll() {
+      Column() {
+        Button('点击加载网络图片').onClick(()=>{
+          this.imageOption2 = {
+            loadSrc: 'https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB',
+          }
+        })
+        ImageKnifeComponent({imageKnifeOption:this.imageOption2}).width(300).height(300).backgroundColor(Color.Pink)
+
+        Button('点击加载本地文件').onClick(()=>{
+          let ctx:Object|undefined = ImageKnifeGlobal.getInstance().getHapContext();
+          if(ctx != undefined){
+            let path = (ctx as common.UIAbilityContext).filesDir+"/set.jpeg";
+            FileUtils.getInstance().readFilePicAsync(path).then(buffer=>{
+              this.imageOption3 = {
+                loadSrc: path
+              }
+            })
+          }
+
+        })
+        ImageKnifeComponent({imageKnifeOption:this.imageOption3}).width(300).height(300).backgroundColor(Color.Pink)
+
+
+
+      }.width('100%')
+
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
--- a/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets
+++ b/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets
@ -0,0 +1,333 @@
+/*
+ * Copyright (C) 2022 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 router from '@ohos.router';
+
+
+
+@Entry
+@Component
+struct IndexFunctionDemo {
+  @State hint1: string = '启用网络模拟加载替换网络加载'
+
+  build() {
+    Scroll() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Text("OHOS基础接口测试列表").fontSize(15)
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          Button("测试元能力")
+            .onClick(() => {
+              console.log("测试List列表")
+              router.pushUrl({ url: "pages/basicTestFeatureAbilityPage" });
+            }).margin({ top: 5, left: 3 })
+          Button("测试文件")
+            .onClick(() => {
+              console.log("测试文件子系统")
+              router.pushUrl({ url: "pages/basicTestFileIOPage" });
+            }).margin({ top: 5, left: 3 })
+
+        }.width('100%').height(60).backgroundColor(Color.Pink)
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          Button("测试全球化")
+            .onClick(() => {
+              console.log("测试全球化子系统")
+              router.pushUrl({ url: "pages/basicTestResourceManagerPage" });
+            }).margin({ top: 5, left: 3 })
+          Button("测试媒体")
+            .onClick(() => {
+              console.log("测试媒体子系统")
+              router.pushUrl({ url: "pages/basicTestMediaImage" });
+            }).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(() => {
+              console.log("测试ImageKnifeComponent所有图片切换")
+              router.pushUrl({ url: "pages/testImageKnifeOptionChangedPage" });
+            }).margin({ top: 5, left: 3 })
+
+        }.width('100%').height(60).backgroundColor(Color.Pink)
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          Button("测试thumbnail")
+            .onClick(() => {
+              console.log("测试ImageKnifeComponent thumbnail")
+              router.pushUrl({ url: "pages/testImageKnifeOptionChangedPage2" });
+            }).margin({ top: 5, left: 3 })
+          Button("测试RequestOption加载图片")
+            .onClick(() => {
+              console.log("测试RequestOption加载图片")
+              router.pushUrl({ url: "pages/RequestOptionLoadImage" });
+            }).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("测试内存缓存LRU")
+            .onClick(() => {
+              console.log("测试一级内存缓存")
+              router.pushUrl({ url: "pages/storageTestLruCache" });
+            }).margin({ top: 5, left: 3 })
+          Button("测试所有缓存信息输出")
+            .onClick(() => {
+              console.log("pages/testAllCacheInfoPage 页面跳转")
+              router.pushUrl({ url: "pages/testAllCacheInfoPage" });
+            }).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(() => {
+              console.log("测试失败占位图")
+              router.pushUrl({ url: "pages/showErrorholderTestCasePage" });
+            }).margin({ top: 5, left: 3 })
+        }.width('100%').height(60).backgroundColor(Color.Pink)
+
+        Text("测试预加载  gif静态动态切换功能点").fontSize(15)
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          Button("测试预加载")
+            .onClick(() => {
+              console.log("测试预加载")
+              router.pushUrl({ url: "pages/testPreloadPage" });
+            }).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(() => {
+              console.log("测试图片变换")
+              router.pushUrl({ url: "pages/transformPixelMapPage" });
+            }).margin({ top: 5, left: 3 })
+          Button("测试图片压缩")
+            .onClick(() => {
+              console.log("测试图片压缩")
+              router.pushUrl({ url: "pages/compressPage" });
+            }).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(() => {
+              console.log("更改缓存规则")
+              router.pushUrl({ url: "pages/CacheRuleChangedPage" });
+            }).margin({ top: 5, left: 3 })
+          Button("重试Retry")
+            .onClick(() => {
+              console.log("重试Retry")
+              router.pushUrl({ url: "pages/frescoRetryTestCasePage" });
+            }).margin({ top: 5, left: 3 })
+          Button("加载媒体库uri")
+            .onClick(() => {
+              console.log("加载媒体库uri")
+              router.pushUrl({ url: "pages/dataShareUriLoadPage" });
+            }).margin({ top: 5, left: 3 })
+
+        }.width('100%').height(60).backgroundColor(Color.Pink)
+
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          Button("测试Option缓存是否生效")
+            .onClick(() => {
+              console.log("测试Option缓存是否生效")
+              router.pushUrl({ url: "pages/OptionTestPage" });
+            }).margin({ top: 5, left: 3 })
+          Button("测试Signature自定义缓存")
+            .onClick(() => {
+              console.log("测试Signature自定义缓存")
+              router.pushUrl({ url: "pages/SignatureTestPage" });
+            }).margin({ top: 5, left: 3 })
+
+        }.width('100%').height(60).backgroundColor(Color.Pink)
+
+
+        Text("测试pngj和裁剪").fontSize(15)
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          Button("测试pngj")
+            .onClick(() => {
+              console.log("测试pngj")
+              router.pushUrl({ url: "pages/pngjTestCasePage" });
+            }).margin({ top: 5, left: 3 })
+          Button("图片裁剪")
+            .onClick(() => {
+              console.log("图片裁剪")
+              router.pushUrl({ url: "pages/cropImagePage2" });
+            }).margin({ top: 5, left: 3 })
+        }.width('100%').height(60).backgroundColor(Color.Pink)
+
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+
+          Button("测试svg")
+            .onClick(() => {
+              console.log("pages/svgTestCasePage 页面跳转")
+              router.pushUrl({ url: "pages/svgTestCasePage" });
+            }).margin({ top: 15 })
+
+          Button("测试gif已转移,不再使用worker")
+            .onClick(() => {
+
+            }).margin({ top: 15 })
+        }.width('100%').height(60).backgroundColor(Color.Pink)
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+
+          Button("组件显式动画")
+            .onClick(() => {
+              console.log("pages/testImageKnifeOptionChangedPage3 页面跳转")
+              router.pushUrl({ url: "pages/testImageKnifeOptionChangedPage3" });
+            }).margin({ top: 15 })
+
+          Button("组件内容动画")
+            .onClick(() => {
+              console.log("pages/testImageKnifeOptionChangedPage4 页面跳转")
+              router.pushUrl({ url: "pages/testImageKnifeOptionChangedPage4" });
+            }).margin({ top: 15 })
+
+          Button("自定义圆角椭圆")
+            .onClick(() => {
+              console.log("pages/testImageKnifeOptionChangedPage5 页面跳转")
+              router.pushUrl({ url: "pages/testImageKnifeOptionChangedPage5" });
+            }).margin({ top: 15 })
+
+
+
+        }.width('100%').height(60).backgroundColor(Color.Pink)
+
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+
+          Button("大量照片")
+            .onClick(() => {
+              console.log("pages/manyPhotoShowPage 页面跳转")
+              router.pushUrl({ url: "pages/manyPhotoShowPage" });
+            }).margin({ top: 15 })
+          Button("部分url测试")
+            .onClick(() => {
+              console.log("pages/tempUrlTestPage 页面跳转")
+              router.pushUrl({ url: "pages/tempUrlTestPage" });
+            }).margin({ top: 15 })
+          Button("测试drawFactory")
+            .onClick(() => {
+              console.log("pages/drawFactoryTestPage 页面跳转")
+              router.pushUrl({ url: "pages/drawFactoryTestPage" });
+            }).margin({ top: 15 })
+
+        }.width('100%').height(60).backgroundColor(Color.Pink)
+
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          Button("图片暂停和恢复")
+            .onClick(() => {
+              console.log("pages/photosPausedResumedPage 页面跳转")
+              router.pushUrl({ url: "pages/photosPausedResumedPage" });
+            }).margin({ top: 15 })
+          Button("List滑动暂停和恢复")
+            .onClick(() => {
+              console.log("pages/photosPausedResumedPage2 页面跳转")
+              router.pushUrl({ url: "pages/photosPausedResumedPage2" });
+            }).margin({ top: 15 })
+        }.width('100%').height(60).backgroundColor(Color.Pink)
+
+        Text("单帧gif测试").fontSize(15)
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          Button("单帧gif测试")
+            .onClick(() => {
+              router.pushUrl({ url: "pages/testSingleFrameGifPage" });
+            }).margin({ top: 5, left: 3 })
+        }.width('100%').height(60).backgroundColor(Color.Pink)
+
+        Text("worker测试").fontSize(15)
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          Button("gif加载测试已转移,worker不再使用")
+            .onClick(() => {
+
+            }).margin({ top: 5, left: 3 })
+        }.width('100%').height(60).backgroundColor(Color.Pink)
+        Text("HSP相关测试").fontSize(15)
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+
+          Button("进入HSP的library共享包")
+            .onClick(() => {
+              router.pushUrl({url:'@bundle:com.openharmony.imageknife/sharedlibrary/ets/pages/Index'})
+                .then(()=>{
+                  console.log('push page suceess')
+                })
+            }).margin({ top: 15 })
+          Button("hsp加载后缓存情况,先点左侧按钮")
+            .onClick(() => {
+              console.log("pages/hspCacheTestPage 页面跳转")
+              router.pushUrl({ url: "pages/hspCacheTestPage" });
+            }).margin({ top: 15 })
+          Button("不同的hsp资源加载")
+            .onClick(()=>{
+              console.log("pages/multiHspTestPage 页面跳转")
+              router.pushUrl({ url: "pages/multiHspTestPage" });
+            })
+
+        }.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("多线程加载大量网络图片加载速度")
+            .onClick(() => {
+              router.pushUrl({ url: "pages/testManyNetImageLoadWithPage2" });
+            }).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)
+        Text('测试图片抗锯齿').fontSize(15)
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          Button('测试图片抗锯齿')
+            .onClick(() => {
+              router.pushUrl({ url: 'pages/testImageAntiAliasingWithPage' });
+            }).margin({ top: 5, left: 3 })
+          Button('共享转场缩放')
+            .onClick(() => {
+              router.pushUrl({ url: 'pages/testImageKnifeRouter1' });
+            }).margin({ top: 5, left: 3 })
+        }.width('100%').height(60).backgroundColor(Color.Pink)
+
+        Text('测试图片header属性').fontSize(15)
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          Button('图片header属性设置')
+            .onClick(() => {
+              router.pushUrl({ url: 'pages/testImageKnifeHttpRequestHeader' });
+            }).margin({ top: 5, left: 3 })
+        }.width('100%').height(60).backgroundColor(Color.Pink)
+      }
+    }
+    .width('100%')
+    .height('100%')
+  }
+
+  aboutToAppear() {
+  }
+
+  onBackPress() {
+
+  }
+}
--- a/entry/src/main/ets/pages/index.ets
+++ b/entry/src/main/ets/pages/index.ets
@ -0,0 +1,103 @@
+/*
+ * Copyright (C) 2022 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 router from '@ohos.router';
+import {
+  ImageKnifeComponent,
+  ImageKnifeOption,
+  ImageKnifeGlobal,
+  ImageKnife,
+  HeaderOptions
+} from '@ohos/libraryimageknife'
+
+import { ObjectKey } from '@ohos/libraryimageknife';
+
+@Entry
+@Component
+struct IndexFunctionDemo {
+  @State headerOptions1: HeaderOptions = {
+    key: "refer",
+    value: "http://1.94.37.200:7070/AntiTheftChain/downloadImage"
+  };
+  @State imageKnifeOption1: ImageKnifeOption =
+    {
+      loadSrc: $r('app.media.icon'),
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+      headerOption: [this.headerOptions1]
+    };
+  @State imageKnifeOption2: ImageKnifeOption =
+    {
+      loadSrc: $r('app.media.icon'),
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+      headerOption: [this.headerOptions1]
+    };
+
+  build() {
+    Scroll() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Text("简单示例1：加载一张本地png图片").fontSize(15)
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          Button("加载PNG")
+            .onClick(() => {
+              this.imageKnifeOption1 = {
+                loadSrc: $r('app.media.pngSample'),
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                signature: new ObjectKey('ccccccc')
+              }
+            }).margin({ top: 5, left: 3 })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
+        }.width('100%').backgroundColor(Color.Pink)
+
+        Text("简单示例2：加载一张网络gif图片").fontSize(15)
+        Text("gif解析在子线程,请在页面构建后创建worker,注入imageknife").fontSize(15)
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          Button("加载GIF")
+            .onClick(() => {
+              this.imageKnifeOption2 = {
+                loadSrc: 'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658',
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                displayProgress:true,
+              }
+            }).margin({ top: 5, left: 3 })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }).width(300).height(300)
+        }.width('100%').backgroundColor(Color.Pink)
+
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          Button("ImageKnife测试目录页面")
+            .onClick(() => {
+              console.log("pages/imageknifeTestCaseIndex 页面跳转")
+              router.pushUrl({ url: "pages/imageknifeTestCaseIndex" });
+            }).margin({ top: 15 })
+        }.width('100%').height(60).backgroundColor(Color.Pink)
+      }
+    }
+    .width('100%')
+    .height('100%')
+  }
+
+  aboutToAppear() {
+
+  }
+  aboutToDisappear(){
+
+  }
+
+  onBackPress() {
+
+  }
+}
--- a/entry/src/main/ets/pages/manyPhotoShowPage.ets
+++ b/entry/src/main/ets/pages/manyPhotoShowPage.ets
@ -0,0 +1,74 @@
+/*
+ * Copyright (C) 2021 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, ScaleType} from '@ohos/libraryimageknife'
+import {ImageKnifeOption} from '@ohos/libraryimageknife'
+import {ImageKnifeGlobal} from '@ohos/libraryimageknife'
+import {RotateImageTransformation} from '@ohos/libraryimageknife'
+import {Material} from './model/Material'
+import {TestDataSource} from './model/TestDataSource'
+import {DiskLruCache} from '@ohos/disklrucache'
+import ArkWorker from '@ohos.worker'
+import Prompt from '@system.prompt'
+@Entry
+@Component
+struct ManyPhotoShowPage {
+ private data: TestDataSource = new TestDataSource();
+
+ private elementScroller: Scroller = new Scroller()
+
+  build() {
+   Column() {
+
+    List({ space: 20, scroller: this.elementScroller }) {
+     LazyForEach(this.data, (item: Material, index) => {
+      ListItem() {
+       Column() {
+        Stack({ alignContent: Alignment.BottomEnd }) {
+         // 滤镜图片
+         ImageKnifeComponent({ imageKnifeOption: {
+          loadSrc: item.thumbnail,
+          mainScaleType: ScaleType.FIT_XY,
+         } })
+        }
+        .width(56).height(56)
+        //滤镜标题
+        Text(item.name)
+         .fontSize(10)
+         .maxLines(1)
+         .fontColor(Color.White)
+         .textAlign(TextAlign.Center)
+         .layoutWeight(1)
+         .width('100%')
+         .backgroundColor(Color.Orange)
+       }
+       .width(56)
+       .height(72)
+       .clip(true)
+       .borderRadius(4)
+      }
+     }, (item: Material) => item.material_id)
+    }
+    .listDirection(Axis.Horizontal)
+    .width('100%')
+    .height(72)
+
+   }
+  }
+
+
+
+}
+
+
--- a/entry/src/main/ets/pages/model/BasicDataSource.ets
+++ b/entry/src/main/ets/pages/model/BasicDataSource.ets
@ -0,0 +1,70 @@
+/*
+ * 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.
+ */
+export class BasicDataSource<T> implements IDataSource {
+  private listeners: DataChangeListener[] = [];
+
+  public totalCount(): number {
+    return 0;
+  }
+
+  public getData(index: number):T | undefined {
+    return undefined;
+  }
+
+  registerDataChangeListener(listener: DataChangeListener): void {
+    if (this.listeners.indexOf(listener) < 0) {
+      console.info('add listener');
+      this.listeners.push(listener);
+    }
+  }
+
+  unregisterDataChangeListener(listener: DataChangeListener): void {
+    const pos = this.listeners.indexOf(listener);
+    if (pos >= 0) {
+      console.info('remove listener');
+      this.listeners.splice(pos, 1);
+    }
+  }
+
+  notifyDataReload(): void {
+    this.listeners.forEach(listener => {
+      listener.onDataReloaded();
+    })
+  }
+
+  notifyDataAdd(index: number): void {
+    this.listeners.forEach(listener => {
+      listener.onDataAdd(index);
+    })
+  }
+
+  notifyDataChange(index: number): void {
+    this.listeners.forEach(listener => {
+      listener.onDataChange(index);
+    })
+  }
+
+  notifyDataDelete(index: number): void {
+    this.listeners.forEach(listener => {
+      listener.onDataDelete(index);
+    })
+  }
+
+  notifyDataMove(from: number, to: number): void {
+    this.listeners.forEach(listener => {
+      listener.onDataMove(from, to);
+    })
+  }
+}
--- a/entry/src/main/ets/pages/model/Material.ets
+++ b/entry/src/main/ets/pages/model/Material.ets
@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2024 Huawei Device Co., Ltd.
+ * 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
@ -7,11 +7,13 @@
 *     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,
+ * 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.
 */
-export default class Constants {
-  static readonly TAG: string = "MyImageKnifeTest: "
+export class Material{
+  material_id: string ='';
+  thumbnail: string = '';
+  name: string ='';
 }
--- a/entry/src/main/ets/pages/model/TestDataSource.ets
+++ b/entry/src/main/ets/pages/model/TestDataSource.ets
@ -0,0 +1,590 @@
+/*
+ * 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 {BasicDataSource} from './BasicDataSource'
+import { Material } from './Material';
+export class TestDataSource extends BasicDataSource<Material> {
+  private dataArray: Material[] =  [
+    {name:"测试CBC",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/R9aT7lpEEVxawo4.jpeg!thumb-w321-webp75",material_id:"5060118818"},
+    {name:"通用天空1像素测试",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/1V6c63lKLGPlKVo.png!thumb-w321-webp75",material_id:"506009997"},
+    {name:"像素测试+bin",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/2NxCo49xAB1L96K.jpeg!thumb-w321-webp75",material_id:"506009998"},
+    {name:"像素测试",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/P6gH3pWBGw7L6dD.jpeg!thumb-w321-webp75",material_id:"506009999"},
+    {name:"名称一",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/MKosgAWo5VKpo9Z.jpeg!thumb-w321-webp75",material_id:"50600999"},
+    {name:"质感",thumbnail:"https://xximg1.meitudata.com/XepUPNP4WP.png!thumb-w321-webp75",material_id:"20076061608"},
+    {name:"抠图批量拼图",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/pA2S9lvNpMY4X3N.jpeg!thumb-w321-webp75",material_id:"506002368"},
+    {name:"修改测试",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/69MiA9VxKdkzjWR.png!thumb-w321-webp75",material_id:"50600229"},
+    {name:"兰桂坊-艺术",thumbnail:"https://material-center-pre.meitudata.com/material/image/6228901fd8ddd6350.jpeg!thumb-w321-webp75",material_id:"50639415"},
+    {name:"有门槛的我",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/P98i3gdgDw3Rmx5.png!thumb-w321-webp75",material_id:"506093422"},
+    {name:"222嗯嗯1",thumbnail:"https://stage.meitudata.com/public/creator/ed70a3c696c8e7b.jpg!thumb-w321-webp75",material_id:"50693244"},
+    {name:"滤镜流程11",thumbnail:"https://material-center-pre.meitudata.com/material/image/6194a57b5b9ef7678.jpg!thumb-w321-webp75",material_id:"506017292"},
+    {name:"hsxTest11.8",thumbnail:"https://material-center-pre.meitudata.com/material/image/6189f29b48f165954.jpg!thumb-w321-webp75",material_id:"506530963"},
+    {name:"旧-美食手绘1",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/0lZCW9BrDgMroLL.jpeg!thumb-w321-webp75",material_id:"5060002001"},
+    {name:"Forest",thumbnail:"https://xximg1.meitudata.com/V2jTkoYa96.jpeg!thumb-w321-webp75",material_id:"20106191835"},
+    {name:"春樱",thumbnail:"https://xximg1.meitudata.com/k5DIOxgJpN.jpeg!thumb-w321-webp75",material_id:"20076291634"},
+    {name:"GT G",thumbnail:"http://xximg2.meitudata.com/Z9DCJpkB2l.jpeg!thumb-w321-webp75",material_id:"20085081215"},
+    {name:"测",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/zwdte8R2e5KMMmm.jpeg!thumb-w321-webp75",material_id:"506000000"},
+    {name:"五一鱼块",thumbnail:"https://xximg1.meitudata.com/mlahyxNxjN.jpeg!thumb-w321-webp75",material_id:"20076292056"},
+    {name:"青空",thumbnail:"https://xximg1.meitudata.com/8OkUwBympV.jpeg!thumb-w321-webp75",material_id:"20106311844"},
+    {name:"质感",thumbnail:"https://xximg1.meitudata.com/9nzUydyWeB.png!thumb-w321-webp75",material_id:"20076061589"},
+    {name:"测试CBC",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/R9aT7lpEEVxawo4.jpeg!thumb-w321-webp75",material_id:"5060118818"},
+    {name:"像素天空抠图测试",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/Ymju0r3deAl7xoJ.jpeg!thumb-w321-webp75",material_id:"506005680"},
+    {name:"像素滤镜测试",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/8zPcB0y4vdreG1d.jpeg!thumb-w321-webp75",material_id:"506019998"},
+    {name:"通用天空1像素测试",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/1V6c63lKLGPlKVo.png!thumb-w321-webp75",material_id:"506009997"},
+    {name:"人像风格化",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/VYwIWp0E52v5vaE.jpeg!thumb-w321-webp75",material_id:"50600288888"},
+    {name:"像素+边框测试",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/Z9dtor442OY76KV.jpeg!thumb-w321-webp75",material_id:"506005678"},
+    {name:"像素测试+bin",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/2NxCo49xAB1L96K.jpeg!thumb-w321-webp75",material_id:"506009998"},
+    {name:"像素测试",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/P6gH3pWBGw7L6dD.jpeg!thumb-w321-webp75",material_id:"506009999"},
+    {name:"兰桂坊-艺术",thumbnail:"https://material-center-pre.meitudata.com/material/image/6228901fd8ddd6350.jpeg!thumb-w321-webp75",material_id:"50639415"},
+    {name:"藤黄",thumbnail:"https://xximg1.meitudata.com/KnJSa8X496.jpeg!thumb-w321-webp75",material_id:"20076281728"},
+    {name:"梅幸茶",thumbnail:"https://xximg1.meitudata.com/GYGcPokEQ3.jpeg!thumb-w321-webp75",material_id:"20076281771"},
+    {name:"五一鱼块",thumbnail:"https://xximg1.meitudata.com/mlahyxNxjN.jpeg!thumb-w321-webp75",material_id:"20076292056"},
+    {name:"12.妆容滤镜层级控制",thumbnail:"https://xxtool-release.zone1.meitudata.com/deRP83dkdlR4.png!thumb-w321-webp75",material_id:"200720002017"},
+    {name:"12.妆容滤镜层级控制1",thumbnail:"https://xxtool-release.zone1.meitudata.com/rPJ1vKjJY6jz.png!thumb-w321-webp75",material_id:"200720002018"},
+    {name:"13.3D打光",thumbnail:"https://xxtool-release.zone1.meitudata.com/z8K3P249ZmVW.png!thumb-w321-webp75",material_id:"200720002020"},
+    {name:"14.新bling效果",thumbnail:"https://xxtool-release.zone1.meitudata.com/e4xlVkl0BzMy.png!thumb-w321-webp75",material_id:"200720003001"},
+    {name:"美食手绘效果2",thumbnail:"https://xxtool-release.zone1.meitudata.com/B6MleZrWeMvj.jpg!thumb-w321-webp75",material_id:"200720002002"},
+    {name:"16.美食手绘效果",thumbnail:"https://xxtool-release.zone1.meitudata.com/xEke61aRK6dg.jpg!thumb-w321-webp75",material_id:"200720002003"},
+    {name:"17.素材无人脸规则",thumbnail:"https://xxtool-release.zone1.meitudata.com/B6MleZ1ae5Ry.jpg!thumb-w321-webp75",material_id:"200720002010"},
+    {name:"18.径向色散效果",thumbnail:"https://xxtool-release.zone1.meitudata.com/EyvzkoPgakDL.jpg!thumb-w321-webp75",material_id:"200720002012"},
+    {name:"胶片滤镜2",thumbnail:"https://xxtool-release.zone1.meitudata.com/3zVRo1E16vZG.png!thumb-w321-webp75",material_id:"200720002008"},
+    {name:"20.胶片滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/3zVRo1EdvZ0W.jpg!thumb-w321-webp75",material_id:"200720002009"},
+    {name:"21.虚化滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/1mLMv1kd2BLZ.jpg!thumb-w321-webp75",material_id:"200720002011"},
+    {name:"22.天空分割滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/8NXRMzE019aB.jpg!thumb-w321-webp75",material_id:"200720002006"},
+    {name:"23.妆容滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/0XDRo7xdPkVx.jpg!thumb-w321-webp75",material_id:"200720002007"},
+    {name:"1.随机滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/V06dg1RJ8pDr.jpg!thumb-w321-webp75",material_id:"200720001004"},
+    {name:"15.实时取色效果",thumbnail:"https://xxtool-release.zone1.meitudata.com/2p5Ro1VDZvxR.png!thumb-w321-webp75",material_id:"200720001001"},
+    {name:"10.不带妆容",thumbnail:"https://xxtool-release.zone1.meitudata.com/8NXRMz5oypN7.jpeg!thumb-w321-webp75",material_id:"200720002030"},
+    {name:"16.美食手绘效果1",thumbnail:"https://xxtool-release.zone1.meitudata.com/1mLMWyxNVMAe.jpg!thumb-w321-webp75",material_id:"506088836"},
+    {name:"素材多比例滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/7d8RoA7DXYB9.jpg!thumb-w321-webp75",material_id:"200720002013"},
+    {name:"安德森粉",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/OXOHRLBqVppoxEY.png!thumb-w321-webp75",material_id:"20079982224"},
+    {name:"安德森黄",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/bBZcY8dnYDqZE5v.png!thumb-w321-webp75",material_id:"20079982225"},
+    {name:"安德森冷",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/x5NF1JLYvqGENkj.png!thumb-w321-webp75",material_id:"20079982226"},
+    {name:"安德森暖青",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/KeVUpByXzRp0oPK.png!thumb-w321-webp75",material_id:"20079982227"},
+    {name:"高光+100",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/PB2cdnDGN0nqb8q.png!thumb-w321-webp75",material_id:"20079981113"},
+    {name:"高光-100",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/XepU5b6OZKW90Yv.png!thumb-w321-webp75",material_id:"20079981114"},
+    {name:"阴影+100",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/KeVUp1oQD6W8xg5.png!thumb-w321-webp75",material_id:"20079981115"},
+    {name:"阴影-100",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/GPWcJeyweKZR69d.png!thumb-w321-webp75",material_id:"20079981116"},
+    {name:"cg无素材",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/LEasj5wg0o10JzO.png!thumb-w321-webp75",material_id:"20079981112"},
+    {name:"会员电影胶片",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8QzFJLZVqLlvj8v.png!thumb-w321-webp75",material_id:"20079982254"},
+    {name:"秋1",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/KeVUpByPLRGkgYj.jpeg!thumb-w321-webp75",material_id:"20079982230"},
+    {name:"秋2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/6kQUqeG39YJlEo1.jpeg!thumb-w321-webp75",material_id:"20079982231"},
+    {name:"秋3",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/KeVUpByPvxBLldg.jpeg!thumb-w321-webp75",material_id:"20079982232"},
+    {name:"秋4",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/3YDh1Dl6xY30nqD.jpeg!thumb-w321-webp75",material_id:"20079982233"},
+    {name:"秋5",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/9nzUG9DeeGmn94G.jpeg!thumb-w321-webp75",material_id:"20079982234"},
+    {name:"秋6",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/YkpUjYwlPanLVNg.jpeg!thumb-w321-webp75",material_id:"20079982235"},
+    {name:"秋7",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/OXOHRLB3YBPbD0o.jpeg!thumb-w321-webp75",material_id:"20079982236"},
+    {name:"秋8",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/dWZS0X3P2LjqJ5x.jpeg!thumb-w321-webp75",material_id:"20079982240"},
+    {name:"自然灰2",thumbnail:"https://xximg1.meitudata.com/OXOH0zayv2.png!thumb-w321-webp75",material_id:"20079981854"},
+    {name:"自然灰1",thumbnail:"https://xximg1.meitudata.com/mbeUyRpobN.png!thumb-w321-webp75",material_id:"20079981853"},
+    {name:"色散",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/3YDhOe5eO9.png!thumb-w321-webp75",material_id:"20079981726"},
+    {name:"毕业季",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/4VQt9N8Pjo.png!thumb-w321-webp75",material_id:"20079981254"},
+    {name:"一键美颜质感",thumbnail:"https://xximg1.meitudata.com/x5NFQPRBWG.png!thumb-w321-webp75",material_id:"20079982147"},
+    {name:"相框吸色",thumbnail:"https://xximg1.meitudata.com/2zmU1vvaPD.png!thumb-w321-webp75",material_id:"20079982037"},
+    {name:"美化吸色灰度限制",thumbnail:"https://xximg1.meitudata.com/EPBcLQoodX.png!thumb-w321-webp75",material_id:"20079980037"},
+    {name:"相机吸色测试",thumbnail:"https://xximg1.meitudata.com/p0LTZqZ2Wm.jpeg!thumb-w321-webp75",material_id:"20079981873"},
+    {name:"吸色测试2",thumbnail:"https://xximg1.meitudata.com/9nzUyoDvEQ.png!thumb-w321-webp75",material_id:"20079981874"},
+    {name:"吸色灰度限制0.5",thumbnail:"https://xximg1.meitudata.com/9nzUyYZ5LZ.png!thumb-w321-webp75",material_id:"20079981029"},
+    {name:"foodie锐化",thumbnail:"https://xximg1.meitudata.com/oJWHn2klo6.png!thumb-w321-webp75",material_id:"20079982000"},
+    {name:"自然风光",thumbnail:"https://xximg1.meitudata.com/N8eUq1aDk1.jpeg!thumb-w321-webp75",material_id:"20079982003"},
+    {name:"室内",thumbnail:"https://xximg1.meitudata.com/LEasJPl8mE.jpeg!thumb-w321-webp75",material_id:"20079982004"},
+    {name:"室外",thumbnail:"https://xximg1.meitudata.com/g5eFOyEePx.jpeg!thumb-w321-webp75",material_id:"20079982005"},
+    {name:"老人",thumbnail:"https://xximg1.meitudata.com/vgzUl2EGV5.jpeg!thumb-w321-webp75",material_id:"20079982006"},
+    {name:"街道复用",thumbnail:"https://xximg1.meitudata.com/QEasmNjL8x.jpeg!thumb-w321-webp75",material_id:"20079981781"},
+    {name:"大师1",thumbnail:"https://xximg1.meitudata.com/wgNU30boQ4.png!thumb-w321-webp75",material_id:"20079981962"},
+    {name:"大师2",thumbnail:"https://xximg1.meitudata.com/YkpU1yPmPa.png!thumb-w321-webp75",material_id:"20079981963"},
+    {name:"大师3",thumbnail:"https://xximg1.meitudata.com/qRdTJOZYn8.png!thumb-w321-webp75",material_id:"20079981964"},
+    {name:"大师4",thumbnail:"https://xximg1.meitudata.com/LEasJoKld4.png!thumb-w321-webp75",material_id:"20079981965"},
+    {name:"大师5",thumbnail:"https://xximg1.meitudata.com/KeVUaQnzez.png!thumb-w321-webp75",material_id:"20079981966"},
+    {name:"大师6",thumbnail:"https://xximg1.meitudata.com/BNGiP6vklD.png!thumb-w321-webp75",material_id:"20079981967"},
+    {name:"大师7",thumbnail:"https://xximg1.meitudata.com/wgNU30boLG.png!thumb-w321-webp75",material_id:"20079981968"},
+    {name:"大师8",thumbnail:"https://xximg1.meitudata.com/j4Gce54yGg.png!thumb-w321-webp75",material_id:"20079981969"},
+    {name:"大师9",thumbnail:"https://xximg1.meitudata.com/g5eFO8dEYO.png!thumb-w321-webp75",material_id:"20079981970"},
+    {name:"模糊相机测试",thumbnail:"https://xximg1.meitudata.com/wgNU3GgL0p.png!thumb-w321-webp75",material_id:"20079982016"},
+    {name:"",thumbnail:"https://xximg1.meitudata.com/g5eFOoOWnK.png!thumb-w321-webp75",material_id:"20079981872"},
+    {name:"复古",thumbnail:"https://xximg1.meitudata.com/x5NFQGlPeD.png!thumb-w321-webp75",material_id:"20079982026"},
+    {name:"夜景抠图",thumbnail:"https://xximg1.meitudata.com/qRdTJOxoK4.png!thumb-w321-webp75",material_id:"20079981936"},
+    {name:"我爱中国",thumbnail:"https://xximg1.meitudata.com/3YDhOJgLgp.png!thumb-w321-webp75",material_id:"20079981422"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/oJQiW3WX68vDyaW.jpeg!thumb-w321-webp75",material_id:"20079992271"},
+    {name:"桃子奶油",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/lk0HjR5ealbk2Ze.jpeg!thumb-w321-webp75",material_id:"20079992275"},
+    {name:"橘粉奶油",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/5JOi8ZVNnqE8w8g.jpeg!thumb-w321-webp75",material_id:"20079990090"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/DyOHJnqNb5o8LQg.jpeg!thumb-w321-webp75",material_id:"20079992277"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/y59IlX8wQXoNGEK.jpeg!thumb-w321-webp75",material_id:"20079992276"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/dWku02V3BpYDylY.jpeg!thumb-w321-webp75",material_id:"20079990081"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/p0GcOvOamLXoD3Z.jpeg!thumb-w321-webp75",material_id:"20079992273"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/6kOHqmQ3qjPoYQa.jpeg!thumb-w321-webp75",material_id:"20079992266"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/RwXHJpZKvlQK2GJ.jpeg!thumb-w321-webp75",material_id:"20079992267"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/2zVHE2XGb3d0xgv.jpeg!thumb-w321-webp75",material_id:"20079990045"},
+    {name:"炫光",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/dWku0XJZxGgDLO9.jpeg!thumb-w321-webp75",material_id:"20079992229"},
+    {name:"CG3",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/JdXHB6LLY8agV8O.jpeg!thumb-w321-webp75",material_id:"20079992238"},
+    {name:"CG测试2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/j4QUVv66nq0P55z.jpeg!thumb-w321-webp75",material_id:"20079991111"},
+    {name:"国庆挂历2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/YkVHj0oP36pmOL1.jpeg!thumb-w321-webp75",material_id:"20079999999"},
+    {name:"美化国庆挂历",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/g5yIKQJdqK1aBlQ.jpeg!thumb-w321-webp75",material_id:"20079998888"},
+    {name:"在逃公主",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/N8RHzY8o4oKQqEJ.jpeg!thumb-w321-webp75",material_id:"20079992200"},
+    {name:"2020美颜默认",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/qR1tRvwgl5mmZDp.jpeg!thumb-w321-webp75",material_id:"20079990088"},
+    {name:"复古画册",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/zq9HXROgvWQpXJp.jpeg!thumb-w321-webp75",material_id:"20079990080"},
+    {name:"美食1",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/PBXUkeGKl4.jpeg!thumb-w321-webp75",material_id:"20079990060"},
+    {name:"美食改",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8QYIwP5P0x.jpeg!thumb-w321-webp75",material_id:"20079990059"},
+    {name:"细细闪",thumbnail:"https://xximg1.meitudata.com/XeVHPQGmWg.jpeg!thumb-w321-webp75",material_id:"20079991001"},
+    {name:"细细闪2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/qR1tRvRVBLmGaQK.jpeg!thumb-w321-webp75",material_id:"20079990069"},
+    {name:"新闪闪1",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/aOWsGzGNdEOkngB.jpeg!thumb-w321-webp75",material_id:"20079990068"},
+    {name:"新闪闪3-2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/qR1tRvbq9BkKZZv.jpeg!thumb-w321-webp75",material_id:"20079990078"},
+    {name:"新闪闪5",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/j4QUVwNX4q6LV80.jpeg!thumb-w321-webp75",material_id:"20079990077"},
+    {name:"天空闪-橙",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/wgRHvqkwVNgzaQO.jpeg!thumb-w321-webp75",material_id:"20079990073"},
+    {name:"新说3",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/6kOHRdweoL.jpeg!thumb-w321-webp75",material_id:"20079990057"},
+    {name:"新说2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/QEXSmQ3JNP.jpeg!thumb-w321-webp75",material_id:"20079990056"},
+    {name:"新说",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/nBqUo2nYVw.jpeg!thumb-w321-webp75",material_id:"20079990055"},
+    {name:"少女胶片颗粒",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/EPdUL929P1.jpeg!thumb-w321-webp75",material_id:"20079990053"},
+    {name:"折纸3",thumbnail:"https://xximg1.meitudata.com/j4QUeqxb8N.jpeg!thumb-w321-webp75",material_id:"20079990021"},
+    {name:"折纸滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/dWkuagV42R.jpeg!thumb-w321-webp75",material_id:"20079990050"},
+    {name:"温柔纹理2",thumbnail:"https://xximg1.meitudata.com/5JOiDgbOjz.jpeg!thumb-w321-webp75",material_id:"20079990003"},
+    {name:"温柔纹理",thumbnail:"https://xximg1.meitudata.com/mbZHy9Kyd4.jpeg!thumb-w321-webp75",material_id:"20079990024"},
+    {name:"油画新说1",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/dWkuaga464.jpeg!thumb-w321-webp75",material_id:"20079990054"},
+    {name:"油画新说2",thumbnail:"https://xximg1.meitudata.com/V2jTkpeb8e.jpeg!thumb-w321-webp75",material_id:"20079990001"},
+    {name:"油画新说3",thumbnail:"https://xximg1.meitudata.com/8QYIw15O85.jpeg!thumb-w321-webp75",material_id:"20079991994"},
+    {name:"珍珠2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/zq9H5VqpGo.jpeg!thumb-w321-webp75",material_id:"20079990043"},
+    {name:"珍珠",thumbnail:"https://xximg1.meitudata.com/dWkua4m2NL.jpeg!thumb-w321-webp75",material_id:"20079991002"},
+    {name:"爱心月亮",thumbnail:"https://xximg1.meitudata.com/LEKSJEmG9L.png!thumb-w321-webp75",material_id:"20079990041"},
+    {name:"星星月亮",thumbnail:"https://xximg1.meitudata.com/3YVfOV8JWX.jpeg!thumb-w321-webp75",material_id:"20079990040"},
+    {name:"钢笔淡彩",thumbnail:"https://xximg1.meitudata.com/6kOHRlg2E8.jpeg!thumb-w321-webp75",material_id:"20079990039"},
+    {name:"拯救废片2",thumbnail:"https://xximg1.meitudata.com/KeEHax9bao.jpeg!thumb-w321-webp75",material_id:"20079990038"},
+    {name:"书本感",thumbnail:"https://xximg1.meitudata.com/WYBfmxXLVz.jpeg!thumb-w321-webp75",material_id:"20079990036"},
+    {name:"拯救废片1",thumbnail:"https://xximg1.meitudata.com/dWkuaGDnaG.jpeg!thumb-w321-webp75",material_id:"20079990037"},
+    {name:"夏日4",thumbnail:"https://xximg1.meitudata.com/j4QUeglDGW.jpeg!thumb-w321-webp75",material_id:"20079990035"},
+    {name:"夏日2",thumbnail:"https://xximg1.meitudata.com/zq9H5obmPq.jpeg!thumb-w321-webp75",material_id:"20079990034"},
+    {name:"夏日3",thumbnail:"https://xximg1.meitudata.com/lk0Hk4z4JE.jpeg!thumb-w321-webp75",material_id:"20079990033"},
+    {name:"春日柔光",thumbnail:"https://xximg1.meitudata.com/oJQinkgLpN.jpeg!thumb-w321-webp75",material_id:"20079992020"},
+    {name:"春日日系",thumbnail:"https://xximg1.meitudata.com/JdXHWgQ588.jpeg!thumb-w321-webp75",material_id:"20079990022"},
+    {name:"2020情人节2",thumbnail:"https://xximg1.meitudata.com/p0GcZg6o2m.jpeg!thumb-w321-webp75",material_id:"20079990017"},
+    {name:"11",thumbnail:"https://xximg1.meitudata.com/j4QUeR0ylz.jpeg!thumb-w321-webp75",material_id:"20079990014"},
+    {name:"锐化+颗粒",thumbnail:"https://xximg1.meitudata.com/nBqUoWm5Eq.jpeg!thumb-w321-webp75",material_id:"20079990015"},
+    {name:"22",thumbnail:"https://xximg1.meitudata.com/EPdULoXbK8.jpeg!thumb-w321-webp75",material_id:"20079990004"},
+    {name:"2019圣诞2",thumbnail:"https://xximg1.meitudata.com/aOWsL0gy9L.jpeg!thumb-w321-webp75",material_id:"20079990008"},
+    {name:"bling裸妆",thumbnail:"https://xximg1.meitudata.com/Z3Vspe2qwl.jpeg!thumb-w321-webp75",material_id:"20079991976"},
+    {name:"水雾",thumbnail:"https://xximg1.meitudata.com/eqOHv8b9Jy.jpeg!thumb-w321-webp75",material_id:"20079990009"},
+    {name:"泫雅柔光2",thumbnail:"https://xximg1.meitudata.com/1zVH1X80BW.jpeg!thumb-w321-webp75",material_id:"20079990000"},
+    {name:"无辜妆",thumbnail:"https://xximg1.meitudata.com/8QYIw5OwzQ.jpeg!thumb-w321-webp75",material_id:"20079990020"},
+    {name:"2023",thumbnail:"https://xximg1.meitudata.com/WYBfmyJ4jO.jpeg!thumb-w321-webp75",material_id:"20079992023"},
+    {name:"风格妆22",thumbnail:"https://xximg1.meitudata.com/y59IbNv8ek.jpeg!thumb-w321-webp75",material_id:"20079990013"},
+    {name:"吸色测试",thumbnail:"https://xximg1.meitudata.com/g5yIOn36zo.jpeg!thumb-w321-webp75",material_id:"20079991234"},
+    {name:"爱国",thumbnail:"https://xximg1.meitudata.com/nBqUonb8dG.jpeg!thumb-w321-webp75",material_id:"20079991919"},
+    {name:"春樱改良",thumbnail:"https://xximg1.meitudata.com/2zVH1mYp8m.jpeg!thumb-w321-webp75",material_id:"20079991858"},
+    {name:"爱心阴影",thumbnail:"https://xximg1.meitudata.com/8QYIw59nPj.jpeg!thumb-w321-webp75",material_id:"20079991935"},
+    {name:"无辜妆2",thumbnail:"https://xximg1.meitudata.com/LEKSJPXj2E.jpeg!thumb-w321-webp75",material_id:"20079990006"},
+    {name:"1993",thumbnail:"https://xximg1.meitudata.com/vgyHlz3kOv.jpeg!thumb-w321-webp75",material_id:"20079991993"},
+    {name:"皮肤质感3",thumbnail:"https://xximg1.meitudata.com/LEKSJooQb8.jpeg!thumb-w321-webp75",material_id:"20079991113"},
+    {name:"皮肤质感2",thumbnail:"https://xximg1.meitudata.com/p0GcZPPXNW.jpeg!thumb-w321-webp75",material_id:"20079991112"},
+    {name:"皮肤质感",thumbnail:"https://xximg1.meitudata.com/WYBfmDvxQK.jpeg!thumb-w321-webp75",material_id:"20079991884"},
+    {name:"万圣2",thumbnail:"https://xximg1.meitudata.com/dWkuap6DpQ.jpeg!thumb-w321-webp75",material_id:"20079991866"},
+    {name:"闪闪压缩2",thumbnail:"https://xximg1.meitudata.com/BNPTP2XB6X.jpeg!thumb-w321-webp75",material_id:"20079990030"},
+    {name:"闪闪压缩",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/oJQiWKQQE3VWLKR.jpeg!thumb-w321-webp75",material_id:"20079990076"},
+    {name:"复古画册加纸纹",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/QEXSyJENWDbBkna.jpeg!thumb-w321-webp75",material_id:"20079990079"},
+    {name:"新闪闪2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/KeEHpDpzvPgVOqY.jpeg!thumb-w321-webp75",material_id:"20079990067"},
+    {name:"新闪闪4",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/mbZHO5dyaXPe91g.jpeg!thumb-w321-webp75",material_id:"20079990072"},
+    {name:"天空闪",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/bBLUYpzJY518dqa.jpeg!thumb-w321-webp75",material_id:"20079990070"},
+    {name:"美食3改",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/RwXHmlPzDO.jpeg!thumb-w321-webp75",material_id:"20079990058"},
+    {name:"质感胶片颗粒",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/1zVH1pkp0o.jpeg!thumb-w321-webp75",material_id:"20079990052"},
+    {name:"雀斑",thumbnail:"https://xximg1.meitudata.com/bBLUvke8mb.jpeg!thumb-w321-webp75",material_id:"20079991000"},
+    {name:"春日柔光1",thumbnail:"https://xximg1.meitudata.com/KeEHa9ZGYO.jpeg!thumb-w321-webp75",material_id:"20079990031"},
+    {name:"灰调2",thumbnail:"https://xximg1.meitudata.com/JdXHW51qgp.jpeg!thumb-w321-webp75",material_id:"20079990002"},
+    {name:"移轴虚化2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/WYBf3WkazQXvlwl.jpeg!thumb-w321-webp75",material_id:"506000008"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/6kOHqmdRWjl4BEm.jpeg!thumb-w321-webp75",material_id:"50600006"},
+    {name:"微光",thumbnail:"https://xximg1.meitudata.com/KeEHa4wl8p.jpeg!thumb-w321-webp75",material_id:"20076251574"},
+    {name:"微光",thumbnail:"https://xximg1.meitudata.com/eqZUvNY3YL.png!thumb-w321-webp75",material_id:"20076251567"},
+    {name:"微光",thumbnail:"https://xximg1.meitudata.com/BNPTPoVbeV.jpeg!thumb-w321-webp75",material_id:"20076251575"},
+    {name:"微光",thumbnail:"https://xximg1.meitudata.com/bBZcvmqk8z.png!thumb-w321-webp75",material_id:"20076251568"},
+    {name:"微光",thumbnail:"https://xximg1.meitudata.com/g5yIOPJmZn.jpeg!thumb-w321-webp75",material_id:"20076251573"},
+    {name:"微光",thumbnail:"https://xximg1.meitudata.com/5JeHDVNROj.png!thumb-w321-webp75",material_id:"20076251569"},
+    {name:"微光",thumbnail:"https://xximg1.meitudata.com/wgNU3PJVzR.png!thumb-w321-webp75",material_id:"20076251577"},
+    {name:"17.素材无人脸规则",thumbnail:"https://xxtool-release.zone1.meitudata.com/owv1PzKKkaEz.jpg!thumb-w321-webp75",material_id:"506088832"},
+    {name:"22.天空分割滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/laM7B2WRZRve.jpg!thumb-w321-webp75",material_id:"506088818"},
+    {name:"11.柔发效果支持",thumbnail:"https://xxtool-release.zone1.meitudata.com/L24ZJRgYjyw5.png!thumb-w321-webp75",material_id:"506088812"},
+    {name:"13.3D打光",thumbnail:"https://xxtool-release.zone1.meitudata.com/owv1PzXYWoxL.png!thumb-w321-webp75",material_id:"506088810"},
+    {name:"（仅日本）10.不带妆容",thumbnail:"https://xxtool-release.zone1.meitudata.com/y1B45rOXGkBW.jpeg!thumb-w321-webp75",material_id:"506088811"},
+    {name:"12.妆容滤镜层级控制1",thumbnail:"https://xxtool-release.zone1.meitudata.com/e4xlJA94A6Mp.png!thumb-w321-webp75",material_id:"506088831"},
+    {name:"6.强制曝光滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/kOo1k0DW9drL.jpg!thumb-w321-webp75",material_id:"506088835"},
+    {name:"5.男生、女生滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/OmB4J1oagj0M.jpg!thumb-w321-webp75",material_id:"506088815"},
+    {name:"4.带有动效滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/V06dJl3051WA.jpg!thumb-w321-webp75",material_id:"506088823"},
+    {name:"12.妆容滤镜层级控制",thumbnail:"https://xxtool-release.zone1.meitudata.com/kOo1k0Nva6LL.png!thumb-w321-webp75",material_id:"506088816"},
+    {name:"3.妆容滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/OmB4J13jO5Dg.jpg!thumb-w321-webp75",material_id:"506088822"},
+    {name:"2.bling滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/e4xlJA9WZJoy.jpg!thumb-w321-webp75",material_id:"506088834"},
+    {name:"1.随机滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/GYZza015D1LE.jpg!thumb-w321-webp75",material_id:"506088824"},
+    {name:"19.素材多比例滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/B6MlzDxYm10N.jpg!thumb-w321-webp75",material_id:"506088821"},
+    {name:"16.美食手绘效果",thumbnail:"https://xxtool-release.zone1.meitudata.com/4JpRm4Em6Y7J.jpg!thumb-w321-webp75",material_id:"506088833"},
+    {name:"16.美食手绘效果2",thumbnail:"https://xxtool-release.zone1.meitudata.com/3zVRNe69zMKM.jpg!thumb-w321-webp75",material_id:"506088829"},
+    {name:"23.妆容滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/L24ZJRgjNYWe.jpg!thumb-w321-webp75",material_id:"506088814"},
+    {name:"18.径向色散效果",thumbnail:"https://xxtool-release.zone1.meitudata.com/y1B45rOEZeMP.jpg!thumb-w321-webp75",material_id:"506088813"},
+    {name:"14.新bling效果",thumbnail:"https://xxtool-release.zone1.meitudata.com/y1B45rp8Ky7z.png!thumb-w321-webp75",material_id:"506088837"},
+    {name:"绵绵",thumbnail:"https://xximg1.meitudata.com/EPdUL42bLj.jpeg!thumb-w321-webp75",material_id:"20076412020"},
+    {name:"清澈",thumbnail:"https://xximg1.meitudata.com/nBqUo6pveO.jpeg!thumb-w321-webp75",material_id:"20076412057"},
+    {name:"阴雨",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/N3OFzPJbwBgXG6z.jpeg!thumb-w321-webp75",material_id:"506002342"},
+    {name:"ar胶片",thumbnail:"https://xximg1.meitudata.com/lkjUk85p5G.png!thumb-w321-webp75",material_id:"20108891781"},
+    {name:"INS",thumbnail:"https://xximg1.meitudata.com/bBLUv93q2O.jpeg!thumb-w321-webp75",material_id:"20108890012"},
+    {name:"高级灰",thumbnail:"https://xximg1.meitudata.com/jzOIeJz1mK.png!thumb-w321-webp75",material_id:"20108891777"},
+    {name:"夜景2",thumbnail:"https://xximg1.meitudata.com/1zVH1nl3nL.jpeg!thumb-w321-webp75",material_id:"20108890014"},
+    {name:"藕色颗粒",thumbnail:"https://xximg1.meitudata.com/V2jTkoQgO6.jpeg!thumb-w321-webp75",material_id:"20108890015"},
+    {name:"胶片1",thumbnail:"https://xximg1.meitudata.com/KnJSa8gWE4.png!thumb-w321-webp75",material_id:"20108891783"},
+    {name:"fuji",thumbnail:"https://xximg1.meitudata.com/qR1tJbvd5d.jpeg!thumb-w321-webp75",material_id:"20108890010"},
+    {name:"咸咸测试",thumbnail:"https://xximg1.meitudata.com/EPdULqxXOR.jpeg!thumb-w321-webp75",material_id:"20108899999"},
+    {name:"古风藕色",thumbnail:"https://xximg1.meitudata.com/JdXHWjK4o9.jpeg!thumb-w321-webp75",material_id:"20108891775"},
+    {name:"natural1",thumbnail:"https://xximg1.meitudata.com/zq9H5ekDQv.jpeg!thumb-w321-webp75",material_id:"20108891682"},
+    {name:"受伤妆",thumbnail:"https://xximg1.meitudata.com/nBqUoEKnoD.jpeg!thumb-w321-webp75",material_id:"20108891787"},
+    {name:"natural2",thumbnail:"https://xximg1.meitudata.com/j4QUedKlNv.jpeg!thumb-w321-webp75",material_id:"20108891848"},
+    {name:"描边2",thumbnail:"https://xximg1.meitudata.com/4VOC9QOZRd.jpeg!thumb-w321-webp75",material_id:"20108891835"},
+    {name:"natural3",thumbnail:"https://xximg1.meitudata.com/9nOHy6gJOb.jpeg!thumb-w321-webp75",material_id:"20108890019"},
+    {name:"宝丽来1",thumbnail:"https://xximg1.meitudata.com/JdXHW5qp88.jpeg!thumb-w321-webp75",material_id:"20108891840"},
+    {name:"日系复古",thumbnail:"https://xximg1.meitudata.com/6zZIRWym8L.png!thumb-w321-webp75",material_id:"20108891846"},
+    {name:"暗调测试",thumbnail:"https://xximg1.meitudata.com/YkVH1pNvLW.jpeg!thumb-w321-webp75",material_id:"20108897777"},
+    {name:"宝丽来2",thumbnail:"https://xximg1.meitudata.com/6kOHRWaqeJ.jpeg!thumb-w321-webp75",material_id:"20108891841"},
+    {name:"海外柔光",thumbnail:"https://xximg1.meitudata.com/p0GcZyqa5z.jpeg!thumb-w321-webp75",material_id:"20108891801"},
+    {name:"绯红",thumbnail:"https://xximg1.meitudata.com/wgNU340lGP.png!thumb-w321-webp75",material_id:"20108891770"},
+    {name:"霜色",thumbnail:"https://xximg1.meitudata.com/lkjUkL6GXp.png!thumb-w321-webp75",material_id:"20108891769"},
+    {name:"梅幸茶",thumbnail:"https://xximg1.meitudata.com/GPWcPEw1Wj.png!thumb-w321-webp75",material_id:"20108891771"},
+    {name:"水墨",thumbnail:"https://xximg1.meitudata.com/9nzUyjane8.png!thumb-w321-webp75",material_id:"20108891772"},
+    {name:"1780",thumbnail:"https://xximg1.meitudata.com/vgyHlJoLg3.jpeg!thumb-w321-webp75",material_id:"20108891780"},
+    {name:"描边3",thumbnail:"https://xximg1.meitudata.com/nBqUoz0g3y.jpeg!thumb-w321-webp75",material_id:"20108891837"},
+    {name:"描边4",thumbnail:"https://xximg1.meitudata.com/1zVH1XvE4z.jpeg!thumb-w321-webp75",material_id:"20108891838"},
+    {name:"描边1",thumbnail:"https://xximg1.meitudata.com/WYBfmdWOoQ.jpeg!thumb-w321-webp75",material_id:"20108891834"},
+    {name:"青空",thumbnail:"https://xximg1.meitudata.com/8OkUwBympV.jpeg!thumb-w321-webp75",material_id:"20106311844"},
+    {name:"暮霭",thumbnail:"https://xximg1.meitudata.com/9QktyzB0nW.jpeg!thumb-w321-webp75",material_id:"20106311843"},
+    {name:"糖果",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/qp4IReJkzbEZD41.jpeg!thumb-w321-webp75",material_id:"506002348"},
+    {name:"苏打",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/nplIo2XOm6.jpeg!thumb-w321-webp75",material_id:"20096442168"},
+    {name:"淡奶油",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/PVQIkeOx5L.jpeg!thumb-w321-webp75",material_id:"20096442169"},
+    {name:"温柔",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/N8RHqBW392.jpeg!thumb-w321-webp75",material_id:"20096442166"},
+    {name:"珠光",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/nBqUo2X8lP.jpeg!thumb-w321-webp75",material_id:"20096442165"},
+    {name:"丝绸",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/BNPTPWpNRL.jpeg!thumb-w321-webp75",material_id:"20096442167"},
+    {name:"黑白",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/OXOHRJnJ5vOXBpY.jpeg!thumb-w321-webp75",material_id:"20096081095"},
+    {name:"暗房",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/eqZU6dBdw3EY3d1.jpeg!thumb-w321-webp75",material_id:"506002307"},
+    {name:"低反差",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/4VQtnwmwpBL5wDN.jpeg!thumb-w321-webp75",material_id:"506002309"},
+    {name:"森山",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/1zXUmEWE4DWbQW2.jpeg!thumb-w321-webp75",material_id:"506002313"},
+    {name:"Instant",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/qRdTR9w9ygLqdeb.jpeg!thumb-w321-webp75",material_id:"506002310"},
+    {name:"范戴克",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/BNGiqXNXZkljKlb.jpeg!thumb-w321-webp75",material_id:"506002312"},
+    {name:"圣诞",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/PVQIdno4bnlEEOq.jpeg!thumb-w321-webp75",material_id:"20076452266"},
+    {name:"小梦境",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/2zVHEkJKPj3q5nz.jpeg!thumb-w321-webp75",material_id:"20076452193"},
+    {name:"在逃公主",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/lk0HjoJRKlq9E0Z.jpeg!thumb-w321-webp75",material_id:"20076452200"},
+    {name:"璀璨",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/DyOHJWjXJGk6Ojl.jpeg!thumb-w321-webp75",material_id:"20076452189"},
+    {name:"星河",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/LEKSjB8pREZExxZ.jpeg!thumb-w321-webp75",material_id:"20076452180"},
+    {name:"星河II",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/g5yIKQq99XvKZQP.jpeg!thumb-w321-webp75",material_id:"20076452181"},
+    {name:"星河III",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/oJQiWKVVJNXe3PB.jpeg!thumb-w321-webp75",material_id:"20076452184"},
+    {name:"年味",thumbnail:"https://xximg1.meitudata.com/EVvILvqjRQ.jpeg!thumb-w321-webp75",material_id:"20076352017"},
+    {name:"白日梦 ",thumbnail:"https://xximg1.meitudata.com/vgyHlzq34j.jpeg!thumb-w321-webp75",material_id:"20076351989"},
+    {name:"白桃",thumbnail:"https://xximg1.meitudata.com/g5eFOnEgJj.png!thumb-w321-webp75",material_id:"20076351888"},
+    {name:"Norge",thumbnail:"https://xximg1.meitudata.com/9nOHylkdjn.jpeg!thumb-w321-webp75",material_id:"2007635584"},
+    {name:"冬至",thumbnail:"https://xximg1.meitudata.com/zqOU5K9Q5m.png!thumb-w321-webp75",material_id:"20076351887"},
+    {name:"红杉",thumbnail:"https://xximg1.meitudata.com/QEasmkjv09.png!thumb-w321-webp75",material_id:"20076351981"},
+    {name:"暖暖 ",thumbnail:"https://xximg1.meitudata.com/y59Ib9kQZw.jpeg!thumb-w321-webp75",material_id:"20076351988"},
+    {name:"神仙奶油光",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/XRLI50zwLEBpQ19.jpeg!thumb-w321-webp75",material_id:"20096472176"},
+    {name:"神仙奶油光Ⅱ",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/PVQIdB3VbL63GQN.jpeg!thumb-w321-webp75",material_id:"20096472177"},
+    {name:"法式油画",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/99ETGwRbEnKn9qd.jpeg!thumb-w321-webp75",material_id:"20096472178"},
+    {name:"法式油画Ⅱ",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/wkQsvqJNVn9GaaP.jpeg!thumb-w321-webp75",material_id:"20096472179"},
+    {name:"曼哈顿大桥",thumbnail:"https://xximg1.meitudata.com/bBLUvjadBB.jpeg!thumb-w321-webp75",material_id:"20106301861"},
+    {name:"维多利亚港",thumbnail:"https://xximg1.meitudata.com/wgRH3jVEDg.jpeg!thumb-w321-webp75",material_id:"20106301862"},
+    {name:"新宿",thumbnail:"https://xximg1.meitudata.com/x5eIQyn1bp.jpeg!thumb-w321-webp75",material_id:"20106301935"},
+    {name:"那不勒斯",thumbnail:"https://xximg1.meitudata.com/zqOU5LPDwe.png!thumb-w321-webp75",material_id:"20106301936"},
+    {name:"赛博朋克",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/ykGslXOBVOZ1wZm.jpeg!thumb-w321-webp75",material_id:"20106302217"},
+    {name:"盐系",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/29gtLmJEWLAadDk.jpeg!thumb-w321-webp75",material_id:"20096522258"},
+    {name:"29",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/wOXiNM4O8Jxyv7E.jpeg!thumb-w321-webp75",material_id:"506030029"},
+    {name:"28",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/jkEIPyplzRPYXmP.jpeg!thumb-w321-webp75",material_id:"506030028"},
+    {name:"27",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/JgpCWo3NL2G81JZ.jpeg!thumb-w321-webp75",material_id:"506030027"},
+    {name:"26",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/DpWhZ42RzkXpDgW.jpeg!thumb-w321-webp75",material_id:"5060230026"},
+    {name:"25",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/Ng9CWAVaM342ERY.jpeg!thumb-w321-webp75",material_id:"506030025"},
+    {name:"24",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/3MLhOxa9x2m49Rp.jpeg!thumb-w321-webp75",material_id:"506030024"},
+    {name:"23",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/Ng9CWAVy999Ea27.jpeg!thumb-w321-webp75",material_id:"506030023"},
+    {name:"22",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/mjkuw39egW2Lv9V.jpeg!thumb-w321-webp75",material_id:"506030022"},
+    {name:"21",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/9L1IrA1E6l7799X.jpeg!thumb-w321-webp75",material_id:"506030021"},
+    {name:"20",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/rOwi0AkzJo210E5.jpeg!thumb-w321-webp75",material_id:"506030020"},
+    {name:"19",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/ed7IAoW6mr4OVwl.jpeg!thumb-w321-webp75",material_id:"506030019"},
+    {name:"18",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/3MLhOx2A2R5GJom.jpeg!thumb-w321-webp75",material_id:"506030018"},
+    {name:"17",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/DpWhZ4mE9OZYEv2.jpeg!thumb-w321-webp75",material_id:"506030017"},
+    {name:"16",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/lK4H8LpVG7o8ZWo.jpeg!thumb-w321-webp75",material_id:"506030016"},
+    {name:"15",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/JgpCWoverVMGlGE.jpeg!thumb-w321-webp75",material_id:"506030015"},
+    {name:"14",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/rOwi0Akmj2Wrg8e.jpeg!thumb-w321-webp75",material_id:"506030014"},
+    {name:"13",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/ZWdUX61ERRREYx7.jpeg!thumb-w321-webp75",material_id:"506030013"},
+    {name:"12",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/Ng9CWAdDvZDZWN0.jpeg!thumb-w321-webp75",material_id:"506030012"},
+    {name:"10",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/5O0iJdZB9VKpZYK.jpeg!thumb-w321-webp75",material_id:"506030006"},
+    {name:"9",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/AY4T4jpeo29dAJY.jpeg!thumb-w321-webp75",material_id:"506030005"},
+    {name:"8",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/EZNHdk171m9Z1Zp.jpeg!thumb-w321-webp75",material_id:"506030004"},
+    {name:"7",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/ed7IAorRPGr2DV1.jpeg!thumb-w321-webp75",material_id:"506030003"},
+    {name:"测试红点6",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/wOXiNMwZDXGyaOW.jpeg!thumb-w321-webp75",material_id:"506030002"},
+    {name:"测试红点5",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/9L1IrAz4yYjKLOp.jpeg!thumb-w321-webp75",material_id:"506030001"},
+    {name:"测试红点4",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/EZNHdk1owgyDp9Z.jpeg!thumb-w321-webp75",material_id:"5060238998"},
+    {name:"测试红点3",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/3MLhOxDGxyVLwmV.jpeg!thumb-w321-webp75",material_id:"5060238997"},
+    {name:"测试红点2",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/jkEIPyVeNwvW4X8.jpeg!thumb-w321-webp75",material_id:"5060238996"},
+    {name:"测试红点",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/3MLhOxDGZNlxerJ.jpeg!thumb-w321-webp75",material_id:"5060238995"},
+    {name:"123",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/8LxIzOLaGM06Ekx.jpeg!thumb-w321-webp75",material_id:"5060238991"},
+    {name:"小草3",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/09mIW9BGz4DdNPK.jpeg!thumb-w321-webp75",material_id:"5060238990"},
+    {name:"小草2",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/wOXiNMPBxwoymBv.jpeg!thumb-w321-webp75",material_id:"5060238989"},
+    {name:"小草",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/rOwi0AO9BdZzzkv.jpeg!thumb-w321-webp75",material_id:"5060238988"},
+    {name:"星星1",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/71zSrY2veyMDEaE.jpeg!thumb-w321-webp75",material_id:"506010255"},
+    {name:"小树1",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/4AVSv70z5YzveBy.jpeg!thumb-w321-webp75",material_id:"506010256"},
+    {name:"小花4",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/G5wUz1B4zNpRE0P.jpeg!thumb-w321-webp75",material_id:"506010254"},
+    {name:"31",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/Kg2CJr4d5PKRP4p.jpeg!thumb-w321-webp75",material_id:"506030031"},
+    {name:"西西里",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/yNmTl3VBD1Nz5yE.jpeg!thumb-w321-webp75",material_id:"506002337"},
+    {name:"尼斯",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/5JeH8E3e6Vvq8YY.jpeg!thumb-w321-webp75",material_id:"506002331"},
+    {name:"布达佩斯",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/lkjUjRxbeV2moG0.jpeg!thumb-w321-webp75",material_id:"20096082224"},
+    {name:"月升",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/qRdTRadQlQanwQa.jpeg!thumb-w321-webp75",material_id:"20096082225"},
+    {name:"聚会",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/5JeH8ZOg14O3Jq6.jpeg!thumb-w321-webp75",material_id:"20096082226"},
+    {name:"法兰西",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8QzFJz90eZ3lExp.jpeg!thumb-w321-webp75",material_id:"20096082227"},
+    {name:"油画",thumbnail:"https://xximg1.meitudata.com/BNPTPRjbyl.jpeg!thumb-w321-webp75",material_id:"20096082032"},
+    {name:"油画Ⅱ",thumbnail:"https://xximg1.meitudata.com/8QYIw41QVq.jpeg!thumb-w321-webp75",material_id:"20096082033"},
+    {name:"安东尼亚",thumbnail:"https://xximg1.meitudata.com/2LqS1vmqv0.png!thumb-w321-webp75",material_id:"20096082038"},
+    {name:"情人节限定",thumbnail:"https://xximg1.meitudata.com/8QYIwbzm81.jpeg!thumb-w321-webp75",material_id:"20096082019"},
+    {name:"勒芒",thumbnail:"https://xximg1.meitudata.com/ndzuolR3v9.jpeg!thumb-w321-webp75",material_id:"20096081869"},
+    {name:"电影",thumbnail:"https://xximg1.meitudata.com/PBXUkm2yq5.jpeg!thumb-w321-webp75",material_id:"20096081274"},
+    {name:"1980",thumbnail:"http://xximg2.meitudata.com/LEKSJx0N8y.jpeg!thumb-w321-webp75",material_id:"20096081108"},
+    {name:"电影",thumbnail:"http://xximg2.meitudata.com/6kOHRa1OpD.jpeg!thumb-w321-webp75",material_id:"20096081253"},
+    {name:"中环码头",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/496TnZaRxddxonY.jpeg!thumb-w321-webp75",material_id:"2009608530"},
+    {name:"显影",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8QYIJLL6NE94K2l.jpeg!thumb-w321-webp75",material_id:"20086391964"},
+    {name:"焦点",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8QYIJLL6o5PVGyv.jpeg!thumb-w321-webp75",material_id:"20086391965"},
+    {name:"扫街",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/5JOi8ooNJ25wpg2.jpeg!thumb-w321-webp75",material_id:"20086391963"},
+    {name:"Photog",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/OX8iREk4LJ3qgad.jpeg!thumb-w321-webp75",material_id:"20086391968"},
+    {name:"超焦距",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/5JOi8ZQeZkvzQQD.jpeg!thumb-w321-webp75",material_id:"20086391970"},
+    {name:"影调",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/XeVH5bx1bz4NVdk.jpeg!thumb-w321-webp75",material_id:"20086391967"},
+    {name:"名称一",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/MKosgAWo5VKpo9Z.jpeg!thumb-w321-webp75",material_id:"50600999"},
+    {name:"修改测试",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/69MiA9VxKdkzjWR.png!thumb-w321-webp75",material_id:"50600229"},
+    {name:"有门槛的我",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/P98i3gdgDw3Rmx5.png!thumb-w321-webp75",material_id:"506093422"},
+    {name:"222嗯嗯1",thumbnail:"https://stage.meitudata.com/public/creator/ed70a3c696c8e7b.jpg!thumb-w321-webp75",material_id:"50693244"},
+    {name:"抠图批量拼图",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/pA2S9lvNpMY4X3N.jpeg!thumb-w321-webp75",material_id:"506002368"},
+    {name:"滤镜流程11",thumbnail:"https://material-center-pre.meitudata.com/material/image/6194a57b5b9ef7678.jpg!thumb-w321-webp75",material_id:"506017292"},
+    {name:"月辉",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/wOXiBYpWgxA7ej5.jpeg!thumb-w321-webp75",material_id:"5060112313"},
+    {name:"旧-美食手绘1",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/0lZCW9BrDgMroLL.jpeg!thumb-w321-webp75",material_id:"5060002001"},
+    {name:"hsxTest11.8",thumbnail:"https://material-center-pre.meitudata.com/material/image/6189f29b48f165954.jpg!thumb-w321-webp75",material_id:"506530963"},
+    {name:"GT G",thumbnail:"http://xximg2.meitudata.com/Z9DCJpkB2l.jpeg!thumb-w321-webp75",material_id:"20085081215"},
+    {name:"自然",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/j4QUVvP9GPkJ4n3.jpeg!thumb-w321-webp75",material_id:"20076051317"},
+    {name:"自然",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/5JOi8o1nKlqXmb2.jpeg!thumb-w321-webp75",material_id:"20076051233"},
+    {name:"Room",thumbnail:"https://xximg1.meitudata.com/WYphm4QnOx.jpeg!thumb-w321-webp75",material_id:"20076052148"},
+    {name:"模糊",thumbnail:"https://xximg1.meitudata.com/qR1tJmaVZg.jpeg!thumb-w321-webp75",material_id:"20076052016"},
+    {name:"追光",thumbnail:"https://xximg1.meitudata.com/mbZHyl6E8Y.jpeg!thumb-w321-webp75",material_id:"20076051714"},
+    {name:"春樱",thumbnail:"https://xximg1.meitudata.com/OX8i0kV1vG.jpeg!thumb-w321-webp75",material_id:"20076051634"},
+    {name:"夏橙",thumbnail:"https://xximg1.meitudata.com/YkVH1doZzv.jpeg!thumb-w321-webp75",material_id:"20076051635"},
+    {name:"梨花白",thumbnail:"https://xximg1.meitudata.com/bBLUvgJmoK.jpeg!thumb-w321-webp75",material_id:"20076051633"},
+    {name:"青柠",thumbnail:"https://xximg1.meitudata.com/gn9SOPYgQ6.jpeg!thumb-w321-webp75",material_id:"20076051733"},
+    {name:"西柚",thumbnail:"https://xximg1.meitudata.com/WXgfmKYZJv.jpeg!thumb-w321-webp75",material_id:"20076051628"},
+    {name:"恋人未满",thumbnail:"https://xximg1.meitudata.com/3YVfO0zBXJ.jpeg!thumb-w321-webp75",material_id:"20076051075"},
+    {name:"春樱",thumbnail:"https://xximg1.meitudata.com/k5DIOxgJpN.jpeg!thumb-w321-webp75",material_id:"20076291634"},
+    {name:"自然",thumbnail:"https://xximg1.meitudata.com/nBqUoGPX5Q.jpeg!thumb-w321-webp75",material_id:"20076051907"},
+    {name:"Forest",thumbnail:"https://xximg1.meitudata.com/V2jTkoYa96.jpeg!thumb-w321-webp75",material_id:"20106191835"},
+    {name:"高级灰Ⅱ",thumbnail:"https://xximg1.meitudata.com/LEKSJO5x8V.jpeg!thumb-w321-webp75",material_id:"20076051853"},
+    {name:"晴空",thumbnail:"https://xximg1.meitudata.com/LEKSJO5VaL.jpeg!thumb-w321-webp75",material_id:"20076052027"},
+    {name:"白兔糖",thumbnail:"https://xximg1.meitudata.com/k5DIOjzV9d.jpeg!thumb-w321-webp75",material_id:"2007605675"},
+    {name:"测",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/zwdte8R2e5KMMmm.jpeg!thumb-w321-webp75",material_id:"506000000"},
+    {name:"素颜",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/DyOHJNKyxWGbpeg.jpeg!thumb-w321-webp75",material_id:"20076052222"},
+    {name:"奶杏",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/3YVf1DOlq5jVlLe.jpeg!thumb-w321-webp75",material_id:"20076052221"},
+    {name:"蜜桃",thumbnail:"https://xximg1.meitudata.com/9QktygQgDn.jpeg!thumb-w321-webp75",material_id:"20076291732"},
+    {name:"青柠",thumbnail:"https://xximg1.meitudata.com/edzuvqDqwJ.jpeg!thumb-w321-webp75",material_id:"20076291733"},
+    {name:"西柚",thumbnail:"https://xximg1.meitudata.com/kGVuOxgxm5.jpeg!thumb-w321-webp75",material_id:"20076291628"},
+    {name:"牛油果",thumbnail:"https://xximg1.meitudata.com/1zXU1zyp3V.jpeg!thumb-w321-webp75",material_id:"20076292053"},
+    {name:"胶片字体1",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/wkQsv9BqOlk01j6.jpeg!thumb-w321-webp75",material_id:"506001241"},
+    {name:"503cw",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/YadfjNxP2ng3b0v.jpeg!thumb-w321-webp75",material_id:"506001236"},
+    {name:"爱心",thumbnail:"https://xximg1.meitudata.com/8D5Fwm9VLE.jpeg!thumb-w321-webp75",material_id:"20079971111"},
+    {name:"",thumbnail:"https://xximg1.meitudata.com/xkbsQOl9bX.jpeg!thumb-w321-webp75",material_id:"20079971995"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/YadfjWvZDeK8Pjb.jpeg!thumb-w321-webp75",material_id:"200799700078"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/54Kf8ZNP6YkBdnZ.jpeg!thumb-w321-webp75",material_id:"200799700077"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/20dfEzWa33vvbEJ.jpeg!thumb-w321-webp75",material_id:"200799700076"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/L3xFj5Y1l5qyO8k.jpeg!thumb-w321-webp75",material_id:"200799700075"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/qp4IRaqOvg208Vx.jpeg!thumb-w321-webp75",material_id:"200799700074"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/opkIW3BY6gJ6DP8.jpeg!thumb-w321-webp75",material_id:"200799700073"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/39nT1zN9v2p5BBy.jpeg!thumb-w321-webp75",material_id:"200799700072"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/Kz3fp1lekbGJY52.jpeg!thumb-w321-webp75",material_id:"200799700071"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/20dfEz9V3L935WD.jpeg!thumb-w321-webp75",material_id:"200799700070"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/R3GFJpZEd0pD5xY.jpeg!thumb-w321-webp75",material_id:"200799700069"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/54Kf8o3GlPJgW3Q.jpeg!thumb-w321-webp75",material_id:"200799700067"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/DaofJN9Gzxd8O5a.jpeg!thumb-w321-webp75",material_id:"200799700063"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/qp4IRN9PaZ1Penl.jpeg!thumb-w321-webp75",material_id:"200799700055"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/vkRsK6OxQ60gkJR.jpeg!thumb-w321-webp75",material_id:"200799700045"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/1ZLIm5ExEmVpobj.jpeg!thumb-w321-webp75",material_id:"200799700053"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/wkQsvL9y9XX1ZL8.jpeg!thumb-w321-webp75",material_id:"200799700054"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/BmDFqnXBXod6LKx.jpeg!thumb-w321-webp75",material_id:"200799700061"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/39nT1DmnGNQp8Gy.jpeg!thumb-w321-webp75",material_id:"200799700060"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/k2ou2a6aPWDR5nX.jpeg!thumb-w321-webp75",material_id:"200799700058"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/Q3bFyBOB1DxY6Dx.jpeg!thumb-w321-webp75",material_id:"200799700059"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/O3RFRL3v0Jpd0Wk.jpeg!thumb-w321-webp75",material_id:"200799700057"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/BmDFqnWadYGzXxP.jpeg!thumb-w321-webp75",material_id:"20079970049"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/Q3bFyBQ8JLx2Wvb.jpeg!thumb-w321-webp75",material_id:"20079970051"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/vkRsK6eLxeGj9w8.jpeg!thumb-w321-webp75",material_id:"200799700041"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/gkmsKBGp36w8wEO.jpeg!thumb-w321-webp75",material_id:"200799700056"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/ee9h6Qk4Y1wJpoY.jpeg!thumb-w321-webp75",material_id:"200799700047"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/jeyhVvLBDqo64yy.jpeg!thumb-w321-webp75",material_id:"20079970050"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/DaofJNY4pKnpQxa.jpeg!thumb-w321-webp75",material_id:"20079970053"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/99ETG9z6NzjmBwQ.jpeg!thumb-w321-webp75",material_id:"200799700046"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/ee9h6QD4PGmGBGa.jpeg!thumb-w321-webp75",material_id:"200799700042"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/BmDFqnwGbGvXPq3.png!thumb-w321-webp75",material_id:"200799700038"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/VwJigjRRPoRz8Xl.png!thumb-w321-webp75",material_id:"200799700039"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/54Kf8BmB9dyqY2k.jpeg!thumb-w321-webp75",material_id:"200799700027"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/ze1hXRywlnq18zj.jpeg!thumb-w321-webp75",material_id:"200799700025"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/xkbs1eVvOEB46wE.jpeg!thumb-w321-webp75",material_id:"200799700032"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/bxgsY85V4j5W3PY.jpeg!thumb-w321-webp75",material_id:"200799700034"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/54Kf8oxaX5kVpN6.jpeg!thumb-w321-webp75",material_id:"200799700033"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/EVvIj5VjGJyBNLO.png!thumb-w321-webp75",material_id:"200799700031"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/Q3bFyJ2yqXlmJJz.png!thumb-w321-webp75",material_id:"200799700030"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/1ZLImgemPooxWqv.jpeg!thumb-w321-webp75",material_id:"200799700024"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8D5FJjdJmO4VRbg.jpeg!thumb-w321-webp75",material_id:"200799700029"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/EVvIj595ekZpN3X.jpeg!thumb-w321-webp75",material_id:"200799700023"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/vkRsKg3OONyzZLb.png!thumb-w321-webp75",material_id:"200799700021"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/496TndEvWqJynwo.png!thumb-w321-webp75",material_id:"200799700019"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8D5FJjkBmkNlpkd.png!thumb-w321-webp75",material_id:"200799700020"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/WPWF3ODzRYPzo3K.jpeg!thumb-w321-webp75",material_id:"200799700018"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/PVQIdBDb3b998XB.jpeg!thumb-w321-webp75",material_id:"200799700017"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/99ETGwpo0Lv8dEZ.jpeg!thumb-w321-webp75",material_id:"200799700008"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/gkmsKQKGPVm3j8E.jpeg!thumb-w321-webp75",material_id:"200799700012"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8D5FJjJJ310zYBQ.jpeg!thumb-w321-webp75",material_id:"200799700010"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/lpvIjojjEYRbwWL.jpeg!thumb-w321-webp75",material_id:"200799700011"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/xkbs1e1ee83wlP0.jpeg!thumb-w321-webp75",material_id:"200799700014"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/DaofJWJnxRe3W09.jpeg!thumb-w321-webp75",material_id:"200799700015"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/XRLI50Bdlg9joZ2.png!thumb-w321-webp75",material_id:"200799700009"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/99ETGwkej4aqVjo.png!thumb-w321-webp75",material_id:"200799700016"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/VwJikyzE29.png!thumb-w321-webp75",material_id:"200799700000"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/ze1h5O9oKb.jpeg!thumb-w321-webp75",material_id:"200799700002"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/a3wFLXLnx2.jpeg!thumb-w321-webp75",material_id:"200799700001"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/6DqFRdykvn.png!thumb-w321-webp75",material_id:"200799700004"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/1ZLI1pjZgP.jpeg!thumb-w321-webp75",material_id:"200799700003"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/opkIn0ZXgW.jpeg!thumb-w321-webp75",material_id:"200799700006"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/ze1h5VwNLD.jpeg!thumb-w321-webp75",material_id:"20079976666"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/mlahykPGYd.jpeg!thumb-w321-webp75",material_id:"2007997666"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/XRLIPQX4qj.jpeg!thumb-w321-webp75",material_id:"20079972"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/k2ouOWwP2b.jpeg!thumb-w321-webp75",material_id:"20079971"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/xkbsQP2W5z.jpeg!thumb-w321-webp75",material_id:"20079971234"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/EVvIjl5B2q1P3Ld.jpeg!thumb-w321-webp75",material_id:"200799700062"},
+    {name:"新年静物",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8D5FJzenN2v99KG.jpeg!thumb-w321-webp75",material_id:"200799700079"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/20dfEzd1lndjOwg.jpeg!thumb-w321-webp75",material_id:"20079972282"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/nplIyLnnEm9o41W.png!thumb-w321-webp75",material_id:"200799700022"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/ze1h5ONoeg.png!thumb-w321-webp75",material_id:"200799700007"},
+    {name:"原生",thumbnail:"https://xximg1.meitudata.com/XeVHPQpbgR.jpeg!thumb-w321-webp75",material_id:"20079930000"},
+    {name:"减龄2",thumbnail:"https://xximg1.meitudata.com/GPoUPW5m8n.jpeg!thumb-w321-webp75",material_id:"20079930003"},
+    {name:"质感",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/nBJcyLgw0QZmvB2.png!thumb-w321-webp75",material_id:"20079932147"},
+    {name:"眼睑下至",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/1zVH1xKebW.jpeg!thumb-w321-webp75",material_id:"20079930007"},
+    {name:"原生2",thumbnail:"https://xximg1.meitudata.com/aOWsLZ14vp.jpeg!thumb-w321-webp75",material_id:"20079930001"},
+    {name:"减龄2优化",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/5JOiDRnL9l.jpeg!thumb-w321-webp75",material_id:"20079930070"},
+    {name:"DIOR",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/5JOi8BVv09mRyGK.jpeg!thumb-w321-webp75",material_id:"20079930075"},
+    {name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/N3OFqdNzda.jpeg!thumb-w321-webp75",material_id:"20079932157"},
+    {name:"bling",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/9nzUy0eQGq.png!thumb-w321-webp75",material_id:"20079932158"},
+    {name:"色散光",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/JdaUWkbq92.png!thumb-w321-webp75",material_id:"20079932154"},
+    {name:"闪光夏日",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/bBLUvkadVZ.jpeg!thumb-w321-webp75",material_id:"20079932153"},
+    {name:"闪光女团",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/qR1tJPGR0j.jpeg!thumb-w321-webp75",material_id:"20079930053"},
+    {name:"闪光少女",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/eqOHv3wnlD.jpeg!thumb-w321-webp75",material_id:"20079932152"},
+    {name:"bling01",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/EPdULXNn66.jpeg!thumb-w321-webp75",material_id:"20079930010"},
+    {name:"bling02",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/6kOHR9OGvP.jpeg!thumb-w321-webp75",material_id:"20079930011"},
+    {name:"bling03",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/eqOHv38nPz.jpeg!thumb-w321-webp75",material_id:"20079930012"},
+    {name:"Disco6",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/RwXHmzP9Y0.jpeg!thumb-w321-webp75",material_id:"20079930009"},
+    {name:"Dream1",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/XeVHPQWGGZ.jpeg!thumb-w321-webp75",material_id:"20079930013"},
+    {name:"Hypno1",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/j4QUeORQE4.jpeg!thumb-w321-webp75",material_id:"20079930014"},
+    {name:"Stellar2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/5JOiDpKNRz.jpeg!thumb-w321-webp75",material_id:"20079930008"},
+    {name:"光1",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/OX8i06ZB9D.jpeg!thumb-w321-webp75",material_id:"20079930004"},
+    {name:"Prisma1",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/JdXHWkgq5D.jpeg!thumb-w321-webp75",material_id:"20079930017"},
+    {name:"Plastic1",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/V2jTkWZbP6.jpeg!thumb-w321-webp75",material_id:"20079930016"},
+    {name:"莫奈",thumbnail:"https://xximg1.meitudata.com/9nzUy0bwDV.png!thumb-w321-webp75",material_id:"20079932086"},
+    {name:"雾柔水光",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/JdaUWkEplJ.png!thumb-w321-webp75",material_id:"20079932146"},
+    {name:"muji",thumbnail:"https://xximg1.meitudata.com/LEasJNJplP.png!thumb-w321-webp75",material_id:"20079932148"},
+    {name:"相机打光测试",thumbnail:"https://xximg1.meitudata.com/j4QUexO3K5.jpeg!thumb-w321-webp75",material_id:"20079932054"},
+    {name:"1222",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/3XwSOKRJjx.jpeg!thumb-w321-webp75",material_id:"20079931222"},
+    {name:"1333",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/EQYuL9LqvV.jpeg!thumb-w321-webp75",material_id:"20079931333"},
+    {name:"1999",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/VqVfkykO5y.jpeg!thumb-w321-webp75",material_id:"20079931999"},
+    {name:"1666",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/1pgI1plVVv.jpeg!thumb-w321-webp75",material_id:"20079931666"},
+    {name:"1888",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/OJbF06VvmK.jpeg!thumb-w321-webp75",material_id:"20079931888"},
+    {name:"1888",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/ke8UOWwVz6.jpeg!thumb-w321-webp75",material_id:"20079931777"},
+    {name:"2057",thumbnail:"https://xximg1.meitudata.com/3YVfOVKVmm.jpeg!thumb-w321-webp75",material_id:"20079932057"},
+    {name:"五一鱼块",thumbnail:"https://xximg1.meitudata.com/39nTOVegOn.jpeg!thumb-w321-webp75",material_id:"20079932056"},
+    {name:"五一",thumbnail:"https://xximg1.meitudata.com/bBZcvykbxP.png!thumb-w321-webp75",material_id:"20079932053"},
+    {name:"bling04",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/OX8i06XB3L.jpeg!thumb-w321-webp75",material_id:"20079930015"},
+    {name:"元旦",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/mbZHO6bOgR5YgdB.jpeg!thumb-w321-webp75",material_id:"20106401993"},
+    {name:"瞬间",thumbnail:"https://xximg1.meitudata.com/y59Ib9JKjm.jpeg!thumb-w321-webp75",material_id:"20106401997"},
+    {name:"新专辑轰顶",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/BR7fMkae0elL9DK.png!thumb-w321-webp75",material_id:"506093294"},
+    {name:"新素材",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/LL8SozrWaMVRP5L.png!thumb-w321-webp75",material_id:"506093299"},
+    {name:"素材不在功能页",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/69MiA9JxOErJvvP.png!thumb-w321-webp75",material_id:"506093238"},
+    {name:"我被禁用了😄我被禁用了😄",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/D18Iz3ZaAPm0za3.png!thumb-w321-webp75",material_id:"506093239"},
+    {name:"低版本不可见",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/757SWMrAkzKAorX.png!thumb-w321-webp75",material_id:"506093243"},
+    {name:"3d立体弹窗",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/k4gtA430gyk3Wx9.png!thumb-w321-webp75",material_id:"506093241"},
+    {name:"加州",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/RKgUJnKn126zbGG.jpeg!thumb-w321-webp75",material_id:"50602339"},
+    {name:"爱心光",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/j4GcVXWgv200k0D.jpeg!thumb-w321-webp75",material_id:"506002288"},
+    {name:"2053太空漫游",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/wgNUven5XxgKmG4.jpeg!thumb-w321-webp75",material_id:"20096492276"},
+    {name:"CCD",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/XepU5b3WG3BDJNp.jpeg!thumb-w321-webp75",material_id:"20096492265"},
+    {name:"IMAX胶片",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/bBZcYlQVDNVde5Y.jpeg!thumb-w321-webp75",material_id:"20096492254"},
+    {name:"皮囊之下",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/p0LTO938OKJLV2k.jpeg!thumb-w321-webp75",material_id:"506002350"},
+    {name:"号手就位",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/J34FBw2bEwzGbWp.jpeg!thumb-w321-webp75",material_id:"506002317"},
+    {name:"海绵3",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/26guLmK1p0M13Zr.jpeg!thumb-w321-webp75",material_id:"506010277"},
+    {name:"海绵4",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/KgaiJr4o77waN4d.jpeg!thumb-w321-webp75",material_id:"506010276"},
+    {name:"海绵1",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/71MfrYOoEDyKLJA.jpeg!thumb-w321-webp75",material_id:"506010279"},
+    {name:"TR2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/k51F2wNOkqQgBjX.jpeg!thumb-w321-webp75",material_id:"506002345"},
+    {name:"TR3",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/JdaUB94WJJqQlwK.jpeg!thumb-w321-webp75",material_id:"506002344"},
+    {name:"TR4",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/5JeH8WzDLm1NmPy.jpeg!thumb-w321-webp75",material_id:"506002347"},
+    {name:"TR5",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/lkjUjGvk4VORqlR.jpeg!thumb-w321-webp75",material_id:"506002343"},
+    {name:"TR6",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/k51F2wNOLjj94dK.jpeg!thumb-w321-webp75",material_id:"506002346"},
+    {name:"乌布",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/V2xig11N0vQLpxm.jpeg!thumb-w321-webp75",material_id:"506002333"},
+    {name:"微缩世界",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/oJQiWgqo5kodE1B.jpeg!thumb-w321-webp75",material_id:"506002298"},
+    {name:"微缩世界Ⅱ",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/N8RHzP6aP44Xex6.jpeg!thumb-w321-webp75",material_id:"506002299"},
+    {name:"旅程",thumbnail:"https://xximg1.meitudata.com/V2jTkEY8Y9.jpeg!thumb-w321-webp75",material_id:"20086101254"},
+    {name:"旅程",thumbnail:"https://xximg1.meitudata.com/GPoUPwOj1b.jpeg!thumb-w321-webp75",material_id:"20086101315"},
+    {name:"且听风吟",thumbnail:"https://xximg1.meitudata.com/Z3VspeGOy3.jpeg!thumb-w321-webp75",material_id:"2008610635"},
+    {name:"Sky",thumbnail:"https://xximg1.meitudata.com/p0GcZPbnV0.jpeg!thumb-w321-webp75",material_id:"20086101612"},
+    {name:"清新蓝",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/BbWiqXBp8X869e9.jpeg!thumb-w321-webp75",material_id:"20086162162"},
+    {name:"男友力",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/6PocqE9aB8nZgOl.jpeg!thumb-w321-webp75",material_id:"20086161259"},
+    {name:"男友力",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8boiJnm9e69J3GB.jpeg!thumb-w321-webp75",material_id:"20086161256"},
+    {name:"男友力",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/oeGiWgmVL06ppzo.jpeg!thumb-w321-webp75",material_id:"20086161469"},
+    {name:"chiffon",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/JdXHB6PXY9dzmjl.jpeg!thumb-w321-webp75",material_id:"2008607975"},
+    {name:"新年限定",thumbnail:"https://xximg1.meitudata.com/mlahymLEBk.jpeg!thumb-w321-webp75",material_id:"20086072015"},
+    {name:"新春食堂",thumbnail:"https://xximg1.meitudata.com/dDpFaD19J9.jpeg!thumb-w321-webp75",material_id:"20086071687"},
+    {name:"围炉",thumbnail:"https://xximg1.meitudata.com/jo2UegGjqj.jpeg!thumb-w321-webp75",material_id:"20086071688"},
+    {name:"橘子汽水",thumbnail:"https://xximg1.meitudata.com/voWUlvO8Dd.jpeg!thumb-w321-webp75",material_id:"2008607571"},
+    {name:"舒芙蕾",thumbnail:"https://xximg1.meitudata.com/xmdFQwl5J0.jpeg!thumb-w321-webp75",material_id:"2008607569"},
+    {name:"野Ⅰ",thumbnail:"https://xximg1.meitudata.com/6KwCRlbG6g.jpeg!thumb-w321-webp75",material_id:"20086070001"},
+    {name:"野餐Ⅱ",thumbnail:"https://xximg1.meitudata.com/Nzjuq2XDGQ.jpeg!thumb-w321-webp75",material_id:"20086070002"},
+    {name:"食欲",thumbnail:"https://xximg1.meitudata.com/jo2UegGzVl.jpeg!thumb-w321-webp75",material_id:"20086071585"},
+    {name:"食欲",thumbnail:"https://xximg1.meitudata.com/0J6fWJbYW8.jpeg!thumb-w321-webp75",material_id:"20086071587"},
+    {name:"橘子汽水",thumbnail:"https://xximg1.meitudata.com/bz0uvoO5Po.jpeg!thumb-w321-webp75",material_id:"20086071908"},
+    {name:"",thumbnail:"https://xximg1.meitudata.com/xmdFQwgNGx.png!thumb-w321-webp75",material_id:"2008607014"},
+    {name:"粉花面包",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/gkmsKBakKNO6ynd.jpeg!thumb-w321-webp75",material_id:"2008607973"},
+    {name:"",thumbnail:"https://xximg1.meitudata.com/RzLumonEvG.png!thumb-w321-webp75",material_id:"2008607015"},
+    {name:"Brunch",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/V2jTgxyR4xG9k4d.jpeg!thumb-w321-webp75",material_id:"20086072197"},
+    {name:"vista200",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/LJwUjvN4awZDWOw.jpeg!thumb-w321-webp75",material_id:"506002301"},
+    {name:"胶片时光",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/kBwi28Wm6y698oy.jpeg!thumb-w321-webp75",material_id:"20086171381"},
+    {name:"胶片时光",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8boiJnmYZ8NbvJ6.jpeg!thumb-w321-webp75",material_id:"20086171339"},
+    {name:"胶片时光",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/vEdtKOx0n2gEyBg.jpeg!thumb-w321-webp75",material_id:"20086171336"},
+    {name:"菲林日记",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/OdpiRJVedvxlR4m.jpeg!thumb-w321-webp75",material_id:"20096221571"},
+    {name:"菲林日记",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/kBwi28w05RB11de.jpeg!thumb-w321-webp75",material_id:"20096221570"},
+    {name:"菲林日记",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/KBPipZwDElPR1bl.jpeg!thumb-w321-webp75",material_id:"20096221783"},
+    {name:"菲林日记",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/2bkiEXqkWmBZzjL.jpeg!thumb-w321-webp75",material_id:"20096221781"},
+    {name:"菲林日记",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/PnkTd0zBvKKRYb0.jpeg!thumb-w321-webp75",material_id:"20096221780"},
+    {name:"Outdoors",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/NL9HzPdl9WLnlq9.jpeg!thumb-w321-webp75",material_id:"20086172023"},
+    {name:"蒸汽波",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/DyjUJpgEgyP8nDL.jpeg!thumb-w321-webp75",material_id:"506002182"},
+    {name:"落日",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/V2jTgj1akYWmEvP.jpeg!thumb-w321-webp75",material_id:"20106112264"},
+    {name:"音浪",thumbnail:"http://xximg2.meitudata.com/VXgfk8zEJ3.jpeg!thumb-w321-webp75",material_id:"20106111100"},
+    {name:"毕业季",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/y56Fb5qaXq.jpeg!thumb-w321-webp75",material_id:"20076121254"},
+    {name:"游乐园",thumbnail:"https://xximg1.meitudata.com/N8eUq2XE0E.jpeg!thumb-w321-webp75",material_id:"20076091595"},
+    {name:"粉黛",thumbnail:"https://xximg1.meitudata.com/wgNU3GlNRj.jpeg!thumb-w321-webp75",material_id:"20076091618"},
+    {name:"游乐园",thumbnail:"https://xximg1.meitudata.com/Z3GfpjWOKV.jpeg!thumb-w321-webp75",material_id:"20076091596"},
+    {name:"水彩画",thumbnail:"https://xximg1.meitudata.com/eqOHvqo0ej.jpeg!thumb-w321-webp75",material_id:"20106041764"},
+    {name:"钢笔淡彩",thumbnail:"https://xximg1.meitudata.com/V2jTkopPGQ.jpeg!thumb-w321-webp75",material_id:"20106041765"},
+    {name:"质感",thumbnail:"https://xximg1.meitudata.com/XepUPNP4WP.png!thumb-w321-webp75",material_id:"20076061608"},
+    {name:"质感",thumbnail:"https://xximg1.meitudata.com/9nzUydyWeB.png!thumb-w321-webp75",material_id:"20076061589"},
+    {name:"质感",thumbnail:"http://xximg2.meitudata.com/yObUbokjlb.jpeg!thumb-w321-webp75",material_id:"20076061609"},
+    {name:"荼白",thumbnail:"https://xximg1.meitudata.com/6kOHRW8WGD.jpeg!thumb-w321-webp75",material_id:"20076061859"}
+  ]
+
+  public totalCount(): number {
+    return this.dataArray.length;
+  }
+
+  public getData(index: number): Material | undefined {
+    return this.dataArray[index];
+  }
+
+  public addData(index: number, data: Material): void {
+    this.dataArray.splice(index, 0, data);
+    this.notifyDataAdd(index);
+  }
+
+  public pushData(data: Material): void {
+    this.dataArray.push(data);
+    this.notifyDataAdd(this.dataArray.length - 1);
+  }
+}
--- a/entry/src/main/ets/pages/multiHspTestPage.ets
+++ b/entry/src/main/ets/pages/multiHspTestPage.ets
@ -0,0 +1,60 @@
+/*
+ * 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 { ImageKnifeComponent, ImageKnifeOption, FileUtils, ImageKnifeGlobal, GetRes1 } from '@ohos/libraryimageknife'
+import common from '@ohos.app.ability.common'
+import { GetRes2 } from '@ohos/sharedlibrary2'
+
+@Entry
+@Component
+struct Index {
+  @State imageOption1: ImageKnifeOption = {
+    loadSrc: $r('app.media.icon'),
+  }
+  @State imageOption2: ImageKnifeOption = {
+    loadSrc: $r('app.media.icon'),
+  }
+
+  build() {
+    Scroll() {
+      Column() {
+        Button('点击HSP1主图，HSP2占位,无context').onClick(() => {
+          let mainRes = GetRes1.getSample1();
+          let placeholderRes = GetRes2.getSample2();
+          this.imageOption1 = {
+            loadSrc:mainRes,
+            placeholderSrc:placeholderRes
+          }
+        })
+        ImageKnifeComponent({ imageKnifeOption: this.imageOption1 }).width(300).height(300).backgroundColor(Color.Pink)
+        Button('点击HSP1主图，HSP2占位,有context ').onClick(() => {
+          let mainRes = GetRes1.getSample1();
+          let placeholderRes = GetRes2.getSample2();
+          this.imageOption2 = {
+            loadSrc:mainRes,
+            placeholderSrc:placeholderRes,
+            context:getContext(this) as common.UIAbilityContext
+          }
+        })
+        ImageKnifeComponent({ imageKnifeOption: this.imageOption2 }).width(300).height(300).backgroundColor(Color.Pink)
+
+
+      }.width('100%')
+
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
--- a/entry/src/main/ets/pages/photosPausedResumedPage.ets
+++ b/entry/src/main/ets/pages/photosPausedResumedPage.ets
@ -0,0 +1,92 @@
+/*
+ * Copyright (C) 2021 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, ScaleType,ImageKnife} from '@ohos/libraryimageknife'
+import {ImageKnifeOption} from '@ohos/libraryimageknife'
+import {ImageKnifeGlobal} from '@ohos/libraryimageknife'
+import {RotateImageTransformation} from '@ohos/libraryimageknife'
+import {Material} from './model/Material'
+import {TestDataSource} from './model/TestDataSource'
+
+
+@Entry
+@Component
+struct photosPausedResumedPage {
+ private data: TestDataSource = new TestDataSource();
+
+ private elementScroller: Scroller = new Scroller()
+
+  build() {
+   Column() {
+
+    Button('点击暂停加载')
+     .margin({top:10,bottom:5})
+     .onClick(()=>{
+      let imageKnife:ImageKnife|undefined = ImageKnifeGlobal.getInstance().getImageKnife();
+      if(imageKnife!= undefined){
+       imageKnife.pauseRequests()
+      }
+     })
+
+    Button('点击重新加载')
+     .margin({top:10,bottom:5})
+     .onClick(()=>{
+      let imageKnife:ImageKnife|undefined = ImageKnifeGlobal.getInstance().getImageKnife();
+      if(imageKnife!= undefined){
+       imageKnife.resumeRequests()
+      }
+     })
+
+
+    List({ space: 20, scroller: this.elementScroller }) {
+     LazyForEach(this.data, (item: Material, index) => {
+      ListItem() {
+       Column() {
+        Stack({ alignContent: Alignment.BottomEnd }) {
+         // 滤镜图片
+         ImageKnifeComponent({ imageKnifeOption: {
+          loadSrc: item.thumbnail,
+          mainScaleType: ScaleType.FIT_XY,
+         } })
+        }
+        .width(56).height(56)
+        //滤镜标题
+        Text(item.name)
+         .fontSize(10)
+         .maxLines(1)
+         .fontColor(Color.White)
+         .textAlign(TextAlign.Center)
+         .layoutWeight(1)
+         .width('100%')
+         .backgroundColor(Color.Orange)
+       }
+       .width(56)
+       .height(72)
+       .clip(true)
+       .borderRadius(4)
+      }
+     }, (item: Material) => item.material_id)
+    }
+    .listDirection(Axis.Horizontal)
+    .width('100%')
+    .height(72)
+
+   }
+  }
+
+
+
+}
+
+
--- a/entry/src/main/ets/pages/photosPausedResumedPage2.ets
+++ b/entry/src/main/ets/pages/photosPausedResumedPage2.ets
@ -0,0 +1,104 @@
+/*
+ * Copyright (C) 2021 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, ScaleType,ImageKnife} from '@ohos/libraryimageknife'
+import {ImageKnifeOption} from '@ohos/libraryimageknife'
+import {ImageKnifeGlobal} from '@ohos/libraryimageknife'
+import {RotateImageTransformation} from '@ohos/libraryimageknife'
+import {Material} from './model/Material'
+import {TestDataSource} from './model/TestDataSource'
+import {DiskLruCache} from '@ohos/disklrucache'
+import ArkWorker from '@ohos.worker'
+import Prompt from '@system.prompt'
+@Entry
+@Component
+struct photosPausedResumedPage {
+ private data: TestDataSource = new TestDataSource();
+
+ private elementScroller: Scroller = new Scroller()
+
+  build() {
+   Column() {
+
+    Button('这个List通过监听： 开始滑动,停止加载图片;滑动结束,恢复加载图片')
+     .margin({top:10,bottom:5})
+     .onClick(()=>{
+
+     })
+
+
+
+
+    List({ space: 20, scroller: this.elementScroller }) {
+     LazyForEach(this.data, (item: Material, index) => {
+      ListItem() {
+       Column() {
+        Stack({ alignContent: Alignment.BottomEnd }) {
+         // 滤镜图片
+         ImageKnifeComponent({ imageKnifeOption: {
+          loadSrc: item.thumbnail,
+          mainScaleType: ScaleType.FIT_XY,
+         } })
+        }
+        .width(56).height(56)
+        //滤镜标题
+        Text(item.name)
+         .fontSize(10)
+         .maxLines(1)
+         .fontColor(Color.White)
+         .textAlign(TextAlign.Center)
+         .layoutWeight(1)
+         .width('100%')
+         .backgroundColor(Color.Orange)
+       }
+       .width(56)
+       .height(72)
+       .clip(true)
+       .borderRadius(4)
+      }
+     }, (item: Material) => item.material_id)
+    }
+    .onScrollStart(()=>{
+     let imageKnife:ImageKnife|undefined = ImageKnifeGlobal.getInstance().getImageKnife();
+     if(imageKnife!= undefined){
+      imageKnife.pauseRequests()
+     }
+    })
+    .onScrollStop(()=>{
+     let imageKnife:ImageKnife|undefined = ImageKnifeGlobal.getInstance().getImageKnife();
+     if(imageKnife!= undefined){
+      imageKnife.resumeRequests()
+     }
+    })
+    .listDirection(Axis.Horizontal)
+    .width('100%')
+    .height(72)
+
+   }
+  }
+
+
+ aboutToDisappear(){
+  // 如果用户滑动过程中就退出了页面我们需要恢复图片加载能力
+  let imageKnife:ImageKnife|undefined = ImageKnifeGlobal.getInstance().getImageKnife();
+  if(imageKnife!= undefined){
+   imageKnife.resumeRequests()
+  }
+ }
+
+
+
+}
+
+
--- a/entry/src/main/ets/pages/pngjTestCasePage.ets
+++ b/entry/src/main/ets/pages/pngjTestCasePage.ets
@ -0,0 +1,257 @@
+/*
+ * Copyright (C) 2021 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 { Pngj } from '@ohos/libraryimageknife'
+import resourceManager from '@ohos.resourceManager';
+import { FileUtils,ImageKnifeGlobal } from '@ohos/libraryimageknife'
+import { BusinessError } from '@ohos.base'
+import common from '@ohos.app.ability.common';
+interface WorkerType {
+  type: string
+  name: string
+}
+@Entry
+@Component
+struct PngjTestCasePage {
+  pngSource1?: ArrayBuffer = undefined;
+  pngSource2?: ArrayBuffer = undefined;
+  pngSource3?: ArrayBuffer = undefined;
+  pngSource4?: ArrayBuffer = undefined;
+  pngdecodeRun1: boolean = false;
+  pngdecodeRun2: boolean = false;
+  pngdecodeRun3: boolean = false;
+  pngdecodeRun4: boolean = false;
+  rootFolder: string = '';
+  @State hint1: string = 'readPngImageInfo内容展示'
+  @State hint2: string = 'readPngImage内容展示'
+  @State hint3: string = 'writePngWithString内容展示'
+  @State hint4: string = 'writePngWithString内容展示'
+  @State hint5: string = '测试readMetadata'
+  @State hint6: string = '测试writeMetadata'
+  @State hint7: string = '首先点击获取PNG图片buffer'
+  @State hint8: string = '首先点击获取PNG图片buffer'
+  @State hint9: string = '首先点击获取PNG图片buffer'
+  @State hint10: string = '首先点击获取PNG图片buffer'
+
+  build() {
+    Scroll() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Text('pngj接口测试列表').fontSize(20)
+
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+
+          Button(this.hint7).fontSize(30)
+            .onClick(() => {
+              this.rootFolder = (ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).filesDir as string;
+             ((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext)
+                .resourceManager as resourceManager.ResourceManager)
+                .getMediaContent($r('app.media.pngSample').id)
+                .then(data => {
+                  this.pngSource1 = FileUtils.getInstance().uint8ArrayToBuffer(data);
+                  this.hint7 = '获取buffer成功，可以测试'
+                })
+                .catch( (err:BusinessError) => {
+                  console.log('点击获取Png图片buffer err=' + err)
+                })
+            })
+          Button('测试readPng')
+            .onClick(() => {
+
+                if (this.pngSource1!=undefined) {
+                  if (!this.pngdecodeRun1) {
+                    this.pngdecodeRun1 = true;
+                  let pngj = new Pngj();
+                  pngj.readPngImageInfo(this.pngSource1,{pngCallback: (sender, value) => {
+                    this.hint1 = JSON.stringify(value);
+                    this.pngdecodeRun1 = false;
+                  }})
+
+                  } else {
+                    this.hint7 = '已经在执行了,请稍等'
+                  }
+                } else {
+                  this.hint7 = '请先点击此处获取buffer'
+                }
+            }).margin({ top: 5, left: 10 })
+
+
+        }.width('100%')
+        .height(60).backgroundColor(Color.Pink)
+
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          Button(this.hint8).fontSize(30)
+            .onClick(() => {
+
+
+
+             this.rootFolder = (ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).filesDir as string;
+             ((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext)
+                .resourceManager as resourceManager.ResourceManager)
+                .getMediaContent($r('app.media.pngSample').id)
+
+                .then(data => {
+                  this.pngSource2 = FileUtils.getInstance().uint8ArrayToBuffer(data);
+                  this.hint8 = '获取buffer成功，可以测试'
+                })
+                .catch((err:BusinessError) => {
+                  console.log('点击获取Png图片buffer err=' + err)
+                })
+            })
+          Button('readPngAsync')
+            .onClick(() => {
+
+                if (this.pngSource2!=undefined) {
+                  if (!this.pngdecodeRun2) {
+                    this.pngdecodeRun2 = true;
+                  let pngj = new Pngj();
+                  let png_worker: WorkerType =  {
+                    type: 'classic',
+                    name: 'readPngImageAsync'
+                  }
+                  pngj.readPngImageAsync(png_worker, this.pngSource2!, (value:ESObject) => {
+                    this.hint8 = '重新获取buffer才能测试'
+                    this.hint2 = 'img with=' + value.width + ' img height=' + value.height
+                    + ' img depth=' + value.depth + ' img ctype=' + value.ctype
+                    this.pngdecodeRun2 = false;
+                  })
+
+                  } else {
+                    this.hint8 = '已经在执行了,请稍等'
+                  }
+                } else {
+                  this.hint8 = '请先点击此处获取buffer'
+                }
+
+            }).margin({ top: 5, left: 10 })
+
+        }.width('100%')
+        .height(60).backgroundColor(Color.Pink)
+
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          Button(this.hint9).fontSize(30)
+            .onClick(() => {
+              this.rootFolder = (ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).filesDir as string;
+              ((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext)
+                .resourceManager as resourceManager.ResourceManager)
+                .getMediaContent($r('app.media.pngSample').id)
+                .then(data => {
+                  this.pngSource3 = FileUtils.getInstance().uint8ArrayToBuffer(data);
+                  this.hint9 = '获取buffer成功，可以测试'
+                })
+                .catch((err:BusinessError) => {
+                  console.log('点击获取Png图片buffer err=' + err)
+                })
+            })
+          Button('测试writePngWithString')
+            .onClick(() => {
+
+                if (this.pngSource3 != undefined) {
+                  if (!this.pngdecodeRun3) {
+                    this.pngdecodeRun3 = true;
+                  let pngj = new Pngj();
+                  let png_worker: WorkerType = {
+                    type: 'classic',
+                    name: 'writePngWithStringAsync'
+                  }
+                  pngj.writePngWithStringAsync(png_worker, this.pngSource3, ( value:ESObject) => {
+                    FileUtils.getInstance().createFileProcess(
+                      this.rootFolder + '/pngj',
+                      this.rootFolder + '/pngj/newPng.png',
+                      value)
+                    let png1 = new Uint8Array(value)
+                    this.hint3 = 'png写入后长度' + png1.byteLength + '目录文件：' + this.rootFolder + '/pngj/newPng.png' + '保存后使用2进制查看数据是否新增'
+                    this.pngdecodeRun3 = false;
+                  },'hello world')
+                  } else {
+                    this.hint9 = '已经在执行了,请稍等'
+                  }
+                } else {
+                  this.hint9 = '请先点击此处获取buffer'
+                }
+
+            }).margin({ top: 5, left: 10 })
+
+        }.width('100%')
+        .height(60).backgroundColor(Color.Pink)
+
+
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+
+          Button(this.hint10).fontSize(30)
+            .onClick(() => {
+              this.rootFolder = (ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).filesDir as string;
+              ((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext)
+                .resourceManager as resourceManager.ResourceManager)
+                .getMediaContent($r('app.media.pngSample').id)
+                .then(data => {
+                  this.pngSource4 = FileUtils.getInstance().uint8ArrayToBuffer(data);
+                  this.hint10 = '获取buffer成功，可以测试'
+                })
+                .catch((err:BusinessError) => {
+                  console.log('点击获取Png图片buffer err=' + err)
+                })
+            })
+          Button('writePng')
+            .onClick(()=>{
+              if (this.pngSource4 != undefined) {
+                if (!this.pngdecodeRun4) {
+                  this.pngdecodeRun4 = true;
+                  let pngj = new Pngj();
+                  let png_worker: WorkerType = {
+                    type: 'classic',
+                    name: 'writePngAsync'
+                  }
+                  pngj.writePngAsync(png_worker, this.pngSource4, ( value:ESObject) => {
+                    FileUtils.getInstance().createFileProcess(
+                      this.rootFolder + '/pngj',
+                      this.rootFolder + '/pngj/newPng2.png',
+                      value)
+                    let png2 = new Uint8Array(value)
+                    this.hint4 = 'png2未写入长度' + png2.byteLength + '目录文件：' + this.rootFolder + '/pngj/newPng2.png' + '保存后使用2进制查看数据是否新增'
+                    this.pngdecodeRun4 = false;
+                  })
+                } else {
+                  this.hint10 = '已经在执行了,请稍等'
+                }
+              } else {
+                this.hint10 = '请先点击此处获取buffer'
+              }
+            })
+            .margin({ top: 5, left: 10 })
+        }.width('100%')
+        .height(60).backgroundColor(Color.Pink)
+
+
+        Text(this.hint1)
+          .width('100%')
+          .height(120)
+        Text(this.hint2)
+          .width('100%')
+          .height(120)
+        Text(this.hint3)
+          .width('100%')
+          .height(120)
+        Text(this.hint4)
+          .width('100%')
+          .height(120)
+      }
+      .width('100%')
+      .height('100%')
+    }
+  }
+
+  typedArrayToBuffer(array: Uint8Array): ArrayBuffer {
+    return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset)
+  }
+}
--- a/entry/src/main/ets/pages/showErrorholderTestCasePage.ets
+++ b/entry/src/main/ets/pages/showErrorholderTestCasePage.ets
@ -0,0 +1,64 @@
+/*
+ * Copyright (C) 2021 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} from '@ohos/libraryimageknife'
+import {ImageKnifeOption} from '@ohos/libraryimageknife'
+import {RotateImageTransformation} from '@ohos/libraryimageknife'
+import {RoundedCornersTransformation} from '@ohos/libraryimageknife'
+
+@Entry
+@Component
+struct ShowErrorholderTestCasePage {
+  @State imageKnifeOption1: ImageKnifeOption =
+    {
+      loadSrc: "https://thirdwx.qlogo.cn/mmopen/xxxxx",
+
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+    };
+  @State imageKnifeOption: ImageKnifeOption =
+    {
+      loadSrc: "https://hbimg.huabanimg.com/xxxxx",
+
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+    };
+  @State imageKnifeOption3: ImageKnifeOption =
+    {
+      loadSrc: "https://hbimg.huabanimg.com/xxxxx",
+
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+    };
+  @State imageKnifeOption4: ImageKnifeOption =
+    {
+      loadSrc: "https://hbimg.huabanimg.com/xxxxx",
+
+      placeholderSrc: $r('app.media.icon_loading'),
+      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)
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(300).height(300)
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 }).width(300).height(300)
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 }).width(300).height(300)
+      }
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
--- a/entry/src/main/ets/pages/storageTestLruCache.ets
+++ b/entry/src/main/ets/pages/storageTestLruCache.ets
@ -0,0 +1,55 @@
+/*
+ * Copyright (C) 2021 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 {LruCache} from '@ohos/libraryimageknife'
+
+function getRandomInt(min:number, max:number):number {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
+}
+
+@Entry
+@Component
+struct StorageTestLruCache {
+  @State logText:string = "打印日志结果";
+  @State nowNumText:string = "显示输入的数据";
+  mLruCache:LruCache<string,string> = new LruCache(5);
+  build() {
+    Scroll() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Text("默认创建一个容量为5的LruCache")
+        .backgroundColor(Color.Blue)
+        Button("随机存入一个数字0-9")
+        .onClick(()=>{
+           let randomNum = getRandomInt(0,10);
+           this.nowNumText = ''+randomNum;
+            this.mLruCache.put(randomNum+"",randomNum+"")
+          this.logText = "日志结果:"+this.mLruCache.print();
+        }) .margin({top:20})
+
+        Button(this.nowNumText)
+          .margin({top:20})
+
+        Scroll() {
+          Text(this.logText).fontSize(15)
+        }.width(300).height(200).margin({top:20}).backgroundColor(Color.Pink)
+
+      }
+      .width('100%')
+      .height('100%')
+    }
+  }
+}
--- a/entry/src/main/ets/pages/svgTestCasePage.ets
+++ b/entry/src/main/ets/pages/svgTestCasePage.ets
@ -0,0 +1,81 @@
+/*
+ * Copyright (C) 2022 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 {SVGParseImpl} from '@ohos/libraryimageknife'
+import { ImageKnifeComponent } from '@ohos/libraryimageknife'
+import resourceManager from '@ohos.resourceManager';
+import {BusinessError} from '@ohos.base'
+import common from '@ohos.app.ability.common';
+@Entry
+@Component
+struct svgTestCasePage {
+
+  @State svgSamplePixelMap?: Resource = undefined
+  @State svgIconPixelMap?: Resource = undefined
+
+  build() {
+    Scroll() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Flex({direction:FlexDirection.Row}){
+          Button("加载SVG图片")
+            .onClick(()=>{
+              this.svgSamplePixelMap = $r('app.media.svgSample')
+            }).margin({left:5}).backgroundColor(Color.Blue)
+
+        }
+        .margin({top:15})
+
+        Text("下面为展示图片区域").margin({top:5})
+        Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
+          ImageKnifeComponent({imageKnifeOption:{
+            loadSrc:this.svgSamplePixelMap as Resource
+          }})
+            .width(400)
+            .height(400)
+            .backgroundColor(Color.Pink)
+        }.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)
+
+        Flex({direction:FlexDirection.Row}){
+          Button("加载SVG图片")
+            .onClick(()=>{
+              this.svgIconPixelMap = $r('app.media.iconsvg')
+            }).margin({left:5}).backgroundColor(Color.Blue)
+
+        }
+        .margin({top:15})
+
+        Text("下面为展示图片区域").margin({top:5})
+        Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
+          ImageKnifeComponent({imageKnifeOption:{
+            loadSrc:this.svgIconPixelMap as Resource
+          }})
+            .width(400)
+            .height(400)
+            .backgroundColor(Color.Pink)
+        }.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)
+      }
+    }
+    .width('100%')
+    .height('100%')
+  }
+
+  aboutToAppear() {
+    console.log("aboutToAppear()")
+  }
+  typedArrayToBuffer(array: Uint8Array): ArrayBuffer {
+    return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset)
+  }
+}
+
+
--- a/entry/src/main/ets/pages/tempUrlTestPage.ets
+++ b/entry/src/main/ets/pages/tempUrlTestPage.ets
@ -0,0 +1,98 @@
+/*
+ * Copyright (C) 2022 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,
+  ImageKnifeOption,
+  ImageKnifeGlobal,
+  ImageKnife,
+  ImageKnifeDrawFactory,
+  ScaleType
+} from '@ohos/libraryimageknife'
+import worker from '@ohos.worker';
+@Entry
+@Component
+struct tempUrlTestPage {
+
+  @State imageKnifeOption1: ImageKnifeOption =
+    {
+      loadSrc: $r('app.media.icon'),
+
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed')
+    };
+
+  @State imageKnifeOption2: ImageKnifeOption =
+    {
+      loadSrc: $r('app.media.icon'),
+
+      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("简单示例1：加载一张本地png图片").fontSize(15)
+        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          Button("加载PNG")
+            .onClick(() => {
+              this.imageKnifeOption1 = {
+                // loadSrc:"https://res.vmallres.com/cmscdn/CN/2023-03/a11790b9335a4d598d59f14795368e14.png.75.webp",
+                 loadSrc:"https://xximg1.meitudata.com/2LqS1vmqv0.png!thumb-w321-webp75",
+                mainScaleType: ScaleType.FIT_XY,
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                drawLifeCycle:ImageKnifeDrawFactory.createRoundLifeCycle(0,'#00000000',30)
+              }
+            }).margin({ top: 5, left: 3 })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width('100%').height(300).backgroundColor(Color.Orange)
+        }
+        .width('100%').height(400).backgroundColor(Color.Pink)
+
+        Text("简单示例2：加载一张网络gif图片").fontSize(15)
+        Text("gif解析在子线程,请在页面构建后创建worker,注入imageknife").fontSize(15)
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          Button("加载GIF")
+            .onClick(() => {
+              this.imageKnifeOption2 = {
+                loadSrc: 'https://res.vmallres.com/cmscdn/CN/2023-03/7052a601ac3e428c84c9415ad9734735.gif',
+
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                displayProgress:true,
+              }
+            }).margin({ top: 5, left: 3 })
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }).width(300).height(300)
+        }.width('100%').backgroundColor(Color.Pink)
+
+
+      }.width('100%')
+    }
+    .width('100%')
+    .height('100%')
+  }
+
+  aboutToAppear() {
+
+  }
+  aboutToDisappear(){
+
+  }
+
+  onBackPress() {
+
+  }
+}
--- a/entry/src/main/ets/pages/testAllCacheInfoPage.ets
+++ b/entry/src/main/ets/pages/testAllCacheInfoPage.ets
@ -0,0 +1,209 @@
+/*
+ * Copyright (C) 2021 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 {RequestOption} from '@ohos/libraryimageknife'
+import {ImageKnifeData} from '@ohos/libraryimageknife'
+import {AllCacheInfo,IAllCacheInfoCallback} from '@ohos/libraryimageknife'
+import {ImageKnifeComponent} from '@ohos/libraryimageknife'
+import {TransformType} from '@ohos/libraryimageknife'
+import {ImageKnifeOption} from '@ohos/libraryimageknife'
+import {ImageKnifeGlobal} from '@ohos/libraryimageknife'
+import {RotateImageTransformation} from '@ohos/libraryimageknife'
+import {BusinessError} from '@ohos.base'
+@Entry
+@Component
+struct TestAllCacheInfoPage {
+  @State nativePixelMap?: PixelMap = undefined;
+  @State networkPixelMap?: PixelMap = undefined;
+  allCacheInfoCallback1:IAllCacheInfoCallback ={callback:(allCacheInfo:AllCacheInfo)=>{
+    let info = allCacheInfo as AllCacheInfo;
+    console.log("AllCacheInfoCallback imageknifecomponent1 memory ="+JSON.stringify(info.memoryCacheInfo))
+    console.log("AllCacheInfoCallback imageknifecomponent1 resource ="+JSON.stringify(info.resourceCacheInfo))
+    console.log("AllCacheInfoCallback imageknifecomponent1 data ="+JSON.stringify(info.dataCacheInfo))
+    this.cacheinfo3 = "memory="+JSON.stringify(info.memoryCacheInfo)+
+    "\n resource ="+JSON.stringify(info.resourceCacheInfo)+
+    "\n data ="+JSON.stringify(info.dataCacheInfo)
+  }}
+  allCacheInfoCallback2:IAllCacheInfoCallback ={callback:(allCacheInfo:AllCacheInfo)=>{
+    let info = allCacheInfo as AllCacheInfo;
+    console.log("AllCacheInfoCallback ImageKnifeComponent memory ="+JSON.stringify(info.memoryCacheInfo))
+    console.log("AllCacheInfoCallback ImageKnifeComponent resource ="+JSON.stringify(info.resourceCacheInfo))
+    console.log("AllCacheInfoCallback ImageKnifeComponent data ="+JSON.stringify(info.dataCacheInfo))
+    this.cacheinfo4 = "memory="+JSON.stringify(info.memoryCacheInfo)+
+    "\n resource ="+JSON.stringify(info.resourceCacheInfo)+
+    "\n data ="+JSON.stringify(info.dataCacheInfo)
+  }}
+  @State imageKnifeOption1: ImageKnifeOption =
+    {
+      loadSrc: $r('app.media.pngSample'),
+
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+
+      transform: {
+        transformType:TransformType.RotateImageTransformation,
+        rotateImage:180
+      },
+      allCacheInfoCallback:this.allCacheInfoCallback1
+    };
+  @State imageKnifeOption: ImageKnifeOption =
+    {
+      loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
+
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+
+      transform: {
+        transformType:TransformType.RotateImageTransformation,
+        rotateImage:180
+      },
+      allCacheInfoCallback:this.allCacheInfoCallback2
+    };
+  imageKnifeComponentAngle:number = 90;
+
+  @State cacheinfo1:string = "观察本地资源获取缓存信息输出"
+  @State cacheinfo2:string = "观察网络资源获取缓存信息输出"
+  @State cacheinfo3:string = "观察ImageKnifeComponent本地缓存输出"
+  @State cacheinfo4:string = "观察ImageKnifeComponent网络缓存输出"
+
+  build() {
+    Scroll() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Button("加载本地资源获取缓存信息")
+          .width(300).height(25)
+          .onClick(() => {
+            this.testAllCacheInfoNative();
+          }).margin({ top: 15 })
+        Scroll() {
+          Text(this.cacheinfo1).fontSize(15)
+        }.width(300).height(200)
+        Image(this.nativePixelMap == undefined ? '':this.nativePixelMap!)
+          .width(300)
+          .height(300)
+          .objectFit(ImageFit.Contain)
+          .backgroundColor(Color.Green)
+          .margin({ top: 15 })
+        Button("加载网络资源获取缓存信息").width(300).height(25)
+          .onClick(() => {
+            this.testAllCacheInfoNetwork();
+          }).margin({ top: 15 })
+        Scroll() {
+          Text(this.cacheinfo2).fontSize(15)
+        }.width(300).height(200)
+        Image(this.networkPixelMap==undefined?'':this.networkPixelMap! )
+          .width(300)
+          .height(300)
+          .objectFit(ImageFit.Contain)
+          .backgroundColor(Color.Green)
+          .margin({ top: 15 })
+
+        Button("ImageKnifeComponent加载本地资源获取缓存信息").width(300).height(25)
+          .onClick(() => {
+            this.imageKnifeComponentAngle = this.imageKnifeComponentAngle + 45;
+            this.imageKnifeOption1 =
+            {
+              loadSrc: $r('app.media.pngSample'),
+
+              placeholderSrc: $r('app.media.icon_loading'),
+              errorholderSrc: $r('app.media.icon_failed'),
+
+              transform: {
+                transformType:TransformType.RotateImageTransformation,
+                rotateImage:this.imageKnifeComponentAngle
+              },
+              allCacheInfoCallback:this.allCacheInfoCallback1
+            };
+          }).margin({ top: 15 })
+        Scroll() {
+          Text(this.cacheinfo3).fontSize(15)
+        }.width(300).height(200)
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
+
+        Button("ImageKnifeComponent加载网络资源获取缓存信息").width(300).height(25)
+          .onClick(() => {
+            this.imageKnifeComponentAngle = this.imageKnifeComponentAngle + 45;
+            this.imageKnifeOption =
+            {
+              loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
+
+              placeholderSrc: $r('app.media.icon_loading'),
+              errorholderSrc: $r('app.media.icon_failed'),
+
+              transform: {
+                transformType:TransformType.RotateImageTransformation,
+                rotateImage:this.imageKnifeComponentAngle
+              },
+              allCacheInfoCallback:this.allCacheInfoCallback2
+            };
+          })
+        Scroll() {
+          Text(this.cacheinfo4).fontSize(15)
+        }.width(300).height(200)
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(300).height(300)
+
+      }
+    }
+    .width('100%')
+    .height('100%')
+  }
+
+  aboutToAppear() {
+
+  }
+
+  private testAllCacheInfoNative() {
+    let imageKnifeOption = new RequestOption();
+    imageKnifeOption.load($r('app.media.pngSample'))
+      .setImageViewSize({width:300,height:300})
+      .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+        let pack  = data.drawPixelMap?.imagePixelMap as PixelMap;;
+        this.nativePixelMap = pack;
+        return false;
+    }}).addAllCacheInfoCallback({callback:(allCacheInfo:AllCacheInfo)=>{
+        let info = allCacheInfo as AllCacheInfo;
+        console.log("AllCacheInfoCallback memory ="+JSON.stringify(info.memoryCacheInfo))
+        console.log("AllCacheInfoCallback resource ="+JSON.stringify(info.resourceCacheInfo))
+        console.log("AllCacheInfoCallback data ="+JSON.stringify(info.dataCacheInfo))
+      this.cacheinfo1 = "memory="+JSON.stringify(info.memoryCacheInfo)+
+      "\n resource ="+JSON.stringify(info.resourceCacheInfo)+
+      "\n data ="+JSON.stringify(info.dataCacheInfo)
+    }})
+    ImageKnife?.call(imageKnifeOption);
+  }
+
+  private testAllCacheInfoNetwork() {
+    let ImageKnifeOption = new RequestOption();
+    ImageKnifeOption.load("https://hbimg.huabanimg.com/0ef60041445edcfd6b38d20e19024b2cd9281dcc3525a4-Vy8fYO_fw658/format/webp")
+      .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+        let pack  = data.drawPixelMap?.imagePixelMap as PixelMap;
+        this.networkPixelMap = pack;
+        console.log("imageknife2 图片2 赋值！")
+        return false;
+    }}).addAllCacheInfoCallback({callback:(allCacheInfo:AllCacheInfo)=>{
+      let info = allCacheInfo as AllCacheInfo;
+      console.log("AllCacheInfoCallback memory ="+JSON.stringify(info.memoryCacheInfo))
+      console.log("AllCacheInfoCallback resource ="+JSON.stringify(info.resourceCacheInfo))
+      console.log("AllCacheInfoCallback data ="+JSON.stringify(info.dataCacheInfo))
+      this.cacheinfo2 = "memory="+JSON.stringify(info.memoryCacheInfo)+
+      "\n resource ="+JSON.stringify(info.resourceCacheInfo)+
+      "\n data ="+JSON.stringify(info.dataCacheInfo)
+    }})
+      .setImageViewSize({width:300,height:300})
+      .rotateImage(180)
+    ImageKnife?.call(ImageKnifeOption);
+  }
+}
+
+
+let ImageKnife = (ImageKnifeGlobal.getInstance().getImageKnife())
--- a/entry/src/main/ets/pages/testImageAntiAliasingWithPage.ets
+++ b/entry/src/main/ets/pages/testImageAntiAliasingWithPage.ets
@ -0,0 +1,62 @@
+/*
+ * Copyright (C) 2021 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,AntiAliasing } from '@ohos/libraryimageknife'
+import { ImageKnifeOption } from '@ohos/libraryimageknife'
+import { RotateImageTransformation } from '@ohos/libraryimageknife'
+import { RoundedCornersTransformation } from '@ohos/libraryimageknife'
+
+@Entry
+@Component
+struct TestImageAntiAliasingWithPage {
+  @State imageKnifeOption1: ImageKnifeOption =
+    {
+      loadSrc: $r('app.media.icon_failed'),
+    };
+
+  build() {
+    Scroll() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Text("ImageKnife开启抗锯齿").fontSize(15)
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1,imageSmoothingQuality: AntiAliasing.FIT_HIGH }).width(600).height(600)
+        Text("Image开启抗锯齿").fontSize(15)
+        Image($r('app.media.icon_failed'))
+          .width(600)
+          .height(600)
+          .margin(15)
+          .overlay('png', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
+          .interpolation(ImageInterpolation.High)
+        Text("ImageKnife开启抗锯齿且设置为中等").fontSize(15)
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1,imageSmoothingQuality: AntiAliasing.FIT_MEDIUM }).width(600).height(600)
+        Text("Image开启抗锯齿且设置为中等").fontSize(15)
+        Image($r('app.media.icon_failed'))
+          .width(600)
+          .height(600)
+          .margin(15)
+          .overlay('png', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
+          .interpolation(ImageInterpolation.Medium)
+        Text("ImageKnife未开启抗锯齿").fontSize(15)
+        ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1,imageSmoothingEnabled: false }).width(600).height(600)
+        Text("Image未开启抗锯齿").fontSize(15)
+        Image($r('app.media.icon_failed'))
+          .width(600)
+          .height(600)
+          .margin(15)
+          .overlay('png', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
+      }
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
--- a/entry/src/main/ets/pages/testImageKnifeHttpRequestHeader.ets
+++ b/entry/src/main/ets/pages/testImageKnifeHttpRequestHeader.ets
@ -0,0 +1,256 @@
+/*
+ * 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 {
+  HeaderOptions,ImageKnife,ImageKnifeComponent,ImageKnifeData,ImageKnifeGlobal,RequestOption,ImageKnifeOption,ObjectKey
+} from '@ohos/libraryimageknife'
+import image from '@ohos.multimedia.image'
+import { BusinessError } from '@ohos.base'
+
+const TAG = "TEST-"
+let timeId = -1
+
+@Entry
+@Component
+struct testImageKnifeHttpRequestHeader {
+  @State pixelMap: PixelMap | undefined = undefined;
+  @State pixelMap1: PixelMap | undefined = undefined;
+  @State pixelMap2: PixelMap | undefined = undefined;
+  @State pixelMap3: PixelMap | undefined = undefined;
+  @State domeType1: boolean = false;
+  @State domeType2: boolean = false;
+  @State domeType3: boolean = false;
+  @State domeType4: boolean = false;
+  @State domeType5: boolean = false;
+  @State domeType6: boolean = false;
+  @State successHeader: string = "requestOption调用成功";
+  @State errorHeader: string = "requestOption调用失败";
+  @State successHeader1: string = "全局调用imageKnife成功";
+  @State errorHeader1: string = "全局调用imageKnife失败";
+  @State successHeader2: string = "单个imageKnife组件调用成功";
+  @State errorHeader2: string = "单个imageKnife组件调用失败";
+
+  @State message: string = "图片header属性测试";
+  @State headerOptions1: HeaderOptions = {
+    key: "refer",
+    value: "http://1.94.37.200:7070/AntiTheftChain/downloadImage"
+  };
+  @State headerOptions2: HeaderOptions = {
+    key: "xx",
+    value: "http://1.94.37.200:7070/AntiTheftChain/downloadImage"
+  };
+  @State imageKnifeOption1: ImageKnifeOption =
+    {
+      loadSrc: 'http://1.94.37.200:7070/AntiTheftChain/downloadImage',
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+      headerOption: [this.headerOptions1]
+    };
+  @State imageKnifeOption2: ImageKnifeOption =
+    {
+      loadSrc: 'http://1.94.37.200:7070/AntiTheftChain/downloadImage',
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+      headerOption: [this.headerOptions2]
+    };
+
+  // RequestOption调用
+  load(src: string | image.PixelMap | Resource, type: string, num: number) {
+    clearTimeout(timeId)
+    let request = new RequestOption()
+    if (type == 'error') {
+      request.addHeader('xx', src)
+    } else {
+      request.addHeader('refer', src)
+    }
+    //清理缓存
+    request.signature = new ObjectKey(new Date().getTime().toString())
+    request.load(src)
+      .addListener({ callback: (err: BusinessError | string, data: ImageKnifeData) => {
+        if (data.isPixelMap()) {
+          if (data.drawPixelMap) {
+            let pixelmap = data.drawPixelMap.imagePixelMap
+            if (pixelmap) {
+              if (num == 1) {
+                this.pixelMap = pixelmap
+              } else if (num == 2) {
+                this.pixelMap1 = pixelmap
+              } else if (num == 3) {
+                this.pixelMap2 = pixelmap
+              } else if (num == 4) {
+                this.pixelMap3 = pixelmap
+              }
+            }
+          }
+        }
+        if (data.isGIFFrame()) {
+          let index: number = 0
+          if (data.drawGIFFrame) {
+            if (data.drawGIFFrame.imageGIFFrames) {
+              let renderGif = () => {
+                if (data.drawGIFFrame) {
+                  if (data.drawGIFFrame.imageGIFFrames) {
+                    let pixelmap = data.drawGIFFrame.imageGIFFrames[index].drawPixelMap
+                    let delay = data.drawGIFFrame.imageGIFFrames[index].delay
+                    if (pixelmap) {
+                      if (num == 1) {
+                        this.pixelMap = pixelmap
+                      } else if (num == 2) {
+                        this.pixelMap1 = pixelmap
+                      } else if (num == 3) {
+                        this.pixelMap2 = pixelmap
+                      } else if (num == 4) {
+                        this.pixelMap3 = pixelmap
+                      }
+                    }
+                    index++;
+                    if (index == data.drawGIFFrame.imageGIFFrames.length - 1) {
+                      index = 0
+                    }
+                    timeId = setTimeout(renderGif, data!.drawGIFFrame!.imageGIFFrames![index].delay)
+                  }
+                }
+              }
+              renderGif()
+            }
+          }
+        }
+        if (err) {
+          console.log(TAG + "error:" + JSON.stringify(err));
+        }
+        return false
+      }
+      })
+    let imageknife: ImageKnife | undefined = ImageKnifeGlobal.getInstance().getImageKnife()
+    if (imageknife != undefined) {
+      imageknife.call(request)
+    }
+  }
+
+  @Builder
+  setHeader() {
+    ImageKnifeComponent({
+      imageKnifeOption: {
+        loadSrc: this.pixelMap as image.PixelMap
+      }
+    }).width(200).height(200).borderWidth(1)
+  }
+  @Builder
+  setHeader3() {
+    ImageKnifeComponent({
+      imageKnifeOption: {
+        loadSrc: this.pixelMap1 as image.PixelMap
+      }
+    }).width(200).height(200).borderWidth(1)
+  }
+  @Builder
+  setHeader1() {
+    ImageKnifeComponent({
+      imageKnifeOption: {
+        loadSrc: this.pixelMap2 as image.PixelMap
+      }
+    }).width(200).height(200).borderWidth(1)
+  }
+  @Builder
+  setHeader4() {
+    ImageKnifeComponent({
+      imageKnifeOption: {
+        loadSrc: this.pixelMap3 as image.PixelMap
+      }
+    }).width(200).height(200).borderWidth(1)
+  }
+  @Builder
+  setHeader2() {
+    ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
+      .margin(16)
+      .width(200)
+      .height(200)
+  }
+  @Builder
+  setHeader5() {
+    ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 })
+      .margin(16)
+      .width(200)
+      .height(200)
+  }
+
+  build() {
+    Scroll() {
+      Column() {
+        Text(`${this.message}`)
+          .width("300vp")
+          .height("60vp")
+          .textAlign(TextAlign.Center)
+          .fontSize("30fp")
+          .fontWeight(FontWeight.Bold)
+        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) {
+          Button(this.successHeader)
+            .margin(16)
+            .onClick(() => {
+              this.domeType1 = !this.domeType1
+              this.load('http://1.94.37.200:7070/AntiTheftChain/downloadImage', 'success', 1)
+            })
+          if (this.domeType1) {
+            this.setHeader()
+          }
+          Button(this.errorHeader)
+            .margin(16)
+            .onClick(() => {
+              this.domeType2 = !this.domeType2
+              this.load('http://1.94.37.200:7070/AntiTheftChain/downloadImage', 'error', 2)
+            })
+          if (this.domeType2) {
+            this.setHeader3()
+          }
+          Button(this.successHeader1)
+            .margin(16)
+            .onClick(() => {
+              this.domeType3 = !this.domeType3
+              this.load('http://1.94.37.200:7070/AntiTheftChain/downloadImage', 'success', 3)
+            })
+          if (this.domeType3) {
+            this.setHeader1()
+          }
+          Button(this.errorHeader1)
+            .margin(16)
+            .onClick(() => {
+              this.domeType4 = !this.domeType4
+              this.load('http://1.94.37.200:7070/AntiTheftChain/downloadImage', 'error', 4)
+            })
+          if (this.domeType4) {
+            this.setHeader4()
+          }
+          Button(this.successHeader2)
+            .margin(16)
+            .onClick(() => {
+              this.domeType5 = !this.domeType5
+            })
+          if (this.domeType5) {
+            this.setHeader2()
+          }
+          Button(this.errorHeader2)
+            .margin(16)
+            .onClick(() => {
+              this.domeType6 = !this.domeType6
+            })
+          if (this.domeType6) {
+            this.setHeader5()
+          }
+        }
+      }.width("100%")
+      .justifyContent(FlexAlign.Start)
+    }
+  }
+}
--- a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage.ets
+++ b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage.ets
@ -0,0 +1,214 @@
+/*
+ * Copyright (C) 2021 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} from '@ohos/libraryimageknife'
+import {ImageKnifeOption} from '@ohos/libraryimageknife'
+import {ImageKnifeGlobal} from '@ohos/libraryimageknife'
+import {ImageKnife} from '@ohos/libraryimageknife'
+import {RotateImageTransformation} from '@ohos/libraryimageknife'
+import ArkWorker from '@ohos.worker'
+import worker from '@ohos.worker'
+@Entry
+@Component
+struct TestImageKnifeOptionChangedPage {
+
+  svgUrl:string = ''
+  @State imageKnifeOption1: ImageKnifeOption =
+    {
+      loadSrc: $r('app.media.jpgSample'),
+
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+
+    };
+
+
+  build() {
+    Scroll() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Flex({direction:FlexDirection.Row}){
+           Button('本地jpg')
+          .onClick(()=>{
+              this.imageKnifeOption1 = {
+                loadSrc: $r('app.media.jpgSample'),
+
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+
+              };
+
+           }).margin({left:5}).backgroundColor(Color.Blue)
+           Button('png')
+          .onClick(()=>{
+             this.imageKnifeOption1 =  {
+               loadSrc: $r('app.media.pngSample'),
+
+               placeholderSrc: $r('app.media.icon_loading'),
+               errorholderSrc: $r('app.media.icon_failed'),
+
+             };
+
+           }).margin({left:5}).backgroundColor(Color.Blue)
+           Button('bmp')
+          .onClick(()=>{
+             this.imageKnifeOption1 = {
+               loadSrc: $r('app.media.bmpSample'),
+
+               placeholderSrc: $r('app.media.icon_loading'),
+               errorholderSrc: $r('app.media.icon_failed'),
+
+             };
+
+           }).margin({left:5}).backgroundColor(Color.Blue)
+           Button('webp')
+          .onClick(()=>{
+             this.imageKnifeOption1 = {
+               loadSrc: $r('app.media.jpgSample'),
+
+               placeholderSrc: $r('app.media.icon_loading'),
+               errorholderSrc: $r('app.media.icon_failed')
+             };
+
+           }).margin({left:5}).backgroundColor(Color.Blue)
+           Button('svg')
+          .onClick(()=>{
+             this.imageKnifeOption1 = {
+               loadSrc: $r('app.media.svgSample'),
+
+               placeholderSrc: $r('app.media.icon_loading'),
+               errorholderSrc: $r('app.media.icon_failed')
+             };
+
+           }).margin({left:5}).backgroundColor(Color.Blue)
+           Button('gif')
+          .onClick(()=>{
+             this.imageKnifeOption1 = {
+               loadSrc: $r('app.media.gifSample'),
+
+               placeholderSrc: $r('app.media.icon_loading'),
+               errorholderSrc: $r('app.media.icon_failed')
+             };
+
+           }).margin({left:5}).backgroundColor(Color.Blue)
+        }
+        .margin({top:15})
+        Flex({direction:FlexDirection.Row}){
+           Button('网络jpg')
+          .onClick(()=>{
+              this.imageKnifeOption1 = {
+                loadSrc: 'https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB',
+
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed')
+              };
+           }).margin({left:5}).backgroundColor(Color.Blue)
+           Button('png')
+          .onClick(()=>{
+             this.imageKnifeOption1 = {
+               loadSrc: 'https://img-blog.csdnimg.cn/20191215043500229.png',
+
+               placeholderSrc: $r('app.media.icon_loading'),
+               errorholderSrc: $r('app.media.icon_failed')
+             };
+           }).margin({left:5}).backgroundColor(Color.Blue)
+           Button('bmp')
+          .onClick(()=>{
+             this.imageKnifeOption1 = {
+               loadSrc: 'https://img-blog.csdn.net/20140514114029140',
+
+               placeholderSrc: $r('app.media.icon_loading'),
+               errorholderSrc: $r('app.media.icon_failed')
+             };
+           }).margin({left:5}).backgroundColor(Color.Blue)
+           Button('webp')
+          .onClick(()=>{
+             this.imageKnifeOption1 = {
+               loadSrc: 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
+
+               placeholderSrc: $r('app.media.icon_loading'),
+               errorholderSrc: $r('app.media.icon_failed')
+             };
+           }).margin({left:5}).backgroundColor(Color.Blue)
+
+          Text("请先设置SVG图片的url地址")
+          TextArea({ placeholder: '请输入SVG图片的url地址' })
+            .placeholderColor("rgb(0,0,35)")
+            .placeholderFont({ size: 20, weight: 100, family: 'cursive', style: FontStyle.Italic })
+            .textAlign(TextAlign.Center)
+            .caretColor(Color.Blue)
+            .height(40)
+            .width(400)
+            .fontSize(20)
+            .fontWeight(FontWeight.Bold)
+            .fontFamily("sans-serif")
+            .fontStyle(FontStyle.Normal)
+            .fontColor(Color.Red)
+            .onChange((value: string) => {
+             this.svgUrl = value
+            })
+
+          Button('svg')
+          .onClick(()=>{
+             this.imageKnifeOption1 = {
+               loadSrc: this.svgUrl,
+
+               placeholderSrc: $r('app.media.icon_loading'),
+               errorholderSrc: $r('app.media.icon_failed')
+             };
+           }).margin({left:5}).backgroundColor(Color.Blue)
+           Button('gif')
+          .onClick(()=>{
+             this.imageKnifeOption1 = {
+               loadSrc: 'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658',
+
+               placeholderSrc: $r('app.media.icon_loading'),
+               errorholderSrc: $r('app.media.icon_failed')
+             };
+           }).margin({left:5}).backgroundColor(Color.Blue)
+
+          Button("dpg")
+            .onClick(()=>{
+              this.imageKnifeOption1 = {
+                loadSrc: "https://img13.360buyimg.com/n1/jfs/t1/220646/38/10395/30916/61d6e061E1a6d91c8/c0a9a67e726dd7a4.jpg.dpg",
+
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed')
+              };
+            }).margin({left:5}).backgroundColor(Color.Blue)
+        }
+        .margin({top:15})
+
+        Text('下面为展示图片区域').margin({top:5})
+        Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
+            .width(300)
+            .height(300)
+        }.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)
+
+
+      }
+    }
+    .width('100%')
+    .height('100%')
+  }
+
+  aboutToAppear() {
+
+  }
+  aboutToDisappear(){
+
+  }
+}
+
+
--- a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage2.ets
+++ b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage2.ets
@ -0,0 +1,110 @@
+/*
+ * Copyright (C) 2021 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} from '@ohos/libraryimageknife'
+import {ImageKnifeOption} from '@ohos/libraryimageknife'
+import {BaseTransform} from '@ohos/libraryimageknife'
+import {RotateImageTransformation} from '@ohos/libraryimageknife'
+import {GrayscaleTransformation} from '@ohos/libraryimageknife'
+import {SketchFilterTransformation} from '@ohos/libraryimageknife'
+import image from '@ohos.multimedia.image'
+
+@Entry
+@Component
+struct TestImageKnifeOptionChangedPage2 {
+  @State imageKnifeOption1: ImageKnifeOption =
+    {
+      loadSrc: $r('app.media.jpgSample'),
+
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+       
+      thumbSizeMultiplier:0.1
+    };
+
+
+  build() {
+    Scroll() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Flex({direction:FlexDirection.Row}){
+           Button("网络jpg")
+          .onClick(()=>{
+            let rotateTrans:BaseTransform<image.PixelMap> = new RotateImageTransformation(180)
+              this.imageKnifeOption1 = {
+                loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
+
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                 
+                thumbSizeMultiplier:0.1,
+                transformation:rotateTrans
+              };
+           }).margin({left:5}).backgroundColor(Color.Blue)
+           Button("png")
+          .onClick(()=>{
+             this.imageKnifeOption1 = {
+               loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png",
+
+               placeholderSrc: $r('app.media.icon_loading'),
+               errorholderSrc: $r('app.media.icon_failed'),
+                
+               thumbSizeMultiplier:0.1,
+               transformations:[new RotateImageTransformation(180)]
+             };
+           }).margin({left:5}).backgroundColor(Color.Blue)
+           Button("bmp")
+          .onClick(()=>{
+             this.imageKnifeOption1 = {
+               loadSrc: "https://img-blog.csdn.net/20140514114029140",
+
+               placeholderSrc: $r('app.media.icon_loading'),
+               errorholderSrc: $r('app.media.icon_failed'),
+                
+               thumbSizeMultiplier:0.1,
+               transformations:[new GrayscaleTransformation()]
+             };
+           }).margin({left:5}).backgroundColor(Color.Blue)
+           Button("webp")
+          .onClick(()=>{
+             this.imageKnifeOption1 = {
+               loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
+
+               placeholderSrc: $r('app.media.icon_loading'),
+               errorholderSrc: $r('app.media.icon_failed'),
+                
+               thumbSizeMultiplier:0.1,
+               transformations:[new SketchFilterTransformation()]
+             };
+           }).margin({left:5}).backgroundColor(Color.Blue)
+        }
+        .margin({top:15})
+
+        Text("下面为展示图片区域").margin({top:5})
+        Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
+        }.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)
+
+
+      }
+    }
+    .width('100%')
+    .height('100%')
+  }
+
+  aboutToAppear() {
+    console.log("aboutToAppear()")
+  }
+}
+
+
--- a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage3.ets
+++ b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage3.ets
@ -0,0 +1,167 @@
+/*
+ * Copyright (C) 2021 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} from '@ohos/libraryimageknife'
+import {ImageKnifeOption} from '@ohos/libraryimageknife'
+import {ImageKnifeGlobal} from '@ohos/libraryimageknife'
+import {ImageKnife} from '@ohos/libraryimageknife'
+import {ScaleType} from '@ohos/libraryimageknife'
+import {RotateImageTransformation} from '@ohos/libraryimageknife'
+import {GrayscaleTransformation} from '@ohos/libraryimageknife'
+import {SketchFilterTransformation} from '@ohos/libraryimageknife'
+import ArkWorker from '@ohos.worker'
+import worker from '@ohos.worker'
+import {BaseTransform} from '@ohos/libraryimageknife'
+import image from '@ohos.multimedia.image'
+@Entry
+@Component
+struct TestImageKnifeOptionChangedPage3 {
+
+  @State imageKnifeOption1: ImageKnifeOption =
+    {
+      loadSrc: $r('app.media.jpgSample'),
+      mainScaleType: ScaleType.FIT_CENTER,
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+    };
+  @State compWidht:number = 300
+  @State compHeight:number = 300
+
+
+  build() {
+    Scroll() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Flex({direction:FlexDirection.Row}){
+          Button("本地jpg")
+            .onClick(()=>{
+              let rotateTrans:BaseTransform<image.PixelMap> = new RotateImageTransformation(180)
+              this.imageKnifeOption1 = {
+                loadSrc: $r('app.media.jpgSample'),
+                mainScaleType: ScaleType.FIT_CENTER,
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                thumbSizeMultiplier:0.1,
+                transformation:rotateTrans,
+              };
+
+            }).margin({left:5}).backgroundColor(Color.Blue)
+          Button("本地png")
+            .onClick(()=>{
+
+              let rotateTrans:BaseTransform<image.PixelMap> = new RotateImageTransformation(180)
+              this.imageKnifeOption1 = {
+                loadSrc: $r('app.media.pngSample'),
+                mainScaleType: ScaleType.FIT_CENTER,
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                thumbSizeMultiplier:0.1,
+                transformation:rotateTrans,
+              };
+
+            }).margin({left:5}).backgroundColor(Color.Blue)
+        }.margin({top:15})
+        Flex({direction:FlexDirection.Row}){
+          Button("本地bmp")
+            .onClick(()=>{
+              this.imageKnifeOption1 = {
+                loadSrc: $r('app.media.bmpSample'),
+                mainScaleType: ScaleType.FIT_CENTER,
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                thumbSizeMultiplier:0.1,
+                transformations:[new GrayscaleTransformation()],
+              };
+
+            }).margin({left:5}).backgroundColor(Color.Blue)
+          Button("本地webp")
+            .onClick(()=>{
+              this.imageKnifeOption1 = {
+                loadSrc: $r('app.media.webpSample'),
+                mainScaleType: ScaleType.FIT_CENTER,
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                thumbSizeMultiplier:0.1,
+                transformations:[new SketchFilterTransformation()],
+              };
+
+            }).margin({left:5}).backgroundColor(Color.Blue)
+        }.margin({top:15})
+        Flex({direction:FlexDirection.Row}){
+           Button("网络jpg")
+          .onClick(()=>{
+            let rotateTrans:BaseTransform<image.PixelMap> = new RotateImageTransformation(180)
+              this.imageKnifeOption1 = {
+                loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                displayProgress:true,
+                thumbSizeMultiplier:0.1,
+                transformation:rotateTrans
+              };
+           }).margin({left:5}).backgroundColor(Color.Blue)
+           Button("网络png")
+          .onClick(()=>{
+             this.imageKnifeOption1 = {
+               loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png",
+               placeholderSrc: $r('app.media.icon_loading'),
+               errorholderSrc: $r('app.media.icon_failed'),
+               displayProgress:true,
+               thumbSizeMultiplier:0.1,
+               transformations:[new RotateImageTransformation(180)]
+             };
+           }).margin({left:5}).backgroundColor(Color.Blue)
+        }.margin({top:15})
+        Flex({direction:FlexDirection.Row}){
+           Button("网络bmp")
+          .onClick(()=>{
+             this.imageKnifeOption1 = {
+               loadSrc: "https://img-blog.csdn.net/20140514114029140",
+               placeholderSrc: $r('app.media.icon_loading'),
+               errorholderSrc: $r('app.media.icon_failed'),
+               displayProgress:true,
+               thumbSizeMultiplier:0.1,
+               transformations:[new GrayscaleTransformation()]
+             };
+           }).margin({left:5}).backgroundColor(Color.Blue)
+           Button("网络webp")
+          .onClick(()=>{
+             this.imageKnifeOption1 = {
+               loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
+               placeholderSrc: $r('app.media.icon_loading'),
+               errorholderSrc: $r('app.media.icon_failed'),
+               displayProgress:true,
+               thumbSizeMultiplier:0.1,
+             };
+           }).margin({left:5}).backgroundColor(Color.Blue)
+        }.margin({top:15})
+
+        Text("下面为展示图片区域").margin({top:5})
+        Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(this.compWidht).height(this.compHeight)
+        }.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)
+
+
+      }
+    }
+    .width('100%')
+    .height('100%')
+  }
+  aboutToAppear() {
+
+  }
+  aboutToDisappear(){
+  }
+}
+
+
--- a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage4.ets
+++ b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage4.ets
@ -0,0 +1,277 @@
+/*
+ * Copyright (C) 2021 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 {
+  GrayscaleTransformation,
+  ImageKnifeComponent,
+  ImageKnifeData,
+  ImageKnifeOption,
+  RotateImageTransformation,
+  SketchFilterTransformation,
+  ScaleTypeHelper,
+  IDrawLifeCycle,
+  ScaleType,
+  ImageKnifeGlobal,
+  BaseTransform
+} from '@ohos/libraryimageknife'
+import ArkWorker from '@ohos.worker'
+import worker from '@ohos.worker';
+import image from '@ohos.multimedia.image';
+
+@Entry
+@Component
+struct TestImageKnifeOptionChangedPage4 {
+
+  @State imageKnifeOption1: ImageKnifeOption =
+    {
+      loadSrc: $r('app.media.jpgSample'),
+
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+
+      thumbSizeMultiplier: 0.1,
+      drawLifeCycle: this.createViewLifeCycle()
+    };
+  private mTimerId: number = 0
+
+  build() {
+    Scroll() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Flex({ direction: FlexDirection.Row }) {
+          Button("网络jpg")
+            .onClick(() => {
+              let rotateTrans: BaseTransform<image.PixelMap> = new RotateImageTransformation(180)
+              this.imageKnifeOption1 = {
+                loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
+
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+
+                thumbSizeMultiplier: 0.1,
+                transformation: rotateTrans,
+                drawLifeCycle: this.createViewLifeCycle()
+              };
+            }).margin({ left: 5 }).backgroundColor(Color.Blue)
+          Button("网络png")
+            .onClick(() => {
+              this.imageKnifeOption1 = {
+                loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png",
+
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+
+                thumbSizeMultiplier: 0.1,
+                transformations: [new RotateImageTransformation(180)],
+                drawLifeCycle: this.createViewLifeCycle()
+              };
+            }).margin({ left: 5 }).backgroundColor(Color.Blue)
+        }.margin({ top: 15 })
+
+        Flex({ direction: FlexDirection.Row }) {
+          Button("网络bmp")
+            .onClick(() => {
+              this.imageKnifeOption1 = {
+                loadSrc: "https://img-blog.csdn.net/20140514114029140",
+
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+
+                thumbSizeMultiplier: 0.1,
+                transformations: [new GrayscaleTransformation()],
+                drawLifeCycle: this.createViewLifeCycle()
+              };
+            }).margin({ left: 5 }).backgroundColor(Color.Blue)
+          Button("网络webp")
+            .onClick(() => {
+              this.imageKnifeOption1 = {
+                loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
+
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+
+                thumbSizeMultiplier: 0.1,
+                transformations: [new SketchFilterTransformation()],
+                drawLifeCycle: this.createViewLifeCycle()
+              };
+            }).margin({ left: 5 }).backgroundColor(Color.Blue)
+        }.margin({ top: 15 })
+
+        Text("下面为展示图片区域").margin({ top: 5 })
+        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
+        }.width(400).height(400).margin({ top: 10 }).backgroundColor(Color.Pink)
+
+      }
+    }
+    .width('100%')
+    .height('100%')
+  }
+
+  aboutToAppear() {
+
+  }
+
+  aboutToDisappear() {
+
+  }
+
+  drawMainAnimate_index: number = 0;
+  drawMainAnimate_context?: CanvasRenderingContext2D = undefined;
+  drawMainAnimate_scaleType: ScaleType = ScaleType.FIT_CENTER;
+  drawMainAnimate_imagePixelMap?: PixelMap = undefined;
+  drawMainAnimate_widthPixel: number = 0;
+  drawMainAnimate_heightPixel: number = 0;
+  drawMainAnimate_compWidth: number = 0;
+  drawMainAnimate_compHeight: number = 0;
+  drawMainAnimate = () => {
+    console.log('drawMainAnimate index = ' + this.drawMainAnimate_index)
+
+    let clipScale = (this.drawMainAnimate_index / 30.0)
+    this.drawMainAnimate_context?.save()
+    this.drawMainAnimate_context?.beginPath();
+    let path2d = new Path2D()
+    let maxRadius = Math.sqrt(this.drawMainAnimate_compWidth / 2 * this.drawMainAnimate_compWidth / 2 + this.drawMainAnimate_compHeight / 2 * this.drawMainAnimate_compHeight / 2)
+    path2d.arc(this.drawMainAnimate_compWidth / 2, this.drawMainAnimate_compHeight / 2, maxRadius * clipScale, 0, Math.PI * 2)
+    this.drawMainAnimate_context?.clip(path2d)
+    this.drawMainAnimate_context?.save()
+    ScaleTypeHelper.drawImageWithScaleType(this.drawMainAnimate_context!, this.drawMainAnimate_scaleType, this.drawMainAnimate_imagePixelMap, px2vp(this.drawMainAnimate_widthPixel), px2vp(this.drawMainAnimate_heightPixel), this.drawMainAnimate_compWidth, this.drawMainAnimate_compHeight, 0, 0)
+    this.drawMainAnimate_context?.restore();
+    this.drawMainAnimate_context?.restore();
+    if (this.drawMainAnimate_index < 30) {
+      this.drawMainAnimate_index++
+      let nextFunc = this.drawMainAnimate
+       
+      this.mTimerId = setTimeout(nextFunc, 1000 / 30.0)
+    } else {
+      // 不做处理
+    }
+  }
+
+  private stopAnimate() {
+    if (this.mTimerId > 0) {
+      clearTimeout(this.mTimerId)
+      this.mTimerId = 0
+    } else {
+
+    }
+  }
+
+  private createViewLifeCycle(): IDrawLifeCycle {
+    let viewLifeCycle: IDrawLifeCycle = {
+      // 展示占位图
+      displayPlaceholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
+         
+        this.stopAnimate()
+        return false;
+      },
+      // 展示加载进度
+      displayProgress: (context: CanvasRenderingContext2D, progress: number, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
+         
+        this.stopAnimate()
+        context.save();
+        context.clearRect(0, 0, compWidth, compHeight)
+        let pi = Math.PI * 2 / 100; //pi 讲圆的周长划分为100份
+        let rate = progress - 25;
+        let diameter = compWidth > compHeight ? compHeight : compWidth
+        context.lineWidth = Math.floor(diameter * 0.03)
+        context.lineCap = "round"
+        context.fillStyle = "white"
+        context.font = Math.floor(diameter * 0.5) + 'px'
+        let x0 = (compWidth - diameter) / 2.0 + Math.floor(diameter * 0.5)
+        let y0 = (compHeight - diameter) / 2.0 + Math.floor(diameter * 0.1)
+        let x1 = (compWidth - diameter) / 2.0 + Math.floor(diameter * 0.5)
+        let y1 = (compHeight - diameter) / 2.0 + Math.floor(diameter * 0.8)
+        let gradient = context.createLinearGradient(x0, y0, x1, y1)
+        gradient.addColorStop(0, "#11ffe4")
+        gradient.addColorStop(0.5, "#03c6fd")
+        gradient.addColorStop(1, "#10a5ff")
+        context.clearRect(0, 0, compWidth, compHeight)
+        context.shadowBlur = 0
+        context.beginPath()
+        context.strokeStyle = "#15222d"
+        let radius = Math.floor(diameter * 0.3)
+        let arcX = compWidth / 2.0
+        let arcY = compHeight / 2.0
+        context.arc(arcX, arcY, radius, 0, Math.PI * 2, true)
+        context.stroke()
+        context.beginPath()
+        let showText = rate + 25 + '%'
+        let metrics = context.measureText(showText)
+        let textX = (compWidth / 2.0) - metrics.width / 2.0
+        let textY = (compHeight / 2.0) + metrics.height * 0.3
+        context.fillText(showText, textX, textY)
+        context.stroke()
+        context.beginPath()
+        context.strokeStyle = gradient
+        context.arc(arcX, arcY, radius, pi * -25, pi * rate)
+        context.stroke();
+        context.restore();
+        return true;
+      },
+      // 展示缩略图
+      displayThumbSizeMultiplier: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
+         
+        this.stopAnimate()
+        return false;
+      },
+
+      // 展示主图
+      displayMainSource: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
+        this.stopAnimate()
+        if (data.isPixelMap()) {
+           
+          data.drawPixelMap?.imagePixelMap?.getImageInfo().then((imageInfo) => {
+            let scaleType = (typeof imageKnifeOption.mainScaleType == 'number') ? imageKnifeOption.mainScaleType : ScaleType.FIT_CENTER
+            console.log('imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height + 'scaleType=' + scaleType)
+
+
+            this.drawMainAnimate_index = 0;
+            this.drawMainAnimate_context = context;
+            this.drawMainAnimate_scaleType = scaleType
+            this.drawMainAnimate_imagePixelMap = data.drawPixelMap?.imagePixelMap
+            this.drawMainAnimate_widthPixel = imageInfo.size.width
+            this.drawMainAnimate_heightPixel = imageInfo.size.height
+            this.drawMainAnimate_compWidth = compWidth
+            this.drawMainAnimate_compHeight = compHeight
+
+            let func = this.drawMainAnimate
+             
+            this.mTimerId = setTimeout(func, 1000 / 30.0)
+
+            console.log('TestImageKnifeOptionChangedPage4 drawMainSource end!')
+          })
+          return true;
+        }
+        return false;
+      },
+
+      // 展示重试图层
+      displayRetryholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
+         
+        this.stopAnimate()
+        return false;
+      },
+
+      // 展示失败占位图
+      displayErrorholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
+         
+        this.stopAnimate()
+        return false;
+      }
+    }
+    return viewLifeCycle;
+  }
+}
+
+
--- a/entry/src/main/ets/pages/testImageKnifeOptionChangedPage5.ets
+++ b/entry/src/main/ets/pages/testImageKnifeOptionChangedPage5.ets
@ -0,0 +1,177 @@
+/*
+ * Copyright (C) 2021 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 {
+  GrayscaleTransformation,
+  ImageKnifeComponent,
+  ImageKnifeData,
+  ImageKnifeGlobal,
+  ImageKnifeOption,
+  ImageKnife,
+  RotateImageTransformation,
+  SketchFilterTransformation,
+  ScaleTypeHelper,
+  IDrawLifeCycle,
+  ScaleType,
+  ImageKnifeDrawFactory
+} from '@ohos/libraryimageknife'
+import worker from '@ohos.worker';
+@Entry
+@Component
+struct TestImageKnifeOptionChangedPage5 {
+
+  @State imageKnifeOption1: ImageKnifeOption =
+    {
+      loadSrc: $r('app.media.jpgSample'),
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+      drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval)
+    };
+
+
+  build() {
+    Scroll() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Flex({ direction: FlexDirection.Row }) {
+          Button("网络jpg")
+            .onClick(() => {
+              this.imageKnifeOption1 = {
+                loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval)
+              };
+            }).margin({ left: 5 }).backgroundColor(Color.Blue)
+          Button("网络png")
+            .onClick(() => {
+              this.imageKnifeOption1 = {
+                loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png",
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval)
+              };
+            }).margin({ left: 5 }).backgroundColor(Color.Blue)
+        }.margin({ top: 15 })
+        Flex({ direction: FlexDirection.Row }) {
+          Button("网络bmp")
+            .onClick(() => {
+              this.imageKnifeOption1 = {
+                loadSrc: "https://img-blog.csdn.net/20140514114029140",
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval)
+              };
+            }).margin({ left: 5 }).backgroundColor(Color.Blue)
+          Button("网络webp")
+            .onClick(() => {
+              this.imageKnifeOption1 = {
+                loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval)
+              };
+            }).margin({ left: 5 }).backgroundColor(Color.Blue)
+        }.margin({ top: 15 })
+
+        Text("下面为展示图片区域").margin({ top: 5 })
+        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
+        }.width(400).height(400).margin({ top: 10 }).backgroundColor(Color.Pink)
+
+      }
+    }
+    .width('100%')
+    .height('100%')
+  }
+
+  aboutToAppear() {
+
+  }
+  aboutToDisappear(){
+
+  }
+
+  private choiceViewLifeCycle(type:DrawType): IDrawLifeCycle {
+    let viewLifeCycle:IDrawLifeCycle|undefined = undefined;
+    switch(type){
+      case DrawType.Oval:
+       viewLifeCycle = ImageKnifeDrawFactory.createOvalLifeCycle(5,"#ff00ff")
+      break;
+      case DrawType.Round:
+       viewLifeCycle = ImageKnifeDrawFactory.createRoundLifeCycle(5,"#ff00ff",30)
+      break;
+      case DrawType.Normal:
+      default:
+        viewLifeCycle = {
+          // 展示占位图
+          displayPlaceholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
+              
+            return false;
+          },
+          // 展示加载进度
+          displayProgress: (context: CanvasRenderingContext2D, progress: number, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
+            return false;
+          },
+          // 展示缩略图
+          displayThumbSizeMultiplier: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
+              
+            return false;
+          },
+
+          // 展示主图
+          displayMainSource: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
+            if (data.isPixelMap()) {
+                
+              data.drawPixelMap?.imagePixelMap?.getImageInfo().then((imageInfo) => {
+                let scaleType = (typeof imageKnifeOption.mainScaleType == 'number') ? imageKnifeOption.mainScaleType : ScaleType.FIT_CENTER
+                console.log('imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height + 'scaleType=' + scaleType)
+                context.save();
+                context.clearRect(0, 0, compWidth, compHeight)
+                ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap?.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight,0,0)
+                context.restore();
+                console.log('TestImageKnifeOptionChangedPage4 drawMainSource end!')
+              })
+              return true;
+            }
+            return false;
+          },
+          // 展示重试图层
+          displayRetryholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
+            return false;
+          },
+          // 展示失败占位图
+          displayErrorholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
+            return false;
+          }
+        }
+      break;
+    }
+
+
+    return viewLifeCycle;
+  }
+
+
+}
+
+export  enum DrawType{
+
+  Normal = 0,
+
+  Oval = 1,
+
+  Round = 2
+
+}
+
--- a/entry/src/main/ets/pages/testImageKnifeRouter1.ets
+++ b/entry/src/main/ets/pages/testImageKnifeRouter1.ets
@ -0,0 +1,59 @@
+/*
+ * 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 { ImageKnifeComponent } from '@ohos/libraryimageknife'
+import router from '@ohos.router'
+
+@Entry
+@Component
+struct TestImageKnifeRouter {
+  @State array: Array<string> = [
+    "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
+    'https://img-blog.csdnimg.cn/20191215043500229.png',
+    'https://img-blog.csdn.net/20140514114029140',
+    'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp'
+  ]
+
+  build() {
+    Column() {
+      Grid() {
+        ForEach(this.array, (item: string, index: number) => {
+          GridItem() {
+            ImageKnifeComponent({
+              imageKnifeOption: {
+                loadSrc: item,
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                onClick: () => {
+                  router.pushUrl({ url: "pages/testImageKnifeRouter2", params: { url: this.array[index] } })
+                }
+              }
+            }).width(150).height(150)
+              .sharedTransition(this.array[index], {
+                duration: 500,
+                curve: Curve.Linear,
+                type: SharedTransitionEffectType.Exchange
+              })
+          }
+        })
+      }.columnsTemplate('1fr 1fr')
+      .rowsTemplate('1fr 1fr')
+    }.width("100%").height("100%")
+  }
+
+  pageTransition() {
+    PageTransitionEnter({ duration: 0 })
+    PageTransitionExit({ duration: 0 })
+  }
+}
--- a/entry/src/main/ets/pages/testImageKnifeRouter2.ets
+++ b/entry/src/main/ets/pages/testImageKnifeRouter2.ets
@ -0,0 +1,55 @@
+/*
+ * 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 { ImageKnifeComponent } from '@ohos/libraryimageknife'
+import router from '@ohos.router'
+
+interface ParamsType {
+  url: string
+}
+
+@Entry
+@Component
+struct TestImageKnifeRouter {
+  @State url: string = ""
+
+  aboutToAppear() {
+    this.url = (router.getParams() as ParamsType).url
+  }
+
+  build() {
+    Column() {
+      ImageKnifeComponent({
+        imageKnifeOption: {
+          loadSrc: this.url,
+          placeholderSrc: $r('app.media.icon_loading'),
+          errorholderSrc: $r('app.media.icon_failed'),
+          onClick: () => {
+            router.back()
+          }
+        }
+      }).width("100%").height(600)
+        .sharedTransition(this.url, {
+          duration: 500,
+          curve: Curve.Linear,
+          type: SharedTransitionEffectType.Exchange
+        })
+    }.width("100%").height("100%")
+  }
+
+  pageTransition() {
+    PageTransitionEnter({ duration: 0 })
+    PageTransitionExit({ duration: 0 })
+  }
+}
--- a/entry/src/main/ets/pages/testManyGifLoadWithPage.ets
+++ b/entry/src/main/ets/pages/testManyGifLoadWithPage.ets
@ -0,0 +1,77 @@
+/*
+ * 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/libraryimageknife"
+import worker from '@ohos.worker';
+
+let gifUrl = "https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658"
+
+let data: string[] = [
+  'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658',
+  'https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB',
+  'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700',
+  'https://img-blog.csdnimg.cn/20191215043500229.png',
+  'https://res.vmallres.com/cmscdn/CN/2023-03/7052a601ac3e428c84c9415ad9734735.gif',
+  'https://img-blog.csdn.net/20140514114029140'
+]
+
+@Entry
+@Component
+struct TestManyGifLoadWithPage {
+
+  @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)
+      }
+
+      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(){
+
+  }
+  aboutToDisappear(){
+
+  }
+}
--- a/entry/src/main/ets/pages/testManyNetImageLoadWithPage.ets
+++ b/entry/src/main/ets/pages/testManyNetImageLoadWithPage.ets
@ -0,0 +1,114 @@
+/*
+ * 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/libraryimageknife"
+
+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 TestManyNetImageLoadWithPage {
+  @State hotCommendList:CommonDataSource<string> = new CommonDataSource<string>([])
+  private data:Array<string> = [
+    "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
+    "http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg",
+    "http://h.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5f2c2a9e953da81cb39db3d1d.jpg",
+    "http://g.hiphotos.baidu.com/image/pic/item/55e736d12f2eb938d5277fd5d0628535e5dd6f4a.jpg",
+    "http://e.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f7e41f5cfe760e0cf3d6cad6ee.jpg",
+    "http://b.hiphotos.baidu.com/image/pic/item/9d82d158ccbf6c81b94575cfb93eb13533fa40a2.jpg",
+    "http://e.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31c1badd5a685d6277f9e2ff81e.jpg",
+    "http://g.hiphotos.baidu.com/image/pic/item/0d338744ebf81a4c87a3add4d52a6059252da61e.jpg",
+    "http://a.hiphotos.baidu.com/image/pic/item/f2deb48f8c5494ee5080c8142ff5e0fe99257e19.jpg",
+    "http://f.hiphotos.baidu.com/image/pic/item/4034970a304e251f503521f5a586c9177e3e53f9.jpg",
+    "http://b.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fbb3586c0168224f4a20a4dd7e.jpg",
+    "http://img2.xkhouse.com/bbs/hfhouse/data/attachment/forum/corebbs/2009-11/2009113011534566298.jpg",
+    "http://a.hiphotos.baidu.com/image/pic/item/e824b899a9014c087eb617650e7b02087af4f464.jpg",
+    "http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg",
+    "http://d.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f119945cbe2fe9925bc317d2a.jpg",
+    "http://h.hiphotos.baidu.com/image/pic/item/902397dda144ad340668b847d4a20cf430ad851e.jpg",
+    "http://b.hiphotos.baidu.com/image/pic/item/359b033b5bb5c9ea5c0e3c23d139b6003bf3b374.jpg",
+    "http://a.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a292d2472199d25bc315d607c7c.jpg",
+    "http://b.hiphotos.baidu.com/image/pic/item/e824b899a9014c08878b2c4c0e7b02087af4f4a3.jpg",
+    "http://g.hiphotos.baidu.com/image/pic/item/6d81800a19d8bc3e770bd00d868ba61ea9d345f2.jpg",
+  ]
+  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 })
+    }
+  }
+}
--- a/entry/src/main/ets/pages/testManyNetImageLoadWithPage2.ets
+++ b/entry/src/main/ets/pages/testManyNetImageLoadWithPage2.ets
@ -0,0 +1,65 @@
+/*
+ * 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, NONE, DiskStrategy } from "@ohos/libraryimageknife"
+import { Material } from './model/Material';
+import { TestDataSource } from './model/TestDataSource';
+
+
+@Entry
+@Component
+struct TestManyNetImageLoadWithPage2 {
+  private data: TestDataSource = new TestDataSource();
+  private setting: DiskStrategy = new NONE();
+  private scroller: Scroller = new Scroller()
+
+  build() {
+    Scroll() {
+      Column() {
+        Grid(this.scroller) {
+          LazyForEach(this.data, (item: Material, index) => {
+              GridItem() {
+                Stack({ alignContent: Alignment.BottomEnd }) {
+                  ImageKnifeComponent({
+                    imageKnifeOption: {
+                      loadSrc: item.thumbnail,
+                      placeholderSrc: $r('app.media.icon_loading'),
+                      mainScaleType: ScaleType.CENTER_CROP,
+                      placeholderScaleType: ScaleType.CENTER_CROP,
+                      isCacheable: false,
+                      strategy: this.setting
+                    }
+                  }).width('100%').height('100%')
+                  Text(index + "." + item.name)
+                    .fontSize(10)
+                    .maxLines(1)
+                    .fontColor(Color.White)
+                    .textAlign(TextAlign.Center)
+                    .layoutWeight(1)
+                    .width('100%')
+                    .backgroundColor(Color.Orange)
+                }
+            }.width('45%').height(200)
+          }, (item: Material) => item.material_id)
+        }
+        .columnsTemplate('1fr 1fr')
+        .columnsGap(8)
+        .rowsGap(10)
+        .width('100%')
+        .cachedCount(1)
+        .height('100%')
+      }.margin({ top: 5 })
+    }
+  }
+}
--- a/entry/src/main/ets/pages/testPreloadPage.ets
+++ b/entry/src/main/ets/pages/testPreloadPage.ets
@ -0,0 +1,642 @@
+/*
+ * Copyright (C) 2021 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} from '@ohos/libraryimageknife'
+import {ImageKnifeData} from '@ohos/libraryimageknife'
+import {ImageKnifeOption} from '@ohos/libraryimageknife'
+import {RequestOption} from '@ohos/libraryimageknife'
+import {ImageKnifeGlobal } from '@ohos/libraryimageknife'
+import worker from '@ohos.worker'
+import { BusinessError } from '@ohos.base'
+
+@Entry
+@Component
+struct TestPreloadPage {
+  svgUrl:string = ''
+  @State imageKnifeOption1: ImageKnifeOption =
+    {
+      loadSrc: $r('app.media.jpgSample'),
+
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+         
+    };
+  @State imageKnifeOption: ImageKnifeOption =
+    {
+      loadSrc: $r('app.media.jpgSample'),
+
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+         
+    };
+  @State imageKnifeOption3: ImageKnifeOption =
+    {
+      loadSrc: $r('app.media.jpgSample'),
+
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+         
+    };
+
+  @State imageKnifeOption4: ImageKnifeOption =
+    {
+      loadSrc: $r('app.media.jpgSample'),
+
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+         
+    };
+  @State imageKnifeOption5: ImageKnifeOption =
+    {
+      loadSrc: $r('app.media.jpgSample'),
+
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+         
+    };
+  @State imageKnifeOption6: ImageKnifeOption =
+    {
+      loadSrc: $r('app.media.jpgSample'),
+
+      placeholderSrc: $r('app.media.icon_loading'),
+      errorholderSrc: $r('app.media.icon_failed'),
+         
+    };
+
+  build() {
+    Scroll() {
+      Column() {
+        Column() {
+          Flex({ direction: FlexDirection.Row }) {
+            Button('预加载本地资源gif')
+              .onClick(() => {
+                let request = new RequestOption();
+                request.load($r('app.media.gifSample'))
+                  .setImageViewSize({ width: 300, height: 300 })
+                  .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+                    if (err) {
+                      console.log('预加载本地资源gif 出现错误! err=' + err)
+                    } else {
+                  console.log('预加载本地资源gif成功! imageKnifedata=' + JSON.stringify(data))
+                }
+                return false;
+              }})
+              ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
+            })
+              .margin({ left: 15 })
+              .backgroundColor(Color.Grey)
+
+
+            Button('本地资源gif')
+              .onClick(() => {
+              this.imageKnifeOption1 = {
+                loadSrc: $r('app.media.gifSample'),
+
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                   
+              }
+
+            })
+              .margin({ left: 15 })
+              .backgroundColor(Color.Grey)
+
+            Button('预加载本地资源gif静态')
+              .onClick(() => {
+              let request = new RequestOption();
+              request.load($r('app.media.gifSample'))
+                .setImageViewSize({ width: 300, height: 300 })
+                .dontAnimate()
+                .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+                if (err ) {
+                  console.log('预加载本地资源gif静态 出现错误! err=' + err)
+                } else {
+                  console.log('预加载本地资源gif静态成功! imageKnifedata=' + JSON.stringify(data))
+                }
+                return false;
+              }})
+              ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
+            })
+              .margin({ left: 15 })
+              .backgroundColor(Color.Grey)
+
+            Button('本地资源gif静态')
+              .onClick(() => {
+              this.imageKnifeOption1 = {
+                loadSrc: $r('app.media.gifSample'),
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                dontAnimateFlag: true
+              }
+
+            })
+              .margin({ left: 15 })
+              .backgroundColor(Color.Grey)
+          }
+          .margin({ top: 15 })
+
+          Flex({ direction: FlexDirection.Row }) {
+
+            Button('预加载网络资源gif')
+              .onClick(() => {
+              let request = new RequestOption();
+              request.load('https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658')
+                .setImageViewSize({ width: 300, height: 300 })
+                .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+                if (err) {
+                  console.log('预加载网络资源gif 出现错误! err=' + err)
+                } else {
+                  console.log('预加载网络资源gif成功! imageKnifedata=' + JSON.stringify(data))
+                }
+                return false;
+              }})
+              ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
+            })
+              .margin({ left: 15 })
+              .backgroundColor(Color.Grey)
+
+            Button('网络资源gif')
+              .onClick(() => {
+              this.imageKnifeOption1 = {
+                loadSrc: 'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658',
+
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                   
+              };
+            })
+              .margin({ left: 15 })
+              .backgroundColor(Color.Grey)
+
+            Button('预加载网络资源gif静态')
+              .onClick(() => {
+              let request = new RequestOption();
+              request.load('https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658')
+                .setImageViewSize({ width: 300, height: 300 })
+                .dontAnimate()
+                .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+                if (err) {
+                  console.log('预加载网络资源gif静态 出现错误! err=' + err)
+                } else {
+                  console.log('预加载网络资源gif静态成功! imageKnifedata=' + JSON.stringify(data))
+                }
+                return false;
+              }})
+              ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
+            })
+              .margin({ left: 15 })
+              .backgroundColor(Color.Grey)
+
+            Button('网络资源gif静态')
+              .onClick(() => {
+              this.imageKnifeOption1 = {
+                loadSrc: 'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658',
+
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                dontAnimateFlag: true
+              };
+            })
+              .margin({ left: 15 })
+              .backgroundColor(Color.Grey)
+          }
+          .margin({ top: 15 })
+
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(200).height(200)
+
+        }
+
+        Column() {
+          Flex({ direction: FlexDirection.Row }) {
+            Button('预加载本地资源svg')
+              .onClick(() => {
+                let request = new RequestOption();
+                request.load($r('app.media.svgSample'))
+                  .setImageViewSize({ width: 300, height: 300 })
+                  .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+                    if (err ) {
+                      console.log('预加载本地资源svg 出现错误! err=' + err)
+                    } else {
+                  console.log('预加载本地资源svg成功! imageKnifedata=' + JSON.stringify(data))
+                }
+                return false;
+              }})
+              ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
+            })
+              .margin({ left: 15 })
+              .backgroundColor(Color.Grey)
+
+
+            Button('本地资源svg')
+              .onClick(() => {
+              this.imageKnifeOption = {
+                loadSrc: $r('app.media.svgSample'),
+
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                   
+              }
+
+            })
+              .margin({ left: 15 })
+              .backgroundColor(Color.Grey)
+
+
+          }
+          .margin({ top: 15 })
+          Text("请先设置SVG图片的url地址")
+          TextArea({ placeholder: '请输入SVG图片的url地址' })
+            .placeholderColor("rgb(0,0,35)")
+            .placeholderFont({ size: 20, weight: 100, family: 'cursive', style: FontStyle.Italic })
+            .textAlign(TextAlign.Center)
+            .caretColor(Color.Blue)
+            .height(40)
+            .width(400)
+            .fontSize(20)
+            .fontWeight(FontWeight.Bold)
+            .fontFamily("sans-serif")
+            .fontStyle(FontStyle.Normal)
+            .fontColor(Color.Red)
+            .onChange((value: string) => {
+              this.svgUrl = value
+            })
+          Flex({ direction: FlexDirection.Row }) {
+
+            Button('预加载网络资源svg')
+              .onClick(() => {
+              let request = new RequestOption();
+              request.load(this.svgUrl)
+                .setImageViewSize({ width: 300, height: 300 })
+                .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+                if (err) {
+                  console.log('预加载网络资源gif 出现错误! err=' + err)
+                } else {
+                  console.log('预加载网络资源gif成功! imageKnifedata=' + JSON.stringify(data))
+                }
+                return false;
+              }})
+              ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
+            })
+              .margin({ left: 15 })
+              .backgroundColor(Color.Grey)
+
+            Button('网络资源svg')
+              .onClick(() => {
+              this.imageKnifeOption = {
+                loadSrc: this.svgUrl,
+
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                   
+              };
+            })
+              .margin({ left: 15 })
+              .backgroundColor(Color.Grey)
+
+
+          }
+          .margin({ top: 15 })
+
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(200).height(200)
+
+        }
+
+        Column() {
+          Flex({ direction: FlexDirection.Row }) {
+            Button('预加载本地资源webp')
+              .onClick(() => {
+                let request = new RequestOption();
+                request.load($r('app.media.jpgSample'))
+                  .setImageViewSize({ width: 300, height: 300 })
+                  .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+                    if (err) {
+                      console.log('预加载本地资源webp 出现错误! err=' + err)
+                    } else {
+                  console.log('预加载本地资源webp成功! imageKnifedata=' + JSON.stringify(data))
+                }
+                return false;
+              }})
+              ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
+            })
+              .margin({ left: 15 })
+              .backgroundColor(Color.Grey)
+
+
+            Button('本地资源webp')
+              .onClick(() => {
+              this.imageKnifeOption3 = {
+                loadSrc: $r('app.media.jpgSample'),
+
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                   
+              }
+
+            })
+              .margin({ left: 15 })
+              .backgroundColor(Color.Grey)
+
+
+          }
+          .margin({ top: 15 })
+
+          Flex({ direction: FlexDirection.Row }) {
+
+            Button('预加载网络资源webp')
+              .onClick(() => {
+              let request = new RequestOption();
+              request.load('https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp')
+                .setImageViewSize({ width: 300, height: 300 })
+                .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+                if (err) {
+                  console.log('预加载网络资源webp 出现错误! err=' + err)
+                } else {
+                  console.log('预加载网络资源webp成功! imageKnifedata=' + JSON.stringify(data))
+                }
+                return false;
+              }})
+              ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
+            })
+              .margin({ left: 15 })
+              .backgroundColor(Color.Grey)
+
+            Button('网络资源webp')
+              .onClick(() => {
+              this.imageKnifeOption3 = {
+                loadSrc: 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
+
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                   
+              };
+            })
+              .margin({ left: 15 })
+              .backgroundColor(Color.Grey)
+          }
+          .margin({ top: 15 })
+
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 }).width(200).height(200)
+
+        }
+
+        Column() {
+          Flex({ direction: FlexDirection.Row }) {
+            Button('预加载本地资源bmp')
+              .onClick(() => {
+                let request = new RequestOption();
+                request.load($r('app.media.bmpSample'))
+                  .setImageViewSize({ width: 300, height: 300 })
+                  .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+                    if (err) {
+                      console.log('预加载本地资源bmp 出现错误! err=' + err)
+                    } else {
+                  console.log('预加载本地资源bmp成功! imageKnifedata=' + JSON.stringify(data))
+                }
+                return false;
+              }})
+              ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
+            })
+              .margin({ left: 15 })
+              .backgroundColor(Color.Grey)
+
+
+            Button('本地资源bmp')
+              .onClick(() => {
+              this.imageKnifeOption4 = {
+                loadSrc: $r('app.media.bmpSample'),
+
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                   
+              }
+
+            })
+              .margin({ left: 15 })
+              .backgroundColor(Color.Grey)
+
+
+          }
+          .margin({ top: 15 })
+
+          Flex({ direction: FlexDirection.Row }) {
+
+            Button('预加载网络资源bmp')
+              .onClick(() => {
+              let request = new RequestOption();
+              request.load('https://img-blog.csdn.net/20140514114029140')
+                .setImageViewSize({ width: 300, height: 300 })
+                .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+                  if (err) {
+                    console.log('预加载网络资源bmp 出现错误! err=' + err)
+                  } else {
+                    console.log('预加载网络资源bmp成功! imageKnifedata=' + JSON.stringify(data))
+                  }
+                  return false;
+                }})
+              ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
+            })
+              .margin({ left: 15 })
+              .backgroundColor(Color.Grey)
+
+            Button('网络资源bmp')
+              .onClick(() => {
+              this.imageKnifeOption4 = {
+                loadSrc: 'https://img-blog.csdn.net/20140514114029140',
+
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                   
+              };
+            })
+              .margin({ left: 15 })
+              .backgroundColor(Color.Grey)
+          }
+          .margin({ top: 15 })
+
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 }).width(200).height(200)
+
+        }
+
+        Column() {
+          Flex({ direction: FlexDirection.Row }) {
+            Button('预加载本地资源png')
+              .onClick(() => {
+                let request = new RequestOption();
+                request.load($r('app.media.pngSample'))
+                  .setImageViewSize({ width: 300, height: 300 })
+                  .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+                    if (err) {
+                      console.log('预加载本地资源png 出现错误! err=' + err)
+                    } else {
+                  console.log('预加载本地资源png成功! imageKnifedata=' + JSON.stringify(data))
+                }
+                return false;
+              }})
+              ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
+            })
+              .margin({ left: 15 })
+              .backgroundColor(Color.Grey)
+
+
+            Button('本地资源png')
+              .onClick(() => {
+              this.imageKnifeOption5 = {
+                loadSrc: $r('app.media.pngSample'),
+
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                   
+              }
+
+            })
+              .margin({ left: 15 })
+              .backgroundColor(Color.Grey)
+
+
+          }
+          .margin({ top: 15 })
+
+          Flex({ direction: FlexDirection.Row }) {
+
+            Button('预加载网络资源png')
+              .onClick(() => {
+              let request = new RequestOption();
+              request.load('https://img-blog.csdnimg.cn/20191215043500229.png')
+                .setImageViewSize({ width: 300, height: 300 })
+                .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+                if (err) {
+                  console.log('预加载网络资源bmp 出现错误! err=' + err)
+                } else {
+                  console.log('预加载网络资源bmp成功! imageKnifedata=' + JSON.stringify(data))
+                }
+                return false;
+              }})
+              ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
+            })
+              .margin({ left: 15 })
+              .backgroundColor(Color.Grey)
+
+            Button('网络资源png')
+              .onClick(() => {
+              this.imageKnifeOption5 = {
+                loadSrc: 'https://img-blog.csdnimg.cn/20191215043500229.png',
+
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                   
+              };
+            })
+              .margin({ left: 15 })
+              .backgroundColor(Color.Grey)
+          }
+          .margin({ top: 15 })
+
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption5 }).width(200).height(200)
+
+        }
+
+        Column() {
+          Flex({ direction: FlexDirection.Row }) {
+            Button('预加载本地资源jpg')
+              .onClick(() => {
+                let request = new RequestOption();
+                request.load($r('app.media.jpgSample'))
+                  .setImageViewSize({ width: 300, height: 300 })
+                  .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+                    if (err) {
+                      console.log('预加载本地资源jpg 出现错误! err=' + err)
+                    } else {
+                  console.log('预加载本地资源jpg成功! imageKnifedata=' + JSON.stringify(data))
+                }
+                return false;
+              }})
+              ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
+            })
+              .margin({ left: 15 })
+              .backgroundColor(Color.Grey)
+
+
+            Button('本地资源jpg')
+              .onClick(() => {
+              this.imageKnifeOption6 = {
+                loadSrc: $r('app.media.jpgSample'),
+
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                   
+              }
+
+            })
+              .margin({ left: 15 })
+              .backgroundColor(Color.Grey)
+
+
+          }
+          .margin({ top: 15 })
+
+          Flex({ direction: FlexDirection.Row }) {
+
+            Button('预加载网络资源jpg')
+              .onClick(() => {
+              let request = new RequestOption();
+              request.load('https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB')
+                .setImageViewSize({ width: 300, height: 300 })
+                .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+                if (err) {
+                  console.log('预加载网络资源jpg 出现错误! err=' + err)
+                } else {
+                  console.log('预加载网络资源jpg成功! imageknifedata=' + JSON.stringify(data))
+                }
+                return false;
+              }})
+              ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
+            })
+              .margin({ left: 15 })
+              .backgroundColor(Color.Grey)
+
+            Button('网络资源jpg')
+              .onClick(() => {
+              this.imageKnifeOption6 = {
+                loadSrc: 'https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB',
+
+                placeholderSrc: $r('app.media.icon_loading'),
+                errorholderSrc: $r('app.media.icon_failed'),
+                   
+              };
+            })
+              .margin({ left: 15 })
+              .backgroundColor(Color.Grey)
+          }
+          .margin({ top: 15 })
+
+          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption6 }).width(200).height(200)
+
+        }
+      }
+
+    }
+    .width('100%')
+    .height('100%')
+
+  }
+
+  aboutToAppear() {
+
+  }
+  aboutToDisappear(){
+
+  }
+}
+
+
--- a/entry/src/main/ets/pages/testSingleFrameGifPage.ets
+++ b/entry/src/main/ets/pages/testSingleFrameGifPage.ets
@ -0,0 +1,65 @@
+/*
+ * Copyright (C) 2021 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 } from '@ohos/libraryimageknife'
+import { ImageKnifeOption } from '@ohos/libraryimageknife'
+
+@Entry
+@Component
+struct TestSingleFrameGifPage {
+  @State message: string = '单帧gif测试'
+  @State options: ImageKnifeOption = {
+    loadSrc: $r('app.media.app_icon')
+  }
+
+  build() {
+    Column() {
+      Column() {
+        Text(`${this.message}`)
+          .width("300vp")
+          .height("60vp")
+          .textAlign(TextAlign.Center)
+          .fontSize("50fp")
+          .fontWeight(FontWeight.Bold)
+        Button("加载单帧gif")
+          .margin(16)
+          .onClick(() => {
+            console.log("加载单帧gif")
+            this.options = {
+              loadSrc: $r('app.media.gifSample_single_frame'),
+              placeholderSrc:$r('app.media.icon_loading')
+            }
+          })
+        Button("加载多帧gif")
+          .margin(16)
+          .onClick(() => {
+            console.log("加载多帧gif")
+            this.options = {
+              loadSrc: $r('app.media.gifSample'),
+              placeholderSrc:$r('app.media.icon_loading')
+            }
+          })
+        ImageKnifeComponent({ imageKnifeOption: this.options })
+          .margin(16)
+          .width(200)
+          .height(200)
+      }
+      .width("100%")
+      .height("100%")
+      .justifyContent(FlexAlign.Center)
+    }
+    .width("100%")
+    .height("100%")
+  }
+}
--- a/entry/src/main/ets/pages/transformPixelMapPage.ets
+++ b/entry/src/main/ets/pages/transformPixelMapPage.ets
@ -0,0 +1,995 @@
+/*
+ * Copyright (C) 2021 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 { RequestOption,ImageKnifeGlobal} from '@ohos/libraryimageknife'
+import { CropCircleTransformation } from '@ohos/libraryimageknife'
+import { RoundedCornersTransformation } from '@ohos/libraryimageknife'
+import {
+ rgbColor,CropCircleWithBorderTransformation
+} from  '@ohos/libraryimageknife'
+import { RotateImageTransformation } from '@ohos/libraryimageknife'
+import { CropSquareTransformation } from '@ohos/libraryimageknife'
+import { CropTransformation } from '@ohos/libraryimageknife'
+import { CropType } from '@ohos/libraryimageknife'
+import { GrayscaleTransformation } from '@ohos/libraryimageknife'
+import { BrightnessFilterTransformation } from '@ohos/libraryimageknife'
+import { ContrastFilterTransformation } from '@ohos/libraryimageknife'
+import { InvertFilterTransformation } from '@ohos/libraryimageknife'
+import { SepiaFilterTransformation } from '@ohos/libraryimageknife'
+import { SketchFilterTransformation } from '@ohos/libraryimageknife'
+import { BlurTransformation } from '@ohos/libraryimageknife'
+import { PixelationFilterTransformation } from '@ohos/libraryimageknife'
+import { MaskTransformation } from '@ohos/libraryimageknife'
+import { SwirlFilterTransformation } from '@ohos/libraryimageknife'
+import { BusinessError } from '@ohos.base'
+import {ImageKnifeData} from '@ohos/libraryimageknife'
+/**
+ * PixelMap transform 示例
+ */
+let mRotate: number = 0;
+//let mUrl = "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB"
+let mUrl = $r('app.media.pngSample');
+
+@Entry
+@Component
+struct TransformPixelMapPage {
+  @State url: string = "";
+  @State mCropPixelMap?: PixelMap = undefined;
+  @State mRoundPixelMap?: PixelMap = undefined;
+  @State mCirclePixelMap?: PixelMap = undefined;
+  @State mCircleBorderPixelMap?: PixelMap = undefined;
+  @State mRotatePixelMap?: PixelMap = undefined;
+  @State mSquarePixelMap?: PixelMap = undefined;
+  @State mClipTopPixelMap?: PixelMap = undefined;
+  @State mClipCenterPixelMap?: PixelMap = undefined;
+  @State mClipBottomPixelMap?: PixelMap = undefined;
+  @State mGrayscalePixelMap?: PixelMap = undefined;
+  @State mBrightnessPixelMap?: PixelMap = undefined;
+  @State mContrastPixelMap?: PixelMap = undefined;
+  @State mInvertPixelMap?: PixelMap = undefined;
+  @State mSepiaPixelMap?: PixelMap = undefined;
+  @State mSketchPixelMap?: PixelMap = undefined;
+  @State mBlurPixelMap?: PixelMap = undefined;
+  @State mPixelPixelMap?: PixelMap = undefined;
+  @State mSwirlPixelMap?: PixelMap = undefined;
+  @State mMaskPixelMap?: PixelMap = undefined;
+  @State mKuwaharaPixelMap?: PixelMap = undefined;
+  @State mToonPixelMap?: PixelMap = undefined;
+  @State mVignettePixelMap?: PixelMap = undefined;
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
+      Scroll() {
+        Column() {
+          Column() {
+            Text("基础变换").fontColor(Color.Gray).fontSize(16);
+            Row({ space: 1 }) {
+              Button() {
+                Text("CenterCrop").fontSize(13).fontColor(Color.White)
+              }
+              .height(35)
+              .width(100)
+              .onClick(() => {
+                this.centerCrop();
+              });
+              Button() {
+                Text("CenterInside").fontSize(13).fontColor(Color.White)
+              }
+              .height(35)
+              .width(100)
+              .onClick(() => {
+                this.centerInside();
+              });
+              Button() {
+                Text("fitCenter").fontSize(13).fontColor(Color.White)
+              }
+              .height(35)
+              .width(100)
+              .onClick(() => {
+                this.fitCenter();
+              });
+            }.margin({ top: 10 })
+
+            Image(this.mCropPixelMap == undefined ? '':this.mCropPixelMap!)
+              .objectFit(ImageFit.None)
+              .width(100)
+              .height(100)
+              .backgroundColor("#23d1de")
+              .margin({ top: 10 })
+
+          }.margin({ top: 10 });
+
+          Column() {
+            Text("RoundedCornersTransformation").fontColor(Color.Gray).fontSize(16);
+            Row({ space: 1 }) {
+              Button() {
+                Text($r("app.string.left_top_corner")).fontSize(13).fontColor(Color.White)
+              }
+              .height(35)
+              .width(72)
+              .onClick(() => {
+                this.roundedCornersTransformation(10, 0, 0, 0);
+              });
+              Button() {
+                Text($r("app.string.r_top_corner")).fontSize(13).fontColor(Color.White)
+              }
+              .height(35)
+              .width(72)
+              .onClick(() => {
+                this.roundedCornersTransformation(0, 0, 10, 0);
+              });
+              Button() {
+                Text($r("app.string.left_bottom_corner")).fontSize(13).fontColor(Color.White)
+              }
+              .height(35)
+              .width(72)
+              .onClick(() => {
+                this.roundedCornersTransformation(0, 10, 0, 0);
+              });
+              Button() {
+                Text($r("app.string.r_bottom_corner")).fontSize(13).fontColor(Color.White)
+              }
+              .height(35)
+              .width(72)
+              .onClick(() => {
+                this.roundedCornersTransformation(0, 0, 0, 10);
+              });
+              Button("All")
+                .fontSize(13)
+                .height(35)
+                .width(72)
+                .onClick(() => {
+                  this.roundedCornersTransformation(10, 10, 10, 10);
+                });
+            }.margin({ top: 10 })
+
+            Image(this.mRoundPixelMap == undefined ? '': this.mRoundPixelMap!)
+              .objectFit(ImageFit.Fill)
+              .width(100)
+              .height(100)
+              .margin({ top: 10 })
+
+          }.margin({ top: 10 });
+
+          Column() {
+            Text("CropCircleTransformation").fontColor(Color.Gray).fontSize(16);
+            Button() {
+              Text($r("app.string.trans_circle")).fontSize(13).fontColor(Color.White)
+            }
+            .height(35)
+            .width(120)
+            .margin({ top: 10 })
+            .onClick(() => {
+              this.circleTransformation();
+            });
+            Image(this.mCirclePixelMap == undefined ? '':this.mCirclePixelMap!)
+              .width(200)
+              .height(200)
+              .margin({ top: 10 })
+
+          }.margin({ top: 10 });
+
+          Column() {
+            Text("CropCircleWithBorderTransformation").fontColor(Color.Gray).fontSize(16);
+            Button() {
+              Text($r("app.string.trans_circle_border")).fontSize(13).fontColor(Color.White)
+            }
+            .height(35)
+            .width(120)
+            .margin({ top: 10 })
+            .onClick(() => {
+              this.circleBorderTransformation(5);
+            });
+            Image(this.mCircleBorderPixelMap == undefined ? '':this.mCircleBorderPixelMap!)
+              .width(200)
+              .height(200)
+              .margin({ top: 10 })
+
+          }.margin({ top: 10 });
+
+          Column() {
+            Text("RotateImageTransformation").fontColor(Color.Gray).fontSize(16);
+            Button() {
+              Text($r("app.string.trans_rotate")).fontSize(13).fontColor(Color.White)
+            }
+            .height(35)
+            .width(120)
+            .margin({ top: 10 })
+            .onClick(() => {
+              mRotate += 45;
+              if (mRotate > 360) {
+                mRotate = 0;
+              }
+              this.transformRotate(mRotate);
+            });
+            Image(this.mRotatePixelMap == undefined ? '':this.mRotatePixelMap!)
+              .width(200)
+              .height(200)
+              .margin({ top: 10 })
+
+          }.margin({ top: 10 });
+
+          Column() {
+            Text("CropSquareTransformation").fontColor(Color.Gray).fontSize(16);
+            Button() {
+              Text($r("app.string.trans_square")).fontSize(13).fontColor(Color.White)
+            }
+            .height(35)
+            .width(120)
+            .margin({ top: 10 })
+            .onClick(() => {
+              this.transformSquare();
+            });
+            Image(this.mSquarePixelMap == undefined ? '' : this.mSquarePixelMap!)
+              .objectFit(ImageFit.Fill)
+              .width(200)
+              .height(200)
+              .margin({ top: 10 })
+
+          }.margin({ top: 10 });
+
+          Column() {
+            Text("CropTransformation").fontColor(Color.Gray).fontSize(16);
+            Row({ space: 1 }) {
+              Button() {
+                Text($r("app.string.trans_clip_top")).fontSize(13).fontColor(Color.White)
+              }
+              .height(35)
+              .width(72)
+              .onClick(() => {
+                this.clipPixelMap(25, 25, CropType.TOP);
+              });
+              Button() {
+                Text($r("app.string.trans_clip_center")).fontSize(13).fontColor(Color.White)
+              }
+              .height(35)
+              .width(72)
+              .onClick(() => {
+                this.clipPixelMap(25, 25, CropType.CENTER);
+              });
+              Button() {
+                Text($r("app.string.trans_clip_bottom")).fontSize(13).fontColor(Color.White)
+              }
+              .height(35)
+              .width(72)
+              .onClick(() => {
+                this.clipPixelMap(25, 25, CropType.BOTTOM);
+              });
+            }.margin({ top: 10 })
+
+            Row({ space: 1 }) {
+              Image(this.mClipTopPixelMap == undefined ? '':this.mClipTopPixelMap!)
+                .objectFit(ImageFit.Fill)
+                .width(100)
+                .height(100)
+                .margin({ top: 10 })
+              Image(this.mClipCenterPixelMap == undefined ? '':this.mClipCenterPixelMap!)
+                .objectFit(ImageFit.Fill)
+                .width(100)
+                .height(100)
+                .margin({ top: 10 })
+              Image(this.mClipBottomPixelMap == undefined ? '':this.mClipBottomPixelMap!)
+                .objectFit(ImageFit.Fill)
+                .width(100)
+                .height(100)
+                .margin({ top: 10 })
+            }
+          }.margin({ top: 10 });
+
+          Column() {
+            Text("GrayscaleTransformation").fontColor(Color.Gray).fontSize(16);
+            Button() {
+              Text($r("app.string.image_grayscale")).fontSize(13).fontColor(Color.White)
+            }
+            .height(35)
+            .width(120)
+            .margin({ top: 10 })
+            .onClick(() => {
+              this.grayscalePixelMap();
+            });
+            Image(this.mGrayscalePixelMap == undefined ? '': this.mGrayscalePixelMap!)
+              .objectFit(ImageFit.Fill)
+              .width(200)
+              .height(200)
+              .margin({ top: 10 })
+
+          }.margin({ top: 10 });
+          Column() {
+            Text("BrightnessFilterTransformation").fontColor(Color.Gray).fontSize(16);
+            Button() {
+              Text($r("app.string.image_Brightness")).fontSize(13).fontColor(Color.White)
+            }
+            .height(35)
+            .width(120)
+            .margin({ top: 10 })
+            .onClick(() => {
+              this.brightnessPixelMap(0.8);
+            });
+            Image(this.mBrightnessPixelMap == undefined?'':this.mBrightnessPixelMap!)
+              .objectFit(ImageFit.Fill)
+              .width(200)
+              .height(200)
+              .margin({ top: 10 })
+
+          }.margin({ top: 10 });
+          Column() {
+            Text("ContrastFilterTransformation").fontColor(Color.Gray).fontSize(16);
+            Button() {
+              Text($r("app.string.image_Contrast")).fontSize(13).fontColor(Color.White)
+            }
+            .height(35)
+            .width(120)
+            .margin({ top: 10 })
+            .onClick(() => {
+              this.contrastPixelMap(4);
+            });
+            Image(this.mContrastPixelMap == undefined?'':this.mContrastPixelMap!)
+              .objectFit(ImageFit.Fill)
+              .width(200)
+              .height(200)
+              .margin({ top: 10 })
+
+          }.margin({ top: 10 });
+          Column() {
+            Text("InvertFilterTransformation").fontColor(Color.Gray).fontSize(16);
+            Button() {
+              Text($r("app.string.image_Invert")).fontSize(13).fontColor(Color.White)
+            }
+            .height(35)
+            .width(120)
+            .margin({ top: 10 })
+            .onClick(() => {
+              this.invertPixelMap();
+            });
+            Image(this.mInvertPixelMap == undefined ? '':this.mInvertPixelMap!)
+              .objectFit(ImageFit.Fill)
+              .width(200)
+              .height(200)
+              .margin({ top: 10 })
+
+          }.margin({ top: 10 });
+
+          Column() {
+            Text("SepiaFilterTransformation").fontColor(Color.Gray).fontSize(16);
+            Button() {
+              Text($r("app.string.image_Sepia")).fontSize(13).fontColor(Color.White)
+            }
+            .height(35)
+            .width(120)
+            .margin({ top: 10 })
+            .onClick(() => {
+              this.sepiaPixelMap();
+            });
+            Image(this.mSepiaPixelMap == undefined ? '':this.mSepiaPixelMap!)
+              .objectFit(ImageFit.Fill)
+              .width(200)
+              .height(200)
+              .margin({ top: 10 })
+
+          }.margin({ top: 10 });
+          Column() {
+            Text("SketchFilterTransformation").fontColor(Color.Gray).fontSize(16);
+            Button() {
+              Text($r("app.string.image_Sketch")).fontSize(13).fontColor(Color.White)
+            }
+            .height(35)
+            .width(120)
+            .margin({ top: 10 })
+            .onClick(() => {
+              this.sketchPixelMap();
+            });
+            Image(this.mSketchPixelMap == undefined ? '':this.mSketchPixelMap!)
+              .objectFit(ImageFit.Fill)
+              .width(200)
+              .height(200)
+              .margin({ top: 10 })
+
+          }.margin({ top: 10 });
+
+          Column() {
+            Text("BlurTransformation").fontColor(Color.Gray).fontSize(16);
+            Button() {
+              Text($r("app.string.image_blur")).fontSize(13).fontColor(Color.White)
+            }
+            .height(35)
+            .width(120)
+            .margin({ top: 10 })
+            .onClick(() => {
+              this.blurHandlePixelMap(20,3);
+            });
+            Image(this.mBlurPixelMap==undefined?'':this.mBlurPixelMap!)
+              .objectFit(ImageFit.Fill)
+              .width(200)
+              .height(200)
+              .margin({ top: 10 })
+
+          }.margin({ top: 10 });
+
+
+          Column() {
+            Text("PixelationFilterTransformation").fontColor(Color.Gray).fontSize(16);
+            Button() {
+              Text($r("app.string.image_pixel")).fontSize(13).fontColor(Color.White)
+            }
+            .height(35)
+            .width(120)
+            .margin({ top: 10 })
+            .onClick(() => {
+              this.pixelHandlePixelMap(20);
+            });
+            Image(this.mPixelPixelMap == undefined ? '':this.mPixelPixelMap!)
+              .objectFit(ImageFit.Fill)
+              .width(200)
+              .height(200)
+              .margin({ top: 10 })
+
+          }.margin({ top: 10 });
+
+          Column() {
+            Text("SwirlFilterTransformation").fontColor(Color.Gray).fontSize(16);
+            Button() {
+              Text("图片Swirl").fontSize(13).fontColor(Color.White)
+            }
+            .height(35)
+            .width(120)
+            .margin({ top: 10 })
+            .onClick(() => {
+              this.swirlHandlePixelMap();
+            });
+            Image(this.mSwirlPixelMap == undefined ? '':this.mSwirlPixelMap!)
+              .objectFit(ImageFit.Fill)
+              .width(200)
+              .height(200)
+              .margin({ top: 10 })
+
+          }.margin({ top: 10 });
+
+          Column() {
+            Text("MaskTransformation").fontColor(Color.Gray).fontSize(16);
+            Button() {
+              Text("图片mask").fontSize(13).fontColor(Color.White)
+            }
+            .height(35)
+            .width(120)
+            .margin({ top: 10 })
+            .onClick(() => {
+              this.maskHandlePixelMap($r('app.media.mask_starfish'));
+            });
+            Image(this.mMaskPixelMap == undefined ? '':this.mMaskPixelMap!)
+              .objectFit(ImageFit.Fill)
+              .width(200)
+              .height(200)
+              .margin({ top: 10 })
+
+          }.margin({ top: 10 });
+
+          Column() {
+            Text("KuwaharaFilterTransform").fontColor(Color.Gray).fontSize(16);
+            Button() {
+              Text("图片kuwahara").fontSize(13).fontColor(Color.White)
+            }
+            .height(35)
+            .width(120)
+            .margin({ top: 10 })
+            .onClick(() => {
+              this.kuwaharaHandlePixelMap();
+            });
+            Image(this.mKuwaharaPixelMap == undefined? '':this.mKuwaharaPixelMap!)
+              .objectFit(ImageFit.Fill)
+              .width(200)
+              .height(200)
+              .margin({ top: 10 })
+
+          }.margin({ top: 10 });
+
+          Column() {
+            Text("ToonFilterTransform").fontColor(Color.Gray).fontSize(16);
+            Button() {
+              Text("图片toon").fontSize(13).fontColor(Color.White)
+            }
+            .height(35)
+            .width(120)
+            .margin({ top: 10 })
+            .onClick(() => {
+              this.toonHandlePixelMap();
+            });
+            Image(this.mToonPixelMap == undefined?'':this.mToonPixelMap!)
+              .objectFit(ImageFit.Fill)
+              .width(200)
+              .height(200)
+              .margin({ top: 10 })
+
+          }.margin({ top: 10 });
+
+          Column() {
+            Text("VignetteFilterTransform").fontColor(Color.Gray).fontSize(16);
+            Button() {
+              Text("图片vignette").fontSize(13).fontColor(Color.White)
+            }
+            .height(35)
+            .width(120)
+            .margin({ top: 10 })
+            .onClick(() => {
+              this.vignetteHandlePixelMap();
+            });
+            Image(this.mVignettePixelMap == undefined ? '':this.mVignettePixelMap)
+              .objectFit(ImageFit.Fill)
+              .width(200)
+              .height(200)
+              .margin({ top: 10 })
+
+          }.margin({ top: 10 });
+
+        }.margin({ bottom: 30 });
+
+      }
+    }.width('100%').height('100%');
+  }
+
+  aboutToAppear() {
+
+  }
+
+  /**
+   * centerCrop
+   */
+  centerCrop() {
+    let imageKnifeOption = new RequestOption();
+    imageKnifeOption.load($r('app.media.jpgSample'))
+      // imageKnifeOption.load(mUrl)
+      .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+        this.mCropPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
+        return false;
+      }})
+      .setImageViewSize({ width: vp2px(100), height: vp2px(100) })
+      .skipMemoryCache(true)
+      .centerCrop();
+    ImageKnife?.call(imageKnifeOption);
+  }
+
+  /**
+   * centerInside
+   */
+  centerInside() {
+    let imageKnifeOption = new RequestOption();
+    imageKnifeOption.load($r('app.media.Back'))
+      .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+        this.mCropPixelMap  = data.drawPixelMap?.imagePixelMap as PixelMap;
+        return false;
+      }})
+      .setImageViewSize({ width: vp2px(100), height: vp2px(100) })
+      .skipMemoryCache(true)
+      .centerInside();
+    ImageKnife?.call(imageKnifeOption);
+  }
+
+  /**
+   * centerInside
+   */
+  fitCenter() {
+    let imageKnifeOption = new RequestOption()
+    imageKnifeOption.load($r('app.media.Back'))
+      .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+        this.mCropPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
+        return false;
+      }})
+      .setImageViewSize({ width: vp2px(100), height: vp2px(100) })
+      .skipMemoryCache(true)
+      .fitCenter();
+    ImageKnife?.call(imageKnifeOption);
+  }
+  /**
+   * 圆角设置
+   */
+  roundedCornersTransformation(top_left: number,
+                               bottom_left: number, top_right: number, bottom_right: number) {
+
+    let imageKnifeOption = new RequestOption();
+    imageKnifeOption.load(mUrl)
+      .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+        this.mRoundPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
+        return false;
+      }})
+      .setImageViewSize({ width: vp2px(100), height: vp2px(100) })
+      .skipMemoryCache(true)
+      .roundedCorners({
+        top_left: top_left,
+        top_right: top_right,
+        bottom_left: bottom_left,
+        bottom_right: bottom_right
+      })
+    ImageKnife?.call(imageKnifeOption);
+  }
+
+  /**
+   * 裁剪圆
+   */
+  circleTransformation() {
+    let imageKnifeOption = new RequestOption();
+    imageKnifeOption.load(mUrl)
+      .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+       
+        this.mCirclePixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
+ 
+        return false;
+      }})
+      .setImageViewSize({ width: vp2px(200), height: vp2px(200) })
+      .skipMemoryCache(true)
+      .cropCircle()
+    ImageKnife?.call(imageKnifeOption);
+  }
+
+  /**
+   * 圆环裁剪
+   */
+  circleBorderTransformation(border: number) {
+    let imageKnifeOption = new RequestOption();
+    let color:rgbColor = { r_color: 255, g_color: 204, b_color: 204 }
+    let circleTransformation = new CropCircleWithBorderTransformation(border,
+      color);
+    imageKnifeOption.load(mUrl)
+      .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+      
+        this.mCircleBorderPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
+   
+        return false;
+      }})
+      .setImageViewSize({ width: vp2px(200), height: vp2px(200) })
+      .skipMemoryCache(true)
+      .cropCircleWithBorder(border,
+        { r_color: 255, g_color: 204, b_color: 204 })
+    ImageKnife?.call(imageKnifeOption);
+  }
+
+  /**
+   * 旋转
+   */
+  transformRotate(angled: number) {
+    let imageKnifeOption = new RequestOption();
+    let transformation = new RotateImageTransformation(angled);
+    imageKnifeOption.load(mUrl)
+      .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+        
+        this.mRotatePixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
+  
+        return false;
+      }})
+      .setImageViewSize({ width: vp2px(200), height: vp2px(200) })
+      .skipMemoryCache(true)
+      .rotateImage(angled)
+    ImageKnife?.call(imageKnifeOption);
+  }
+
+  /**
+   * 正方形裁剪
+   */
+  transformSquare() {
+    let imageKnifeOption = new RequestOption();
+    let transformation = new CropSquareTransformation();
+    imageKnifeOption.load(mUrl)
+      .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+    
+        this.mSquarePixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
+       
+        return false;
+      }})
+      .setImageViewSize({ width: vp2px(200), height: vp2px(200) })
+      .skipMemoryCache(true)
+      .cropSquare()
+    ImageKnife?.call(imageKnifeOption);
+  }
+
+  /**
+   * 区域裁剪
+   */
+  clipPixelMap(width: number, height: number, cropType: CropType) {
+    let imageKnifeOption = new RequestOption();
+    let transformation = new CropTransformation(width, height, cropType);
+    imageKnifeOption.load(mUrl)
+      .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+        let result:PixelMap|undefined = undefined;
+        if (cropType == CropType.TOP) {
+          result = data.drawPixelMap?.imagePixelMap as PixelMap;
+          this.mClipTopPixelMap = result;
+        } else if (cropType == CropType.CENTER) {
+          result = data.drawPixelMap?.imagePixelMap as PixelMap;
+          this.mClipCenterPixelMap = result;
+        } else if (cropType == CropType.BOTTOM) {
+          result = data.drawPixelMap?.imagePixelMap as PixelMap;
+          this.mClipBottomPixelMap = result;
+        }
+        return false;
+      }})
+      .setImageViewSize({ width: width, height: height })
+      .skipMemoryCache(true)
+      .crop(width, height, cropType)
+    ImageKnife?.call(imageKnifeOption);
+
+  }
+
+  /**
+   * 灰度
+   */
+  grayscalePixelMap() {
+    let imageKnifeOption = new RequestOption();
+    let transformation = new GrayscaleTransformation();
+    imageKnifeOption.load(mUrl)
+      .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+    
+        this.mGrayscalePixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
+
+        return false;
+      }})
+      .setImageViewSize({ width: vp2px(200), height: vp2px(200) })
+      .skipMemoryCache(true)
+      .enableGPU()
+      .grayscale()
+    ImageKnife?.call(imageKnifeOption);
+
+  }
+
+  /**
+   *亮度b
+   */
+  brightnessPixelMap(brightness: number) {
+    let imageKnifeOption = new RequestOption();
+    let transformation = new BrightnessFilterTransformation(brightness);
+    imageKnifeOption.load(mUrl)
+      .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+
+        this.mBrightnessPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
+
+        return false;
+      }})
+      .setImageViewSize({ width: vp2px(200), height: vp2px(200) })
+      .skipMemoryCache(true)
+      .enableGPU()
+      .brightnessFilter(brightness)
+    ImageKnife?.call(imageKnifeOption);
+
+  }
+
+  /**
+   *对比度
+   */
+  contrastPixelMap(contrast: number) {
+    let imageKnifeOption = new RequestOption();
+    let transformation = new ContrastFilterTransformation(contrast);
+    imageKnifeOption.load(mUrl)
+      .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+
+        this.mContrastPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
+
+        return false;
+      }})
+      .setImageViewSize({ width: vp2px(200), height: vp2px(200) })
+      .skipMemoryCache(true)
+      .enableGPU()
+      .contrastFilter(contrast)
+    ImageKnife?.call(imageKnifeOption);
+
+  }
+
+  /**
+   *反转处理
+   */
+  invertPixelMap() {
+    let imageKnifeOption = new RequestOption();
+    let transformation = new InvertFilterTransformation();
+    imageKnifeOption.load(mUrl)
+      .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+        
+        this.mInvertPixelMap  = data.drawPixelMap?.imagePixelMap as PixelMap;
+
+        return false;
+      }})
+      .setImageViewSize({ width: vp2px(200), height: vp2px(200) })
+      .skipMemoryCache(true)
+      .enableGPU()
+      .invertFilter()
+    ImageKnife?.call(imageKnifeOption);
+
+  }
+
+  /**
+   *照片老旧出来（黑褐色）
+   */
+  sepiaPixelMap() {
+    let imageKnifeOption = new RequestOption();
+    let transformation = new SepiaFilterTransformation();
+    imageKnifeOption.load(mUrl)
+      .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+       
+        this.mSepiaPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
+
+        return false;
+      }})
+      .setImageViewSize({ width: vp2px(200), height: vp2px(200) })
+      .skipMemoryCache(true)
+      .enableGPU()
+      .sepiaFilter()
+    ImageKnife?.call(imageKnifeOption);
+
+  }
+
+  /**
+   *素描
+   */
+  sketchPixelMap() {
+    let imageKnifeOption = new RequestOption();
+    let transformation = new SketchFilterTransformation();
+    imageKnifeOption.load(mUrl)
+      .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+      
+        this.mSketchPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
+    
+        return false;
+      }})
+      .setImageViewSize({ width: vp2px(200), height: vp2px(200) })
+      .skipMemoryCache(true)
+      .enableGPU()
+      .sketchFilter()
+    ImageKnife?.call(imageKnifeOption);
+
+  }
+
+  /**
+   *模糊
+   */
+  blurHandlePixelMap(radius: number,sampling: number) {
+    let imageKnifeOption = new RequestOption();
+    let transformation = new BlurTransformation(radius,sampling);
+    imageKnifeOption.load(mUrl)
+      .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+       
+        this.mBlurPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
+
+        return false;
+      }})
+      .setImageViewSize({ width: vp2px(200), height: vp2px(200) })
+      .skipMemoryCache(true)
+      .enableGPU()
+      .blur(radius,sampling)
+    ImageKnife?.call(imageKnifeOption);
+
+  }
+  /**
+   *马赛克
+   */
+  pixelHandlePixelMap(pixel: number) {
+    let imageKnifeOption = new RequestOption();
+    let transformation = new PixelationFilterTransformation(pixel);
+    imageKnifeOption.load(mUrl)
+      .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+       
+        this.mPixelPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
+
+        return false;
+      }})
+      .setImageViewSize({ width: vp2px(200), height: vp2px(200) })
+      .skipMemoryCache(true)
+      .enableGPU()
+      .pixelationFilter(pixel)
+    ImageKnife?.call(imageKnifeOption);
+
+  }
+
+  /**
+   *扭曲
+   */
+  swirlHandlePixelMap() {
+    let imageKnifeOption = new RequestOption();
+    let transformation = new SwirlFilterTransformation(80);
+    imageKnifeOption.load(mUrl)
+      .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+
+        this.mSwirlPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
+
+        return false;
+      }})
+      .setImageViewSize({ width: vp2px(200), height: vp2px(200) })
+      .skipMemoryCache(true)
+      .enableGPU()
+      .swirlFilter(80)
+    //      .diskCacheStrategy(new NONE())
+    ImageKnife?.call(imageKnifeOption);
+
+  }
+  /**
+   *遮罩
+   */
+  maskHandlePixelMap(maskResource: Resource) {
+    let imageKnifeOption = new RequestOption();
+    let transformation = new MaskTransformation(maskResource);
+    // imageKnifeOption.load($r('app.media.photo6'))
+    imageKnifeOption.load(mUrl)
+      .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+
+        this.mMaskPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
+
+        return false;
+      }})
+      .setImageViewSize({ width: vp2px(200), height: vp2px(200) })
+      .skipMemoryCache(true)
+      .mask(maskResource)
+    //      .diskCacheStrategy(new NONE())
+    ImageKnife?.call(imageKnifeOption);
+
+  }
+
+  /**
+   *kuwahara
+   */
+  kuwaharaHandlePixelMap() {
+    let imageKnifeOption = new RequestOption();
+    imageKnifeOption.load(mUrl)
+      .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+      
+        this.mKuwaharaPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
+
+        return false;
+      }})
+      .setImageViewSize({ width: vp2px(200), height: vp2px(200) })
+      .skipMemoryCache(true)
+      .enableGPU()
+      .kuwaharaFilter(20.0)
+    //      .diskCacheStrategy(new NONE())
+    ImageKnife?.call(imageKnifeOption);
+
+  }
+
+  /**
+   *toon
+   */
+  toonHandlePixelMap() {
+    let imageKnifeOption = new RequestOption();
+    imageKnifeOption.load(mUrl)
+      .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+      
+        this.mToonPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
+
+        return false;
+      }})
+      .setImageViewSize({ width: vp2px(200), height: vp2px(200) })
+      .skipMemoryCache(true)
+      .enableGPU()
+      .toonFilter(0.2, 50.0);
+    //      .diskCacheStrategy(new NONE())
+    ImageKnife?.call(imageKnifeOption);
+
+  }
+
+  /**
+   *vignette
+   */
+  vignetteHandlePixelMap() {
+    let imageKnifeOption = new RequestOption();
+    imageKnifeOption.load(mUrl)
+      .addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
+       
+        this.mVignettePixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
+    
+        return false;
+      }})
+      .setImageViewSize({ width: vp2px(200), height: vp2px(200) })
+      .skipMemoryCache(true)
+      .enableGPU()
+      .vignetteFilter([0.5, 0.5], [0.0, 0.0, 0.0], [0.3, 0.5])
+    //      .diskCacheStrategy(new NONE())
+    ImageKnife?.call(imageKnifeOption);
+
+  }
+}
+
+let ImageKnife =  ImageKnifeGlobal.getInstance().getImageKnife();
--- a/entry/src/main/ets/workers/upngWorkerDepend.ts
+++ b/entry/src/main/ets/workers/upngWorkerDepend.ts
@ -0,0 +1,70 @@
+/*
+ * 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 worker, { ThreadWorkerGlobalScope, MessageEvents, ErrorEvent } from '@ohos.worker';
+
+export  function resolvePngWorker (workerPort,UPNG, e: MessageEvents) {
+
+  let data = e.data;
+
+  switch (data.type) {
+
+    case 'readPngImageAsync':
+
+      let png = UPNG.decode(data.data);
+
+      let array = png.data;
+
+      let arrayData = array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset)
+
+      png.data = arrayData;
+
+      let dataObj = { type: 'readPngImageAsync', data: png, receiver: data.data }
+
+      workerPort.postMessage(dataObj, [png.data, data.data]);
+
+      break;
+
+    case 'writePngWithStringAsync':
+
+      let addInfo = data.info;
+
+      let pngDecode = UPNG.decode(data.data);
+
+      let newPng = UPNG.encodeWithString(addInfo, UPNG.toRGBA8(pngDecode), pngDecode.width, pngDecode.height, 0)
+
+      let dataObj2 = { type: 'writePngWithStringAsync', data: newPng, receiver: data.data }
+
+      workerPort.postMessage(dataObj2, [newPng, data.data]);
+
+      break;
+
+    case 'writePngAsync':
+
+      let pngDecode3 = UPNG.decode(data.data);
+
+      let newPng3 = UPNG.encode(UPNG.toRGBA8(pngDecode3), pngDecode3.width, pngDecode3.height, 0)
+
+      let dataObj3 = { type: 'writePngAsync', data: newPng3, receiver: data.data }
+
+      workerPort.postMessage(dataObj3, [newPng3, data.data]);
+
+      break;
+
+    default:
+
+      break
+  }
+}
--- a/entry/src/main/ets/workers/upngWorkerTestCase.ets
+++ b/entry/src/main/ets/workers/upngWorkerTestCase.ets
@ -0,0 +1,25 @@
+/*
+ * 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 worker, { ThreadWorkerGlobalScope, MessageEvents, ErrorEvent } from '@ohos.worker';
+import { UPNG } from '@ohos/libraryimageknife'
+import {resolvePngWorker} from './upngWorkerDepend'
+const workerPort: ThreadWorkerGlobalScope = worker.workerPort;
+
+workerPort.onmessage =  (e: MessageEvents)=> {
+
+  resolvePngWorker(workerPort,UPNG,e)
+
+}
--- a/entry/src/main/module.json5
+++ b/entry/src/main/module.json5
@ -2,8 +2,9 @@
  "module": {
    "name": "entry",
    "type": "entry",
-    "description": "$string:module_desc",
-    "mainElement": "EntryAbility",
+
+    "description": "$string:entry_desc",
+    "mainElement": "MainAbility",
    "deviceTypes": [
      "default",
      "tablet"
@ -11,16 +12,23 @@
    "deliveryWithInstall": true,
    "installationFree": false,
    "pages": "$profile:main_pages",
+    "metadata": [
+      {
+        "name": "ArkTSPartialUpdate",
+        "value": "true"
+      }
+    ],
+    "uiSyntax": "ets",
    "abilities": [
      {
-        "name": "EntryAbility",
-        "srcEntry": "./ets/entryability/EntryAbility.ets",
-        "description": "$string:EntryAbility_desc",
+        "name": "MainAbility",
+        "srcEntrance": "./ets/entryability/EntryAbility.ets",
+        "description": "$string:MainAbility_desc",
        "icon": "$media:icon",
-        "label": "$string:EntryAbility_label",
-        "startWindowIcon": "$media:startIcon",
-        "startWindowBackground": "$color:start_window_background",
-        "exported": true,
+        "label": "$string:MainAbility_label",
+        "startWindowIcon": "$media:icon",
+        "startWindowBackground": "$color:test_color",
+        "visible": true,
        "skills": [
          {
            "entities": [
@ -42,6 +50,26 @@
          ],
          "when": "always"
        }
+      },
+      {
+        "name": "ohos.permission.MEDIA_LOCATION",
+        "reason": "$string:app_permission_MEDIA_LOCATION",
+        "usedScene": {
+          "abilities": [
+            "EntryAbility"
+          ],
+          "when": "always"
+        }
+      },
+      {
+        "name": "ohos.permission.READ_MEDIA",
+        "reason": "$string:app_permission_READ_MEDIA",
+        "usedScene": {
+          "abilities": [
+            "EntryAbility"
+          ],
+          "when": "always"
+        }
      }
    ]
  }
--- a/entry/src/main/resources/base/element/color.json
+++ b/entry/src/main/resources/base/element/color.json
@ -1,8 +1,8 @@
 {
  "color": [
    {
-      "name": "start_window_background",
-      "value": "#FFFFFF"
+      "name": "test_color",
+      "value": "#3d2564"
    }
  ]
 }
--- a/entry/src/main/resources/base/element/string.json
+++ b/entry/src/main/resources/base/element/string.json
@ -1,516 +1,125 @@
 {
  "string": [
    {
-      "name": "module_desc",
-      "value": "module description"
-    },
-    {
-      "name": "EntryAbility_desc",
+      "name": "entry_desc",
      "value": "description"
    },
    {
-      "name": "EntryAbility_label",
-      "value": "label"
+      "name": "MainAbility_desc",
+      "value": "description"
    },
    {
-      "name": "app_permission_WRITE_IMAGEVIDEO",
-      "value": "获取写入媒体资源权限"
+      "name": "MainAbility_label",
+      "value": "ImageKnife"
    },
+
    {
-      "name": "app_permission_READ_IMAGEVIDEO",
-      "value": "获取读媒体资源权限"
+      "name": "ImageKnife_OHOS",
+      "value": "ImageKnife_OHOS"
    },
    {
-      "name": "Test_ImageAnimator",
-      "value": "Test ImageAnimator component"
+      "name": "mainability_description",
+      "value": "ETS_Empty Ability"
    },
    {
-      "name": "Test_multiple_images",
-      "value": "Test loading multiple identical images"
+      "name": "left_top_corner",
+      "value": "左上角"
    },
    {
-      "name": "Test_Task_error",
-      "value": "Test placeholder map Task error"
+      "name": "r_top_corner",
+      "value": "右上角"
    },
    {
-      "name": "Test_HSP",
-      "value": "Test HSP scene preloading"
+      "name": "left_bottom_corner",
+      "value": "左下角"
    },
    {
-      "name": "Test_SingleImage",
-      "value": "SingleImage"
+      "name": "r_bottom_corner",
+      "value": "右下角"
    },
    {
-      "name": "Test_custom_download",
-      "value": "Global custom download"
+      "name": "trans_circle",
+      "value": "裁剪-圆"
    },
    {
-      "name": "Multiple_images",
-      "value": "Multiple images"
+      "name": "trans_circle_border",
+      "value": "裁剪-圆环"
    },
    {
-      "name": "Display_long_image",
-      "value": "Display long image"
+      "name": "trans_rotate",
+      "value": "旋转"
    },
    {
-      "name": "Image_scaling",
-      "value": "Image scaling"
+      "name": "trans_square",
+      "value": "正方形裁剪"
    },
    {
-      "name": "Message_list",
-      "value": "Message list"
+      "name": "trans_clip_top",
+      "value": "上方裁剪"
    },
    {
-      "name": "Custom_cache_key",
-      "value": "Custom cache key"
+      "name": "trans_clip_center",
+      "value": "中间裁剪"
    },
    {
-      "name": "Preloading_images_to_cache",
-      "value": "Preloading images to file cache"
+      "name": "trans_clip_bottom",
+      "value": "底下裁剪"
    },
    {
-      "name": "Retrieve_image_display_from_cache",
-      "value": "Retrieve image display from cache"
+      "name": "resource_image_compress",
+      "value": "资源图片压缩"
    },
    {
-      "name": "Test_single_request_header",
-      "value": "Test a single request header"
+      "name": "file_image_compress",
+      "value": "本地文件图片压缩"
    },
    {
-      "name": "Test_write_cache_strategy",
-      "value": "Test write cache strategy"
+      "name": "image_transform",
+      "value": "图片变换"
    },
    {
-      "name": "Image_Transformation",
-      "value": "Image Transformation"
+      "name": "image_compress",
+      "value": "图片压缩"
    },
    {
-      "name": "Different_ObjectFit",
-      "value": "Different ObjectFit"
+      "name": "image_grayscale",
+      "value": "灰度处理"
    },
    {
-      "name": "Test_image_loading_success_or_failure_events",
-      "value": "Test image loading success/failure events"
+      "name": "image_Brightness",
+      "value": "亮度处理"
    },
    {
-      "name": "Test_removing_image_cache_interface",
-      "value": "Test removing image cache interface"
+      "name": "image_Contrast",
+      "value": "对比度处理"
    },
    {
-      "name": "Test_error_image_display",
-      "value": "Test error image display"
+      "name": "image_Invert",
+      "value": "反转处理"
    },
    {
-      "name": "Test_media_URL",
-      "value": "Test media URL"
+      "name": "image_Sepia",
+      "value": "黑褐色处理"
    },
    {
-      "name": "Display_the_first_frame",
-      "value": "Display the first frame of the animation"
+      "name": "image_Sketch",
+      "value": "素描处理"
    },
    {
-      "name": "Display_the_last_frame",
-      "value": "Display the last frame of the animation"
+      "name": "image_blur",
+      "value": "模糊处理"
    },
    {
-      "name": "Play",
-      "value": "Play"
+      "name": "image_pixel",
+      "value": "马赛克处理"
    },
    {
-      "name": "Pause",
-      "value": "Pause"
+      "name": "app_permission_MEDIA_LOCATION",
+      "value": "获取媒体图片"
    },
    {
-      "name": "Stop",
-      "value": "Stop"
-    },
-    {
-      "name": "Infinite_loop",
-      "value": "Infinite loop"
-    },
-    {
-      "name": "Play_once",
-      "value": "Play once"
-    },
-    {
-      "name": "Play_twice",
-      "value": "Play twice"
-    },
-    {
-      "name": "Local_SVG",
-      "value": "Local SVG image"
-    },
-    {
-      "name": "Under_context_file",
-      "value": "Files under context file"
-    },
-    {
-      "name": "Network_images",
-      "value": "Network images"
-    },
-    {
-      "name": "Custom_network_download",
-      "value": "Custom network download"
-    },
-    {
-      "name": "PixelMap_loads_images",
-      "value": "PixelMap loads images"
-    },
-    {
-      "name": "Enlarge",
-      "value": "Enlarge"
-    },
-    {
-      "name": "Reduce",
-      "value": "Reduce"
-    },
-    {
-      "name": "Click_on_add",
-      "value": "Click on the size to add 50"
-    },
-    {
-      "name": "Click_on_reduce",
-      "value": "Click to reduce size by 50"
-    },
-    {
-      "name": "The_key_fixed_1",
-      "value": "The key is fixed at 1"
-    },
-    {
-      "name": "The_key_changes_timestamp",
-      "value": "Key changes every time: timestamp"
-    },
-    {
-      "name": "Load",
-      "value": "Load"
-    },
-    {
-      "name": "Preloading_images_to_file_cache_using_URL",
-      "value": "Preloading images to file cache using URL"
-    },
-    {
-      "name": "Preloading_images_to_file_cache_using_option",
-      "value": "Preloading images to file cache using option"
-    },
-    {
-      "name": "Load_image_offline_after_preloading",
-      "value": "Load image (can be loaded offline after preloading)"
-    },
-    {
-      "name": "Preloading_GIF",
-      "value": "Preloading GIF"
-    },
-    {
-      "name": "Retrieve_GIF_from_memory",
-      "value": "Retrieve GIF from memory cache"
-    },
-    {
-      "name": "Retrieve_GIF_from_disk",
-      "value": "Retrieve GIF from disk cache"
-    },
-    {
-      "name": "Preloading_static_images",
-      "value": "Preloading static images"
-    },
-    {
-      "name": "Retrieve_images_from_memory",
-      "value": "Retrieve images from memory cache"
-    },
-    {
-      "name": "Retrieve_images_from_disk",
-      "value": "Retrieve images from memory disk"
-    },
-    {
-      "name": "Write_memory_and_file",
-      "value": "Write to memory and file cache"
-    },
-    {
-      "name": "Write_memory",
-      "value": "Write to memory cache"
-    },
-    {
-      "name": "Write_file",
-      "value": "Write to file cache"
-    },
-    {
-      "name": "Main_image_Fill",
-      "value": "Main image Fill Stretch Fill"
-    },
-    {
-      "name": "Maintain_proportion_filling",
-      "value": "Maintain proportion filling in the placeholder map 'Include'"
-    },
-    {
-      "name": "Error_graph_None",
-      "value": "Error graph None remains unchanged"
-    },
-    {
-      "name": "Test_failure_success",
-      "value": "Test failure/success"
-    },
-    {
-      "name": "Custom_download_failed",
-      "value": "Custom download failed"
-    },
-    {
-      "name": "Retrieve_media_gallery",
-      "value": "Retrieve the URI of the media gallery and display it using ImageKnife"
-    },
-    {
-      "name": "Click_load_Uri",
-      "value": "Click to load Uri and display"
-    },
-    {
-      "name": "Delete_all_caches",
-      "value": "Delete all caches"
-    },
-    {
-      "name": "Delete_all_memory_caches",
-      "value": "Delete all memory caches"
-    },
-    {
-      "name": "Delete_all_file_caches",
-      "value": "Delete all file caches"
-    },
-    {
-      "name": "Delete_all_custom_memory_caches",
-      "value": "Delete all custom memory caches"
-    },
-    {
-      "name": "Delete_all_custom_file_caches",
-      "value": "Delete all custom file caches"
-    },
-    {
-      "name": "Blur_effect",
-      "value": "Blur effect"
-    },
-    {
-      "name": "Highlighting_effect",
-      "value": "Highlighting effect"
-    },
-    {
-      "name": "Ashing_effect",
-      "value": "Ashing effect"
-    },
-    {
-      "name": "Inverse_effect",
-      "value": "Inverse effect"
-    },
-    {
-      "name": "Animation_filter_effect",
-      "value": "Animation filter effect"
-    },
-    {
-      "name": "Crop_circular_effect",
-      "value": "Crop circular effect"
-    },
-    {
-      "name": "Crop_circular_with_border_effect",
-      "value": "Crop circular with border effect"
-    },
-    {
-      "name": "Contrast_effect",
-      "value": "Contrast effect"
-    },
-    {
-      "name": "Black_ink_filtering_effect",
-      "value": "Black ink filtering effect"
-    },
-    {
-      "name": "Rotate",
-      "value": "Rotate"
-    },
-    {
-      "name": "Corners",
-      "value": "Corners"
-    },
-    {
-      "name": "Kuwahara_Filter_effect",
-      "value": "Kuwahara filter effect"
-    },
-    {
-      "name": "Pixelated_Filter_effect",
-      "value": "Pixelated filtering effect"
-    },
-    {
-      "name": "Sketch_Filter_effect",
-      "value": "Sketch Filter effect"
-    },
-    {
-      "name": "Distortion_Filter_effect",
-      "value": "Distortion Filter effect"
-    },
-    {
-      "name": "Decorative_Filter_effect",
-      "value": "Decorative Filter effect"
-    },
-    {
-      "name": "Square_cutting_effect",
-      "value": "Square cutting effect"
-    },
-    {
-      "name": "Top_cutting_effect",
-      "value": "Top cutting effect"
-    },
-    {
-      "name": "Middle_cutting_effect",
-      "value": "Middle cutting effect"
-    },
-    {
-      "name": "Bottom_cutting_effect",
-      "value": "Bottom cutting effect"
-    },
-    {
-      "name": "Mask_effect",
-      "value": "Mask effect"
-    },
-    {
-      "name": "TIPS",
-      "value": "Please shut down the network first and ensure that there is no cache of images from this network in the test failure scenario locally"
-    },
-    {
-      "name": "Image_Downsampling_Functionality",
-      "value": "Downscale Image effect"
-    },
-    {
-      "name": "Sampling_pecification",
-      "value": "降采样规格"
-    },
-    {
-      "name": "Unreal_samples",
-      "value": "未降采样大小"
-    },
-    {
-      "name": "After_the_sampling",
-      "value": "降采样后大小"
-    },
-    {
-      "name": "image_format",
-      "value": "picture format：%s"
-    },
-    {
-      "name": "image_width",
-      "value": "image width：%d"
-    },
-    {
-      "name": "image_height",
-      "value": "image height：%d"
-    },
-    {
-      "name": "cur_cache_limit",
-      "value": "%s:current cache limit：%fM"
-    },
-    {
-      "name": "cur_cache_image_num",
-      "value": "%s:current cache image number：%d"
-    },
-    {
-      "name": "cur_cache_size",
-      "value": "%s:current cache size：%fM"
-    },
-    {
-      "name": "load_memory",
-      "value": "memory loaded picture"
-    },
-    {
-      "name": "load_disk",
-      "value": "disk cache loads images"
-    },
-    {
-      "name": "get_cur_memory_limit",
-      "value": "gets the current memory cache upper limit"
-    },
-    {
-      "name": "get_img_number_of_cache",
-      "value": "gets the number of images cached in memory"
-    },
-    {
-      "name": "get_cur_memory_size",
-      "value": "gets the size of the current cache"
-    },
-    {
-      "name": "get_cur_disk_limit",
-      "value": "Gets the current disk cache upper limit"
-    },
-    {
-      "name": "get_img_number_of_disk",
-      "value": "gets the number of images cached on disk"
-    },
-    {
-      "name": "get_cur_disk_size",
-      "value": "gets the size of the current disk"
-    },
-    {
-      "name": "select_color_btn",
-      "value": "click to select the color you want to change"
-    },
-    {
-      "name": "click_img_to_change_color",
-      "value": "click on the image to change the image color"
-    },
-    {
-      "name": "test_non_svg_color",
-      "value": "test non-SVG images for color change"
-    },
-    {
-      "name": "test_svg_color",
-      "value": "Test svg picture color change"
-    },
-    {
-      "name": "red",
-      "value": "red"
-    },
-    {
-      "name": "yellow",
-      "value": "yellow"
-    },
-    {
-      "name": "green",
-      "value": "green"
-    },
-    {
-      "name": "blue",
-      "value": "blue"
-    },
-    {
-      "name": "master_image",
-      "value": "master image:"
-    },
-    {
-      "name": "rm_component_of_net",
-      "value": "remove Component - Network load picture"
-    },
-    {
-      "name": "rm_component_of_local",
-      "value": "remove Component - Local resource picture"
-    },
-    {
-      "name": "component_display",
-      "value": "recovery component display"
-    },
-    {
-      "name": "onLoadCancel_reason",
-      "value": "onLoadCancel callback reason:%s"
-    },
-    {
-      "name": "test_cache_btn",
-      "value": "test data for in cache"
-    },
-    {
-      "name": "test_change_color_btn",
-      "value": "test change color for image"
-    },
-    {
-      "name": "test_cancel_callback_btn",
-      "value": "test callback of cancel"
-    },
-    {
-      "name": "memory",
-      "value": "Memory"
-    },
-    {
-      "name": "disk",
-      "value": "Disk"
+      "name": "app_permission_READ_MEDIA",
+      "value": "读媒体图片"
    }
  ]
 }
--- a/entry/src/main/resources/base/media/Back.png
+++ b/entry/src/main/resources/base/media/Back.png
--- a/entry/src/main/resources/base/media/aaa.jpg
+++ b/entry/src/main/resources/base/media/aaa.jpg
--- a/entry/src/main/resources/base/media/bmpSample.bmp
+++ b/entry/src/main/resources/base/media/bmpSample.bmp
--- a/entry/src/main/resources/base/media/dpgSample.dpg
+++ b/entry/src/main/resources/base/media/dpgSample.dpg
--- a/entry/src/main/resources/base/media/gifSample.gif
+++ b/entry/src/main/resources/base/media/gifSample.gif
--- a/entry/src/main/resources/base/media/gifSample_single_frame.gif
+++ b/entry/src/main/resources/base/media/gifSample_single_frame.gif
--- a/Show More
+++ b/Show More