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

## 3.0.0-rc.0 

使用Image组件替换Canvas组件渲染，并重构大部分的实现逻辑，提升渲染性能

Signed-off-by: madixin <madixin@huawei.com>
This commit is contained in:
madixin 2024-03-31 15:55:44 +08:00
parent 90dca0464e
commit ae7a8a864f
314 changed files with 5824 additions and 26572 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
AppScope/app.json5
View File

@ -3,7 +3,7 @@
"bundleName": "com.openharmony.imageknife", "bundleName": "com.openharmony.imageknife",
"vendor": "example", "vendor": "example",
"versionCode": 1000000, "versionCode": 1000000,
"versionName": "2.1.2-rc.0", "versionName": "3.0.0-rc.0",
"icon": "$media:app_icon", "icon": "$media:app_icon",
"label": "$string:app_name", "label": "$string:app_name",
"distributedNotificationEnabled": true "distributedNotificationEnabled": true

BIN
AppScope/resources/base/media/app_icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

36
CHANGELOG.md
View File

@ -1,25 +1,17 @@
## 2.1.2-rc.12 ## 3.0.0-rc.0
- 新增磁盘预加载返回文件路径接口prefetchToDiskCache 使用Image组件替换Canvas组件渲染，并重构大部分的实现逻辑，提升渲染性能
缺失特性
## 2.1.2-rc.11 - gif/webp动图显示与控制
- 修复设置磁盘容量最大值出现闪退 - 支持自定义key的实现
- 修复概率出现jscrash问题 - 支持进行图片变换: 支持图像像素源图片变换效果。
- 修复进度条问题 - 使用IDrawLifeCycle自绘Canvas
- 修复单帧gif图片加载失败 较2.x版本增强点：
- removeRunning删除running队列log设置开关 - 使用Image组件渲染，提升渲染性能
- ImageKnife新增图片宽高自适应功能 - 支持通过initMemoryCache自定义策略内存缓存策略和大小。
- 修复onlyRetrieveFromCache属性(仅磁盘和内存获取资源)失效 - 支持option自定义实现图片获取/网络下载
- 修改拼写错误 - 继承Image的能力，支持option传入border，设置边框，圆角
- 新增多线程优先级 - 继承Image的能力，支持option传入objectFit设置图片缩放
- 修复复用场景下图片闪动以及概率错位 - 并发请求数量，支持请求排队队列的优先级
- 获取组件宽高改为使用CanvasRenderingContext2D对象获取宽高，并修复改变字体大小导致部分图片消失
- 修复获取不到磁盘缓存文件问题
- 修复获取不到网络请求错误回调问题
## 2.1.2-rc.10
- 修复部分gif图片识别成静态图
- 修复同一张图片发送多次请求
- 复用场景缓存到树aboutToRecycle清理定时器
## 2.1.2-rc.9 ## 2.1.2-rc.9
- 使用taskpool实现多线程加载图片资源 - 使用taskpool实现多线程加载图片资源

6
OAT.xml
View File

@ -10,7 +10,7 @@
<filteritem type="filename" name="hvigorw" desc="hvigorw配置文件，DevEco Studio自动生成，不手动修改"/> <filteritem type="filename" name="hvigorw" desc="hvigorw配置文件，DevEco Studio自动生成，不手动修改"/>
<filteritem type="filename" name="hvigorw.bat" 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="filename" name="hvigor-wrapper.js" desc="hvigorw配置文件，DevEco Studio自动生成，不手动修改"/>
<filteritem type="filepath" name="library/src/main/ets/components/3rd_party/.*" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/> <filteritem type="filepath" name="library/src/main/ets/3rd_party/.*" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
</filefilter> </filefilter>
<filefilter name="defaultPolicyFilter" desc="Filters for compatibility，license header policies"> <filefilter name="defaultPolicyFilter" desc="Filters for compatibility，license header policies">
<filteritem type="filename" name="hvigorfile.*" desc="hvigor配置文件，DevEco Studio自动生成，不手动修改"/> <filteritem type="filename" name="hvigorfile.*" desc="hvigor配置文件，DevEco Studio自动生成，不手动修改"/>
@ -20,7 +20,7 @@
<filteritem type="filename" name="hvigorw" desc="hvigorw配置文件，DevEco Studio自动生成，不手动修改"/> <filteritem type="filename" name="hvigorw" desc="hvigorw配置文件，DevEco Studio自动生成，不手动修改"/>
<filteritem type="filename" name="hvigorw.bat" 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="filename" name="hvigor-wrapper.js" desc="hvigorw配置文件，DevEco Studio自动生成，不手动修改"/>
<filteritem type="filepath" name="library/src/main/ets/components/3rd_party/.*" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/> <filteritem type="filepath" name="library/src/main/ets/3rd_party/.*" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
</filefilter> </filefilter>
<filefilter name="binaryFileTypePolicyFilter" desc="Filters for binary file policies"> <filefilter name="binaryFileTypePolicyFilter" desc="Filters for binary file policies">
<filteritem type="filename" name="*.dpg" desc="dpg图片格式文件,用于展示示例"/> <filteritem type="filename" name="*.dpg" desc="dpg图片格式文件,用于展示示例"/>
@ -34,7 +34,7 @@
<filteritem type="filename" name="*.json5" desc="hvigor配置文件"/> <filteritem type="filename" name="*.json5" desc="hvigor配置文件"/>
</filefilter> </filefilter>
<filefilter name="defaultFilter" desc="Files not to check"> <filefilter name="defaultFilter" desc="Files not to check">
<filteritem type="filepath" name="library/src/main/ets/components/3rd_party/.*" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/> <filteritem type="filepath" name="library/src/main/ets/3rd_party/.*" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
</filefilter> </filefilter>
</filefilterlist> </filefilterlist>
</oatconfig> </oatconfig>

626
README.md
View File

@ -4,526 +4,116 @@
## 简介 ## 简介
本项目基于开源库 [Glide](https://github.com/bumptech/glide) 进行OpenHarmony的自研版本： 本项目参考开源库 [Glide](https://github.com/bumptech/glide) 进行OpenHarmony的自研版本：
- 支持内存缓存，使用LRUCache算法，对图片数据进行内存缓存。 - 支持内存缓存，使用LRUCache算法，对图片数据进行内存缓存。
- 支持磁盘缓存，对于下载图片会保存一份至磁盘当中。 - 支持通过initMemoryCache自定义策略内存缓存策略和大小。
- 支持进行图片变换: 支持图像像素源图片变换效果。 - 支持磁盘二级缓存，对于下载图片会保存一份至磁盘当中。
- 支持用户配置参数使用:( - 支持option自定义实现图片获取/网络下载
例如：配置是否开启一级内存缓存，配置磁盘缓存策略，配置仅使用缓存加载数据，配置图片变换效果，配置占位图，配置加载失败占位图等)。 - 支持监听网络下载回调进度
- 推荐使用ImageKnifeComponent组件配合ImageKnifeOption参数来实现功能。 - 继承Image的能力，支持option传入border，设置边框，圆角
- 支持用户自定义配置实现能力参考ImageKnifeComponent组件中对于入参ImageKnifeOption的处理。 - 继承Image的能力，支持option传入objectFit设置图片缩放
- 支持通过设置transform缩放图片
- 并发请求数量，支持请求排队队列的优先级
<img src="screenshot/gif1.gif" width="50%"/> 待实现特性
- gif/webp动图显示与控制
- 内存降采样优化，节约内存的占用
- 支持自定义图片加载和请求并发数量
- 支持声明周期已销毁的图片，不再发起请求
- 支持自定义图片解码
- 支持自定义key的实现
- 支持进行图片变换: 支持图像像素源图片变换效果。
待确认arkui的能力
- 精确获取开发者给组件设置的宽和高
- 动图的显示与控制
## 下载安装 ## 下载安装
``` ```
ohpm install @ohos/imageknife ohpm install @ohos/imageknife
``` ```
## 使用说明 ## 使用说明
#### 1.显示本地资源图片
### 1.依赖配置 ```
在entry\src\main\ets\entryability\EntryAbility.ts中做如下配置初始化全局ImageKnife实例： ImageKnifeComponent({
ImageKnifeOption: {
```typescript src: $r("app.media.app_icon"),
import UIAbility from '@ohos.app.ability.UIAbility'; placeholderSrc: $r("app.media.loading"),
import window from '@ohos.window'; errorholderSrc: $r("app.media.app_icon"),
import { ImageKnife } from '@ohos/imageknife' objectFit: ImageFit.Auto
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()方式
} }
} }).width(100).height(100)
``` ```
### 2.加载普通图片 #### 2.显示本地context files下文件
```
接下来我们来写个简单实例看看: ImageKnifeComponent({
ImageKnifeOption: {
```extendtypescript src: this.localFile,
import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/imageknife' placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"),
@Entry objectFit: ImageFit.Auto
@Component
struct Index {
@State message: string = 'Hello World'
@State option: ImageKnifeOption = {
loadSrc: $r('app.media.icon')
} }
}).width(100).height(100)
```
build() { #### 3.显示网络图片
Row() { ```
Column() { ImageKnifeComponent({
Text(this.message) ImageKnifeOption: {
.fontSize(50) src:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
.fontWeight(FontWeight.Bold) placeholderSrc: $r("app.media.loading"),
ImageKnifeComponent({ imageKnifeOption: this.option }) errorholderSrc: $r("app.media.app_icon"),
.width(300) objectFit: ImageFit.Auto
.height(300)
}.width('100%')
}.height('100%')
} }
} }).width(100).height(100)
``` ```
非常简单，仅需定义一个ImageKnifeOption数据对象，然后在你需要的UI位置，加入ImageKnifeComponent自定义组件就可以加载出一张图像了。 #### 4.自定义下载图片
### 3.加载SVG图片
加载svg其实和普通流程没有区别,只要将 `loadSrc: $r('app.media.jpgSample'),` `改成一张 loadSrc: $r('app.media.svgSample'),`
svg类型图片即可。
### 4.加载GIF图片
加载GIF其实和普通流程也没有区别只要将 `loadSrc: $r('app.media.jpgSample'),` `改成一张 loadSrc: $r('app.media.gifSample'),`
GIF图片即可。
### 5.自定义Key
因为通常改变标识符比较困难或者根本不可能，所以ImageKnife也提供了 签名 API 来混合（你可以控制的）额外数据到你的缓存键中。
签名(signature)适用于媒体内容，也适用于你可以自行维护的一些版本元数据。
将签名传入加载请求
```extendtypescript
imageKnifeOption = {
loadSrc: 'https://aahyhy.oss-cn-beijing.aliyuncs.com/blue.jpg',
signature: new ObjectKey(new Date().getTime().toString())
}
``` ```
详细样例请参考SignatureTestPage文件 ImageKnifeComponent({
ImageKnifeOption: {
代码示例 src: "https://file.atomgit.com/uploads/user/1704857786989_8994.jpeg",
placeholderSrc: $r("app.media.loading"),
## 进阶使用 errorholderSrc: $r("app.media.app_icon"),
objectFit: ImageFit.Auto,
如果简单的加载一张图像无法满足需求，我们可以看看ImageKnifeOption这个类提供了哪些扩展能力。 customGetImage: custom
### ImageKnifeOption参数列表
| 参数名称 | 入参内容 | 功能简介 |
| ---------------------------- | ------------------------------------------------------------ |-----------------------------------------------|
| 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 | 抗锯齿属性配置 |
其他参数只需要在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%')
}
}
```
`ImageKnifeDrawFactory.createRoundLifeCycle(5,"#ff00ff",30)`
我们深入查看源码可以发现，实际上是对IDrawLifeCycle接口的部分实现，这里我介绍一下IDrawLifeCycle。
*
*IDrawLifeCycle的返回值代表事件是否被消费，如果被消费接下来组件内部就不会处理，如果没被消费就会传递到下一个使用者。目前消费流程（用户自定义->
全局配置定义->组件内部默认定义）**
所以我们在当数据是一张PixelMap的时候（目前jpg png bmp webp
svg返回的都是PixelMap，gif返回GIFFrame数组），我们返回了true。消费了事件，代表这个绘制流程用户自定义完成。
<img src="screenshot/gif2.gif" width="50%"/>
由于IDrawLifeCycle实现较为冗长，我们封装了ImageKnifeDrawFactory工厂，提供了网络下载百分比效果、圆角、椭圆添加边框等能力。下面我们就再看看使用工厂封装之后的场景代码。
### 场景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))
}
}
```
这里大家可能会问，为什么会将这个IDrawLifeCycle放在AbilityStage里面实现？
这是因为网络下载百分比进度很多时候都是全局通用，如果有需要全局配置的自定义展示方案。推荐在AbilityStage里面，往ImageKnife的setDefaultLifeCycle函数中注入，即可将ImageKnifeComponent中的默认绘制方案替换。
在这里我们实现的效果如下图所示。
<img src="screenshot/gif3.gif" width="50%"/>
## 高级用法
以上简单使用和进阶使用都是经过一层自定义组件封装之后形成的，RequestOption封装成了ImageKnifeOption,绘制部分封装成了自定义组件ImageKnifeComponent。
如果用户其实并不关心绘制部分，或者说想用自己的通用方案对自定义组件ImageKnifeComponent重构都是可以的。
下面我们会着重指导用户如何复用图片加载逻辑，重构自定义组件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)
} }
}).width(100).height(100)
``` // 自定义实现图片获取方法，如自定义网络下载
@Concurrent
**其他场景，可以按需加载** async function custom(context: Context, src: string | PixelMap | Resource): Promise<ArrayBuffer | undefined> {
console.info("ImageKnife:: custom download：" + src)
比如我需要配置 **占位图** 只需要 在request对象创建好之后,调用 **placeholder** 函数即可 // 举例写死从本地文件读取，也可以自己请求网络图片
return context.resourceManager.getMediaContentSync($r("app.media.bb").id).buffer as ArrayBuffer
```
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 | 如果不想适配，直接展示原图大小 |
| ScaleType.AUTO_HEIGHT | int | 设置宽的时候，图片高度自适应 |
| ScaleType.AUTO_WIDTH | int | 设置高的时候，图片宽度自适应 |
| ScaleType.AUTO | 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)
}
}
} }
``` ```
#### 5.监听网络下载进度
```
ImageKnifeComponent({
ImageKnifeOption: {
src:"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:
{
src: $r("app.media.rabbit"),
border: {radius:50}
}
}).width(100).height(100)
```
## 约束与限制 ## 约束与限制
API11
在下述版本验证通过：
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 # 所有缓存信息获取测试
- testImageKnifeAutoHeightPage.ets # 图片高度自适应测试
- testImageKnifeAutoWidthPage.ets # 图片宽度自适应测试
- testImageKnifeAutoPage.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子线程解析具体执行
```
## 贡献代码 ## 贡献代码
@ -535,49 +125,5 @@ HSP场景适配:
本项目基于 [Apache License 2.0](https://gitee.com/openharmony-tpc/ImageKnife/blob/master/LICENSE) ，请自由的享受和参与开源。 本项目基于 [Apache License 2.0](https://gitee.com/openharmony-tpc/ImageKnife/blob/master/LICENSE) ，请自由的享受和参与开源。
## 遗留问题 ## 遗留问题
- reuse组件错位问题
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

38
build-profile.json5
View File

@ -1,16 +1,20 @@
{ {
"app": { "app": {
"signingConfigs": [
],
"products": [ "products": [
{ {
"name": "default", "name": "default",
"signingConfig": "default", "signingConfig": "default",
"compileSdkVersion": 10, "compileSdkVersion": "4.1.0(11)",
"compatibleSdkVersion": 10 "compatibleSdkVersion": "4.1.0(11)",
"runtimeOS": "HarmonyOS",
} }
], ],
"buildModeSet": [ "buildModeSet": [
{ {
"name": "debug" "name": "debug",
}, },
{ {
"name": "release" "name": "release"
@ -33,34 +37,6 @@
{ {
"name": "library", "name": "library",
"srcPath": "./library" "srcPath": "./library"
},
{
"name": "gpu_transform",
"srcPath": "./gpu_transform"
},
{
"name": "sharedlibrary",
"srcPath": "./sharedlibrary",
"targets": [
{
"name": "default",
"applyToProducts": [
"default"
]
}
]
},
{
"name": "sharedlibrary2",
"srcPath": "./sharedlibrary2",
"targets": [
{
"name": "default",
"applyToProducts": [
"default"
]
}
]
} }
] ]
} }

5
entry/.gitignore vendored
View File

@ -1,5 +1,6 @@
/node_modules /node_modules
/oh_modules
/.preview /.preview
/build /build
/oh_modules/ /.cxx
/oh-package-lock.json5 /.test

25
entry/build-profile.json5
View File

@ -1,15 +1,28 @@
{ {
"apiType": 'stageMode', "apiType": "stageMode",
"buildOption": { "buildOption": {
"sourceOption": { "arkOptions": {
"workers": [ // "apPath": "./modules.ap" /* Profile used for profile-guided optimization (PGO), a compiler optimization technique to improve app runtime performance. */
"./src/main/ets/workers/upngWorkerTestCase.ets"
]
} }
}, },
"buildOptionSet": [
{
"name": "release",
"arkOptions": {
"obfuscation": {
"ruleOptions": {
"enable": true,
"files": [
"./obfuscation-rules.txt"
]
}
}
}
},
],
"targets": [ "targets": [
{ {
"name": "default", "name": "default"
}, },
{ {
"name": "ohosTest", "name": "ohosTest",

2
entry/hvigorfile.js
View File

@ -1,2 +0,0 @@
// 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

6
entry/hvigorfile.ts Normal file
View File

@ -0,0 +1,6 @@
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. */
}

18
entry/obfuscation-rules.txt Normal file
View File

@ -0,0 +1,18 @@
# 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

13
entry/oh-package-lock.json5 Normal file
View File

@ -0,0 +1,13 @@
{
"lockfileVersion": 3,
"ATTENTION": "THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.",
"specifiers": {
"@ohos/imageknife@../library": "@ohos/imageknife@../library"
},
"packages": {
"@ohos/imageknife@../library": {
"mtime": "1711870193874.5308",
"resolved": "../library"
}
}
}

14
entry/oh-package.json5
View File

@ -1,14 +1,12 @@
{ {
"license": "Apache License 2.0",
"devDependencies": {},
"name": "entry", "name": "entry",
"description": "example description", "version": "1.0.0",
"repository": {}, "description": "Please describe the basic information.",
"version": "2.1.2-rc.12", "main": "",
"author": "",
"license": "",
"dependencies": { "dependencies": {
"@ohos/libraryimageknife": "file:../sharedlibrary",
"@ohos/sharedlibrary2": "file:../sharedlibrary2",
"@ohos/disklrucache": "^2.0.2-rc.0",
"@ohos/imageknife": "file:../library" "@ohos/imageknife": "file:../library"
} }
} }

10
entry/src/main/ets/pages/model/Material.ets → entry/src/main/ets/common/Constants.ets
View File

@ -1,5 +1,5 @@
/* /*
* Copyright (C) 2023 Huawei Device Co., Ltd. * Copyright (C) 2024 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the 'License'); * Licensed under the Apache License, Version 2.0 (the 'License');
* you may not use this file except in compliance with the License. * you may not use this file except in compliance with the License.
* You may obtain a copy of the License at * You may obtain a copy of the License at
@ -7,13 +7,11 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Unless required by applicable law or agreed to in writing, software * 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. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
export class Material{ export default class Constants {
material_id: string =''; static readonly TAG: string = "MyImageKnifeTest: "
thumbnail: string = '';
name: string ='';
} }

6
entry/src/ohosTest/ets/testability/GlobalContext.ets → entry/src/main/ets/common/GlobalContext.ets
View File

@ -1,13 +1,13 @@
/* /*
* Copyright (C) 2024 Huawei Device Co., Ltd. * Copyright (C) 2024 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License"); * Licensed under the Apache License, Version 2.0 (the 'License');
* you may not use this file except in compliance with the License. * you may not use this file except in compliance with the License.
* You may obtain a copy of the License at * You may obtain a copy of the License at
* *
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Unless required by applicable law or agreed to in writing, software * 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. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
@ -20,7 +20,7 @@ export class GlobalContext {
private static instance: GlobalContext; private static instance: GlobalContext;
private _objects = new Map<string, Object>(); private _objects = new Map<string, Object>();
public static getInstance(): GlobalContext { public static getContext(): GlobalContext {
if (!GlobalContext.instance) { if (!GlobalContext.instance) {
GlobalContext.instance = new GlobalContext(); GlobalContext.instance = new GlobalContext();
} }

76
entry/src/main/ets/entryability/CustomEngineKeyImpl.ets
View File

@ -1,76 +0,0 @@
/*
* 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;
}
}

72
entry/src/main/ets/entryability/EntryAbility.ets
View File

@ -1,59 +1,61 @@
/* /*
* Copyright (C) 2023 Huawei Device Co., Ltd. * Copyright (C) 2024 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License"); * Licensed under the Apache License, Version 2.0 (the 'License');
* you may not use this file except in compliance with the License. * you may not use this file except in compliance with the License.
* You may obtain a copy of the License at * You may obtain a copy of the License at
* *
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Unless required by applicable law or agreed to in writing, software * 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. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import UIAbility from '@ohos.app.ability.UIAbility'; import AbilityConstant from '@ohos.app.ability.AbilityConstant';
import hilog from '@ohos.hilog'; import hilog from '@ohos.hilog';
import UIAbility from '@ohos.app.ability.UIAbility';
import Want from '@ohos.app.ability.Want';
import window from '@ohos.window'; import window from '@ohos.window';
import { InitImageKnife, ImageKnifeGlobal, ImageKnife, ImageKnifeDrawFactory, LogUtil } from '@ohos/libraryimageknife' import { ImageKnife } from '@ohos/imageknife';
import { CustomEngineKeyImpl } from './CustomEngineKeyImpl'
import abilityAccessCtrl, { Permissions } from '@ohos.abilityAccessCtrl';
import { BusinessError } from '@ohos.base'
export default class EntryAbility extends UIAbility { export default class EntryAbility extends UIAbility {
onWindowStageCreate(windowStage: window.WindowStage) { 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> {
// Main window is created, set main page for this ability // Main window is created, set main page for this ability
let list: Array<Permissions> = ['ohos.permission.MEDIA_LOCATION', 'ohos.permission.READ_MEDIA']; hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
let permissionRequestResult: Object;
let atManager = abilityAccessCtrl.createAtManager();
atManager.requestPermissionsFromUser(this.context, list, (err: BusinessError, result: Object) => {
if (err) {
} else { // 初始化ImageKnife的文件缓存
permissionRequestResult = result; await ImageKnife.getInstance().initFileCache(this.context, 256, 256 * 1024 * 1024)
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) => {
}); });
}
InitImageKnife.init(this.context); onWindowStageDestroy(): void {
// Main window is destroyed, release UI related resources
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
}
let imageKnife: ImageKnife | undefined = ImageKnifeGlobal.getInstance().getImageKnife() onForeground(): void {
if (imageKnife != undefined) { // Ability has brought to foreground
// 全局配置网络加载进度条 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
imageKnife }
.setDefaultLifeCycle(ImageKnifeDrawFactory.createProgressLifeCycle("#10a5ff", 0.5))
// 全局配置缓存key onBackground(): void {
imageKnife.setEngineKeyImpl(new CustomEngineKeyImpl()) // Ability has back to background
// 设置全局内存缓存大小张数 hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
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
} }
} }

104
entry/src/main/ets/pages/CacheRuleChangedPage.ets
View File

@ -1,104 +0,0 @@
/*
* 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%')
}
}

42
entry/src/main/ets/pages/ListPage.ets Normal file
View File

@ -0,0 +1,42 @@
/*
* 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
@Component
struct ListPage {
private datas: string[] = []
@State ImageKnifeOption: ImageKnifeOption = { loadSrc: $r('app.media.startIcon')}
aboutToAppear(): void {
for (let i = 0; i < 1000; i++) {
this.datas.push(i.toString())
}
}
build() {
Row() {
List({ space: 10 }) {
ForEach(this.datas, (item: string) => {
ImageKnifeComponent({ ImageKnifeOption: this.ImageKnifeOption }).height(200).width(200)
}, (item: string) => item)
}
.width('100%')
}
.height('100%')
}
}

39
entry/src/main/ets/pages/LongImagePage.ets Normal file
View File

@ -0,0 +1,39 @@
/*
* 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 } from '@ohos/imageknife'
@Entry
@Component
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: {
loadSrc:"https://wx2.sinaimg.cn/mw690/006HyQKGgy1hnqp08dw09j30u04twu0x.jpg",
//src:$r("app.media.aaa"),
// placeholderSrc: $r("app.media.loading"),
// errorholderSrc: $r("app.media.app_icon"),
objectFit: ImageFit.Auto
}
})
}
.height('100%') .width('100%')
}
}

79
entry/src/main/ets/pages/OptionTestPage.ets
View File

@ -1,79 +0,0 @@
/*
* 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%')
}
}

109
entry/src/main/ets/pages/RequestOptionLoadImage.ets
View File

@ -1,109 +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 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)
}
}
}
}

77
entry/src/main/ets/pages/SignatureTestPage.ets
View File

@ -1,77 +0,0 @@
/*
* 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, NONE, DiskStrategy } from '@ohos/libraryimageknife'
import { ObjectKey } from '@ohos/libraryimageknife';
@Entry
@Component
struct SignatureTestPage {
@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("Signature固定为 1").fontSize(15)
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Button("加载")
.onClick(() => {
this.imageKnifeOption1 = {
loadSrc: 'https://img-blog.csdn.net/20140514114029140',
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("设置Signature，每次为时间戳").fontSize(15)
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Button("加载")
.onClick(() => {
this.imageKnifeOption2 = {
loadSrc: 'https://img-blog.csdn.net/20140514114029140',
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)
}
}.width('100%')
.height('100%')
}
aboutToAppear() {
console.log("唯一标识页面：" + new ObjectKey(new Date().getTime().toString()).getKey())
}
}

96
entry/src/main/ets/pages/SingleImage.ets Normal file
View File

@ -0,0 +1,96 @@
/*
* 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 } from '@ohos/imageknife';
import fs from '@ohos.file.fs';
@Entry
@Component
struct SingleImage {
scroller: Scroller = new Scroller;
localFile: string = getContext(this).filesDir + "/icon.png"
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);
}
build() {
Scroll(this.scroller) {
Column() {
Text("本地资源图片")
.fontSize(30)
.fontWeight(FontWeight.Bold)
ImageKnifeComponent({
ImageKnifeOption: {
loadSrc: $r("app.media.app_icon"),
placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"),
objectFit: ImageFit.Contain
}
}).width(100).height(100)
Text("本地context files下文件")
.fontSize(30)
.fontWeight(FontWeight.Bold)
ImageKnifeComponent({
ImageKnifeOption: {
loadSrc: this.localFile,
placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"),
objectFit: ImageFit.Contain
}
}).width(100).height(100)
Text("网络图片")
.fontSize(30)
.fontWeight(FontWeight.Bold)
ImageKnifeComponent({
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,
progressListener:(progress:number)=>{console.info("ImageKnife:: call back progress = " + progress)}
}
}).width(100).height(100)
Text("自定义下载")
.fontSize(30)
.fontWeight(FontWeight.Bold)
ImageKnifeComponent({
ImageKnifeOption: {
loadSrc: "https://file.atomgit.com/uploads/user/1704857786989_8994.jpeg",
placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"),
objectFit: ImageFit.Contain,
customGetImage: custom
}
}).width(100).height(100)
}
.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.startIcon").id).buffer as ArrayBuffer
}

51
entry/src/main/ets/pages/TransformPage.ets Normal file
View File

@ -0,0 +1,51 @@
/*
* 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"
import matrix4 from '@ohos.matrix4'
@Entry
@Component
struct TransformPage {
private custom_scale:number = 1
@State matrix1:object = matrix4.identity().scale({ x: 1, y: 1 })
@State ImageKnifeOption: 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("放大").onClick(()=>{
this.custom_scale = this.custom_scale * 2
this.matrix1 = matrix4.identity().scale({ x: this.custom_scale, y: this.custom_scale })
})
Button("缩小").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%')
}
}

82
entry/src/main/ets/pages/basicTestFeatureAbilityPage.ets
View File

@ -1,82 +0,0 @@
/*
* 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 })
}
}

161
entry/src/main/ets/pages/basicTestFileIOPage.ets
View File

@ -1,161 +0,0 @@
/*
* 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
}
try {
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)
} catch (e) {
console.log('appFilePath未取到值,请按顺序从上往下,从左往右依次测试:'+JSON.stringify(e))
}
})
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)
}
}

129
entry/src/main/ets/pages/basicTestMediaImage.ets
View File

@ -1,129 +0,0 @@
/*
* 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)
}
}

86
entry/src/main/ets/pages/basicTestResourceManagerPage.ets
View File

@ -1,86 +0,0 @@
/*
* 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)
}
}

152
entry/src/main/ets/pages/compressPage.ets
View File

@ -1,152 +0,0 @@
/*
* 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")
}
}

107
entry/src/main/ets/pages/cropImagePage2.ets
View File

@ -1,107 +0,0 @@
/*
* 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%')
}
}
}

96
entry/src/main/ets/pages/dataShareUriLoadPage.ets
View File

@ -1,96 +0,0 @@
/*
* 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 mediaLibrary from '@ohos.multimedia.mediaLibrary';
import { ImageKnifeComponent, ImageKnifeOption, } from '@ohos/libraryimageknife'
@Entry
@Component
struct DataShareUriLoadPage {
@State imageKnifeOption1: 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("获取媒体图库的uri用ImageKnife展示").fontSize(15)
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
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)
}
}
.width('100%')
.height('100%')
}
}

98
entry/src/main/ets/pages/drawFactoryTestPage.ets
View File

@ -1,98 +0,0 @@
/*
* 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%')
}
}

78
entry/src/main/ets/pages/frescoRetryTestCasePage.ets
View File

@ -1,78 +0,0 @@
/*
* 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%')
}
}

69
entry/src/main/ets/pages/hspCacheTestPage.ets
View File

@ -1,69 +0,0 @@
/*
* 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%')
}
}

372
entry/src/main/ets/pages/imageknifeTestCaseIndex.ets
View File

@ -1,372 +0,0 @@
/*
* 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 })
Button("优先级加载")
.onClick(() => {
console.log("优先级加载")
router.pushUrl({ url: "pages/testPriorityComponent" });
}).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 })
Button("测试图片高度自适应")
.onClick(() => {
console.log("测试ImageKnifeComponent图片高度自适应")
router.pushUrl({ url: "pages/testImageKnifeAutoHeightPage" });
}).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("测试ImageKnifeComponent图片宽度自适应")
router.pushUrl({ url: "pages/testImageKnifeAutoWidthPage" });
}).margin({ top: 5, left: 3 })
Button("测试图片宽高自适应")
.onClick(() => {
console.log("测试ImageKnifeComponent图片宽高自适应")
router.pushUrl({ url: "pages/testImageKnifeAutoPage" });
}).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/testReusePhotoPage" });
}).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 })
Button("测试磁盘预加载返回string")
.onClick(() => {
console.log("测试预加载测试磁盘预加载返回string")
router.pushUrl({ url: "pages/testDiskPreLoadPage" });
}).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() {
}
}

109
entry/src/main/ets/pages/index.ets
View File

@ -1,103 +1,54 @@
/* /*
* Copyright (C) 2022 Huawei Device Co., Ltd. * Copyright (C) 2024 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License"); * Licensed under the Apache License, Version 2.0 (the 'License');
* you may not use this file except in compliance with the License. * you may not use this file except in compliance with the License.
* You may obtain a copy of the License at * You may obtain a copy of the License at
* *
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Unless required by applicable law or agreed to in writing, software * 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. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import router from '@ohos.router'; import { ImageKnifeComponent, ImageKnifeOption } from "@ohos/imageknife"
import {
ImageKnifeComponent,
ImageKnifeOption,
ImageKnifeGlobal,
ImageKnife,
HeaderOptions
} from '@ohos/libraryimageknife'
import { ObjectKey } from '@ohos/libraryimageknife';
@Entry @Entry
@Component @Component
struct IndexFunctionDemo { struct Index {
@State headerOptions1: HeaderOptions = { localFile: string = getContext(this).filesDir + "/icon.png"
key: "refer", @State ImageKnifeOption: ImageKnifeOption = {
value: "http://1.94.37.200:7070/AntiTheftChain/downloadImage" loadSrc: $r("app.media.rabbit"),
}; // src:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
@State imageKnifeOption1: ImageKnifeOption = // src: this.localFile,
{ placeholderSrc: $r("app.media.loading"),
loadSrc: $r('app.media.icon'), errorholderSrc: $r("app.media.app_icon"),
placeholderSrc: $r('app.media.icon_loading'), objectFit: ImageFit.Contain,
errorholderSrc: $r('app.media.icon_failed'), border: { radius: 50 }
headerOption: [this.headerOptions1] }
};
@State imageKnifeOption2: ImageKnifeOption = aboutToAppear(): void {
{ // 拷贝本地文件
loadSrc: $r('app.media.icon'), // let icon: Uint8Array = getContext(this).resourceManager.getMediaContentSync($r("app.media.startIcon"));
placeholderSrc: $r('app.media.icon_loading'), // let file = fs.openSync(this.localFile, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE);
errorholderSrc: $r('app.media.icon_failed'), // fs.writeSync(file.fd, icon.buffer);
headerOption: [this.headerOptions1] // fs.fsyncSync(file.fd);
}; // fs.closeSync(file);
}
build() { 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) Column() {
Text("gif解析在子线程,请在页面构建后创建worker,注入imageknife").fontSize(15) ImageKnifeComponent({ ImageKnifeOption: this.ImageKnifeOption }).height(200).width(200)
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Button("加载GIF") // Image($r('app.media.rabbit')).objectFit(ImageFit.Contain).height(200).width(200)
.onClick(() => { // .border({radius:50})
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%') .width('100%')
.height('100%') .height('100%')
} }
aboutToAppear() {
}
aboutToDisappear(){
}
onBackPress() {
}
} }

2931
entry/src/main/ets/pages/manyPhotoShowPage.ets
View File

File diff suppressed because it is too large Load Diff

70
entry/src/main/ets/pages/model/BasicDataSource.ets
View File

@ -1,70 +0,0 @@
/*
* 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);
})
}
}

590
entry/src/main/ets/pages/model/TestDataSource.ets
View File

@ -1,590 +0,0 @@
/*
* 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);
}
}

60
entry/src/main/ets/pages/multiHspTestPage.ets
View File

@ -1,60 +0,0 @@
/*
* 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%')
}
}

92
entry/src/main/ets/pages/photosPausedResumedPage.ets
View File

@ -1,92 +0,0 @@
/*
* 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)
}
}
}

104
entry/src/main/ets/pages/photosPausedResumedPage2.ets
View File

@ -1,104 +0,0 @@
/*
* 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()
}
}
}

257
entry/src/main/ets/pages/pngjTestCasePage.ets
View File

@ -1,257 +0,0 @@
/*
* 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)
}
}

64
entry/src/main/ets/pages/showErrorholderTestCasePage.ets
View File

@ -1,64 +0,0 @@
/*
* 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%')
}
}

55
entry/src/main/ets/pages/storageTestLruCache.ets
View File

@ -1,55 +0,0 @@
/*
* 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%')
}
}
}

81
entry/src/main/ets/pages/svgTestCasePage.ets
View File

@ -1,81 +0,0 @@
/*
* 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)
}
}

98
entry/src/main/ets/pages/tempUrlTestPage.ets
View File

@ -1,98 +0,0 @@
/*
* 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() {
}
}

209
entry/src/main/ets/pages/testAllCacheInfoPage.ets
View File

@ -1,209 +0,0 @@
/*
* 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())

61
entry/src/main/ets/pages/testDiskPreLoadPage.ets
View File

@ -1,61 +0,0 @@
/*
* 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 { ImageKnife,ImageKnifeGlobal,ImageKnifeOption,ImageKnifeComponent} from '@ohos/libraryimageknife'
@Entry
@Component
struct DiskPreLoadPage {
@State imageKnifeOption2: ImageKnifeOption =
{
loadSrc: $r('app.media.icon'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
};
build() {
Row() {
Column() {
Button("预加载图片").onClick(()=>{
let imageKnife: ImageKnife | undefined = ImageKnifeGlobal.getInstance().getImageKnife();
if(imageKnife != undefined){
imageKnife.prefetchToDiskCache("https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658")
.then((resolve)=>{
console.log("成功回调 ： " + resolve)
})
.catch((reject: ESObject) => {
console.log("失败回调 ： " + reject)
})
}
})
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)
}
.width('100%')
}
.height('100%')
}
}

62
entry/src/main/ets/pages/testImageAntiAliasingWithPage.ets
View File

@ -1,62 +0,0 @@
/*
* 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%')
}
}

71
entry/src/main/ets/pages/testImageKnifeAutoHeightPage.ets
View File

@ -1,71 +0,0 @@
/*
* 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 { ComponentUtils } from '@ohos.arkui.UIContext'
import display from '@ohos.display';
import { ImageKnifeComponent,
ScaleType } from '@ohos/libraryimageknife'
import componentUtils from '@ohos.arkui.componentUtils';
@Entry
@Component
struct testImageKnifeAutoHeightPage {
private currentWidth: number =0
private currentHeight: number =0
@State value : componentUtils.ComponentInfo = componentUtils.getRectangleById("ImageKnifeCanvas");
aboutToAppear(){
let displayClas : ESObject =null
try {
displayClas = display.getDefaultDisplaySync()
console.info('........width'+ displayClas.width)
console.info('........height'+ displayClas.height)
}catch (e){
console.error('error' + e)
}
}
build(){
Scroll(){
Column(){
ImageKnifeComponent({
imageKnifeOption:{
loadSrc :$r('app.media.pngSample'),
mainScaleType:ScaleType.AUTO_HEIGHT,
}
})
.width("100%")
Button(){
Text('getRectangleById').fontSize(40).fontWeight(FontWeight.Bold);
}
.onClick(()=> {
this.value = componentUtils.getRectangleById("ImageKnifeCanvas")
this.currentWidth = px2vp(this.value.size.width)
this.currentHeight = px2vp(this.value.size.height)
console.log('currentWidth'+this.currentWidth)
console.log('currentHeight'+this.currentHeight)
})
}
}
}
}

71
entry/src/main/ets/pages/testImageKnifeAutoPage.ets
View File

@ -1,71 +0,0 @@
/*
* 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 { ComponentUtils } from '@ohos.arkui.UIContext'
import display from '@ohos.display';
import { ImageKnifeComponent,
ScaleType } from '@ohos/libraryimageknife'
import componentUtils from '@ohos.arkui.componentUtils';
@Entry
@Component
struct testImageKnifeAutoPage {
private currentWidth: number =0
private currentHeight: number =0
@State value : componentUtils.ComponentInfo = componentUtils.getRectangleById("ImageKnifeCanvas");
aboutToAppear(){
let displayClas : ESObject =null
try {
displayClas = display.getDefaultDisplaySync()
console.info('........width'+ displayClas.width)
console.info('........height'+ displayClas.height)
}catch (e){
console.error('error' + e)
}
}
build(){
Scroll(){
Column(){
ImageKnifeComponent({
imageKnifeOption:{
loadSrc :$r('app.media.pngSample'),
mainScaleType:ScaleType.AUTO,
}
})
Button(){
Text('getRectangleById').fontSize(40).fontWeight(FontWeight.Bold);
}
.onClick(()=> {
this.value = componentUtils.getRectangleById("ImageKnifeCanvas")
this.currentWidth = px2vp(this.value.size.width)
this.currentHeight = px2vp(this.value.size.height)
console.log('currentWidth'+this.currentWidth)
console.log('currentHeight'+this.currentHeight)
})
}
}
}
}

72
entry/src/main/ets/pages/testImageKnifeAutoWidthPage.ets
View File

@ -1,72 +0,0 @@
/*
* 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 { ComponentUtils } from '@ohos.arkui.UIContext'
import display from '@ohos.display';
import { ImageKnifeComponent,
ScaleType } from '@ohos/libraryimageknife'
import componentUtils from '@ohos.arkui.componentUtils';
@Entry
@Component
struct testImageKnifeAutoWidthPage {
private currentWidth: number =0
private currentHeight: number =0
@State value : componentUtils.ComponentInfo = componentUtils.getRectangleById("ImageKnifeCanvas");
aboutToAppear(){
let displayClas : ESObject =null
try {
displayClas = display.getDefaultDisplaySync()
console.info('........width'+ displayClas.width)
console.info('........height'+ displayClas.height)
}catch (e){
console.error('error' + e)
}
}
build(){
Scroll(){
Column(){
ImageKnifeComponent({
imageKnifeOption:{
loadSrc :$r('app.media.pngSample'),
mainScaleType:ScaleType.AUTO_WIDTH,
}
})
.height(400)
Button(){
Text('getRectangleById').fontSize(40).fontWeight(FontWeight.Bold);
}
.onClick(()=> {
this.value = componentUtils.getRectangleById("ImageKnifeCanvas")
this.currentWidth = px2vp(this.value.size.width)
this.currentHeight = px2vp(this.value.size.height)
console.log('currentWidth'+this.currentWidth)
console.log('currentHeight'+this.currentHeight)
})
}
}
}
}

256
entry/src/main/ets/pages/testImageKnifeHttpRequestHeader.ets
View File

@ -1,256 +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 {
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)
}
}
}

214
entry/src/main/ets/pages/testImageKnifeOptionChangedPage.ets
View File

@ -1,214 +0,0 @@
/*
* 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(){
}
}

110
entry/src/main/ets/pages/testImageKnifeOptionChangedPage2.ets
View File

@ -1,110 +0,0 @@
/*
* 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()")
}
}

167
entry/src/main/ets/pages/testImageKnifeOptionChangedPage3.ets
View File

@ -1,167 +0,0 @@
/*
* 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(){
}
}

277
entry/src/main/ets/pages/testImageKnifeOptionChangedPage4.ets
View File

@ -1,277 +0,0 @@
/*
* 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;
}
}

177
entry/src/main/ets/pages/testImageKnifeOptionChangedPage5.ets
View File

@ -1,177 +0,0 @@
/*
* 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
}

59
entry/src/main/ets/pages/testImageKnifeRouter1.ets
View File

@ -1,59 +0,0 @@
/*
* 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 })
}
}

55
entry/src/main/ets/pages/testImageKnifeRouter2.ets
View File

@ -1,55 +0,0 @@
/*
* 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 })
}
}

77
entry/src/main/ets/pages/testManyGifLoadWithPage.ets
View File

@ -1,77 +0,0 @@
/*
* 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(){
}
}

114
entry/src/main/ets/pages/testManyNetImageLoadWithPage.ets
View File

@ -1,114 +0,0 @@
/*
* 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 })
}
}
}

65
entry/src/main/ets/pages/testManyNetImageLoadWithPage2.ets
View File

@ -1,65 +0,0 @@
/*
* 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 })
}
}
}

642
entry/src/main/ets/pages/testPreloadPage.ets
View File

@ -1,642 +0,0 @@
/*
* 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(){
}
}

94
entry/src/main/ets/pages/testPriorityComponent.ets
View File

@ -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 , Priority , NONE } from '@ohos/libraryimageknife'
@Entry
@Component
struct TestPriorityComponent {
private data: 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",
"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.data,(item:string,index:number)=>{
GridItem(){
if(index % 2 == 0){
ImageKnifeComponent({
imageKnifeOption:{
loadSrc:item,
placeholderSrc:$r('app.media.icon_loading'),
strategy:new NONE(),
isCacheable:false,
priority:Priority.LOW
}
})
} else if (index % 3 == 0) {
ImageKnifeComponent({
imageKnifeOption:{
loadSrc:item,
placeholderSrc:$r('app.media.icon_loading'),
strategy:new NONE(),
isCacheable:false,
priority:Priority.MEDIUM
}
})
} else {
ImageKnifeComponent({
imageKnifeOption:{
loadSrc:item,
placeholderSrc:$r('app.media.icon_loading'),
strategy:new NONE(),
isCacheable:false,
priority:Priority.HIGH
}
})
}
}
})
}
.width("100%")
.height("100%")
.columnsTemplate("1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr")
.rowsTemplate("1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr")
.columnsGap(10)
.backgroundColor(0xFAEEE0)
}.width("100%").height("100%").backgroundColor(Color.Pink)
}
}

203
entry/src/main/ets/pages/testReusePhotoPage.ets
View File

@ -1,203 +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, ScaleType } 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 TestReusePhotoPage {
@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",
"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'
]
aboutToAppear() {
this.hotCommendList.addData(this.hotCommendList.totalCount(), this.data)
AppStorage.set("image_size",1)
}
build() {
Column() {
Button("up").onClick(()=>{
AppStorage.set("image_size",1.6)
})
Button("down").onClick(()=>{
AppStorage.set("image_size",0.9)
})
List() {
LazyForEach(this.hotCommendList, (item: string) => {
ListItem() {
ReuseComponent({ url: item }).width("100%").height("100%")
}.width(200).height(200).backgroundColor(Color.Orange)
})
}
.width("100%")
.height("100%")
.backgroundColor(0xFAEEE0)
}.width("100%").height("100%")
}
}
@Reusable
@Component
struct ReuseComponent {
@Prop url: string = ""
imgSize: number = 100
@StorageProp("image_size") @Watch("updateImageSize") image_size: number = 0
scaleAble: boolean = true
@State calcImgSize: number = 100
aboutToReuse(params: Record<string, string>) {
this.url = params.url
}
aboutToAppear(){
this.setImageSize()
}
updateImageSize() {
this.setImageSize()
}
setImageSize() {
if (!this.scaleAble) {
this.calcImgSize = this.imgSize
} else if (this.image_size < 0.9) {
this.calcImgSize = this.imgSize * 0.9
} else if (this.image_size > 1.6) {
this.calcImgSize = this.imgSize * 1.6
} else {
this.calcImgSize = this.imgSize * this.image_size
}
}
build() {
Column() {
ImageKnifeComponent({
imageKnifeOption:{
loadSrc: this.url,
mainScaleType: ScaleType.FIT_XY,
placeholderSrc: $r('app.media.icon_loading'),
placeholderScaleType: ScaleType.FIT_XY,
errorholderSrc: $r('app.media.icon_failed'),
errorholderSrcScaleType: ScaleType.FIT_XY
}
}).width(this.calcImgSize).height(this.calcImgSize)
}.width("100%").height("100%")
}
}
@Component
struct PhotoComponent {
@Watch("updateTheUrl") @Prop url: string = ""
imgSize: number = 100
@State imageKnifeOption: ImageKnifeOption = new ImageKnifeOption()
@StorageProp("image_size") @Watch("updateImageSize") image_size: number = 0
scaleAble: boolean = true
@State calcImgSize: number = 100
updateImageSize() {
this.setImageSize()
}
setImageSize() {
if (!this.scaleAble) {
this.calcImgSize = this.imgSize
} else if (this.image_size < 0.9) {
this.calcImgSize = this.imgSize * 0.9
} else if (this.image_size > 1.6) {
this.calcImgSize = this.imgSize * 1.6
} else {
this.calcImgSize = this.imgSize * this.image_size
}
}
updateTheUrl() {
this.imageKnifeOption = {
loadSrc: this.url,
mainScaleType: ScaleType.FIT_XY,
placeholderSrc: $r('app.media.icon_loading'),
placeholderScaleType: ScaleType.FIT_XY,
errorholderSrc: $r('app.media.icon_failed'),
errorholderSrcScaleType: ScaleType.FIT_XY
}
}
build() {
Column() {
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
}.width(this.calcImgSize).height(this.calcImgSize)
}
}

65
entry/src/main/ets/pages/testSingleFrameGifPage.ets
View File

@ -1,65 +0,0 @@
/*
* 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%")
}
}

995
entry/src/main/ets/pages/transformPixelMapPage.ets
View File

@ -1,995 +0,0 @@
/*
* 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();

70
entry/src/main/ets/workers/upngWorkerDepend.ts
View File

@ -1,70 +0,0 @@
/*
* 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
}
}

25
entry/src/main/ets/workers/upngWorkerTestCase.ets
View File

@ -1,25 +0,0 @@
/*
* 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)
}

33
entry/src/main/module.json5
View File

@ -2,33 +2,26 @@
"module": { "module": {
"name": "entry", "name": "entry",
"type": "entry", "type": "entry",
"description": "$string:module_desc",
"description": "$string:entry_desc", "mainElement": "EntryAbility",
"mainElement": "MainAbility",
"deviceTypes": [ "deviceTypes": [
"default", "phone",
"tablet" "tablet",
"2in1"
], ],
"deliveryWithInstall": true, "deliveryWithInstall": true,
"installationFree": false, "installationFree": false,
"pages": "$profile:main_pages", "pages": "$profile:main_pages",
"metadata": [
{
"name": "ArkTSPartialUpdate",
"value": "true"
}
],
"uiSyntax": "ets",
"abilities": [ "abilities": [
{ {
"name": "MainAbility", "name": "EntryAbility",
"srcEntrance": "./ets/entryability/EntryAbility.ets", "srcEntry": "./ets/entryability/EntryAbility.ets",
"description": "$string:MainAbility_desc", "description": "$string:EntryAbility_desc",
"icon": "$media:icon", "icon": "$media:icon",
"label": "$string:MainAbility_label", "label": "$string:EntryAbility_label",
"startWindowIcon": "$media:icon", "startWindowIcon": "$media:startIcon",
"startWindowBackground": "$color:test_color", "startWindowBackground": "$color:start_window_background",
"visible": true, "exported": true,
"skills": [ "skills": [
{ {
"entities": [ "entities": [
@ -53,7 +46,6 @@
}, },
{ {
"name": "ohos.permission.MEDIA_LOCATION", "name": "ohos.permission.MEDIA_LOCATION",
"reason": "$string:app_permission_MEDIA_LOCATION",
"usedScene": { "usedScene": {
"abilities": [ "abilities": [
"EntryAbility" "EntryAbility"
@ -63,7 +55,6 @@
}, },
{ {
"name": "ohos.permission.READ_MEDIA", "name": "ohos.permission.READ_MEDIA",
"reason": "$string:app_permission_READ_MEDIA",
"usedScene": { "usedScene": {
"abilities": [ "abilities": [
"EntryAbility" "EntryAbility"

4
entry/src/main/resources/base/element/color.json
View File

@ -1,8 +1,8 @@
{ {
"color": [ "color": [
{ {
"name": "test_color", "name": "start_window_background",
"value": "#3d2564" "value": "#FFFFFF"
} }
] ]
} }

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

@ -1,125 +1,16 @@
{ {
"string": [ "string": [
{ {
"name": "entry_desc", "name": "module_desc",
"value": "module description"
},
{
"name": "EntryAbility_desc",
"value": "description" "value": "description"
}, },
{ {
"name": "MainAbility_desc", "name": "EntryAbility_label",
"value": "description" "value": "label"
},
{
"name": "MainAbility_label",
"value": "ImageKnife"
},
{
"name": "ImageKnife_OHOS",
"value": "ImageKnife_OHOS"
},
{
"name": "mainability_description",
"value": "ETS_Empty Ability"
},
{
"name": "left_top_corner",
"value": "左上角"
},
{
"name": "r_top_corner",
"value": "右上角"
},
{
"name": "left_bottom_corner",
"value": "左下角"
},
{
"name": "r_bottom_corner",
"value": "右下角"
},
{
"name": "trans_circle",
"value": "裁剪-圆"
},
{
"name": "trans_circle_border",
"value": "裁剪-圆环"
},
{
"name": "trans_rotate",
"value": "旋转"
},
{
"name": "trans_square",
"value": "正方形裁剪"
},
{
"name": "trans_clip_top",
"value": "上方裁剪"
},
{
"name": "trans_clip_center",
"value": "中间裁剪"
},
{
"name": "trans_clip_bottom",
"value": "底下裁剪"
},
{
"name": "resource_image_compress",
"value": "资源图片压缩"
},
{
"name": "file_image_compress",
"value": "本地文件图片压缩"
},
{
"name": "image_transform",
"value": "图片变换"
},
{
"name": "image_compress",
"value": "图片压缩"
},
{
"name": "image_grayscale",
"value": "灰度处理"
},
{
"name": "image_Brightness",
"value": "亮度处理"
},
{
"name": "image_Contrast",
"value": "对比度处理"
},
{
"name": "image_Invert",
"value": "反转处理"
},
{
"name": "image_Sepia",
"value": "黑褐色处理"
},
{
"name": "image_Sketch",
"value": "素描处理"
},
{
"name": "image_blur",
"value": "模糊处理"
},
{
"name": "image_pixel",
"value": "马赛克处理"
},
{
"name": "app_permission_MEDIA_LOCATION",
"value": "获取媒体图片"
},
{
"name": "app_permission_READ_MEDIA",
"value": "读媒体图片"
} }
] ]
} }

BIN
entry/src/main/resources/base/media/Back.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

BIN
entry/src/main/resources/base/media/aaa.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 580 KiB

BIN
entry/src/main/resources/base/media/bmpSample.bmp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.8 MiB

BIN
entry/src/main/resources/base/media/dpgSample.dpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.4 MiB

BIN
entry/src/main/resources/base/media/gifSample.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 MiB

BIN
entry/src/main/resources/base/media/gifSample_single_frame.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 KiB

BIN
entry/src/main/resources/base/media/icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
entry/src/main/resources/base/media/icon_failed.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.4 KiB

BIN
entry/src/main/resources/base/media/icon_loading.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

BIN
entry/src/main/resources/base/media/icon_retry.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.4 KiB

18
entry/src/main/resources/base/media/iconsvg.svg
View File

@ -1,18 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
width="120"
height="120"
viewBox="0 0 120 120">
<g
fill="none"
fill-rule="evenodd">
<rect
width="120"
height="120"
fill="#EBF6FF"
rx="36"/>
<path
fill="#0D94FF"
d=""/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 385 B

BIN
entry/src/main/resources/base/media/jpgSample.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.7 MiB

BIN
entry/src/main/resources/base/media/loading.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
entry/src/main/resources/base/media/mask_starfish.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
entry/src/main/resources/base/media/pngSample.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.6 MiB

BIN
entry/src/main/resources/base/media/startIcon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

48
entry/src/main/resources/base/media/svgSample.svg
View File

@ -1,48 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="ic_launcher_round.css" ?>
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 800 800" xml:space="preserve" width="200" height="200">
<rect class="brick4" width="800" height="800.5" fill="#6A6ACC"/>
<g fill="#55346A">
<path d="M242.4,800.6c-0.2-0.9-0.3-1.9-0.5-2.8c-0.2-0.8-0.3-1.7-0.5-2.5c-0.5-2.5-1.1-5-1.7-7.5l0,0
c-0.5-1.6-0.8-3.3-1.2-4.8l0,0c-8.1-29.2-22.3-54.7-40.6-73.9c-1.1-1.1-2-2.2-3.1-3.1c-2-2-4.2-4.1-6.4-5.9
c50.1-46.1,129.1-75.7,218.2-75.7c88.1,0,166.3,29,216.4,74.2c-27.6,23.1-48.1,59.5-55.9,102.1"/>
<path d="M242.7,802.8"/>
<path d="M679.6,800.6c-4.4-38.3-24.8-73.4-56.7-102.1c-27.6,23.1-48.1,59.5-55.9,102.1"/>
<path d="M242.7,802.8"/>
<path d="M133,800.6h109.2"/>
<path d="M242.7,802.8c-0.2-0.8-0.3-1.4-0.5-2.2H133c4.4-37.6,24.2-72.3,55.1-100.7c2.2,1.9,4.4,3.9,6.4,5.9
c1.1,1.1,2,2,3.1,3.1c18.3,19.2,32.5,44.7,40.6,73.9l0,0c0.5,1.6,0.9,3.3,1.2,4.8l0,0c0.6,2.5,1.2,5,1.7,7.5
c0.2,0.8,0.3,1.7,0.5,2.5c0.2,0.9,0.3,1.9,0.6,2.8C242.5,801.4,242.7,802,242.7,802.8z"/>
</g>
<path id="hjk" fill="#F0E9ED" d="M398.2,588.6h19.7c17.8,0,32.3,14.4,32.3,32.3l0,0V704c0,23.3-18.9,42.2-42.2,42.2l0,0
c-23.3,0-42.2-18.9-42.2-42.2v-83.1C365.9,603.1,380.2,588.6,398.2,588.6L398.2,588.6z"/>
<path fill="#F3BEBB" d="M398.2,555.5h19.7c17.8,0,32.3,14.4,32.3,32.3l0,0v83.1c0,23.3-18.9,42.2-42.2,42.2l0,0
c-23.3,0-42.2-18.9-42.2-42.2v-83.1C365.9,570,380.2,555.5,398.2,555.5L398.2,555.5z"/>
<path fill="#D9A7A6" d="M381.7,477.2h52.9c8.6,0,15.6,7,15.6,15.6v118.7c0,12.8-10.3,23.1-23.1,23.1l0,0h-37.9
c-12.8,0-23.1-10.3-23.1-23.1l0,0V492.8C366,484.2,373.1,477.2,381.7,477.2L381.7,477.2z"/>
<path class="st6" d="M232.8,318.1h344.6l0,0v121.8c0,95.1-77.1,172.2-172.2,172.4l0,0l0,0c-95.1,0-172.2-77.1-172.4-172.2l0,0V318.1
L232.8,318.1z"/>
<path fill="#F3BEBB" d="M567.9,378.3h46.4c12.5,0,22.6,10.2,22.6,22.6l0,0v14.5c0,32.5-26.4,58.9-58.9,58.9l0,0h-10.3
c-1.9,0-3.3-1.4-3.3-3.3v-89.5C564.7,379.7,566.2,378.3,567.9,378.3L567.9,378.3z"/>
<path fill="#F3BEBB" d="M238.8,474.3h-10.3c-32.5,0-58.9-26.4-58.9-58.9l0,0v-14.5c0-12.5,10.2-22.6,22.6-22.6l0,0h46.4
c1.9,0,3.3,1.4,3.3,3.3V471C242.2,472.9,240.6,474.3,238.8,474.3L238.8,474.3z"/>
<path fill="#F8D7D7" d="M232.8,282.6h344.6l0,0v162.6c0,72.6-58.9,131.5-131.5,131.5l0,0h-81.5c-72.6,0-131.5-58.9-131.5-131.5l0,0
V282.6H232.8z"/>
<path fill="#F3BEBB" d="M411.3,578.3h-12c-91.8,0-166.3-74.5-166.3-166.3v35.4c0,91.8,74.5,166.3,166.3,166.3h12
c91.8,0,166.3-74.5,166.3-166.3v-35.4C577.5,503.8,503.1,578.3,411.3,578.3z"/>
<path class="brick2" fill="#2B0E27" d="M666.3,190c-1.6-42.2-37-75.3-79.3-73.7c-27.3,0.9-52,16.6-64.8,40.8c-5.2,10-17.3,13.9-27.3,8.9
c-25-12.6-52.6-19.4-80.6-19.2h-20.8c-27.2,0-54,6.2-78.4,18.3c-9.8,4.8-21.7,0.9-26.9-8.7c-20.5-37-67-50.6-104-30.3
s-50.6,66.8-30.3,103.8c13.4,24.5,39.2,39.8,67.1,39.8l0,0c1.4,0,2.3,1.1,2.5,2.3c0,0.3,0,0.5-0.2,0.8c-5.2,16.9-7.8,34.4-7.8,52
v46.8c0,22.2,18.1,40.3,40.3,40.3l0,0h57.9c10.8,0,19.4-8.7,19.4-19.4l0,0V342c-0.2-7.5,5.6-13.9,13.1-14.5c7.8-0.6,14.5,5.3,15,13
c0,0.3,0,0.6,0,1.1v51.1c0,10.8,8.7,19.4,19.4,19.4l0,0h171c22.2,0,40.3-18.1,40.3-40.3v-46.8c0-17.6-2.7-35.3-7.8-52.2
c-0.5-1.2,0.3-2.7,1.6-3c0.3-0.2,0.6-0.2,0.8-0.2c0.9,0,2,0,3,0c42.3,0,76.5-34.2,76.5-76.5C666.5,192.1,666.3,191,666.3,190z"/>
<path fill="#FFFFFF" d="M367.8,489.1H444c10.3,0,18.7,8.4,18.7,18.7l0,0c0,24.2-19.5,43.7-43.7,43.7h-26.2c-24.2,0-43.7-19.5-43.7-43.7
l0,0C349,497.5,357.4,489.1,367.8,489.1L367.8,489.1z"/>
<path class="brick3" fill="#222D3C" stroke="#222D3C" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" d="M292.8,456.4c0-12.5,15.1-22.6,34-22.6c18.9,0,34,10.2,34,22.6"/>
<path class="brick3" fill="#222D3C" stroke="#222D3C" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" d="M444.9,456.4c0-12.5,15.1-22.6,34-22.6s34,10.2,34,22.6"/>
<ellipse rx="22.2" ry="22.2" fill="none" stroke="#FFD56E" stroke-width="8" transform="translate(594.7 492.3)" />
<ellipse rx="22.2" ry="22.2" fill="none" stroke="#FFD56E" stroke-width="8" transform="translate(215.2 492.3)" />
<path fill="#F3BEBB" d="M395.4,459.9h15.1c4.8,0,8.9,3.9,8.9,8.9l0,0c0,4.8-3.9,8.9-8.9,8.9h-15.1c-4.8,0-8.9-3.9-8.9-8.9l0,0
C386.5,463.8,390.4,459.9,395.4,459.9z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

BIN
entry/src/main/resources/base/media/test.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

9
entry/src/main/resources/base/media/user.txt
View File

@ -1,9 +0,0 @@
syntax = "proto3";
package User;
message UserLoginResponse{
string sessionId = 1;
string userPrivilege = 2;
int64 servTimesTemp = 3;
string formatTimestamp = 4;
}

BIN
entry/src/main/resources/base/media/webpSample.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 496 KiB

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

@ -1,51 +1,10 @@
{ {
"src": [ "src": [
"pages/index", "pages/Index",
"pages/CacheRuleChangedPage", "pages/ListPage",
"pages/frescoRetryTestCasePage", "pages/SingleImage",
"pages/basicTestFeatureAbilityPage", "pages/ManyPhotoShowPage",
"pages/basicTestFileIOPage", "pages/LongImagePage",
"pages/basicTestMediaImage", "pages/TransformPage"
"pages/basicTestResourceManagerPage",
"pages/storageTestLruCache",
"pages/pngjTestCasePage",
"pages/showErrorholderTestCasePage",
"pages/transformPixelMapPage",
"pages/testPreloadPage",
"pages/testDiskPreLoadPage",
"pages/testImageKnifeOptionChangedPage",
"pages/testImageKnifeOptionChangedPage2",
"pages/testImageKnifeOptionChangedPage3",
"pages/testImageKnifeOptionChangedPage4",
"pages/testImageKnifeOptionChangedPage5",
"pages/compressPage",
"pages/testAllCacheInfoPage",
"pages/cropImagePage2",
"pages/svgTestCasePage",
"pages/imageknifeTestCaseIndex",
"pages/dataShareUriLoadPage",
"pages/manyPhotoShowPage",
"pages/photosPausedResumedPage",
"pages/photosPausedResumedPage2",
"pages/tempUrlTestPage",
"pages/drawFactoryTestPage",
"pages/testSingleFrameGifPage",
"pages/OptionTestPage",
"pages/SignatureTestPage",
"pages/hspCacheTestPage",
"pages/multiHspTestPage",
"pages/testManyNetImageLoadWithPage",
"pages/testManyNetImageLoadWithPage2",
"pages/testManyGifLoadWithPage",
"pages/testImageAntiAliasingWithPage",
"pages/testImageKnifeRouter1",
"pages/testImageKnifeRouter2",
"pages/RequestOptionLoadImage",
"pages/testImageKnifeHttpRequestHeader",
"pages/testImageKnifeAutoPage",
"pages/testImageKnifeAutoWidthPage",
"pages/testImageKnifeAutoHeightPage",
"pages/testPriorityComponent",
"pages/testReusePhotoPage"
] ]
} }

16
entry/src/main/resources/en_US/element/string.json Normal file
View File

@ -0,0 +1,16 @@
{
"string": [
{
"name": "module_desc",
"value": "module description"
},
{
"name": "EntryAbility_desc",
"value": "description"
},
{
"name": "EntryAbility_label",
"value": "label"
}
]
}

16
entry/src/main/resources/zh_CN/element/string.json Normal file
View File

@ -0,0 +1,16 @@
{
"string": [
{
"name": "module_desc",
"value": "模块描述"
},
{
"name": "EntryAbility_desc",
"value": "description"
},
{
"name": "EntryAbility_label",
"value": "label"
}
]
}

87
entry/src/ohosTest/ets/test/DefaultJobQueueTest.test.ets Normal file
View File

@ -0,0 +1,87 @@
/*
* 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 { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium';
import { ImageKnifeOption, ImageKnifeRequest } from '@ohos/imageknife/Index';
import { DefaultJobQueue } from '@ohos/imageknife/src/main/ets/utils/DefaultJobQueue';
import { IJobQueue } from '@ohos/imageknife/src/main/ets/utils/IJobQueue';
import taskpool from '@ohos.taskpool';
import common from '@ohos.app.ability.common';
export default function DefaultJobQueueTest() {
describe('DefaultJobQueueTest', () => {
// Defines a test suite. Two parameters are supported: test suite name and test suite function.
beforeAll(() => {
// Presets an action, which is performed only once before all test cases of the test suite start.
// This API supports only one parameter: preset action function.
});
beforeEach(() => {
// Presets an action, which is performed before each unit test case starts.
// The number of execution times is the same as the number of test cases defined by **it**.
// This API supports only one parameter: preset action function.
});
afterEach(() => {
// Presets a clear action, which is performed after each unit test case ends.
// The number of execution times is the same as the number of test cases defined by **it**.
// This API supports only one parameter: clear action function.
});
afterAll(() => {
// Presets a clear action, which is performed after all test cases of the test suite end.
// This API supports only one parameter: clear action function.
});
it('testJob', 0, async () => {
let job: IJobQueue = new DefaultJobQueue()
job.add(makeRequest("medium1", getContext() as common.UIAbilityContext))
job.add(makeRequest("medium2", getContext() as common.UIAbilityContext, taskpool.Priority.MEDIUM))
job.add(makeRequest("medium3", getContext() as common.UIAbilityContext))
job.add(makeRequest("low1", getContext() as common.UIAbilityContext, taskpool.Priority.LOW))
job.add(makeRequest("high1", getContext() as common.UIAbilityContext, taskpool.Priority.HIGH))
job.add(makeRequest("low2", getContext() as common.UIAbilityContext, taskpool.Priority.LOW))
job.add(makeRequest("medium4", getContext() as common.UIAbilityContext))
expect(job.getQueueLength()).assertEqual(7)
expect(job.pop()!.ImageKnifeOption.loadSrc).assertEqual("high1")
expect(job.pop()!.ImageKnifeOption.loadSrc).assertEqual("medium1")
expect(job.pop()!.ImageKnifeOption.loadSrc).assertEqual("medium2")
expect(job.pop()!.ImageKnifeOption.loadSrc).assertEqual("medium3")
expect(job.pop()!.ImageKnifeOption.loadSrc).assertEqual("medium4")
expect(job.pop()!.ImageKnifeOption.loadSrc).assertEqual("low1")
expect(job.pop()!.ImageKnifeOption.loadSrc).assertEqual("low2")
expect(job.pop()).assertEqual(undefined)
expect(job.getQueueLength()).assertEqual(0)
});
});
}
function makeRequest(src: string, context: common.UIAbilityContext, priority?: taskpool.Priority): ImageKnifeRequest {
let option: ImageKnifeOption = {
loadSrc: src,
priority: priority
}
return new ImageKnifeRequest(
option,
context,
0,
0,
0,
{
showPixelMap: async (version: number,pixelMap: PixelMap | string) => {
}
})
}

172
entry/src/ohosTest/ets/test/FileLruCache.test.ets Normal file
View File

@ -0,0 +1,172 @@
/*
* 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 { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium';
import Constants from '../../../main/ets/common/Constants';
import taskpool from '@ohos.taskpool';
import { GlobalContext } from '../../../main/ets/common/GlobalContext';
import { FileCache } from '@ohos/imageknife/src/main/ets/utils/FileCache';
export default function FileLruCacheTest() {
describe('FileLruCacheTest', () => {
// Defines a test suite. Two parameters are supported: test suite name and test suite function.
beforeAll(() => {
// Presets an action, which is performed only once before all test cases of the test suite start.
// This API supports only one parameter: preset action function.
});
beforeEach(() => {
// Presets an action, which is performed before each unit test case starts.
// The number of execution times is the same as the number of test cases defined by **it**.
// This API supports only one parameter: preset action function.
});
afterEach(() => {
// Presets a clear action, which is performed after each unit test case ends.
// The number of execution times is the same as the number of test cases defined by **it**.
// This API supports only one parameter: clear action function.
});
afterAll(() => {
// Presets a clear action, which is performed after all test cases of the test suite end.
// This API supports only one parameter: clear action function.
});
// 测试基础put,get以及size功能
it('assertFileSizeAllInMainThread', 0, async () => {
const buf: ArrayBuffer = new ArrayBuffer(1024 * 1024);
console.info(Constants.TAG + buf.byteLength)
console.info(Constants.TAG + GlobalContext.getContext().getObject("cacheDir"))
let fileCache: FileCache = new FileCache(GlobalContext.getContext()
.getObject("context") as Context, 5, 3 * 1024 * 1024)
await fileCache.initFileCache()
fileCache.put("aaa", buf)
await sleep(1000)
fileCache.put("bbb", buf)
await sleep(1000)
fileCache.put("ccc", buf)
expect(fileCache.size()).assertEqual(3)
console.info(Constants.TAG + fileCache.currentMemory + "")
fileCache.get("aaa")
await sleep(1000)
fileCache.put("ddd", buf)
await sleep(1000)
console.info(Constants.TAG + fileCache.currentMemory + "")
expect(fileCache.size()).assertEqual(3)
console.info(Constants.TAG + fileCache.get("aaa")?.byteLength)
expect(fileCache.get("ddd")?.byteLength).assertEqual(buf.byteLength)
await sleep(1000)
expect(fileCache.get("aaa")?.byteLength).assertEqual(buf.byteLength)
await sleep(1000)
expect(fileCache.get("ccc")?.byteLength).assertEqual(buf.byteLength)
await sleep(1000)
expect(fileCache.get("bbb")).assertUndefined()
// 模拟第二次启动后重新加载缓存
let fileCache2: FileCache = new FileCache(GlobalContext.getContext()
.getObject("context") as Context, 5, 3 * 1024 * 1024)
await fileCache2.initFileCache()
expect(fileCache2.size()).assertEqual(3)
expect(fileCache2.get("ddd")?.byteLength).assertEqual(buf.byteLength)
expect(fileCache2.get("aaa")?.byteLength).assertEqual(buf.byteLength)
expect(fileCache2.get("ccc")?.byteLength).assertEqual(buf.byteLength)
});
it('assertFileSizeAllInSubThread', 0, async () => {
const buf: ArrayBuffer = new ArrayBuffer(1024 * 1024);
console.info(Constants.TAG + buf.byteLength)
console.info(Constants.TAG + GlobalContext.getContext().getObject("cacheDir"))
let fileCache: FileCache = new FileCache(GlobalContext.getContext()
.getObject("context") as Context, 5, 3 * 1024 * 1024)
await fileCache.initFileCache()
fileCache.put("aaa", buf)
let task: taskpool.Task = new taskpool.Task(getFile, "bbb", GlobalContext.getContext()
.getObject("context") as Context);
let res: ArrayBuffer | undefined = await taskpool.execute(task) as (ArrayBuffer | undefined)
if (res !== undefined) {
fileCache.putWithoutWriteFile("bbb", res)
}
task = new taskpool.Task(getFile, "aaa", GlobalContext.getContext()
.getObject("context") as Context);
res = await taskpool.execute(task) as (ArrayBuffer | undefined)
if (res !== undefined) {
fileCache.putWithoutWriteFile("aaa", res)
}
fileCache.put("ddd", buf)
expect(fileCache.size()).assertEqual(3)
expect(fileCache.currentMemory).assertEqual(3 * 1024 * 1024)
expect(fileCache.get("bbb")?.byteLength).assertEqual(1024 * 1024)
expect(fileCache.get("aaa")?.byteLength).assertEqual(1024 * 1024)
expect(fileCache.get("ddd")?.byteLength).assertEqual(1024 * 1024)
task = new taskpool.Task(getFile, "eee", GlobalContext.getContext()
.getObject("context") as Context);
res = await taskpool.execute(task) as (ArrayBuffer | undefined)
if (res !== undefined) {
fileCache.putWithoutWriteFile("eee", res)
}
expect(fileCache.size()).assertEqual(3)
expect(fileCache.currentMemory).assertEqual(3 * 1024 * 1024)
expect(fileCache.get("bbb")).assertEqual(undefined)
expect(fileCache.get("aaa")?.byteLength).assertEqual(1024 * 1024)
expect(fileCache.get("ddd")?.byteLength).assertEqual(1024 * 1024)
});
it('test', 0, async () => {
const buf: ArrayBuffer = new ArrayBuffer(1024 * 1024);
console.info(Constants.TAG + buf.byteLength)
console.info(Constants.TAG + GlobalContext.getContext().getObject("cacheDir"))
let fileCache: FileCache = new FileCache(GlobalContext.getContext()
.getObject("context") as Context, 5, 3 * 1024 * 1024)
await fileCache.initFileCache()
console.info(Constants.TAG + JSON.stringify("xxxxx"))
fileCache.put(JSON.stringify("xxxxx"),buf)
expect(fileCache.get(JSON.stringify("xxxxx"))?.byteLength).assertEqual(1024 * 1024)
});
});
}
function sleep(ms: number): Promise<void> {
return new Promise(resolve => setTimeout(resolve, ms));
}
@Concurrent
async function getFile(key: string, context: Context): Promise<ArrayBuffer | undefined> {
// 读取文件缓存
let buf = FileCache.getFileCacheByFile(context, key)
if (buf !== undefined) {
return buf
}
buf = new ArrayBuffer(1024 * 1024)
// 写文件缓存
FileCache.saveFileCacheOnlyFile(context, key, buf)
return buf;
}

Some files were not shown because too many files have changed in this diff Show More