forked from floraachy/ImageKnife
Compare commits
No commits in common. "master" and "2.x_maintain" have entirely different histories.
master
...
2.x_mainta
|
|
@ -1,11 +1,10 @@
|
|||
/node_modules
|
||||
/oh_modules
|
||||
/local.properties
|
||||
/.idea
|
||||
**/build
|
||||
/.hvigor
|
||||
.cxx
|
||||
/oh_modules/
|
||||
/.hvigor/
|
||||
/oh-package-lock.json5
|
||||
/.clangd
|
||||
/.clang-format
|
||||
/.clang-tidy
|
||||
**/.test
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
"bundleName": "com.openharmony.imageknife",
|
||||
"vendor": "example",
|
||||
"versionCode": 1000000,
|
||||
"versionName": "3.0.0-rc.0",
|
||||
"versionName": "2.1.2-rc.0",
|
||||
"icon": "$media:app_icon",
|
||||
"label": "$string:app_name",
|
||||
"distributedNotificationEnabled": true
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 6.6 KiB |
155
CHANGELOG.md
155
CHANGELOG.md
|
|
@ -1,138 +1,35 @@
|
|||
## 3.1.1-rc.1
|
||||
- Photo reduction sampling
|
||||
## 3.1.1-rc.0
|
||||
- 重构代码：抽取ImageKnifeDispatcher子线程requestJob相关代码到ImageKnifeLoader中，降低函数复杂度
|
||||
## 3.1.0
|
||||
- 部分静态webp图片有delay属性导致识别成动图,改用getFrameCount识别
|
||||
- 修复加载错误图后未去请求排队队列中的请求
|
||||
- 子线程本地Resource参数类型转换成number
|
||||
- 修改使用hilog记录日志，默认打开debug级别的日志
|
||||
- file格式图片，fd同步close
|
||||
- 解码pixelMap默认不可编辑，图形变化可编辑
|
||||
- 修改网络请求超时设置
|
||||
|
||||
## 3.1.0-rc.2
|
||||
- 修复宽高不等svg图片显示有毛边
|
||||
|
||||
## 3.1.0-rc.1
|
||||
- ImageKnifeAnimatorComponent新增开始、结束、暂停的回调事件
|
||||
- 文件缓存数量负数和超过INT最大值时默认为INT最大值
|
||||
|
||||
## 3.1.0-rc.0
|
||||
- ComponentV2装饰器适配
|
||||
- imageKnifeOption={...}用法改为new ImageKnifeOption({...})
|
||||
- animatorOption={...}用法改为new AnimatorOption({...})
|
||||
|
||||
## 3.0.1
|
||||
- 修复animatorOption属性设置初始化值失效
|
||||
- 网络请求code为206、204时返回arraybuffer
|
||||
- ImageKnifeComponent显示非必要文件缓存初始化
|
||||
- 修复webp静态图无法设置图形变换
|
||||
|
||||
## 3.0.1-rc.2
|
||||
- 修复自定义下载失败无失败回调
|
||||
- 增加全局配置自定义下载接口
|
||||
- 修复主图相同，错误图不同导致只显示一个错误图
|
||||
- heic格式图片文件魔数从第五位开始匹配
|
||||
|
||||
## 3.0.1-rc.1
|
||||
- 新增ImageKnifeAnimatorComponent控制动图组件
|
||||
## 2.3.0-rc.2
|
||||
- 加载优先级Priority类型改为taskpool.Priority类型
|
||||
- 修复部分heif图无法解码
|
||||
|
||||
## 3.0.1-rc.0
|
||||
- 文件缓存设置最大缓存数量改为无限制
|
||||
## 2.3.0-rc.1
|
||||
- 修复file://格式图片无法显示
|
||||
- 修改uuid的生成方式，使用资源loadSrc，宽高以及转换效果的拼接字符串作为入参， 修复同资源图形转换错乱的问题
|
||||
|
||||
## 3.0.0
|
||||
- 修复图形变换的闪退问题
|
||||
- 自定义下载customGetImage改为仅主图支持
|
||||
- 修改网络请求requestInStream配置优先返回arraybuffer
|
||||
- 新增ColorFilter属性
|
||||
## 2.3.0-rc.0
|
||||
- 增加gif图duration的默认值，以及默认播放次数
|
||||
|
||||
## 3.0.0-rc.9
|
||||
- 修复Resource类型$r(变量无法)加载
|
||||
- 成功回调增加图片格式
|
||||
- Image组件增加onComplete回调
|
||||
- 修复404链接无返回错误信息
|
||||
- onLoadListener增加请求取消回调
|
||||
|
||||
## 3.0.0-rc.8
|
||||
- svg解码单位改为px
|
||||
- 修复预加载接口preLoadCache传ImageKnifeOption失效
|
||||
- 文件缓存初始化接口新增目录参数
|
||||
- 占位图从内存获取提前到判断队列前面
|
||||
- 图片改为不可拖拽
|
||||
- 修复getCacheImage默认内存获取后不返回数据
|
||||
- 成功回调返回GIF图宽高
|
||||
|
||||
## 3.0.0-rc.7
|
||||
- 修复成功回调获取不到宽高
|
||||
- 新增svg图片解码
|
||||
- 新增媒体图片file://格式
|
||||
- 修复头像超过设备高度图片闪动问题-消息列表底部头像闪动问题
|
||||
|
||||
## 3.0.0-rc.6
|
||||
- 支持多种组合变换
|
||||
- 支持全局配置是否在子线程请求加载图片，默认在子线程
|
||||
- 文件缓存初始化增加默认值
|
||||
- 预加载接口新增返回加载错误信息
|
||||
- 加载队列改为使用堆Stack
|
||||
- fileType图片格式新增heic格式
|
||||
|
||||
## 3.0.0-rc.5
|
||||
- 图片加载事件增加请求开始的回调,以及修复有缓存时，没有回调的bug
|
||||
- 修复对已销毁组件不再下发请求的逻辑
|
||||
- 加载图片流程添加日志
|
||||
- 子线程写入文件缓存获取buffer优化
|
||||
- 成功回调增加返回图片分辨率宽高
|
||||
- 内存缓存时将pixelMap进行release释放
|
||||
- 提供清理缓存能力
|
||||
|
||||
## 3.0.0-rc.4
|
||||
- 支持hsp多包图片资源
|
||||
- 新增putCache写入缓存接口
|
||||
- 修复入参为pixelMap图片不显示问题
|
||||
- 网络请求减少拼接操作，修复网络加载速度慢
|
||||
## 2.2.0
|
||||
- 修复错误图绘制完后变成占位图
|
||||
- 提供图片加载成功/失败的事件
|
||||
|
||||
## 3.0.0-rc.3
|
||||
- 将请求默认并行从64调整到8，减少对taskpool execute内存消耗
|
||||
- 补充option参数：placeholderObjectFit，errorholderObjectFit分别支持占位图填充效果和错误图填充效果
|
||||
|
||||
## 3.0.0-rc.2
|
||||
- 新增支持使用一个或多个图片变换，如模糊，高亮等
|
||||
|
||||
## 3.0.0-rc.1
|
||||
- 新增从内存或文件缓存获取图片数据接口getCacheImage
|
||||
- 新增图片预加载preLoadCache并返回文件缓存路径
|
||||
- ImageKnifeOption新增writeCacheStrategy存入策略(只存入内存或文件缓存)
|
||||
- ImageKnifeOption新增onlyRetrieveFromCache仅用缓存加载
|
||||
- 新增单个和全局请求头
|
||||
- 补齐自定key特性
|
||||
- 修复懒加载在多次点击出现卡死的问题
|
||||
- 支持多种组合变换
|
||||
- 提供清理缓存能力
|
||||
- 修复preLoad接口失效
|
||||
- 修复多线程图片加载出现空白问题
|
||||
- 获取组件宽高改用onSizeChange （需要API12）
|
||||
|
||||
## 3.0.0-rc.0
|
||||
- 使用Image组件替换Canvas组件渲染，并重构大部分的实现逻辑，提升渲染性能
|
||||
|
||||
较2.x版本增强点：
|
||||
- 使用Image组件代替Canvas组件渲染
|
||||
- 重构Dispatch分发逻辑，支持控制并发请求数，支持请求排队队列的优先级
|
||||
- 支持通过initMemoryCache自定义策略内存缓存策略和大小。
|
||||
- 支持option自定义实现图片获取/网络下载
|
||||
- 继承Image的能力，支持option传入border，设置边框，圆角
|
||||
- 继承Image的能力，支持option传入objectFit设置图片缩放
|
||||
- 修复发送消息时最近的两条消息头像闪动的问题
|
||||
|
||||
缺失特性
|
||||
- 不支持drawLifeCycle接口，通过canvas自会图片
|
||||
- mainScaleType，border等参数，新版本与系统Image保持一致
|
||||
- gif/webp动图播放与控制
|
||||
- signature自定义key的实现
|
||||
- 支持进行图片变换: 支持图像像素源图片变换效果。
|
||||
- 抗锯齿相关参数
|
||||
- svg解码宽高单位给位px
|
||||
- 修复复用场景下从内存获取图片后又清空了画布导致图片不显示
|
||||
- 修复复用场景主图比占位图绘制快后下次不显示占位图问题
|
||||
|
||||
## 2.2.0-rc.2
|
||||
- ImageKnife支持下采样
|
||||
- ImageKnife支持heic图片修改demo，按钮控制组件是否展示
|
||||
- 修复通过磁盘链接加载图片无法显示
|
||||
- ImageKnife控制可视化区域图片
|
||||
- 修复占位图、错误图、重试图从内存获取之后进入子线程导致内存泄露
|
||||
- ImageKnifeComponent组件key属性改为id属性
|
||||
- 修改header图的存储标志位
|
||||
|
||||
## 2.2.0-rc.1
|
||||
- 修改ImageKnife跳过网络,点击默认,图片没有传入宽高,无显示bug
|
||||
|
|
@ -386,12 +283,12 @@
|
|||
|
||||
新增
|
||||
|
||||
- 1.onClick事件属性
|
||||
- 1.onClick事件属性
|
||||
|
||||
删除
|
||||
删除
|
||||
|
||||
- 1.size(设置大小)
|
||||
- 2.sizeAnimated 显式动画
|
||||
- 1.size(设置大小)
|
||||
- 2.sizeAnimated 显式动画
|
||||
- 3.backgroundColor背景色
|
||||
- 4.margin 组件外间距 等属性,删除的属性将由通用属性提供支持,可支持在ImageKnifeComponent自定义组件上链式调用
|
||||
## 1.0.4
|
||||
|
|
|
|||
9
OAT.xml
9
OAT.xml
|
|
@ -27,7 +27,8 @@
|
|||
<filteritem type="filename" name="hvigorw" desc="hvigorw配置文件，DevEco Studio自动生成，不手动修改"/>
|
||||
<filteritem type="filename" name="hvigorw.bat" desc="hvigorw配置文件，DevEco Studio自动生成，不手动修改"/>
|
||||
<filteritem type="filename" name="hvigor-wrapper.js" desc="hvigorw配置文件，DevEco Studio自动生成，不手动修改"/>
|
||||
<filteritem type="filepath" name="library/src/main/ets/3rd_party/.*" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
|
||||
<filteritem type="filepath" name="library/src/main/ets/components/3rd_party/.*" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
|
||||
<filteritem type="filename" name=".gitmodules" desc="项目工程配置文件，不需要添加版权头"/>
|
||||
</filefilter>
|
||||
<filefilter name="defaultPolicyFilter" desc="Filters for compatibility，license header policies">
|
||||
<filteritem type="filename" name="hvigorfile.*" desc="hvigor配置文件，DevEco Studio自动生成，不手动修改"/>
|
||||
|
|
@ -37,7 +38,8 @@
|
|||
<filteritem type="filename" name="hvigorw" desc="hvigorw配置文件，DevEco Studio自动生成，不手动修改"/>
|
||||
<filteritem type="filename" name="hvigorw.bat" desc="hvigorw配置文件，DevEco Studio自动生成，不手动修改"/>
|
||||
<filteritem type="filename" name="hvigor-wrapper.js" desc="hvigorw配置文件，DevEco Studio自动生成，不手动修改"/>
|
||||
<filteritem type="filepath" name="library/src/main/ets/3rd_party/.*" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
|
||||
<filteritem type="filepath" name="library/src/main/ets/components/3rd_party/.*" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
|
||||
<filteritem type="filename" name=".gitmodules" desc="项目工程配置文件，不需要添加版权头"/>
|
||||
</filefilter>
|
||||
<filefilter name="binaryFileTypePolicyFilter" desc="Filters for binary file policies">
|
||||
<filteritem type="filename" name="*.dpg" desc="dpg图片格式文件,用于展示示例"/>
|
||||
|
|
@ -49,9 +51,10 @@
|
|||
<filteritem type="filename" name="*.jpg" desc="jpg图片格式文件,用于展示示例"/>
|
||||
<filteritem type="filename" name="*.jpeg" desc="jpeg图片格式文件,用于展示示例"/>
|
||||
<filteritem type="filename" name="*.json5" desc="hvigor配置文件"/>
|
||||
<filteritem type="filename" name="*.heic" desc="heic图片格式文件,用于展示示例"/>
|
||||
</filefilter>
|
||||
<filefilter name="defaultFilter" desc="Files not to check">
|
||||
<filteritem type="filepath" name="library/src/main/ets/3rd_party/.*" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
|
||||
<filteritem type="filepath" name="library/src/main/ets/components/3rd_party/.*" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
|
||||
</filefilter>
|
||||
</filefilterlist>
|
||||
</oatconfig>
|
||||
|
|
|
|||
375
README_zh.md
375
README_zh.md
|
|
@ -1,375 +0,0 @@
|
|||
# ImageKnife
|
||||
|
||||
**专门为OpenHarmony打造的一款图像加载缓存库，致力于更高效、更轻便、更简单。**
|
||||
|
||||
## 简介
|
||||
|
||||
本项目参考开源库 [Glide](https://github.com/bumptech/glide) 进行OpenHarmony的自研版本：
|
||||
|
||||
- 支持自定义内存缓存策略，支持设置内存缓存的大小(默认LRU策略)。
|
||||
- 支持磁盘二级缓存，对于下载图片会保存一份至磁盘当中。
|
||||
- 支持自定义实现图片获取/网络下载
|
||||
- 支持监听网络下载回调进度
|
||||
- 继承Image的能力，支持option传入border，设置边框，圆角
|
||||
- 继承Image的能力，支持option传入objectFit设置图片缩放，包括objectFit为auto时根据图片自适应高度
|
||||
- 支持通过设置transform缩放图片
|
||||
- 并发请求数量，支持请求排队队列的优先级
|
||||
- 支持生命周期已销毁的图片，不再发起请求
|
||||
- 自定义缓存key
|
||||
- 自定义http网络请求头
|
||||
- 支持writeCacheStrategy控制缓存的存入策略(只存入内存或文件缓存)
|
||||
- 支持preLoadCache预加载图片
|
||||
- 支持onlyRetrieveFromCache仅用缓存加载
|
||||
- 支持使用一个或多个图片变换，如模糊，高亮等
|
||||
|
||||
待实现特性
|
||||
|
||||
- 内存降采样优化，节约内存的占用
|
||||
- 支持自定义图片解码
|
||||
|
||||
注意：3.x版本相对2.x版本做了重大的重构，主要体现在：
|
||||
|
||||
- 使用Image组件代替Canvas组件渲染
|
||||
- 重构Dispatch分发逻辑，支持控制并发请求数，支持请求排队队列的优先级
|
||||
- 支持通过initMemoryCache自定义策略内存缓存策略和大小
|
||||
- 支持option自定义实现图片获取/网络下载
|
||||
|
||||
因此API及能力上，目前有部分差异，主要体现在：
|
||||
|
||||
- 不支持drawLifeCycle接口，通过canvas自会图片
|
||||
- mainScaleType，border等参数，新版本与系统Image保持一致
|
||||
- gif/webp动图播放与控制(ImageAnimator实现)
|
||||
- 抗锯齿相关参数
|
||||
|
||||
## 下载安装
|
||||
|
||||
```
|
||||
ohpm install @ohos/imageknife
|
||||
|
||||
// 如果需要用文件缓存，需要提前初始化文件缓存
|
||||
await ImageKnife.getInstance().initFileCache(context, 256, 256 * 1024 * 1024)
|
||||
```
|
||||
|
||||
## 使用说明
|
||||
|
||||
#### 1.显示本地资源图片
|
||||
|
||||
```
|
||||
ImageKnifeComponent({
|
||||
ImageKnifeOption: new ImageKnifeOption({
|
||||
loadSrc: $r("app.media.app_icon"),
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Auto
|
||||
})
|
||||
}).width(100).height(100)
|
||||
```
|
||||
|
||||
#### 2.显示本地context files下文件
|
||||
|
||||
```
|
||||
ImageKnifeComponent({
|
||||
ImageKnifeOption: new ImageKnifeOption({
|
||||
loadSrc: this.localFile,
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Auto
|
||||
})
|
||||
}).width(100).height(100)
|
||||
```
|
||||
|
||||
#### 3.显示网络图片
|
||||
|
||||
```
|
||||
ImageKnifeComponent({
|
||||
ImageKnifeOption: new ImageKnifeOption({
|
||||
loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Auto
|
||||
})
|
||||
}).width(100).height(100)
|
||||
```
|
||||
|
||||
#### 4.自定义下载图片
|
||||
|
||||
```
|
||||
ImageKnifeComponent({
|
||||
ImageKnifeOption: new ImageKnifeOption({
|
||||
loadSrc: "https://file.atomgit.com/uploads/user/1704857786989_8994.jpeg",
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Auto,
|
||||
customGetImage: custom
|
||||
})
|
||||
}).width(100).height(100)
|
||||
|
||||
// 自定义实现图片获取方法，如自定义网络下载
|
||||
@Concurrent
|
||||
async function custom(context: Context, src: string | PixelMap | Resource): Promise<ArrayBuffer | undefined> {
|
||||
console.info("ImageKnife:: custom download：" + src)
|
||||
// 举例写死从本地文件读取，也可以自己请求网络图片
|
||||
return context.resourceManager.getMediaContentSync($r("app.media.bb").id).buffer as ArrayBuffer
|
||||
}
|
||||
```
|
||||
|
||||
#### 5.监听网络下载进度
|
||||
|
||||
```
|
||||
ImageKnifeComponent({
|
||||
ImageKnifeOption: new ImageKnifeOption({
|
||||
loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
|
||||
progressListener:(progress:number)=>{console.info("ImageKinfe:: call back progress = " + progress)}
|
||||
})
|
||||
}).width(100).height(100)
|
||||
```
|
||||
|
||||
#### 6.支持option传入border，设置边框，圆角
|
||||
|
||||
```
|
||||
ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
|
||||
{
|
||||
loadSrc: $r("app.media.rabbit"),
|
||||
border: {radius:50}
|
||||
})
|
||||
}).width(100).height(100)
|
||||
```
|
||||
|
||||
#### 7.支持option图片变换
|
||||
|
||||
```
|
||||
ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
|
||||
{
|
||||
loadSrc: $r("app.media.rabbit"),
|
||||
border: {radius:50},
|
||||
transformation: new BlurTransformation(3)
|
||||
})
|
||||
}).width(100).height(100)
|
||||
```
|
||||
多种组合变换用法
|
||||
|
||||
```
|
||||
let transformations: collections.Array<PixelMapTransformation> = new collections.Array<PixelMapTransformation>();
|
||||
transformations.push(new BlurTransformation(5));
|
||||
transformations.push(new BrightnessTransformation(0.2));
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: new ImageKnifeOption({
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Contain,
|
||||
border: { radius: { topLeft: 50, bottomRight: 50 } }, // 圆角设置
|
||||
transformation: transformations.length > 0 ? new MultiTransTransformation(transformations) : undefined // 图形变换组
|
||||
})
|
||||
}).width(300)
|
||||
.height(300)
|
||||
.rotate({ angle: 90 }) // 旋转90度
|
||||
.contrast(12) // 对比度滤波器
|
||||
```
|
||||
其它变换相关属性，可叠加实现组合变换效果
|
||||
|
||||
圆形裁剪变换示例
|
||||
|
||||
```
|
||||
ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption(
|
||||
{
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
objectFit: ImageFit.Cover,
|
||||
border: { radius: 150 }
|
||||
})
|
||||
}).width(300)
|
||||
.height(300)
|
||||
```
|
||||
|
||||
圆形裁剪带边框变换示例
|
||||
|
||||
```
|
||||
ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption(
|
||||
{
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
objectFit: ImageFit.Cover,
|
||||
border: { radius: 150, color: Color.Red, width: 5 }
|
||||
})
|
||||
}).width(300)
|
||||
.height(300)
|
||||
```
|
||||
|
||||
对比度滤波变换示例
|
||||
|
||||
```
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: new ImageKnifeOption({
|
||||
loadSrc: $r('app.media.pngSample')
|
||||
})
|
||||
}).width(300)
|
||||
.height(300)
|
||||
.contrast(12)
|
||||
```
|
||||
|
||||
旋转变换示例
|
||||
|
||||
```
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: new ImageKnifeOption({
|
||||
loadSrc: $r('app.media.pngSample')
|
||||
})
|
||||
}).width(300)
|
||||
.height(300)
|
||||
.rotate({angle:90})
|
||||
.backgroundColor(Color.Pink)
|
||||
```
|
||||
|
||||
#### 8.监听图片加载成功与失败
|
||||
|
||||
```
|
||||
ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
|
||||
{
|
||||
loadSrc: $r("app.media.rabbit"),
|
||||
onLoadListener:{
|
||||
onLoadStart:()=>{
|
||||
this.starTime = new Date().getTime()
|
||||
console.info("Load start: ");
|
||||
},
|
||||
onLoadFailed: (err) => {
|
||||
console.error("Load Failed Reason: " + err + " cost " + (new Date().getTime() - this.starTime) + " milliseconds");
|
||||
},
|
||||
onLoadSuccess: (data, imageData) => {
|
||||
console.info("Load Successful: cost " + (new Date().getTime() - this.starTime) + " milliseconds");
|
||||
return data;
|
||||
},
|
||||
onLoadCancel(err){
|
||||
console.info(err)
|
||||
}
|
||||
}
|
||||
})
|
||||
}).width(100).height(100)
|
||||
```
|
||||
#### 9.ImageKnifeComponent - syncLoad
|
||||
设置是否同步加载图片，默认是异步加载。建议加载尺寸较小的Resource图片时将syncLoad设为true，因为耗时较短，在主线程上执行即可
|
||||
```
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption:new ImageKnifeOption({
|
||||
loadSrc:$r("app.media.pngSample"),
|
||||
placeholderSrc:$r("app.media.loading")
|
||||
}),syncLoad:true
|
||||
})
|
||||
```
|
||||
#### 10.ImageKnifeAnimatorComponent 示例
|
||||
```
|
||||
ImageKnifeAnimatorComponent({
|
||||
imageKnifeOption:new ImageKnifeOption({
|
||||
loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
|
||||
placeholderSrc:$r('app.media.loading'),
|
||||
errorholderSrc:$r('app.media.failed')
|
||||
}),animatorOption:this.animatorOption
|
||||
}).width(300).height(300).backgroundColor(Color.Orange).margin({top:30})
|
||||
```
|
||||
#### 复用场景
|
||||
在aboutToRecycle生命周期清空组件内容；通过watch监听触发图片的加载。
|
||||
## 接口说明
|
||||
### ImageKnife组件
|
||||
| 组件名称 | 入参内容 | 功能简介 |
|
||||
|-----------------------------|---------------------------------|--------|
|
||||
| ImageKnifeComponent | ImageKnifeOption | 图片显示组件 |
|
||||
| ImageKnifeAnimatorComponent | ImageKnifeOption、AnimatorOption | 动图控制组件 |
|
||||
|
||||
### AnimatorOption参数列表
|
||||
| 参数名称 | 入参内容 | 功能简介 |
|
||||
|------------|-----------------|----------|
|
||||
| state | AnimationStatus | 播放状态（可选） |
|
||||
| iterations | number | 播放次数（可选） |
|
||||
| reverse | boolean | 播放顺序（可选） |
|
||||
| onStart | ()=>void | 动画开始播放时触发（可选） |
|
||||
| onFinish | ()=>void | 动画播放完成时或者停止播放时触发（可选） |
|
||||
| onPause | ()=>void | 动画暂停播放时触发（可选） |
|
||||
| onCancel | ()=>void | 动画返回最初状态时触发（可选） |
|
||||
| onRepeat | ()=>void | 动画重复播放时触发（可选） |
|
||||
|
||||
### ImageKnifeOption参数列表
|
||||
|
||||
| 参数名称 | 入参内容 | 功能简介 |
|
||||
|-----------------------|-------------------------------------------------------|-----------------|
|
||||
| loadSrc | string、PixelMap、Resource | 主图展示 |
|
||||
| placeholderSrc | PixelMap、Resource | 占位图图展示（可选） |
|
||||
| errorholderSrc | PixelMap、Resource | 错误图展示（可选） |
|
||||
| objectFit | ImageFit | 主图填充效果（可选） |
|
||||
| placeholderObjectFit | ImageFit | 占位图填充效果（可选） |
|
||||
| errorholderObjectFit | ImageFit | 错误图填充效果（可选） |
|
||||
| writeCacheStrategy | CacheStrategyType | 写入缓存策略(可选) |
|
||||
| onlyRetrieveFromCache | boolean | 是否跳过网络和本地请求（可选） |
|
||||
| customGetImage | (context: Context, src: string | 自定义下载图片（可选） | | Resource | 错误占位图数据源 |
|
||||
| border | BorderOptions | 边框圆角（可选） |
|
||||
| priority | taskpool.Priority | 加载优先级（可选） |
|
||||
| context | common.UIAbilityContext | 上下文（可选） |
|
||||
| progressListener | (progress: number)=>void | 进度（可选） |
|
||||
| signature | String | 自定义缓存关键字（可选） |
|
||||
| headerOption | Array<HeaderOptions> | 设置请求头（可选） |
|
||||
| transformation | PixelMapTransformation | 图片变换（可选） |
|
||||
| drawingColorFilter | ColorFilter | drawing.ColorFilter | 图片变换（可选） |
|
||||
| onComplete | (event:EventImage | undefined) => voi | 颜色滤镜效果（可选） |
|
||||
| onLoadListener | onLoadStart: () => void、onLoadSuccess: (data: string | PixelMap | undefined) => void、onLoadFailed: (err: string) => void| 监听图片加载成功与失败 |
|
||||
|
||||
### ImageKnife接口
|
||||
|
||||
| 参数名称 | 入参内容 | 功能简介 |
|
||||
|------------------|-------------------------------------------------------------------------------------------------------|---------------|
|
||||
| initMemoryCache | newMemoryCache: IMemoryCache | 自定义内存缓存策略 |
|
||||
| initFileCache | context: Context, size: number, memory: number | 初始化文件缓存数量和大小 |
|
||||
| preLoadCache | loadSrc: string I ImageKnifeOption | 预加载并返回文件缓存路径 |
|
||||
| getCacheImage | loadSrc: string, cacheType: CacheStrategy = CacheStrategy.Default, signature?: string) | 从内存或文件缓存中获取资源 |
|
||||
| addHeader | key: string, value: Object | 全局添加http请求头 |
|
||||
| setHeaderOptions | Array<HeaderOptions> | 全局设置http请求头 |
|
||||
| deleteHeader | key: string | 全局删除http请求头 |
|
||||
| setCustomGetImage | customGetImage?: (context: Context, src: string | PixelMap | Resource) => Promise<ArrayBuffer | undefined> | 全局设置自定义下载 |
|
||||
| setEngineKeyImpl | IEngineKey | 全局配置缓存key生成策略 |
|
||||
| putCacheImage | url: string, pixelMap: PixelMap, cacheType: CacheStrategy = CacheStrategy.Default, signature?: string | 写入内存磁盘缓存 |
|
||||
| removeMemoryCache| url: string | ImageKnifeOption | 清理指定内存缓存 |
|
||||
| removeFileCache | url: string | ImageKnifeOption | 清理指定磁盘缓存 |
|
||||
### 图形变换类型（需要为GPUImage添加依赖项）
|
||||
|
||||
| 类型 | 相关描述 |
|
||||
| ---------------------------------- | ----------------------------- |
|
||||
| BlurTransformation | 模糊处理 |
|
||||
| BrightnessTransformation | 亮度滤波器 |
|
||||
| CropSquareTransformation | 正方形剪裁 |
|
||||
| CropTransformation | 自定义矩形剪裁 |
|
||||
| GrayScaleTransformation | 灰度级滤波器 |
|
||||
| InvertTransformation | 反转滤波器 |
|
||||
| KuwaharaTransformation | 桑原滤波器（使用GPUIImage） |
|
||||
| MaskTransformation | 遮罩 |
|
||||
| PixelationTransformation | 像素化滤波器（使用GPUIImage） |
|
||||
| SepiaTransformation | 乌墨色滤波器（使用GPUIImage） |
|
||||
| SketchTransformation | 素描滤波器（使用GPUIImage） |
|
||||
| SwirlTransformation | 扭曲滤波器（使用GPUIImage） |
|
||||
| ToonTransformation | 动画滤波器（使用GPUIImage） |
|
||||
| VignetterTransformation | 装饰滤波器（使用GPUIImage） |
|
||||
|
||||
## 下载安装GPUImage依赖
|
||||
方法一：在Terminal窗口中，执行如下命令安装三方包，DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。
|
||||
```
|
||||
ohpm install @ohos/gpu_transform
|
||||
```
|
||||
方法二： 在工程的oh-package.json5中设置三方包依赖，配置示例如下：
|
||||
```
|
||||
"dependencies": {
|
||||
"@ohos/gpu_transform": "^1.0.2"
|
||||
}
|
||||
```
|
||||
## 约束与限制
|
||||
|
||||
在下述版本验证通过：
|
||||
DevEco Studio 5.0 Canary3（5.0.3.502）--SDK:API12 (5.0.0.31)
|
||||
|
||||
## 贡献代码
|
||||
|
||||
使用过程中发现任何问题都可以提 [issue](https://gitee.com/openharmony-tpc/ImageKnife/issues)
|
||||
，当然，也非常欢迎发 [PR](https://gitee.com/openharmony-tpc/ImageKnife/pulls) 共建。
|
||||
|
||||
## 开源协议
|
||||
|
||||
本项目基于 [Apache License 2.0](https://gitee.com/openharmony-tpc/ImageKnife/blob/master/LICENSE) ，请自由的享受和参与开源。
|
||||
|
||||
## 遗留问题
|
||||
|
||||
- ImageKnifeAnimator组件无法设置ImageFit属性
|
||||
- ImageKnifeAnimator组件设置border属性无法将图片变为圆角
|
||||
|
|
@ -1,8 +1,5 @@
|
|||
{
|
||||
"app": {
|
||||
"signingConfigs": [
|
||||
|
||||
],
|
||||
"products": [
|
||||
{
|
||||
"name": "default",
|
||||
|
|
@ -13,7 +10,7 @@
|
|||
],
|
||||
"buildModeSet": [
|
||||
{
|
||||
"name": "debug",
|
||||
"name": "debug"
|
||||
},
|
||||
{
|
||||
"name": "release"
|
||||
|
|
@ -52,6 +49,18 @@
|
|||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "sharedlibrary2",
|
||||
"srcPath": "./sharedlibrary2",
|
||||
"targets": [
|
||||
{
|
||||
"name": "default",
|
||||
"applyToProducts": [
|
||||
"default"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
/node_modules
|
||||
/oh_modules
|
||||
/.preview
|
||||
/build
|
||||
/.cxx
|
||||
/.test
|
||||
/oh_modules/
|
||||
/oh-package-lock.json5
|
||||
|
|
|
|||
|
|
@ -1,28 +1,15 @@
|
|||
{
|
||||
"apiType": "stageMode",
|
||||
"apiType": 'stageMode',
|
||||
"buildOption": {
|
||||
"arkOptions": {
|
||||
// "apPath": "./modules.ap" /* Profile used for profile-guided optimization (PGO), a compiler optimization technique to improve app runtime performance. */
|
||||
"sourceOption": {
|
||||
"workers": [
|
||||
"./src/main/ets/workers/upngWorkerTestCase.ets"
|
||||
]
|
||||
}
|
||||
},
|
||||
"buildOptionSet": [
|
||||
{
|
||||
"name": "release",
|
||||
"arkOptions": {
|
||||
"obfuscation": {
|
||||
"ruleOptions": {
|
||||
"enable": true,
|
||||
"files": [
|
||||
"./obfuscation-rules.txt"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
],
|
||||
"targets": [
|
||||
{
|
||||
"name": "default"
|
||||
"name": "default",
|
||||
},
|
||||
{
|
||||
"name": "ohosTest",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
// Script for compiling build behavior. It is built in the build plug-in and cannot be modified currently.
|
||||
module.exports = require('@ohos/hvigor-ohos-plugin').hapTasks
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import { hapTasks } from '@ohos/hvigor-ohos-plugin';
|
||||
|
||||
export default {
|
||||
system: hapTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
|
||||
plugins:[] /* Custom plugin to extend the functionality of Hvigor. */
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
# Define project specific obfuscation rules here.
|
||||
# You can include the obfuscation configuration files in the current module's build-profile.json5.
|
||||
#
|
||||
# For more details, see
|
||||
# https://gitee.com/openharmony/arkcompiler_ets_frontend/blob/master/arkguard/README.md
|
||||
|
||||
# Obfuscation options:
|
||||
# -disable-obfuscation: disable all obfuscations
|
||||
# -enable-property-obfuscation: obfuscate the property names
|
||||
# -enable-toplevel-obfuscation: obfuscate the names in the global scope
|
||||
# -compact: remove unnecessary blank spaces and all line feeds
|
||||
# -remove-log: remove all console.* statements
|
||||
# -print-namecache: print the name cache that contains the mapping from the old names to new names
|
||||
# -apply-namecache: reuse the given cache file
|
||||
|
||||
# Keep options:
|
||||
# -keep-property-name: specifies property names that you want to keep
|
||||
# -keep-global-name: specifies names that you want to keep in the global scope
|
||||
|
|
@ -1,13 +1,14 @@
|
|||
{
|
||||
"license": "Apache License 2.0",
|
||||
"devDependencies": {},
|
||||
"name": "entry",
|
||||
"version": "1.0.0",
|
||||
"description": "Please describe the basic information.",
|
||||
"main": "",
|
||||
"author": "",
|
||||
"license": "",
|
||||
"description": "example description",
|
||||
"repository": {},
|
||||
"version": "2.2.0-rc.3",
|
||||
"dependencies": {
|
||||
"@ohos/libraryimageknife": "file:../sharedlibrary",
|
||||
"@ohos/sharedlibrary2": "file:../sharedlibrary2",
|
||||
"@ohos/disklrucache": "^2.0.2-rc.0",
|
||||
"@ohos/imageknife": "file:../library"
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,65 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { DownsampleStrategy } from '@ohos/imageknife';
|
||||
import { IEngineKey, ImageKnifeOption, PixelMapTransformation,SparkMD5 ,ImageKnifeRequestSource} from '@ohos/libraryimageknife';
|
||||
|
||||
//全局自定义key demo
|
||||
@Sendable
|
||||
export class CustomEngineKeyImpl implements IEngineKey {
|
||||
// 生成内存缓存key
|
||||
generateMemoryKey(loadSrc: string | PixelMap | Resource, requestSource: ImageKnifeRequestSource,
|
||||
imageKnifeOption: ImageKnifeOption,isAnimator?: boolean, width?: number, height?: number): string {
|
||||
let key = ""
|
||||
if(imageKnifeOption.signature == "aaa" && typeof loadSrc == "string") {
|
||||
let num = loadSrc.indexOf("?")
|
||||
let src = loadSrc.substring(0,num)
|
||||
key = "loadSrc=" + src
|
||||
} else {
|
||||
key = (isAnimator == true ? "Animator=" : "loadSrc==") + (typeof loadSrc == "string" ? loadSrc : JSON.stringify(loadSrc)) + ";"
|
||||
}
|
||||
if (requestSource === ImageKnifeRequestSource.SRC) {
|
||||
if (imageKnifeOption.signature !== undefined && imageKnifeOption.signature !== "") {
|
||||
key += "signature=" + imageKnifeOption.signature + ";"
|
||||
}
|
||||
if (imageKnifeOption.transformation) {
|
||||
key += "transformation=" + this.getTransformation(imageKnifeOption.transformation) + ";"
|
||||
}
|
||||
if ((imageKnifeOption.downsampleOf !== DownsampleStrategy.NONE && imageKnifeOption.downsampleOf !== undefined)) {
|
||||
key += "downsampleOf" + imageKnifeOption.downsampleOf +"width="+width+"height="+ height
|
||||
}
|
||||
}
|
||||
return key
|
||||
}
|
||||
|
||||
// 生成文件缓存key
|
||||
generateFileKey(loadSrc: string | PixelMap | Resource, signature?: string,isAnimator?: boolean): string {
|
||||
let src = ""
|
||||
if(signature == "aaa" && typeof loadSrc == "string") {
|
||||
let num = loadSrc.indexOf("?")
|
||||
let key = loadSrc.substring(0,num)
|
||||
src = "loadSrc=" + key
|
||||
} else {
|
||||
src = (isAnimator == true ? "Animator=" : "loadSrc==") + (typeof loadSrc == "string" ? loadSrc : JSON.stringify(loadSrc)) + ";"
|
||||
}
|
||||
if (signature !== undefined && signature !== "") {
|
||||
src += "signature=" + signature + ";"
|
||||
}
|
||||
return SparkMD5.hashBinary(src)
|
||||
}
|
||||
|
||||
private getTransformation(transformation: PixelMapTransformation): string {
|
||||
return transformation.getName()
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
/*
|
||||
* Copyright (C) 2023 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { EngineKeyFactories, EngineKeyInterface, RequestOption } from '@ohos/libraryimageknife'
|
||||
import { ObjectKey } from '@ohos/libraryimageknife';
|
||||
|
||||
export class CustomEngineKeyImpl implements EngineKeyInterface {
|
||||
redefineUrl: (loadSrc: string) => string;
|
||||
addOtherInfo: string = "Version=1.0.0;"
|
||||
|
||||
constructor() {
|
||||
this.redefineUrl = this.urlNeedClearToken;
|
||||
}
|
||||
|
||||
// request只读
|
||||
generateMemoryCacheKey(loadSrc: string, size: string, transformed: string, dontAnimate: boolean, signature: ObjectKey): string {
|
||||
return EngineKeyFactories.createMemoryCacheKey(loadSrc, size, transformed, dontAnimate, signature, this.redefineUrl, this.addOtherInfo);
|
||||
}
|
||||
|
||||
generateTransformedDiskCacheKey(loadSrc: string, size: string, transformed: string, dontAnimate: boolean, signature: ObjectKey): string {
|
||||
return EngineKeyFactories.createTransformedDiskCacheKey(loadSrc, size, transformed, dontAnimate, signature, this.redefineUrl, this.addOtherInfo);
|
||||
}
|
||||
|
||||
generateOriginalDiskCacheKey(loadSrc: string, signature: ObjectKey): string {
|
||||
return EngineKeyFactories.createOriginalDiskCacheKey(loadSrc, signature, this.redefineUrl, this.addOtherInfo);
|
||||
}
|
||||
|
||||
|
||||
// 需求场景: 请求图片可能 请求中存在token需要清除， 可以把输入的url清除token后作为key的一部分，这样token发生变化也能命中缓存。
|
||||
urlNeedClearToken = (url: string) => {
|
||||
if (this.isHttpRequest(url)) {
|
||||
return this.clearToken(url)
|
||||
} else {
|
||||
return url;
|
||||
}
|
||||
}
|
||||
|
||||
isHttpRequest(loadSrc: string) {
|
||||
if (typeof loadSrc == "string" && loadSrc.toLowerCase().startsWith("http")) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// 清除url里面中携带的token
|
||||
clearToken(url: string): string {
|
||||
let retUrl = url.replace(this.findTokenParam(url), "")
|
||||
return retUrl;
|
||||
}
|
||||
|
||||
// 网络图片加载 可能因为Token问题导致缓存失效
|
||||
findTokenParam(url: string): string {
|
||||
let tokenParam = "";
|
||||
let tokenKeyIndex = url.indexOf("?token=") >= 0 ? url.indexOf("?token=") : url.indexOf("&token=");
|
||||
if (tokenKeyIndex != -1) {
|
||||
let nextAndIndex = url.indexOf("&", tokenKeyIndex + 1);
|
||||
if (nextAndIndex != -1) {
|
||||
tokenParam = url.substring(tokenKeyIndex + 1, nextAndIndex + 1);
|
||||
} else {
|
||||
tokenParam = url.substring(tokenKeyIndex);
|
||||
}
|
||||
}
|
||||
return tokenParam;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,37 +1,27 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* Copyright (C) 2023 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import AbilityConstant from '@ohos.app.ability.AbilityConstant';
|
||||
import hilog from '@ohos.hilog';
|
||||
import UIAbility from '@ohos.app.ability.UIAbility';
|
||||
import Want from '@ohos.app.ability.Want';
|
||||
import hilog from '@ohos.hilog';
|
||||
import window from '@ohos.window';
|
||||
import { ImageKnife, InitImageKnife, LogUtil } from '@ohos/libraryimageknife';
|
||||
import { CustomEngineKeyImpl } from '../common/CustomEngineKeyImpl';
|
||||
import { InitImageKnife, ImageKnifeGlobal, ImageKnife, ImageKnifeDrawFactory, LogUtil } from '@ohos/libraryimageknife'
|
||||
import { CustomEngineKeyImpl } from './CustomEngineKeyImpl'
|
||||
import abilityAccessCtrl, { Permissions } from '@ohos.abilityAccessCtrl';
|
||||
import { BusinessError } from '@ohos.base'
|
||||
|
||||
export default class EntryAbility extends UIAbility {
|
||||
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
|
||||
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
|
||||
}
|
||||
|
||||
onDestroy(): void {
|
||||
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
|
||||
}
|
||||
|
||||
async onWindowStageCreate(windowStage: window.WindowStage): Promise<void> {
|
||||
onWindowStageCreate(windowStage: window.WindowStage) {
|
||||
// Main window is created, set main page for this ability
|
||||
// let list: Array<Permissions> = ['ohos.permission.READ_IMAGEVIDEO', 'ohos.permission.WRITE_IMAGEVIDEO'];
|
||||
// let permissionRequestResult: Object;
|
||||
|
|
@ -45,36 +35,25 @@ export default class EntryAbility extends UIAbility {
|
|||
// }
|
||||
// })
|
||||
|
||||
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
|
||||
|
||||
// 初始化ImageKnife的文件缓存
|
||||
await InitImageKnife.init(this.context)
|
||||
ImageKnife.getInstance().setEngineKeyImpl(new CustomEngineKeyImpl())
|
||||
// 全局配置请求头
|
||||
ImageKnife.getInstance().addHeader('refer', "http://1.94.37.200:7070/AntiTheftChain/downloadImage");
|
||||
ImageKnife.getInstance().deleteHeader('refer');
|
||||
|
||||
windowStage.loadContent('pages/Index', (err, data) => {
|
||||
if (err.code) {
|
||||
hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
|
||||
return;
|
||||
}
|
||||
hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
|
||||
windowStage.loadContent('pages/index', (err: BusinessError, data: void) => {
|
||||
});
|
||||
}
|
||||
|
||||
onWindowStageDestroy(): void {
|
||||
// Main window is destroyed, release UI related resources
|
||||
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
|
||||
}
|
||||
InitImageKnife.init(this.context);
|
||||
|
||||
onForeground(): void {
|
||||
// Ability has brought to foreground
|
||||
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
|
||||
}
|
||||
|
||||
onBackground(): void {
|
||||
// Ability has back to background
|
||||
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
|
||||
let imageKnife: ImageKnife | undefined = ImageKnifeGlobal.getInstance().getImageKnife()
|
||||
if (imageKnife != undefined) {
|
||||
// 全局配置网络加载进度条
|
||||
imageKnife
|
||||
.setDefaultLifeCycle(ImageKnifeDrawFactory.createProgressLifeCycle("#10a5ff", 0.5))
|
||||
// 全局配置缓存key
|
||||
imageKnife.setEngineKeyImpl(new CustomEngineKeyImpl())
|
||||
// 设置全局内存缓存大小张数
|
||||
imageKnife.setLruCacheSize(100, 100 * 1204 * 1024)
|
||||
// 全局配置请求头
|
||||
imageKnife.addHeader('refer', "http://1.94.37.200:7070/AntiTheftChain/downloadImage");
|
||||
imageKnife.deleteHeader('refer');
|
||||
}
|
||||
// 开启ImageKnife所有级别日志开关
|
||||
LogUtil.mLogLevel = LogUtil.ALL
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,104 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {
|
||||
ImageKnifeComponent,
|
||||
ImageKnifeOption,
|
||||
RotateImageTransformation,
|
||||
RoundedCornersTransformation
|
||||
} from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct CacheRuleChangedPage {
|
||||
@State progresshint: string = "输出加载百分比回调信息"
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress: true
|
||||
};
|
||||
@State ImageKnifeOption: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/0ef60041445edcfd6b38d20e19024b2cd9281dcc3525a4-Vy8fYO_fw658/format/webp",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress: true
|
||||
};
|
||||
@State imageKnifeOption3: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress: true
|
||||
};
|
||||
@State imageKnifeOption4: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress: true,
|
||||
};
|
||||
@State imageKnifeOption5: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp?mama=sdafsfasdfsdfsdaf&baba=sdfsafsafsd",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress: true,
|
||||
};
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
|
||||
Text('下图默认加载网络图片不带?token=').margin({ top: 20 })
|
||||
Button('点击加载网络图片?token=').margin({ top: 5 }).onClick(() => {
|
||||
|
||||
this.imageKnifeOption4 = {
|
||||
loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB?token=fsdafsfsafsafsdaf111111",
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress: true,
|
||||
}
|
||||
})
|
||||
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 })
|
||||
.width(300)
|
||||
.height(300)
|
||||
|
||||
Text('下图默认加载网络图片不带&token=').margin({ top: 20 })
|
||||
|
||||
Button('点击加载网络图片&token=').margin({ top: 5 }).onClick(() => {
|
||||
this.imageKnifeOption5 = {
|
||||
loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp?mama=sdafsfasdfsdfsdaf&token=fsdafsfsafsafsdaf111111&baba=sdfsafsafsd",
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress: true,
|
||||
}
|
||||
})
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption5 })
|
||||
.width(300)
|
||||
.height(300)
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -1,214 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { DownsampleStrategy, ImageKnifeOption, } from '@ohos/imageknife';
|
||||
import { ImageKnifeComponent } from '@ohos/libraryimageknife';
|
||||
import { image } from '@kit.ImageKit';
|
||||
import { BusinessError } from '@kit.BasicServicesKit';
|
||||
import { Downsampler } from '@ohos/imageknife/src/main/ets/downsampling/Downsampler';
|
||||
import { FileTypeUtil } from '@ohos/imageknife/src/main/ets/utils/FileTypeUtil';
|
||||
|
||||
@Entry
|
||||
@ComponentV2
|
||||
struct DownSamplePage {
|
||||
@Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: $r('app.media.startIcon'),
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Contain
|
||||
})
|
||||
isBrightness: boolean = false
|
||||
@Local beforeSampling: number = 0
|
||||
@Local afterSampling: number = 0
|
||||
@Local SamplingList: SamplingType[] = [
|
||||
|
||||
new SamplingType(7, "AT_LEAST"),
|
||||
new SamplingType(1, "AT_MOST"),
|
||||
|
||||
new SamplingType(2, "FIT_CENTER_MEMORY"),
|
||||
new SamplingType(4, "FIT_CENTER_QUALITY"),
|
||||
new SamplingType(5, "CENTER_OUTSIDE_MEMORY"),
|
||||
new SamplingType(6, "CENTER_OUTSIDE_QUALITY"),
|
||||
new SamplingType(0, "NONE"),
|
||||
|
||||
]
|
||||
@Local checked: boolean = false
|
||||
|
||||
updateImageKnifeOption(value: string) {
|
||||
if (value === 'NONE') {
|
||||
this.imageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Contain,
|
||||
downsampleOf: DownsampleStrategy.NONE
|
||||
})
|
||||
this.originalPixMap($r('app.media.pngSample'))
|
||||
this.afterSamplingFunc($r('app.media.pngSample'))
|
||||
} else if (value === 'AT_MOST') {
|
||||
this.imageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Contain,
|
||||
downsampleOf: DownsampleStrategy.AT_MOST
|
||||
})
|
||||
this.originalPixMap($r('app.media.pngSample'))
|
||||
this.afterSamplingFunc($r('app.media.pngSample'))
|
||||
} else if (value === 'FIT_CENTER_MEMORY') {
|
||||
this.imageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Contain,
|
||||
downsampleOf: DownsampleStrategy.FIT_CENTER_MEMORY
|
||||
})
|
||||
this.originalPixMap($r('app.media.pngSample'))
|
||||
this.afterSamplingFunc($r('app.media.pngSample'))
|
||||
} else if (value === 'FIT_CENTER_QUALITY') {
|
||||
this.imageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Contain,
|
||||
downsampleOf: DownsampleStrategy.FIT_CENTER_QUALITY
|
||||
})
|
||||
this.originalPixMap($r('app.media.pngSample'))
|
||||
this.afterSamplingFunc($r('app.media.pngSample'))
|
||||
} else if (value === 'CENTER_OUTSIDE_MEMORY') {
|
||||
this.imageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Contain,
|
||||
downsampleOf: DownsampleStrategy.CENTER_OUTSIDE_MEMORY
|
||||
})
|
||||
this.originalPixMap($r('app.media.pngSample'))
|
||||
this.afterSamplingFunc($r('app.media.pngSample'))
|
||||
} else if (value === 'CENTER_OUTSIDE_QUALITY') {
|
||||
this.imageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Contain,
|
||||
downsampleOf: DownsampleStrategy.CENTER_OUTSIDE_QUALITY
|
||||
})
|
||||
this.originalPixMap($r('app.media.pngSample'))
|
||||
this.afterSamplingFunc($r('app.media.pngSample'))
|
||||
} else {
|
||||
this.imageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Contain,
|
||||
downsampleOf: DownsampleStrategy.AT_LEAST
|
||||
})
|
||||
this.originalPixMap($r('app.media.pngSample'))
|
||||
this.afterSamplingFunc($r('app.media.pngSample'))
|
||||
}
|
||||
}
|
||||
|
||||
async afterSamplingFunc(imgs: Resource) {
|
||||
let img: Uint8Array = await getContext(this).resourceManager.getMediaContent(imgs);
|
||||
let imageSource: image.ImageSource = image.createImageSource(img.buffer.slice(0));
|
||||
let fileTypeUtil = new FileTypeUtil();
|
||||
let typeValue = fileTypeUtil.getFileType(img.buffer.slice(0)) as string;
|
||||
let decodingOptions: image.DecodingOptions = {
|
||||
editable: true,
|
||||
desiredPixelFormat: 3,
|
||||
}
|
||||
let imageInfo = await imageSource.getImageInfo()
|
||||
|
||||
if (this.imageKnifeOption.downsampleOf !== DownsampleStrategy.NONE){
|
||||
let reqSize =
|
||||
new Downsampler().calculateScaling(typeValue, imageInfo.size.width, imageInfo.size.height, 300,
|
||||
300, this.imageKnifeOption.downsampleOf)
|
||||
decodingOptions = {
|
||||
editable: true,
|
||||
desiredSize: {
|
||||
width: reqSize.width,
|
||||
height: reqSize.height
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 创建pixelMap
|
||||
imageSource.createPixelMap(decodingOptions).then((pixelMap: image.PixelMap) => {
|
||||
this.afterSampling = pixelMap.getPixelBytesNumber()
|
||||
}).catch((err: BusinessError) => {
|
||||
console.error("Failed to create PixelMap")
|
||||
});
|
||||
}
|
||||
|
||||
async originalPixMap(imgs: Resource,) {
|
||||
let img: Uint8Array = await getContext(this).resourceManager.getMediaContent(imgs);
|
||||
let imageSource: image.ImageSource = image.createImageSource(img.buffer.slice(0));
|
||||
let decodingOptions: image.DecodingOptions = {
|
||||
editable: true,
|
||||
desiredPixelFormat: 3,
|
||||
}
|
||||
// 创建pixelMap
|
||||
imageSource.createPixelMap(decodingOptions).then((pixelMap: image.PixelMap) => {
|
||||
this.beforeSampling = pixelMap.getPixelBytesNumber()
|
||||
}).catch((err: BusinessError) => {
|
||||
console.error("Failed to create PixelMap")
|
||||
});
|
||||
}
|
||||
getResourceString(res:Resource){
|
||||
return getContext().resourceManager.getStringSync(res.id)
|
||||
}
|
||||
build() {
|
||||
Scroll() {
|
||||
Column() {
|
||||
ForEach(this.SamplingList, (item: SamplingType, index) => {
|
||||
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
|
||||
Radio({ value: item.value + 'radio', group: 'radioGroup' })
|
||||
.height(50)
|
||||
.width(50)
|
||||
.checked(this.checked)
|
||||
.onClick(() => {
|
||||
this.updateImageKnifeOption(item.value)
|
||||
})
|
||||
Text(this.getResourceString($r('app.string.Sampling_pecification'))+ item.value).fontSize(20)
|
||||
}
|
||||
}, (item: SamplingType) => JSON.stringify(item))
|
||||
Column() {
|
||||
Text(`${this.getResourceString($r('app.string.Unreal_samples'))}：${this.beforeSampling}`).fontSize(20)
|
||||
Text(`${ this.getResourceString($r('app.string.After_the_sampling'))}：${this.afterSampling}`).fontSize(20)
|
||||
}
|
||||
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: this.imageKnifeOption
|
||||
})
|
||||
.height(300)
|
||||
.width(300)
|
||||
.borderWidth(1)
|
||||
.borderColor(Color.Pink)
|
||||
}
|
||||
|
||||
}
|
||||
.height('100%')
|
||||
.width('100%')
|
||||
}
|
||||
}
|
||||
|
||||
class SamplingType {
|
||||
key: number
|
||||
value: string
|
||||
|
||||
constructor(key: number, value: string) {
|
||||
this.key = key
|
||||
this.value = value
|
||||
}
|
||||
}
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { AnimatorOption, ImageKnifeAnimatorComponent,ImageKnifeOption } from "@ohos/libraryimageknife"
|
||||
|
||||
@Entry
|
||||
@ComponentV2
|
||||
struct ImageAnimatorPage {
|
||||
@Local animatorOption: AnimatorOption = new AnimatorOption({
|
||||
state: AnimationStatus.Running,
|
||||
iterations: -1,
|
||||
onFinish:()=>{
|
||||
console.log("ImageKnifeAnimatorComponent animatorOption onFinish")
|
||||
},
|
||||
onStart:()=>{
|
||||
console.log("ImageKnifeAnimatorComponent animatorOption onStart")
|
||||
},
|
||||
onPause:()=>{
|
||||
console.log("ImageKnifeAnimatorComponent animatorOption onPause")
|
||||
},
|
||||
onCancel:()=>{
|
||||
console.log("ImageKnifeAnimatorComponent animatorOption onCancel")
|
||||
},
|
||||
onRepeat:()=>{
|
||||
console.log("ImageKnifeAnimatorComponent animatorOption onRepeat")
|
||||
}
|
||||
})
|
||||
@Local animatorOption1: AnimatorOption = new AnimatorOption({
|
||||
state: AnimationStatus.Initial
|
||||
})
|
||||
@Local animatorOption2: AnimatorOption = new AnimatorOption({
|
||||
state: AnimationStatus.Initial,
|
||||
reverse: true
|
||||
})
|
||||
build() {
|
||||
Column(){
|
||||
Flex(){
|
||||
Button($r('app.string.Play')).onClick(()=>{
|
||||
this.animatorOption.state = AnimationStatus.Running
|
||||
})
|
||||
Button($r('app.string.Pause')).onClick(()=>{
|
||||
this.animatorOption.state = AnimationStatus.Paused
|
||||
})
|
||||
Button($r('app.string.Stop')).onClick(()=>{
|
||||
this.animatorOption.state = AnimationStatus.Stopped
|
||||
})
|
||||
Button($r('app.string.Infinite_loop')).onClick(()=>{
|
||||
this.animatorOption.iterations = -1
|
||||
})
|
||||
Button($r('app.string.Play_once')).onClick(()=>{
|
||||
this.animatorOption.iterations = 1
|
||||
})
|
||||
Button($r('app.string.Play_twice')).onClick(()=>{
|
||||
this.animatorOption.iterations = 2
|
||||
})
|
||||
}
|
||||
ImageKnifeAnimatorComponent({
|
||||
imageKnifeOption:new ImageKnifeOption({
|
||||
loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
|
||||
placeholderSrc:$r('app.media.loading'),
|
||||
errorholderSrc:$r('app.media.failed')
|
||||
}),animatorOption:this.animatorOption
|
||||
}).width(200).height(200).backgroundColor(Color.Orange).margin({top:30})
|
||||
Text($r('app.string.Display_the_first_frame')).fontSize(20)
|
||||
ImageKnifeAnimatorComponent({
|
||||
imageKnifeOption:new ImageKnifeOption({
|
||||
loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
|
||||
placeholderSrc:$r('app.media.loading'),
|
||||
errorholderSrc:$r('app.media.failed')
|
||||
}),animatorOption:this.animatorOption1
|
||||
}).width(200).height(200).backgroundColor(Color.Orange).margin({top:30})
|
||||
Text($r('app.string.Display_the_last_frame')).fontSize(20)
|
||||
ImageKnifeAnimatorComponent({
|
||||
imageKnifeOption:new ImageKnifeOption({
|
||||
loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
|
||||
placeholderSrc:$r('app.media.loading'),
|
||||
errorholderSrc:$r('app.media.failed')
|
||||
}),animatorOption:this.animatorOption2
|
||||
}).width(200).height(200).backgroundColor(Color.Orange).margin({top:30})
|
||||
}.width("100%").height("100%")
|
||||
}
|
||||
}
|
||||
|
|
@ -1,432 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {
|
||||
BlurTransformation,
|
||||
BrightnessTransformation,
|
||||
CropSquareTransformation,
|
||||
CropTransformation,
|
||||
GrayScaleTransformation,
|
||||
ImageKnifeComponent,
|
||||
ImageKnifeOption,
|
||||
InvertTransformation,
|
||||
KuwaharaTransformation,
|
||||
MaskTransformation,
|
||||
MultiTransTransformation,
|
||||
PixelationTransformation,
|
||||
PixelMapTransformation,
|
||||
SepiaTransformation,
|
||||
SketchTransformation,
|
||||
SwirlTransformation,
|
||||
ToonTransformation,
|
||||
VignetterTransformation
|
||||
} from '@ohos/libraryimageknife';
|
||||
import { collections } from '@kit.ArkTS'
|
||||
|
||||
@Entry
|
||||
@ComponentV2
|
||||
struct ImageTransformation {
|
||||
@Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Contain
|
||||
})
|
||||
@Local isRound: boolean = false;
|
||||
@Local isContrast: boolean = false;
|
||||
@Local isRotate: boolean = false;
|
||||
isBlur: boolean = false
|
||||
isBrightness: boolean = false
|
||||
isGrayScale: boolean = false;
|
||||
isInvert: boolean = false;
|
||||
isToon: boolean = false;
|
||||
isCropCircle: boolean = false;
|
||||
isCropCircleWithBorder: boolean = false;
|
||||
isKuwahara: boolean = false;
|
||||
isPixelation: boolean = false;
|
||||
isSketch: boolean = false;
|
||||
isSwirl: boolean = false;
|
||||
isVignetter: boolean = false;
|
||||
isCropSquare: boolean = false;
|
||||
isCropTop: boolean = false;
|
||||
isCropCenter: boolean = false;
|
||||
isCropBottom: boolean = false;
|
||||
isMask: boolean = false;
|
||||
isSepia: boolean = false;
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Column() {
|
||||
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
|
||||
Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
|
||||
.selectedColor(0x39a2db)
|
||||
.shape(CheckBoxShape.ROUNDED_SQUARE)
|
||||
.onChange((value: boolean) => {
|
||||
this.isBlur = value;
|
||||
this.updateImageKnifeOption();
|
||||
})
|
||||
.width(30)
|
||||
.height(30)
|
||||
Text($r('app.string.Blur_effect')).fontSize(20)
|
||||
}
|
||||
|
||||
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
|
||||
Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
|
||||
.selectedColor(0x39a2db)
|
||||
.shape(CheckBoxShape.ROUNDED_SQUARE)
|
||||
.onChange((value: boolean) => {
|
||||
this.isBrightness = value;
|
||||
this.updateImageKnifeOption();
|
||||
})
|
||||
.width(30)
|
||||
.height(30)
|
||||
Text($r('app.string.Highlighting_effect')).fontSize(20)
|
||||
}
|
||||
|
||||
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
|
||||
Checkbox({ name: 'checkbox3', group: 'checkboxGroup' })
|
||||
.selectedColor(0x39a2db)
|
||||
.shape(CheckBoxShape.ROUNDED_SQUARE)
|
||||
.onChange((value: boolean) => {
|
||||
this.isGrayScale = value;
|
||||
this.updateImageKnifeOption();
|
||||
})
|
||||
.width(30)
|
||||
.height(30)
|
||||
Text($r('app.string.Ashing_effect')).fontSize(20)
|
||||
}
|
||||
|
||||
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
|
||||
Checkbox({ name: 'checkbox4', group: 'checkboxGroup' })
|
||||
.selectedColor(0x39a2db)
|
||||
.shape(CheckBoxShape.ROUNDED_SQUARE)
|
||||
.onChange((value: boolean) => {
|
||||
this.isInvert = value;
|
||||
this.updateImageKnifeOption();
|
||||
})
|
||||
.width(30)
|
||||
.height(30)
|
||||
Text($r('app.string.Inverse_effect')).fontSize(20)
|
||||
}
|
||||
|
||||
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
|
||||
Checkbox({ name: 'checkbox5', group: 'checkboxGroup' })
|
||||
.selectedColor(0x39a2db)
|
||||
.shape(CheckBoxShape.ROUNDED_SQUARE)
|
||||
.onChange((value: boolean) => {
|
||||
this.isToon = value;
|
||||
this.updateImageKnifeOption();
|
||||
})
|
||||
.width(30)
|
||||
.height(30)
|
||||
Text($r('app.string.Animation_filter_effect')).fontSize(20)
|
||||
}
|
||||
|
||||
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
|
||||
Checkbox({ name: 'checkbox6', group: 'checkboxGroup' })
|
||||
.selectedColor(0x39a2db)
|
||||
.shape(CheckBoxShape.ROUNDED_SQUARE)
|
||||
.onChange((value: boolean) => {
|
||||
this.isCropCircle = value;
|
||||
this.updateImageKnifeOption();
|
||||
})
|
||||
.width(30)
|
||||
.height(30)
|
||||
Text($r('app.string.Crop_circular_effect')).fontSize(20)
|
||||
}
|
||||
|
||||
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
|
||||
Checkbox({ name: 'checkbox7', group: 'checkboxGroup' })
|
||||
.selectedColor(0x39a2db)
|
||||
.shape(CheckBoxShape.ROUNDED_SQUARE)
|
||||
.onChange((value: boolean) => {
|
||||
this.isCropCircleWithBorder = value;
|
||||
this.updateImageKnifeOption();
|
||||
})
|
||||
.width(30)
|
||||
.height(30)
|
||||
Text($r('app.string.Crop_circular_with_border_effect')).fontSize(20)
|
||||
}
|
||||
|
||||
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
|
||||
Checkbox({ name: 'checkbox8', group: 'checkboxGroup' })
|
||||
.selectedColor(0x39a2db)
|
||||
.shape(CheckBoxShape.ROUNDED_SQUARE)
|
||||
.onChange((value: boolean) => {
|
||||
this.isContrast = value;
|
||||
})
|
||||
.width(30)
|
||||
.height(30)
|
||||
Text($r('app.string.Contrast_effect')).fontSize(20)
|
||||
}
|
||||
|
||||
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
|
||||
Checkbox({ name: 'checkbox9', group: 'checkboxGroup' })
|
||||
.selectedColor(0x39a2db)
|
||||
.shape(CheckBoxShape.ROUNDED_SQUARE)
|
||||
.onChange((value: boolean) => {
|
||||
this.isSepia = value;
|
||||
this.updateImageKnifeOption();
|
||||
})
|
||||
.width(30)
|
||||
.height(30)
|
||||
Text($r('app.string.Black_ink_filtering_effect')).fontSize(20)
|
||||
}
|
||||
|
||||
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
|
||||
Checkbox({ name: 'checkbox10', group: 'checkboxGroup' })
|
||||
.selectedColor(0x39a2db)
|
||||
.shape(CheckBoxShape.ROUNDED_SQUARE)
|
||||
.onChange((value: boolean) => {
|
||||
this.isRotate = value;
|
||||
})
|
||||
.width(30)
|
||||
.height(30)
|
||||
Text($r('app.string.Rotate')).fontSize(20)
|
||||
}
|
||||
|
||||
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
|
||||
Checkbox({ name: 'checkbox11', group: 'checkboxGroup' })
|
||||
.selectedColor(0x39a2db)
|
||||
.shape(CheckBoxShape.ROUNDED_SQUARE)
|
||||
.onChange((value: boolean) => {
|
||||
this.isRound = value;
|
||||
this.updateImageKnifeOption();
|
||||
})
|
||||
.width(30)
|
||||
.height(30)
|
||||
Text($r('app.string.Corners')).fontSize(20)
|
||||
}
|
||||
|
||||
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
|
||||
Checkbox({ name: 'checkbox12', group: 'checkboxGroup' })
|
||||
.selectedColor(0x39a2db)
|
||||
.shape(CheckBoxShape.ROUNDED_SQUARE)
|
||||
.onChange((value: boolean) => {
|
||||
this.isKuwahara = value;
|
||||
this.updateImageKnifeOption();
|
||||
})
|
||||
.width(30)
|
||||
.height(30)
|
||||
Text($r('app.string.Kuwahara_Filter_effect')).fontSize(20)
|
||||
}
|
||||
|
||||
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
|
||||
Checkbox({ name: 'checkbox13', group: 'checkboxGroup' })
|
||||
.selectedColor(0x39a2db)
|
||||
.shape(CheckBoxShape.ROUNDED_SQUARE)
|
||||
.onChange((value: boolean) => {
|
||||
this.isPixelation = value;
|
||||
this.updateImageKnifeOption();
|
||||
})
|
||||
.width(30)
|
||||
.height(30)
|
||||
Text($r('app.string.Pixelated_Filter_effect')).fontSize(20)
|
||||
}
|
||||
|
||||
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
|
||||
Checkbox({ name: 'checkbox14', group: 'checkboxGroup' })
|
||||
.selectedColor(0x39a2db)
|
||||
.shape(CheckBoxShape.ROUNDED_SQUARE)
|
||||
.onChange((value: boolean) => {
|
||||
this.isSketch = value;
|
||||
this.updateImageKnifeOption();
|
||||
})
|
||||
.width(30)
|
||||
.height(30)
|
||||
Text($r('app.string.Sketch_Filter_effect')).fontSize(20)
|
||||
}
|
||||
|
||||
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
|
||||
Checkbox({ name: 'checkbox15', group: 'checkboxGroup' })
|
||||
.selectedColor(0x39a2db)
|
||||
.shape(CheckBoxShape.ROUNDED_SQUARE)
|
||||
.onChange((value: boolean) => {
|
||||
this.isSwirl = value;
|
||||
this.updateImageKnifeOption();
|
||||
})
|
||||
.width(30)
|
||||
.height(30)
|
||||
Text($r('app.string.Distortion_Filter_effect')).fontSize(20)
|
||||
}
|
||||
|
||||
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
|
||||
Checkbox({ name: 'checkbox16', group: 'checkboxGroup' })
|
||||
.selectedColor(0x39a2db)
|
||||
.shape(CheckBoxShape.ROUNDED_SQUARE)
|
||||
.onChange((value: boolean) => {
|
||||
this.isVignetter = value;
|
||||
this.updateImageKnifeOption();
|
||||
})
|
||||
.width(30)
|
||||
.height(30)
|
||||
Text($r('app.string.Decorative_Filter_effect')).fontSize(20)
|
||||
}
|
||||
|
||||
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
|
||||
Checkbox({ name: 'checkbox17', group: 'checkboxGroup' })
|
||||
.selectedColor(0x39a2db)
|
||||
.shape(CheckBoxShape.ROUNDED_SQUARE)
|
||||
.onChange((value: boolean) => {
|
||||
this.isCropSquare = value;
|
||||
this.updateImageKnifeOption();
|
||||
})
|
||||
.width(30)
|
||||
.height(30)
|
||||
Text($r('app.string.Square_cutting_effect')).fontSize(20)
|
||||
}
|
||||
|
||||
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
|
||||
Checkbox({ name: 'checkbox18', group: 'checkboxGroup' })
|
||||
.selectedColor(0x39a2db)
|
||||
.shape(CheckBoxShape.ROUNDED_SQUARE)
|
||||
.onChange((value: boolean) => {
|
||||
this.isCropTop = value;
|
||||
this.updateImageKnifeOption();
|
||||
})
|
||||
.width(30)
|
||||
.height(30)
|
||||
Text($r('app.string.Top_cutting_effect')).fontSize(20)
|
||||
}
|
||||
|
||||
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
|
||||
Checkbox({ name: 'checkbox19', group: 'checkboxGroup' })
|
||||
.selectedColor(0x39a2db)
|
||||
.shape(CheckBoxShape.ROUNDED_SQUARE)
|
||||
.onChange((value: boolean) => {
|
||||
this.isCropCenter = value;
|
||||
this.updateImageKnifeOption();
|
||||
})
|
||||
.width(30)
|
||||
.height(30)
|
||||
Text($r('app.string.Middle_cutting_effect')).fontSize(20)
|
||||
}
|
||||
|
||||
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
|
||||
Checkbox({ name: 'checkbox20', group: 'checkboxGroup' })
|
||||
.selectedColor(0x39a2db)
|
||||
.shape(CheckBoxShape.ROUNDED_SQUARE)
|
||||
.onChange((value: boolean) => {
|
||||
this.isCropBottom = value;
|
||||
this.updateImageKnifeOption();
|
||||
})
|
||||
.width(30)
|
||||
.height(30)
|
||||
Text($r('app.string.Bottom_cutting_effect')).fontSize(20)
|
||||
}
|
||||
|
||||
Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
|
||||
Checkbox({ name: 'checkbox21', group: 'checkboxGroup' })
|
||||
.selectedColor(0x39a2db)
|
||||
.shape(CheckBoxShape.ROUNDED_SQUARE)
|
||||
.onChange((value: boolean) => {
|
||||
this.isMask = value;
|
||||
this.updateImageKnifeOption();
|
||||
})
|
||||
.width(30)
|
||||
.height(30)
|
||||
Text($r('app.string.Mask_effect')).fontSize(20)
|
||||
}
|
||||
|
||||
if (this.isContrast) {
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: this.imageKnifeOption
|
||||
})
|
||||
.width(300)
|
||||
.height(300)
|
||||
.rotate({ angle: this.isRotate ? 90 : 0 })
|
||||
.contrast(12)
|
||||
.backgroundColor(Color.Pink)
|
||||
} else {
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: this.imageKnifeOption
|
||||
}).width(300)
|
||||
.height(300)
|
||||
.rotate({ angle: this.isRotate ? 90 : 0 })
|
||||
.backgroundColor(Color.Pink)
|
||||
}
|
||||
}
|
||||
}
|
||||
.height('100%')
|
||||
.width('100%')
|
||||
}
|
||||
|
||||
updateImageKnifeOption() {
|
||||
let transformations: collections.Array<PixelMapTransformation> = new collections.Array<PixelMapTransformation>()
|
||||
if (this.isBlur) {
|
||||
transformations.push(new BlurTransformation(5));
|
||||
}
|
||||
if (this.isBrightness) {
|
||||
transformations.push(new BrightnessTransformation(0.2));
|
||||
}
|
||||
if (this.isGrayScale) {
|
||||
transformations.push(new GrayScaleTransformation());
|
||||
}
|
||||
if (this.isInvert) {
|
||||
transformations.push(new InvertTransformation());
|
||||
}
|
||||
if (this.isToon) {
|
||||
transformations.push(new ToonTransformation(0.3, 10.0));
|
||||
}
|
||||
if (this.isKuwahara) {
|
||||
transformations.push(new KuwaharaTransformation(10));
|
||||
}
|
||||
if (this.isPixelation) {
|
||||
transformations.push(new PixelationTransformation(5.0));
|
||||
}
|
||||
if (this.isSketch) {
|
||||
transformations.push(new SketchTransformation());
|
||||
}
|
||||
if (this.isSwirl) {
|
||||
transformations.push(new SwirlTransformation(200, 1.0, [0.5, 0.5]));
|
||||
}
|
||||
if (this.isVignetter) {
|
||||
transformations.push(new VignetterTransformation([0.5, 0.5], [0.0, 0.0, 0.0], [0.3, 0.75]));
|
||||
}
|
||||
if (this.isCropSquare) {
|
||||
transformations.push(new CropSquareTransformation());
|
||||
}
|
||||
if (this.isCropTop) {
|
||||
transformations.push(new CropTransformation(25, 25, 0));
|
||||
}
|
||||
if (this.isCropCenter) {
|
||||
transformations.push(new CropTransformation(25, 25, 1));
|
||||
}
|
||||
if (this.isCropBottom) {
|
||||
transformations.push(new CropTransformation(25, 25, 2));
|
||||
}
|
||||
if (this.isSepia) {
|
||||
transformations.push(new SepiaTransformation());
|
||||
}
|
||||
if (this.isMask) {
|
||||
transformations.push(new MaskTransformation($r('app.media.mask_starfish')));
|
||||
}
|
||||
this.imageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Contain,
|
||||
border: { radius: this.isRound ? { topLeft: 50, bottomRight: 50 } : 0 },
|
||||
transformation: transformations.length > 0 ? new MultiTransTransformation(transformations) : undefined
|
||||
})
|
||||
if (this.isCropCircle) {
|
||||
this.imageKnifeOption.objectFit = ImageFit.Cover;
|
||||
this.imageKnifeOption.border = { radius: 150 };
|
||||
}
|
||||
if (this.isCropCircleWithBorder) {
|
||||
this.imageKnifeOption.objectFit = ImageFit.Cover;
|
||||
this.imageKnifeOption.border = { radius: 150, color: Color.Red, width: 5 };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,186 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import router from '@system.router';
|
||||
|
||||
@Entry
|
||||
@ComponentV2
|
||||
struct Index {
|
||||
getResourceString(res: Resource) {
|
||||
return getContext().resourceManager.getStringSync(res.id)
|
||||
}
|
||||
|
||||
aboutToAppear(): void {
|
||||
|
||||
}
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Column() {
|
||||
Button($r('app.string.Test_ImageAnimator')).onClick(() => {
|
||||
router.push({
|
||||
uri: 'pages/ImageAnimatorPage',
|
||||
});
|
||||
})
|
||||
Button($r('app.string.Test_multiple_images')).margin({ top: 10 }).onClick(() => {
|
||||
router.push({
|
||||
uri: 'pages/TestCommonImage',
|
||||
});
|
||||
})
|
||||
Button(this.getResourceString($r('app.string.Multiple_images')) + " + reuse + LazyForeach")
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
router.push({
|
||||
uri: 'pages/UserPage',
|
||||
|
||||
});
|
||||
})
|
||||
Button($r('app.string.Test_SingleImage')).margin({ top: 10 }).onClick(() => {
|
||||
router.push({
|
||||
uri: 'pages/SingleImage',
|
||||
|
||||
});
|
||||
})
|
||||
Button($r('app.string.Image_Downsampling_Functionality')).margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/DownSamplePage',
|
||||
});
|
||||
})
|
||||
Button($r('app.string.Display_long_image')).margin({ top: 10 }).onClick(() => {
|
||||
router.push({
|
||||
uri: 'pages/LongImagePage',
|
||||
|
||||
});
|
||||
})
|
||||
Button($r('app.string.Image_Transformation')).margin({ top: 10 }).onClick(() => {
|
||||
router.push({
|
||||
uri: 'pages/ImageTransformation',
|
||||
|
||||
});
|
||||
|
||||
})
|
||||
Button($r('app.string.Test_media_URL')).margin({ top: 10 }).onClick(() => {
|
||||
router.push({
|
||||
uri: 'pages/dataShareUriLoadPage',
|
||||
|
||||
});
|
||||
})
|
||||
Button($r('app.string.Different_ObjectFit')).margin({ top: 10 }).onClick(() => {
|
||||
router.push({
|
||||
uri: 'pages/ObjectFitPage',
|
||||
|
||||
});
|
||||
|
||||
})
|
||||
Button($r('app.string.Custom_cache_key')).margin({ top: 10 }).onClick(() => {
|
||||
router.push({
|
||||
uri: 'pages/SignatureTestPage',
|
||||
|
||||
});
|
||||
})
|
||||
Button($r('app.string.Test_image_loading_success_or_failure_events')).margin({ top: 10 }).onClick(() => {
|
||||
router.push({
|
||||
uri: 'pages/LoadStatePage',
|
||||
})
|
||||
})
|
||||
Button($r('app.string.Image_scaling')).margin({ top: 10 }).onClick(() => {
|
||||
router.push({
|
||||
uri: 'pages/TransformPage',
|
||||
|
||||
});
|
||||
})
|
||||
|
||||
Button($r('app.string.Test_HSP')).margin({ top: 10 }).onClick(() => {
|
||||
router.push({
|
||||
uri: 'pages/TestHspPreLoadImage',
|
||||
|
||||
});
|
||||
})
|
||||
|
||||
Button($r('app.string.Test_custom_download')).margin({ top: 10 }).onClick(() => {
|
||||
router.push({
|
||||
uri: 'pages/TestSetCustomImagePage',
|
||||
|
||||
});
|
||||
})
|
||||
|
||||
Button(this.getResourceString($r('app.string.Message_list')) + " + List").margin({ top: 10 }).onClick(() => {
|
||||
router.push({
|
||||
uri: 'pages/TestImageFlash',
|
||||
|
||||
});
|
||||
})
|
||||
|
||||
Button($r('app.string.Preloading_images_to_cache')).margin({ top: 10 }).onClick(() => {
|
||||
router.push({
|
||||
uri: 'pages/TestPrefetchToFileCache',
|
||||
|
||||
});
|
||||
})
|
||||
Button($r('app.string.Retrieve_image_display_from_cache')).margin({ top: 10 }).onClick(() => {
|
||||
router.push({
|
||||
uri: 'pages/TestIsUrlExist',
|
||||
|
||||
});
|
||||
})
|
||||
Button($r('app.string.Test_single_request_header')).margin({ top: 10 }).onClick(() => {
|
||||
router.push({
|
||||
uri: 'pages/TestHeader',
|
||||
|
||||
});
|
||||
})
|
||||
Button($r('app.string.Test_write_cache_strategy')).margin({ top: 10 }).onClick(() => {
|
||||
router.push({
|
||||
uri: 'pages/TestWriteCacheStage',
|
||||
|
||||
});
|
||||
})
|
||||
|
||||
|
||||
Button($r('app.string.Test_removing_image_cache_interface')).margin({ top: 10 }).onClick(() => {
|
||||
router.push({
|
||||
uri: 'pages/TestRemoveCache',
|
||||
});
|
||||
})
|
||||
Button($r('app.string.Test_error_image_display')).margin({ top: 10 }).onClick(() => {
|
||||
router.push({
|
||||
uri: 'pages/TestErrorHolderPage',
|
||||
|
||||
});
|
||||
})
|
||||
Button($r('app.string.Test_Task_error')).margin({ top: 10 }).onClick(() => {
|
||||
router.push({
|
||||
uri: 'pages/TestTaskResourcePage',
|
||||
});
|
||||
})
|
||||
Button($r('app.string.test_cache_btn')).margin({ top: 10 }).onClick(() => {
|
||||
router.push({
|
||||
uri: 'pages/TestCacheDataPage',
|
||||
});
|
||||
})
|
||||
Button($r('app.string.test_change_color_btn')).margin({ top: 10 }).onClick(() => {
|
||||
router.push({
|
||||
uri: 'pages/TestChangeColorPage',
|
||||
});
|
||||
})
|
||||
Button($r('app.string.test_cancel_callback_btn')).margin({ top: 10 }).onClick(() => {
|
||||
router.push({
|
||||
uri: 'pages/TestLoadCancelListenerPage',
|
||||
});
|
||||
})
|
||||
}
|
||||
}.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/libraryimageknife';
|
||||
|
||||
@Entry
|
||||
@ComponentV2
|
||||
struct ListPage {
|
||||
|
||||
private data: string[] = []
|
||||
@Local ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption({ loadSrc: $r('app.media.startIcon')})
|
||||
|
||||
|
||||
aboutToAppear(): void {
|
||||
for (let i = 0; i < 1000; i++) {
|
||||
this.data.push(i.toString())
|
||||
}
|
||||
}
|
||||
|
||||
build() {
|
||||
Row() {
|
||||
List({ space: 10 }) {
|
||||
ForEach(this.data, (item: string) => {
|
||||
ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption }).height(200).width(200)
|
||||
}, (item: string) => item)
|
||||
}
|
||||
.width('100%')
|
||||
}
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnifeComponent, ImageKnifeOption } from "@ohos/libraryimageknife"
|
||||
import matrix4 from '@ohos.matrix4'
|
||||
|
||||
@Entry
|
||||
@ComponentV2
|
||||
struct LoadStatePage {
|
||||
|
||||
starTime:number = new Date().getTime()
|
||||
|
||||
@Local ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: $r("app.media.rabbit"),
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Contain,
|
||||
onLoadListener: {
|
||||
onLoadFailed: (err) => {
|
||||
console.error("Load Failed Reason: " + err);
|
||||
},
|
||||
onLoadSuccess: (data) => {
|
||||
return data;
|
||||
},
|
||||
},
|
||||
border: { radius: 50 }
|
||||
})
|
||||
@Local imageKnifeOption1: ImageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: $r('app.media.startIcon')
|
||||
})
|
||||
@Local message: string = ""
|
||||
@Local currentWidth: number = 200
|
||||
@Local currentHeight: number = 200
|
||||
@Local typeValue: string = ""
|
||||
build() {
|
||||
Column() {
|
||||
Text($r('app.string.TIPS'))
|
||||
.margin({ top: 20 })
|
||||
Row() {
|
||||
Button($r('app.string.Test_failure_success'))
|
||||
.onClick(() => {
|
||||
this.ImageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: "https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Contain,
|
||||
onLoadListener: {
|
||||
onLoadStart:()=>{
|
||||
this.starTime = new Date().getTime()
|
||||
console.info("Load start: ");
|
||||
},
|
||||
onLoadFailed: (err) => {
|
||||
console.error("Load Failed Reason: " + err + " cost " + (new Date().getTime() - this.starTime) + " milliseconds");
|
||||
},
|
||||
onLoadSuccess: (data,imageData) => {
|
||||
console.info("Load Successful: cost " + (new Date().getTime() - this.starTime) + " milliseconds");
|
||||
this.currentWidth = imageData.imageWidth!
|
||||
this.currentHeight = imageData.imageHeight!
|
||||
this.typeValue = imageData.type!
|
||||
return data;
|
||||
},
|
||||
},
|
||||
border: { radius: 50 },
|
||||
onComplete:(event)=>{
|
||||
console.error("Load onComplete width:"+event?.width , " height:"+event?.height , " componentWidth:"+event?.componentWidth," componentHeight:" + event?.componentHeight);
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
.margin({ top: 20 })
|
||||
Text($r('app.string.image_format',this.typeValue))
|
||||
Text($r('app.string.image_width',this.currentWidth))
|
||||
Text($r('app.string.image_height',this.currentHeight))
|
||||
ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption }).height(this.currentHeight).width(this.currentWidth)
|
||||
.margin({ top: 20 })
|
||||
Button($r('app.string.Custom_download_failed')).onClick(()=>{
|
||||
this.imageKnifeOption1 = new ImageKnifeOption({
|
||||
loadSrc: "abc",
|
||||
placeholderSrc:$r('app.media.loading'),
|
||||
errorholderSrc:$r('app.media.failed'),
|
||||
customGetImage:custom,
|
||||
onLoadListener: {
|
||||
onLoadFailed:(err)=>{
|
||||
this.message = "err:" + err
|
||||
}
|
||||
}
|
||||
})
|
||||
}).margin({ top: 20 })
|
||||
Text(this.message).fontSize(20).margin({ top: 20 })
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).height(this.currentHeight).width(this.currentWidth)
|
||||
.margin({ top: 20 })
|
||||
}
|
||||
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
}
|
||||
// 自定义下载方法
|
||||
@Concurrent
|
||||
async function custom(context: Context, src: string | PixelMap | Resource): Promise<ArrayBuffer | undefined> {
|
||||
console.info("ImageKnife:: custom download：" + src)
|
||||
// 举例写死从本地文件读取，也可以自己请求网络图片
|
||||
return undefined
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnifeComponent,ImageKnifeOption } from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@ComponentV2
|
||||
struct LongImagePage {
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
|
||||
// Image("https://wx2.sinaimg.cn/mw690/006HyQKGgy1hnqp08dw09j30u04twu0x.jpg").objectFit(ImageFit.Auto).height(300)
|
||||
|
||||
// Image($r("app.media.aaa")).objectFit(ImageFit.Auto).width(200)
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: new ImageKnifeOption({
|
||||
loadSrc:"https://wx2.sinaimg.cn/mw690/006HyQKGgy1hnqp08dw09j30u04twu0x.jpg",
|
||||
//src:$r("app.media.aaa"),
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.failed"),
|
||||
objectFit: ImageFit.Auto
|
||||
})
|
||||
})
|
||||
}
|
||||
.height('100%') .width('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnife, ImageKnifeComponent, ImageKnifeOption } from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@ComponentV2
|
||||
struct ObjectFitPage {
|
||||
@Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: $r("app.media.app_icon"),
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Fill
|
||||
})
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
|
||||
Button($r('app.string.Main_image_Fill')).onClick(()=>{
|
||||
this.imageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: $r("app.media.app_icon"),
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Fill
|
||||
})
|
||||
})
|
||||
|
||||
Button($r('app.string.Maintain_proportion_filling')).margin({top:10}).onClick(async () => {
|
||||
ImageKnife.getInstance().removeAllMemoryCache()
|
||||
await ImageKnife.getInstance().removeAllFileCache()
|
||||
|
||||
this.imageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: "https://wx2.sinaimg.cn/mw690/006HyQKGgy1hnqp08dw09j30u04twu0x.jpg",
|
||||
placeholderSrc: $r("app.media.app_icon"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Fill,
|
||||
placeholderObjectFit: ImageFit.Contain
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
Button($r('app.string.Error_graph_None')).margin({top:10}).onClick(() => {
|
||||
this.imageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: "http://xxxxx",
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Fill,
|
||||
errorholderObjectFit: ImageFit.None
|
||||
})
|
||||
})
|
||||
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: this.imageKnifeOption
|
||||
}).width(300).height(200).border({width:1}).margin({top:50})
|
||||
|
||||
}
|
||||
.height('100%')
|
||||
.width('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
/*
|
||||
* Copyright (C) 2022 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { ImageKnifeComponent, ImageKnifeOption,NONE,DiskStrategy } from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct OptionTestPage {
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.icon'),
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
@State imageKnifeOption2: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.icon'),
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
|
||||
Text("示例加载图片不进行缓存").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("加载")
|
||||
.onClick(() => {
|
||||
let setting:DiskStrategy = new NONE();
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://img-blog.csdn.net/20140514114029140',
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
onlyRetrieveFromCache: false,
|
||||
isCacheable: false,
|
||||
strategy: setting
|
||||
}
|
||||
}).margin({ top: 5, left: 3 })
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
|
||||
}.width('100%').backgroundColor(Color.Pink)
|
||||
|
||||
Text("示例：加载图片进行缓存").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("加载")
|
||||
.onClick(() => {
|
||||
let setting2:DiskStrategy = new NONE();
|
||||
this.imageKnifeOption2 = {
|
||||
loadSrc: 'https://img-blog.csdn.net/20140514114029140',
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
onlyRetrieveFromCache: true,
|
||||
isCacheable: true,
|
||||
strategy: setting2
|
||||
}
|
||||
}).margin({ top: 5, left: 3 })
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }).width(300).height(300)
|
||||
}.width('100%').backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
}
|
||||
|
||||
}.width('100%')
|
||||
.height('100%')
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import image from '@ohos.multimedia.image'
|
||||
import {
|
||||
ImageKnifeData,
|
||||
RequestOption,
|
||||
Size,
|
||||
ImageKnife,
|
||||
ImageKnifeGlobal,
|
||||
ImageKnifeComponent,
|
||||
ObjectKey
|
||||
} from '@ohos/libraryimageknife'
|
||||
import { BusinessError } from '@ohos.base'
|
||||
|
||||
const TAG = "TEST-"
|
||||
let timeId = -1
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct RequestOptionLoadImage {
|
||||
@State pixelMap: PixelMap | undefined = undefined
|
||||
|
||||
load(src: string | image.PixelMap | Resource) {
|
||||
clearTimeout(timeId)
|
||||
let request = new RequestOption()
|
||||
//*requestOption调用*
|
||||
request.addHeader('refer', 'http://1.94.37.200:7070/AntiTheftChain/downloadImage');
|
||||
//通过时间戳去清除缓存
|
||||
request.signature = new ObjectKey(new Date().getTime().toString())
|
||||
request.load(src)
|
||||
.addListener({ callback: (err: BusinessError | string, data: ImageKnifeData) => {
|
||||
if (data.isPixelMap()) {
|
||||
if (data.drawPixelMap) {
|
||||
let pixelmap = data.drawPixelMap.imagePixelMap
|
||||
if (pixelmap) {
|
||||
this.pixelMap = pixelmap
|
||||
}
|
||||
}
|
||||
}
|
||||
if (data.isGIFFrame()) {
|
||||
let index: number = 0
|
||||
if (data.drawGIFFrame) {
|
||||
if (data.drawGIFFrame.imageGIFFrames) {
|
||||
let renderGif = () => {
|
||||
if (data.drawGIFFrame) {
|
||||
if (data.drawGIFFrame.imageGIFFrames) {
|
||||
let pixelmap = data.drawGIFFrame.imageGIFFrames[index].drawPixelMap
|
||||
let delay = data.drawGIFFrame.imageGIFFrames[index].delay
|
||||
if (pixelmap) {
|
||||
this.pixelMap = pixelmap
|
||||
}
|
||||
index++;
|
||||
if (index == data.drawGIFFrame.imageGIFFrames.length - 1) {
|
||||
index = 0
|
||||
}
|
||||
timeId = setTimeout(renderGif, data!.drawGIFFrame!.imageGIFFrames![index].delay)
|
||||
}
|
||||
}
|
||||
}
|
||||
renderGif()
|
||||
}
|
||||
}
|
||||
}
|
||||
if (err) {
|
||||
console.log(TAG + "error:" + JSON.stringify(err));
|
||||
}
|
||||
return false
|
||||
}
|
||||
})
|
||||
let compSize: Size = {
|
||||
width: 300,
|
||||
height: 300
|
||||
}
|
||||
request.setImageViewSize(compSize)
|
||||
let imageknife: ImageKnife | undefined = ImageKnifeGlobal.getInstance().getImageKnife()
|
||||
if (imageknife != undefined) {
|
||||
imageknife.call(request)
|
||||
}
|
||||
}
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Column() {
|
||||
Text("RequestOption加载图片").fontSize(25)
|
||||
Button("加载网络gif").onClick(() => {
|
||||
this.load("https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658")
|
||||
})
|
||||
Button("加载静态图").onClick(() => {
|
||||
this.load($r('app.media.pngSample'))
|
||||
})
|
||||
ImageKnifeComponent({ imageKnifeOption: {
|
||||
loadSrc: this.pixelMap as image.PixelMap
|
||||
} }).width(300).height(300).borderWidth(3)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
|
|
@ -12,49 +12,54 @@
|
|||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/libraryimageknife';
|
||||
|
||||
import { ImageKnifeComponent, ImageKnifeOption, NONE, DiskStrategy } from '@ohos/libraryimageknife'
|
||||
import { ObjectKey } from '@ohos/libraryimageknife';
|
||||
|
||||
@Entry
|
||||
@ComponentV2
|
||||
@Component
|
||||
struct SignatureTestPage {
|
||||
@Local imageKnifeOption1: ImageKnifeOption =new ImageKnifeOption(
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.icon'),
|
||||
placeholderSrc:$r("app.media.loading"),
|
||||
});
|
||||
@Local imageKnifeOption2: ImageKnifeOption =new ImageKnifeOption(
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
@State imageKnifeOption2: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.icon'),
|
||||
placeholderSrc:$r("app.media.loading"),
|
||||
});
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
|
||||
Text($r('app.string.The_key_fixed_1')).fontSize(15)
|
||||
Text("Signature固定为 1").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button($r('app.string.Load'))
|
||||
Button("加载")
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption1 = new ImageKnifeOption({
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://img-blog.csdn.net/20140514114029140',
|
||||
placeholderSrc:$r("app.media.loading"),
|
||||
signature: "1"
|
||||
})
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
signature: new ObjectKey("1")
|
||||
}
|
||||
}).margin({ top: 5, left: 3 })
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
|
||||
}.width('100%').backgroundColor(Color.Pink)
|
||||
|
||||
Text($r('app.string.The_key_changes_timestamp')).fontSize(15)
|
||||
Text("设置Signature，每次为时间戳").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button($r('app.string.Load'))
|
||||
Button("加载")
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption2 = new ImageKnifeOption({
|
||||
this.imageKnifeOption2 = {
|
||||
loadSrc: 'https://img-blog.csdn.net/20140514114029140',
|
||||
placeholderSrc:$r("app.media.loading"),
|
||||
signature: new Date().getTime().toString()
|
||||
})
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
signature: new ObjectKey(new Date().getTime().toString())
|
||||
}
|
||||
}).margin({ top: 5, left: 3 })
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }).width(300).height(300)
|
||||
}.width('100%').backgroundColor(Color.Pink)
|
||||
|
|
@ -66,7 +71,7 @@ struct SignatureTestPage {
|
|||
}
|
||||
|
||||
aboutToAppear() {
|
||||
console.log("唯一标识页面：" + new Date().getTime().toString())
|
||||
console.log("唯一标识页面：" + new ObjectKey(new Date().getTime().toString()).getKey())
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,132 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnifeComponent,BlurTransformation,ImageKnifeOption } from '@ohos/libraryimageknife';
|
||||
import fs from '@ohos.file.fs';
|
||||
import image from '@ohos.multimedia.image';
|
||||
import { common2D, drawing } from '@kit.ArkGraphics2D';
|
||||
|
||||
@Entry
|
||||
@ComponentV2
|
||||
struct SingleImage {
|
||||
resource: string = "app.media.svgSample"
|
||||
scroller: Scroller = new Scroller;
|
||||
localFile: string = getContext(this).filesDir + "/icon.png"
|
||||
@Local pixelMap:PixelMap | undefined = undefined;
|
||||
@Local DrawingColorFilter: ColorFilter | undefined = undefined
|
||||
private color: common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 };
|
||||
aboutToAppear(): void {
|
||||
// 拷贝本地文件
|
||||
let icon: Uint8Array = getContext(this).resourceManager.getMediaContentSync($r("app.media.startIcon"));
|
||||
let file = fs.openSync(this.localFile, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE);
|
||||
fs.writeSync(file.fd, icon.buffer);
|
||||
fs.fsyncSync(file.fd);
|
||||
fs.closeSync(file);
|
||||
this.changePic(getContext().resourceManager.getMediaContentSync( $r("app.media.aaa"))
|
||||
.buffer as ArrayBuffer);
|
||||
|
||||
|
||||
}
|
||||
|
||||
build() {
|
||||
Scroll(this.scroller) {
|
||||
Column() {
|
||||
Text($r('app.string.Local_SVG'))
|
||||
.fontSize(30)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: new ImageKnifeOption({
|
||||
loadSrc: $r("app.media.svgSample"),
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.failed"),
|
||||
objectFit: ImageFit.Contain
|
||||
})
|
||||
}).width(100).height(100)
|
||||
.onClick(()=>{
|
||||
this.DrawingColorFilter = drawing.ColorFilter.createBlendModeColorFilter(this.color, drawing.BlendMode.SRC_IN);
|
||||
})
|
||||
Text($r('app.string.Under_context_file'))
|
||||
.fontSize(30)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: new ImageKnifeOption({
|
||||
loadSrc: this.localFile,
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.failed"),
|
||||
objectFit: ImageFit.Contain
|
||||
})
|
||||
}).width(100).height(100)
|
||||
Text($r('app.string.Network_images'))
|
||||
.fontSize(30)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: new ImageKnifeOption({
|
||||
loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.failed"),
|
||||
objectFit: ImageFit.Contain,
|
||||
progressListener:(progress:number)=>{console.info("ImageKnife:: call back progress = " + progress)}
|
||||
})
|
||||
}).width(100).height(100)
|
||||
Text($r('app.string.Custom_network_download'))
|
||||
.fontSize(30)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: new ImageKnifeOption({
|
||||
loadSrc: "https://file.atomgit.com/uploads/user/1704857786989_8994.jpeg",
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.failed"),
|
||||
objectFit: ImageFit.Contain,
|
||||
customGetImage: custom,
|
||||
transformation: new BlurTransformation(10)
|
||||
})
|
||||
}).width(100).height(100)
|
||||
Text($r('app.string.PixelMap_loads_images'))
|
||||
.fontSize(30)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: new ImageKnifeOption({
|
||||
loadSrc: this.pixelMap!,
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.failed"),
|
||||
objectFit: ImageFit.Contain,
|
||||
})
|
||||
}).width(100).height(100)
|
||||
}
|
||||
.width('100%')
|
||||
}
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
changePic(buffer: ArrayBuffer){
|
||||
let imageSource: image.ImageSource = image.createImageSource(buffer);
|
||||
if (imageSource) {
|
||||
let decodingOptions: image.DecodingOptions = {
|
||||
editable: true,
|
||||
}
|
||||
imageSource.createPixelMap(decodingOptions,(err,pixelMap)=>{
|
||||
this.pixelMap = pixelMap;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 自定义下载方法
|
||||
@Concurrent
|
||||
async function custom(context: Context, src: string | PixelMap | Resource): Promise<ArrayBuffer | undefined> {
|
||||
console.info("ImageKnife:: custom download：" + src)
|
||||
// 举例写死从本地文件读取，也可以自己请求网络图片
|
||||
return context.resourceManager.getMediaContentSync($r("app.media.startIcon").id).buffer as ArrayBuffer
|
||||
}
|
||||
|
||||
|
|
@ -1,140 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { ImageKnife, CacheStrategy, ImageKnifeComponent, ImageKnifeOption } from '@ohos/imageknife';
|
||||
|
||||
@Entry
|
||||
@ComponentV2
|
||||
struct TestCacheDataPage {
|
||||
@Local cacheUpLimit: number = 0;
|
||||
@Local currentNum: number = 0;
|
||||
@Local currentSize: number = 0;
|
||||
@Local currentWidth: number = 200
|
||||
@Local currentHeight: number = 200
|
||||
@Local markersLimitText: string = getContext(this).resourceManager.getStringSync($r('app.string.memory'))
|
||||
@Local markersNumText: string = getContext(this).resourceManager.getStringSync($r('app.string.memory'))
|
||||
@Local markersSizeText: string = getContext(this).resourceManager.getStringSync($r('app.string.memory'))
|
||||
@Local ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: "",
|
||||
objectFit: ImageFit.Contain,
|
||||
onLoadListener: {
|
||||
onLoadFailed: (err) => {
|
||||
console.error("Load Failed Reason: " + err);
|
||||
},
|
||||
onLoadSuccess: (data) => {
|
||||
return data;
|
||||
},
|
||||
},
|
||||
border: { radius: 50 }
|
||||
})
|
||||
|
||||
aboutToAppear(): void {
|
||||
ImageKnife.getInstance().initFileCache(getContext(this), 256, 256 * 1024 * 1024, "ImageKnifeCache1")
|
||||
}
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
|
||||
ImageKnifeComponent(
|
||||
{ imageKnifeOption: this.ImageKnifeOption })
|
||||
.height(this.currentHeight)
|
||||
.width(this.currentWidth)
|
||||
.margin({ top: 10 })
|
||||
|
||||
Button($r('app.string.load_memory'))
|
||||
.onClick(() => {
|
||||
this.ImageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: "https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/3e/v3/LqRoLI-PRSu9Nqa8KdJ-pQ/dSqskBpSR9eraAMn7NBdqA.jpg",
|
||||
objectFit: ImageFit.Contain,
|
||||
writeCacheStrategy: CacheStrategy.Memory,
|
||||
border: { radius: 50 },
|
||||
})
|
||||
})
|
||||
Button($r('app.string.load_disk'))
|
||||
.onClick(() => {
|
||||
this.ImageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: "https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/56/v3/8MdhfSsCSMKj4sA6okUWrg/5uBx56tLTUO3RYQl-E5JiQ.jpg",
|
||||
objectFit: ImageFit.Contain,
|
||||
writeCacheStrategy: CacheStrategy.File,
|
||||
border: { radius: 50 },
|
||||
})
|
||||
})
|
||||
Text($r('app.string.cur_cache_limit', this.markersLimitText, this.cacheUpLimit))
|
||||
.fontSize(20)
|
||||
.margin({ bottom: 8 });
|
||||
Text($r('app.string.cur_cache_image_num', this.markersNumText, this.currentNum))
|
||||
.fontSize(20)
|
||||
.margin({ bottom: 8 });
|
||||
Text($r('app.string.cur_cache_size', this.markersSizeText, this.currentSize)).fontSize(20).margin({ bottom: 20 });
|
||||
|
||||
Button($r('app.string.get_cur_memory_limit')).onClick(() => {
|
||||
let result = ImageKnife.getInstance().getCacheUpperLimit(CacheStrategy.Memory);
|
||||
this.markersLimitText = getContext(this).resourceManager.getStringSync($r('app.string.memory'))
|
||||
if (result) {
|
||||
this.cacheUpLimit = result / (1024 * 1024);
|
||||
} else {
|
||||
this.cacheUpLimit = 0;
|
||||
}
|
||||
}).margin({ bottom: 8 });
|
||||
Button($r('app.string.get_img_number_of_cache')).onClick(() => {
|
||||
let result = ImageKnife.getInstance().getCurrentPicturesNum(CacheStrategy.Memory);
|
||||
this.markersNumText = getContext(this).resourceManager.getStringSync($r('app.string.memory'))
|
||||
if (result) {
|
||||
this.currentNum = result;
|
||||
} else {
|
||||
this.currentNum = 0;
|
||||
}
|
||||
}).margin({ bottom: 8 });
|
||||
Button($r('app.string.get_cur_memory_size')).onClick(() => {
|
||||
let result = ImageKnife.getInstance().getCurrentCacheSize(CacheStrategy.Memory);
|
||||
this.markersSizeText = getContext(this).resourceManager.getStringSync($r('app.string.memory'))
|
||||
if (result) {
|
||||
this.currentSize = result / (1024 * 1024);
|
||||
} else {
|
||||
this.currentSize = 0;
|
||||
}
|
||||
}).margin({ bottom: 8 });
|
||||
|
||||
Button($r('app.string.get_cur_disk_limit')).onClick(() => {
|
||||
let result = ImageKnife.getInstance().getCacheUpperLimit(CacheStrategy.File);
|
||||
this.markersLimitText = getContext(this).resourceManager.getStringSync($r('app.string.disk'))
|
||||
if (result) {
|
||||
this.cacheUpLimit = result / (1024 * 1024);
|
||||
} else {
|
||||
this.cacheUpLimit = 0;
|
||||
}
|
||||
}).margin({ bottom: 8 });
|
||||
Button($r('app.string.get_img_number_of_disk')).onClick(() => {
|
||||
let result = ImageKnife.getInstance().getCurrentPicturesNum(CacheStrategy.File);
|
||||
this.markersNumText = getContext(this).resourceManager.getStringSync($r('app.string.disk'))
|
||||
if (result) {
|
||||
this.currentNum = result;
|
||||
} else {
|
||||
this.currentNum = 0;
|
||||
}
|
||||
}).margin({ bottom: 8 });
|
||||
Button($r('app.string.get_cur_disk_size')).onClick(() => {
|
||||
let result = ImageKnife.getInstance().getCurrentCacheSize(CacheStrategy.File);
|
||||
this.markersSizeText = getContext(this).resourceManager.getStringSync($r('app.string.disk'))
|
||||
if (result) {
|
||||
this.currentSize = result / (1024 * 1024);
|
||||
} else {
|
||||
this.currentSize = 0;
|
||||
}
|
||||
}).margin({ bottom: 8 });
|
||||
}
|
||||
.height('100%').width('100%').margin({ top: 50 })
|
||||
}
|
||||
}
|
||||
|
|
@ -1,112 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { drawing, common2D } from '@kit.ArkGraphics2D';
|
||||
import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/imageknife';
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestChangeColorPage {
|
||||
private imageOne: Resource = $r('app.media.ic_test_change_color_png');
|
||||
private imageTwo: Resource = $r('app.media.ic_test_change_color_png');
|
||||
@State src: Resource = this.imageOne
|
||||
@State src2: Resource = this.imageTwo
|
||||
@State color: common2D.Color = {
|
||||
alpha: 255,
|
||||
red: 255,
|
||||
green: 1,
|
||||
blue: 1
|
||||
};
|
||||
@State DrawingColorFilterFirst: ColorFilter | undefined = undefined
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
Text($r('app.string.select_color_btn')).margin({ top: 20 })
|
||||
Row() {
|
||||
Button($r('app.string.red')).backgroundColor(Color.Red).margin(5).onClick(() => {
|
||||
this.color = {
|
||||
alpha: 255,
|
||||
red: 255,
|
||||
green: 1,
|
||||
blue: 1
|
||||
};
|
||||
})
|
||||
Button($r('app.string.yellow')).backgroundColor(Color.Yellow).margin(5).onClick(() => {
|
||||
this.color = {
|
||||
alpha: 255,
|
||||
red: 255,
|
||||
green: 255,
|
||||
blue: 1
|
||||
};
|
||||
})
|
||||
Button($r('app.string.green')).backgroundColor(Color.Green).margin(5).onClick(() => {
|
||||
this.color = {
|
||||
alpha: 255,
|
||||
red: 1,
|
||||
green: 255,
|
||||
blue: 1
|
||||
};
|
||||
})
|
||||
Button($r('app.string.blue')).backgroundColor(Color.Blue).margin(5).onClick(() => {
|
||||
this.color = {
|
||||
alpha: 255,
|
||||
red: 1,
|
||||
green: 1,
|
||||
blue: 255
|
||||
};
|
||||
})
|
||||
}
|
||||
.width('100%')
|
||||
.height(50)
|
||||
.justifyContent(FlexAlign.Center)
|
||||
|
||||
Text($r('app.string.master_image')).margin({ top: 20 })
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: new ImageKnifeOption({
|
||||
loadSrc: this.src
|
||||
})
|
||||
}).width(110).height(110)
|
||||
|
||||
Text($r('app.string.click_img_to_change_color')).margin({ top: 30 })
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: new ImageKnifeOption({
|
||||
loadSrc: this.src,
|
||||
drawingColorFilter: this.DrawingColorFilterFirst
|
||||
})
|
||||
})
|
||||
.onClick(() => {
|
||||
this.DrawingColorFilterFirst =
|
||||
drawing.ColorFilter.createBlendModeColorFilter(this.color, drawing.BlendMode.SRC_IN);
|
||||
}).width(110).height(110)
|
||||
|
||||
Text($r('app.string.test_non_svg_color')).margin({ top: 30 })
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: new ImageKnifeOption({
|
||||
loadSrc: $r('app.media.ic_test_change_color_png'),
|
||||
drawingColorFilter: drawing.ColorFilter.createBlendModeColorFilter(this.color, drawing.BlendMode.SRC_IN)
|
||||
})
|
||||
}).width(110).height(110)
|
||||
|
||||
Text($r('app.string.test_svg_color')).margin({ top: 30 })
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: new ImageKnifeOption({
|
||||
loadSrc: $r("app.media.ic_test_change_color_svg"),
|
||||
drawingColorFilter: drawing.ColorFilter.createBlendModeColorFilter(this.color, drawing.BlendMode.SRC_IN)
|
||||
})
|
||||
}).width(110).height(110)
|
||||
|
||||
}.width('100%').height('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnifeComponent ,ImageKnifeOption} from '@ohos/libraryimageknife';
|
||||
|
||||
@Entry
|
||||
@ComponentV2
|
||||
struct TestCommonImage {
|
||||
private data: Array<string> = []
|
||||
aboutToAppear(): void {
|
||||
for (let index = 0; index < 30; index++) {
|
||||
this.data.push(`https://img-blog.csdn.net/20140514114029140?${index}`)
|
||||
}
|
||||
}
|
||||
build() {
|
||||
Column() {
|
||||
WaterFlow() {
|
||||
ForEach(this.data,(item: string)=>{
|
||||
FlowItem() {
|
||||
Column(){
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: new ImageKnifeOption({
|
||||
loadSrc: item,
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.failed"),
|
||||
objectFit: ImageFit.Contain,
|
||||
signature: "aaa"
|
||||
})
|
||||
}).width("50%").height(200)
|
||||
}
|
||||
}.height(200)
|
||||
.backgroundColor("#95efd2")
|
||||
},(item: string) => item)
|
||||
}.columnsTemplate("1fr 1fr")
|
||||
.columnsGap(10)
|
||||
.rowsGap(5)
|
||||
.backgroundColor(0xFAEEE0)
|
||||
.width("100%").height("100%")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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, } from '@ohos/libraryimageknife'
|
||||
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestDurationAndPlayTimesPage {
|
||||
build() {
|
||||
Column() {
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: {
|
||||
loadSrc: "https://n.sinaimg.cn/default/944aebbe/20230131/diamond_1.gif",
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
}
|
||||
}).width(300)
|
||||
.height(300)
|
||||
.backgroundColor(Color.Orange)
|
||||
Image("https://n.sinaimg.cn/default/944aebbe/20230131/diamond_1.gif")
|
||||
.width(300)
|
||||
.height(300)
|
||||
.backgroundColor(Color.Orange)
|
||||
.objectFit(ImageFit.Contain)
|
||||
.margin({top:20})
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnifeComponent,ImageKnifeOption } from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@ComponentV2
|
||||
struct TestErrorHolderPage {
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
Text("ImageKnifeComponent1").fontSize(20)
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: new ImageKnifeOption({
|
||||
loadSrc: "abc",
|
||||
errorholderSrc:$r('app.media.failed')
|
||||
})
|
||||
}).width(200).height(200)
|
||||
Text("ImageKnifeComponent2").fontSize(20)
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: new ImageKnifeOption({
|
||||
loadSrc: "abc",
|
||||
errorholderSrc:$r('app.media.startIcon')
|
||||
})
|
||||
}).width(200).height(200)
|
||||
Text("ImageKnifeComponent2").fontSize(20)
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: new ImageKnifeOption({
|
||||
loadSrc: "abc",
|
||||
errorholderSrc:$r('app.media.mask_starfish')
|
||||
})
|
||||
}).width(200).height(200)
|
||||
}
|
||||
.height('100%') .width('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnifeComponent,ImageKnifeOption } from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@ComponentV2
|
||||
struct TestPrefetchToFileCachePage {
|
||||
@Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
|
||||
placeholderSrc:$r('app.media.loading'),
|
||||
headerOption:[
|
||||
{
|
||||
key:"abc",
|
||||
value:"单个"
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: this.imageKnifeOption
|
||||
}).width(300).height(300)
|
||||
}
|
||||
.height('100%') .width('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -1,137 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnifeComponent,ImageKnifeOption } from '@ohos/libraryimageknife'
|
||||
|
||||
@ObservedV2
|
||||
export class MsgModel {
|
||||
id: string
|
||||
cId: string
|
||||
body: string
|
||||
status: number
|
||||
|
||||
constructor(id: string, body: string, cId?: string) {
|
||||
this.id = id
|
||||
this.body = body
|
||||
this.status = -1
|
||||
this.cId = cId || ''
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// @Reusable
|
||||
@ComponentV2
|
||||
export struct MsgItem {
|
||||
@Param count: number = 0
|
||||
private data: Array<string> = [
|
||||
"http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
|
||||
"http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg",
|
||||
"http://h.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5f2c2a9e953da81cb39db3d1d.jpg",
|
||||
"http://g.hiphotos.baidu.com/image/pic/item/55e736d12f2eb938d5277fd5d0628535e5dd6f4a.jpg",
|
||||
"http://e.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f7e41f5cfe760e0cf3d6cad6ee.jpg",
|
||||
"http://b.hiphotos.baidu.com/image/pic/item/9d82d158ccbf6c81b94575cfb93eb13533fa40a2.jpg",
|
||||
"http://e.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31c1badd5a685d6277f9e2ff81e.jpg",
|
||||
"http://g.hiphotos.baidu.com/image/pic/item/0d338744ebf81a4c87a3add4d52a6059252da61e.jpg",
|
||||
"http://a.hiphotos.baidu.com/image/pic/item/f2deb48f8c5494ee5080c8142ff5e0fe99257e19.jpg",
|
||||
"http://f.hiphotos.baidu.com/image/pic/item/4034970a304e251f503521f5a586c9177e3e53f9.jpg",
|
||||
"http://b.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fbb3586c0168224f4a20a4dd7e.jpg",
|
||||
"http://img2.xkhouse.com/bbs/hfhouse/data/attachment/forum/corebbs/2009-11/2009113011534566298.jpg",
|
||||
"http://a.hiphotos.baidu.com/image/pic/item/e824b899a9014c087eb617650e7b02087af4f464.jpg",
|
||||
"http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg",
|
||||
"http://d.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f119945cbe2fe9925bc317d2a.jpg",
|
||||
"http://h.hiphotos.baidu.com/image/pic/item/902397dda144ad340668b847d4a20cf430ad851e.jpg",
|
||||
"http://b.hiphotos.baidu.com/image/pic/item/359b033b5bb5c9ea5c0e3c23d139b6003bf3b374.jpg",
|
||||
"http://a.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a292d2472199d25bc315d607c7c.jpg",
|
||||
"http://b.hiphotos.baidu.com/image/pic/item/e824b899a9014c08878b2c4c0e7b02087af4f4a3.jpg",
|
||||
"http://g.hiphotos.baidu.com/image/pic/item/6d81800a19d8bc3e770bd00d868ba61ea9d345f2.jpg",
|
||||
]
|
||||
build(){
|
||||
if (this.count % 2 == 0 && this.count <6){
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption:new ImageKnifeOption({
|
||||
loadSrc:$r("app.media.startIcon"),
|
||||
placeholderSrc:$r("app.media.loading")
|
||||
}),syncLoad:true
|
||||
})
|
||||
}else if (this.count > 6 && this.count - 6 < this.data.length){
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption:new ImageKnifeOption({
|
||||
loadSrc:this.data[this.count - 6],
|
||||
placeholderSrc:$r("app.media.loading")
|
||||
}),syncLoad:true
|
||||
})
|
||||
}else {
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption:new ImageKnifeOption({
|
||||
loadSrc:$r("app.media.pngSample"),
|
||||
placeholderSrc:$r("app.media.loading")
|
||||
}),syncLoad:true
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Entry
|
||||
@ComponentV2
|
||||
struct ImageTestPage {
|
||||
count : number = 0
|
||||
rCount: number = 0
|
||||
scroller: Scroller = new Scroller()
|
||||
@Local list: MsgModel[] = []
|
||||
@Local imageSize: number =100
|
||||
handAdd(){
|
||||
this.count++
|
||||
const msgItem = new MsgModel('add_id'+this.count, 'addBody'+this.count,'cId'+ this.count)
|
||||
this.list.push(msgItem)
|
||||
setTimeout(()=> {
|
||||
msgItem.status = 1
|
||||
},3000)
|
||||
this.scroller.scrollEdge(Edge.Bottom)
|
||||
}
|
||||
|
||||
build(){
|
||||
Column(){
|
||||
Row(){
|
||||
Button("addItem").onClick(()=> {
|
||||
this.handAdd()
|
||||
})
|
||||
Button("remove").onClick(()=> {
|
||||
this.list.splice(0,1)
|
||||
})
|
||||
}
|
||||
Row(){
|
||||
Text($r('app.string.Click_on_add'))
|
||||
.onClick(()=> {
|
||||
this.imageSize = this.imageSize + 50
|
||||
})
|
||||
.width('50%').backgroundColor(0x88ff0000).textAlign(TextAlign.Center).height(50)
|
||||
Text($r('app.string.Click_on_reduce'))
|
||||
.onClick(()=> {
|
||||
this.imageSize = Math.max(this.imageSize - 50, 0)
|
||||
})
|
||||
.width('50%').backgroundColor(0x88ff0000).textAlign(TextAlign.Center).height(50)
|
||||
}.height(50).width('100%')
|
||||
|
||||
List({space: 20, scroller: this.scroller }) {
|
||||
ForEach(this.list, (item: MsgModel)=> {
|
||||
ListItem(){
|
||||
MsgItem({count : this.count}).width(this.imageSize).height(this.imageSize);
|
||||
}
|
||||
},(item:MsgModel)=> item.id)
|
||||
}.width('100%').height('auto').layoutWeight(1)
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnifeComponent, ImageKnife, ImageKnifeOption, CacheStrategy } from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@ComponentV2
|
||||
struct TestIsUrlExist {
|
||||
@Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: $r('app.media.startIcon'),
|
||||
placeholderSrc: $r('app.media.loading'),
|
||||
errorholderSrc:$r('app.media.failed')
|
||||
})
|
||||
@Local source: PixelMap | string | Resource = $r("app.media.startIcon")
|
||||
@Local source1: PixelMap | string | Resource = $r("app.media.startIcon")
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
Flex() {
|
||||
Button($r('app.string.Preloading_GIF')).onClick(() => {
|
||||
this.imageKnifeOption.loadSrc =
|
||||
"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658"
|
||||
})
|
||||
Button($r('app.string.Retrieve_GIF_from_memory')).onClick(() => {
|
||||
ImageKnife.getInstance()
|
||||
.getCacheImage("https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
|
||||
CacheStrategy.Memory)
|
||||
.then((data) => {
|
||||
this.source = data !== undefined ? data.source : $r("app.media.startIcon")
|
||||
})
|
||||
})
|
||||
Button($r('app.string.Retrieve_GIF_from_disk')).onClick(() => {
|
||||
ImageKnife.getInstance()
|
||||
.getCacheImage("https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
|
||||
CacheStrategy.File)
|
||||
.then((data) => {
|
||||
this.source1 = data !== undefined ? data.source : $r("app.media.startIcon")
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
Flex() {
|
||||
Button($r('app.string.Preloading_static_images')).onClick(() => {
|
||||
this.imageKnifeOption.loadSrc =
|
||||
'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp'
|
||||
})
|
||||
Button($r('app.string.Retrieve_images_from_memory')).onClick(() => {
|
||||
ImageKnife.getInstance()
|
||||
.getCacheImage('https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
|
||||
CacheStrategy.Memory)
|
||||
.then((data) => {
|
||||
this.source = data!.source
|
||||
})
|
||||
})
|
||||
Button($r('app.string.Retrieve_images_from_disk')).onClick(() => {
|
||||
ImageKnife.getInstance()
|
||||
.getCacheImage('https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
|
||||
CacheStrategy.File)
|
||||
.then((data) => {
|
||||
this.source1 = data!.source
|
||||
})
|
||||
})
|
||||
}.margin({ top: 10 })
|
||||
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: this.imageKnifeOption
|
||||
}).width(200).height(200).margin({ top: 10 })
|
||||
Image(this.source).margin({ top: 10 })
|
||||
.width(200).height(200)
|
||||
Image(this.source1).margin({ top: 10 })
|
||||
.width(200).height(200)
|
||||
}
|
||||
.height('100%').width('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/imageknife';
|
||||
|
||||
@Entry
|
||||
@ComponentV2
|
||||
struct TestLoadCancelListenerPage {
|
||||
@Local currentWidth: number = 200
|
||||
@Local currentHeight: number = 200
|
||||
@Local showChild: boolean = true;
|
||||
@Local text: string = "";
|
||||
@Local ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: "",
|
||||
objectFit: ImageFit.Contain,
|
||||
border: { radius: 50 }
|
||||
})
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
Text($r('app.string.onLoadCancel_reason', this.text)).margin(20).fontSize(15)
|
||||
Button($r('app.string.rm_component_of_net'))
|
||||
.margin(20)
|
||||
.onClick(() => {
|
||||
this.ImageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: "https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/76/v3/EyF6z4FISpCHhae38eEexw/OtyAiu-zSSevNQYvUdtVmA.jpg",
|
||||
objectFit: ImageFit.Contain,
|
||||
onLoadListener: {
|
||||
onLoadStart: () => {
|
||||
this.showChild = false;
|
||||
},
|
||||
onLoadCancel: (res) => {
|
||||
this.text = res
|
||||
console.log("TestLoadCancelListenerPage----onLoadCancel> url:" + res)
|
||||
}
|
||||
},
|
||||
border: { radius: 50 }
|
||||
})
|
||||
})
|
||||
|
||||
Button($r('app.string.component_display'))
|
||||
.margin(20).onClick(() => {
|
||||
this.text = "";
|
||||
this.showChild = true;
|
||||
this.ImageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: "",
|
||||
objectFit: ImageFit.Contain,
|
||||
border: { radius: 50 }
|
||||
})
|
||||
})
|
||||
Button($r('app.string.rm_component_of_local'))
|
||||
.margin(20)
|
||||
.onClick(() => {
|
||||
this.ImageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: $r('app.media.loading'),
|
||||
objectFit: ImageFit.Contain,
|
||||
onLoadListener: {
|
||||
onLoadStart: () => {
|
||||
this.showChild = false;
|
||||
},
|
||||
onLoadCancel: (res) => {
|
||||
this.text = res
|
||||
console.log("TestLoadCancelListenerPage----onLoadCancel> url:" + res)
|
||||
}
|
||||
},
|
||||
border: { radius: 50 }
|
||||
})
|
||||
})
|
||||
|
||||
if (this.showChild) {
|
||||
ImageKnifeComponent(
|
||||
{ imageKnifeOption: this.ImageKnifeOption })
|
||||
.height(150)
|
||||
.width(150)
|
||||
.backgroundColor(Color.Orange)
|
||||
.margin({ top: 20 })
|
||||
}
|
||||
}
|
||||
.height('100%')
|
||||
.width('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnifeComponent,ImageKnife,ImageKnifeOption } from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@ComponentV2
|
||||
struct TestPrefetchToFileCachePage {
|
||||
@Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc:$r('app.media.startIcon'),
|
||||
placeholderSrc:$r('app.media.loading'),
|
||||
errorholderSrc:$r('app.media.failed')
|
||||
})
|
||||
async preload(url:string) {
|
||||
let fileCachePath = await ImageKnife.getInstance().preLoadCache(url)
|
||||
console.log("preload-fileCachePath=="+ fileCachePath)
|
||||
}
|
||||
async preload1(url:string) {
|
||||
let fileCachePath = await ImageKnife.getInstance().preLoadCache(new ImageKnifeOption({ loadSrc: url }))
|
||||
console.log("preload-fileCachePath1=="+ fileCachePath)
|
||||
}
|
||||
build() {
|
||||
Column() {
|
||||
Button($r('app.string.Preloading_images_to_file_cache_using_URL')).margin({top:10}).onClick(async ()=>{
|
||||
await this.preload("https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658")
|
||||
})
|
||||
Button($r('app.string.Preloading_images_to_file_cache_using_option')).margin({top:10}).onClick(async ()=>{
|
||||
await this.preload1("https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658")
|
||||
})
|
||||
Button($r('app.string.Load_image_offline_after_preloading')).margin({top:10}).onClick(()=>{
|
||||
this.imageKnifeOption.loadSrc = "https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658"
|
||||
})
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: this.imageKnifeOption
|
||||
}).width(300).height(300).margin({top:30})
|
||||
}
|
||||
.height('100%') .width('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -1,126 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnifeComponent, ImageKnife, ImageKnifeOption, CacheStrategy } from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@ComponentV2
|
||||
struct TestRemoveCache {
|
||||
@Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: $r('app.media.startIcon'),
|
||||
placeholderSrc: $r('app.media.loading'),
|
||||
errorholderSrc:$r('app.media.failed')
|
||||
})
|
||||
@Local source: PixelMap | string | Resource = $r("app.media.startIcon");
|
||||
@Local source1: PixelMap | string | Resource = $r("app.media.startIcon");
|
||||
@Local url: string = '';
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
Flex() {
|
||||
Button($r('app.string.Preloading_GIF')).onClick(() => {
|
||||
this.imageKnifeOption.loadSrc = "https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658";
|
||||
this.url = "https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658";
|
||||
})
|
||||
.margin({left:10})
|
||||
Button($r('app.string.Retrieve_GIF_from_memory')).onClick(() => {
|
||||
ImageKnife.getInstance()
|
||||
.getCacheImage("https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
|
||||
CacheStrategy.Memory)
|
||||
.then((data) => {
|
||||
this.source = data !== undefined ? data.source : $r("app.media.startIcon");
|
||||
})
|
||||
})
|
||||
.margin({left:10})
|
||||
Button($r('app.string.Retrieve_GIF_from_disk')).onClick(() => {
|
||||
ImageKnife.getInstance()
|
||||
.getCacheImage("https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
|
||||
CacheStrategy.File)
|
||||
.then((data) => {
|
||||
this.source1 = data !== undefined ? data.source : $r("app.media.startIcon");
|
||||
})
|
||||
})
|
||||
.margin({left:10})
|
||||
}
|
||||
|
||||
Flex() {
|
||||
Button($r('app.string.Preloading_static_images')).onClick(() => {
|
||||
this.imageKnifeOption.loadSrc = 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp';
|
||||
this.url = 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp';
|
||||
})
|
||||
.margin({left:10})
|
||||
Button($r('app.string.Retrieve_images_from_memory')).onClick(() => {
|
||||
ImageKnife.getInstance()
|
||||
.getCacheImage('https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
|
||||
CacheStrategy.Memory)
|
||||
.then((data) => {
|
||||
this.source = data!.source;
|
||||
})
|
||||
})
|
||||
.margin({left:10})
|
||||
Button($r('app.string.Retrieve_images_from_disk')).onClick(() => {
|
||||
ImageKnife.getInstance()
|
||||
.getCacheImage('https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
|
||||
CacheStrategy.File)
|
||||
.then((data) => {
|
||||
this.source1 = data!.source;
|
||||
})
|
||||
})
|
||||
.margin({left:10})
|
||||
}.margin({ top: 10 })
|
||||
|
||||
Flex() {
|
||||
Button($r('app.string.Delete_all_caches')).onClick(() => {
|
||||
ImageKnife.getInstance()
|
||||
.removeAllMemoryCache()
|
||||
ImageKnife.getInstance()
|
||||
.removeAllFileCache()
|
||||
})
|
||||
.margin({left:5})
|
||||
Button($r('app.string.Delete_all_memory_caches')).onClick(() => {
|
||||
ImageKnife.getInstance()
|
||||
.removeAllMemoryCache()
|
||||
})
|
||||
.margin({left:5})
|
||||
Button($r('app.string.Delete_all_file_caches')).onClick(() => {
|
||||
ImageKnife.getInstance()
|
||||
.removeAllFileCache()
|
||||
})
|
||||
.margin({left:5})
|
||||
}.margin({ top: 10 })
|
||||
|
||||
Flex() {
|
||||
Button($r('app.string.Delete_all_custom_memory_caches')).onClick(() => {
|
||||
ImageKnife.getInstance()
|
||||
.removeMemoryCache(this.url)
|
||||
})
|
||||
.margin({left:20})
|
||||
Button($r('app.string.Delete_all_custom_file_caches')).onClick(() => {
|
||||
ImageKnife.getInstance()
|
||||
.removeFileCache(this.url)
|
||||
})
|
||||
.margin({left:20})
|
||||
}.margin({ top: 10 })
|
||||
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: this.imageKnifeOption
|
||||
}).width(200).height(200).margin({ top: 10 })
|
||||
Image(this.source).margin({ top: 10 })
|
||||
.width(200).height(200)
|
||||
Image(this.source1).margin({ top: 10 })
|
||||
.width(200).height(200)
|
||||
}
|
||||
.height('100%').width('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnifeComponent, ImageKnife, ImageKnifeOption } from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@ComponentV2
|
||||
struct TestSetCustomImagePage {
|
||||
|
||||
getResourceString(res:Resource){
|
||||
return getContext().resourceManager.getStringSync(res.id)
|
||||
}
|
||||
|
||||
@Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: $r('app.media.startIcon'),
|
||||
placeholderSrc: $r('app.media.loading')
|
||||
})
|
||||
aboutToAppear(): void {
|
||||
ImageKnife.getInstance().setCustomGetImage(custom)
|
||||
}
|
||||
aboutToDisappear(): void {
|
||||
ImageKnife.getInstance().setCustomGetImage()
|
||||
}
|
||||
build() {
|
||||
Column() {
|
||||
Button(this.getResourceString($r('app.string.Custom_network_download')) + " a").onClick(()=>{
|
||||
this.imageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: "aaa",
|
||||
placeholderSrc: $r('app.media.loading')
|
||||
})
|
||||
})
|
||||
Button(this.getResourceString($r('app.string.Custom_network_download')) + " b").onClick(()=>{
|
||||
this.imageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: "bbb",
|
||||
placeholderSrc: $r('app.media.loading')
|
||||
})
|
||||
})
|
||||
Button(this.getResourceString($r('app.string.Custom_network_download')) + " c").onClick(()=>{
|
||||
this.imageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: "ccc",
|
||||
placeholderSrc: $r('app.media.loading')
|
||||
})
|
||||
})
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: this.imageKnifeOption
|
||||
}).width(300)
|
||||
.height(300)
|
||||
}
|
||||
.width("100%")
|
||||
.height("100%")
|
||||
}
|
||||
}
|
||||
@Concurrent
|
||||
async function custom(context: Context, src: string | PixelMap | Resource): Promise<ArrayBuffer | undefined> {
|
||||
console.info("ImageKnife:: custom download：" + src)
|
||||
// 举例写死从本地文件读取，也可以自己请求网络图片
|
||||
return context.resourceManager.getMediaContentSync($r("app.media.pngSample").id).buffer as ArrayBuffer
|
||||
}
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnifeComponent, ImageKnifeOption } from "@ohos/libraryimageknife"
|
||||
|
||||
@ComponentV2
|
||||
export struct ZuImage {
|
||||
@Param @Require src: PixelMap | ResourceStr | string | undefined
|
||||
@Param @Require placeholderSrc: PixelMap | ResourceStr | string | undefined
|
||||
@Local errorholderSrc: PixelMap | ResourceStr | string | undefined
|
||||
|
||||
build() {
|
||||
if (this.src) {
|
||||
//当前版本存在bug
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: new ImageKnifeOption({
|
||||
loadSrc: this.src,
|
||||
placeholderSrc: this.placeholderSrc,
|
||||
errorholderSrc: this.errorholderSrc ?? this.placeholderSrc,
|
||||
objectFit: ImageFit.Cover
|
||||
})
|
||||
})
|
||||
} else {
|
||||
Image(this.placeholderSrc)
|
||||
.objectFit(ImageFit.Cover)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@Entry
|
||||
@ComponentV2
|
||||
struct TestTaskResourcePage {
|
||||
@Local stateMenus: Array<string> = [
|
||||
"https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
|
||||
'https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/bf/v3/lSjrRwFcS-ez6jp1ALSQFg/0n7R7XinSPyrYLqDu_1dfw.jpg',
|
||||
'https://img-blog.csdn.net/20140514114029140',
|
||||
'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
|
||||
]
|
||||
@Builder
|
||||
_buildItem(item: string) {
|
||||
Column({ space: 8 }) {
|
||||
ZuImage({
|
||||
src: item,
|
||||
placeholderSrc: $r("app.media.loading")
|
||||
}).width(44)
|
||||
.height(44)
|
||||
}
|
||||
}
|
||||
build() {
|
||||
|
||||
Grid() {
|
||||
ForEach(this.stateMenus, (item: string) => {
|
||||
GridItem() {
|
||||
this._buildItem(item)
|
||||
}
|
||||
})
|
||||
}.width("100%")
|
||||
.columnsTemplate('1fr 1fr 1fr 1fr 1fr')
|
||||
.rowsGap(24)
|
||||
.padding({
|
||||
top: 24,
|
||||
bottom: 24,
|
||||
left: 24,
|
||||
right: 24
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnifeComponent,CacheStrategy,ImageKnifeOption } from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@ComponentV2
|
||||
struct TestWriteCacheStage {
|
||||
@Local imageKnifeOption1: ImageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc:$r('app.media.startIcon'),
|
||||
placeholderSrc:$r('app.media.loading'),
|
||||
errorholderSrc:$r('app.media.failed')
|
||||
})
|
||||
@Local imageKnifeOption2: ImageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc:$r('app.media.startIcon'),
|
||||
placeholderSrc:$r('app.media.loading'),
|
||||
errorholderSrc:$r('app.media.failed')
|
||||
})
|
||||
@Local imageKnifeOption3: ImageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc:$r('app.media.startIcon'),
|
||||
placeholderSrc:$r('app.media.loading'),
|
||||
errorholderSrc:$r('app.media.failed')
|
||||
})
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
Button($r('app.string.Write_memory_and_file')).margin({top:10}).onClick(async ()=>{
|
||||
this.imageKnifeOption1 = new ImageKnifeOption({
|
||||
loadSrc:'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
|
||||
placeholderSrc:$r('app.media.loading'),
|
||||
errorholderSrc:$r('app.media.failed'),
|
||||
writeCacheStrategy:CacheStrategy.Default
|
||||
})
|
||||
})
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: this.imageKnifeOption1
|
||||
}).width(200).height(200).margin({top:10})
|
||||
Button($r('app.string.Write_memory')).margin({top:10}).onClick(async ()=>{
|
||||
this.imageKnifeOption2 = new ImageKnifeOption({
|
||||
loadSrc:"https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
|
||||
placeholderSrc:$r('app.media.loading'),
|
||||
errorholderSrc:$r('app.media.failed'),
|
||||
writeCacheStrategy:CacheStrategy.Memory
|
||||
})
|
||||
})
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: this.imageKnifeOption2
|
||||
}).width(200).height(200).margin({top:10})
|
||||
Button($r('app.string.Write_file')).margin({top:10}).onClick(async ()=>{
|
||||
this.imageKnifeOption3 = new ImageKnifeOption({
|
||||
loadSrc:'https://img-blog.csdn.net/20140514114029140',
|
||||
placeholderSrc:$r('app.media.loading'),
|
||||
errorholderSrc:$r('app.media.failed'),
|
||||
writeCacheStrategy:CacheStrategy.File
|
||||
})
|
||||
})
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: this.imageKnifeOption3
|
||||
}).width(200).height(200).margin({top:10})
|
||||
}
|
||||
.height('100%') .width('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnifeComponent, ImageKnifeOption } from "@ohos/libraryimageknife"
|
||||
import matrix4 from '@ohos.matrix4'
|
||||
|
||||
|
||||
@Entry
|
||||
@ComponentV2
|
||||
struct TransformPage {
|
||||
private custom_scale:number = 1
|
||||
@Local matrix1:object = matrix4.identity().scale({ x: 1, y: 1 })
|
||||
@Local ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: $r("app.media.rabbit"),
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Contain,
|
||||
border: { radius: 50 }
|
||||
})
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption }).height(200).width(200)
|
||||
.transform(this.matrix1)
|
||||
// Image($r('app.media.rabbit')).objectFit(ImageFit.Contain).height(200).width(200).transform(this.matrix1)
|
||||
Button($r('app.string.Enlarge')).onClick(()=>{
|
||||
this.custom_scale = this.custom_scale * 2
|
||||
this.matrix1 = matrix4.identity().scale({ x: this.custom_scale, y: this.custom_scale })
|
||||
})
|
||||
|
||||
Button($r('app.string.Reduce')).onClick(()=>{
|
||||
this.custom_scale = this.custom_scale / 2
|
||||
this.matrix1 = matrix4.identity().scale({ x: this.custom_scale, y: this.custom_scale })
|
||||
})
|
||||
}
|
||||
.width('100%')
|
||||
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/libraryimageknife'
|
||||
|
||||
// const logger = new imUtils.logger.IMLogger('Avatar')
|
||||
@ObservedV2
|
||||
export class MyStorage {
|
||||
static instance:MyStorage | undefined = undefined
|
||||
static getInstance(){
|
||||
if(MyStorage.instance == undefined) {
|
||||
MyStorage.instance = new MyStorage()
|
||||
}
|
||||
return MyStorage.instance
|
||||
}
|
||||
@Trace WeLink_Mob_fontSize_multiple: number = 1
|
||||
}
|
||||
|
||||
@ComponentV2
|
||||
export struct UserAvatar {
|
||||
// @Prop userInfo: string = ""
|
||||
imgSize: number = 100
|
||||
radius: number = 12
|
||||
borderSize: number = 0
|
||||
imgSizes: number = 1
|
||||
@Local ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption()
|
||||
scalable: boolean = true;
|
||||
@Local calcImgSize: number = 100
|
||||
@Param userInfo: string = ""
|
||||
@Monitor('userInfo')
|
||||
userInfoUpdate() {
|
||||
// if (uri === 'userInfo' && this.imageKnifeOption.account !== this.userInfo.contactId) return;
|
||||
// // logger.info(`userInfoUpdate uri=${uri} oldAcc=${this.imageKnifeOption.loadSrc} nowAcc=${this.userInfo.externalHeadUrl}`)
|
||||
// if (this.userInfo.externalHeadUrl === this.imageKnifeOption.loadSrc && this.userInfo.infoUpdateTime.getTime()
|
||||
// .toString() === this.imageKnifeOption?.signature?.getKey()) return;
|
||||
this.ImageKnifeOption = new ImageKnifeOption({
|
||||
//TODO:写死loadSRC，场景：变更组件大小，所有图片不显示
|
||||
loadSrc: this.userInfo,
|
||||
placeholderSrc: $r('app.media.loading'),
|
||||
errorholderSrc: $r('app.media.failed'),
|
||||
border: { radius:20,width:5,color:$r('app.color.start_window_background') },
|
||||
objectFit:ImageFit.Contain
|
||||
// signature: new ObjectKey(this.userInfo.infoUpdateTime.getTime().toString())
|
||||
})
|
||||
}
|
||||
@Local storage: MyStorage = MyStorage.getInstance()
|
||||
@Monitor('storage.WeLink_Mob_fontSize_multiple')
|
||||
updateImgSize() {
|
||||
this.setImageSize()
|
||||
}
|
||||
aboutToAppear(): void {
|
||||
this.userInfoUpdate()
|
||||
this.setImageSize()
|
||||
}
|
||||
|
||||
setImageSize() {
|
||||
if (!this.scalable) {
|
||||
this.calcImgSize = this.imgSize
|
||||
} else if (this.storage.WeLink_Mob_fontSize_multiple < 0.9) {
|
||||
this.calcImgSize = this.imgSize * 0.9
|
||||
} else if (this.storage.WeLink_Mob_fontSize_multiple > 1.6) {
|
||||
this.calcImgSize = this.imgSize * 1.6
|
||||
} else {
|
||||
this.calcImgSize = this.imgSize * this.storage.WeLink_Mob_fontSize_multiple
|
||||
}
|
||||
}
|
||||
|
||||
aboutToReuse(param: ESObject) {
|
||||
this.userInfoUpdate()
|
||||
}
|
||||
|
||||
build() {
|
||||
Row() {
|
||||
// Image(this.imageKnifeOption.loadSrc)
|
||||
|
||||
ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption })
|
||||
.borderRadius(this.radius)
|
||||
.clip(true)
|
||||
.width(this.calcImgSize)
|
||||
.height(this.calcImgSize)
|
||||
.backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
|
||||
// Image(this.userInfo)
|
||||
// Text((this.imageKnifeOption.loadSrc as string).split('/')[8])
|
||||
// .position({ x: 0, y: 0 })
|
||||
// .zIndex(9)
|
||||
// .fontSize(12)
|
||||
// .fontColor('#ff0000')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,149 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { MyStorage, UserAvatar } from './User'
|
||||
|
||||
class CommonDataSource <T> implements IDataSource {
|
||||
private dataArray: T[] = []
|
||||
private listeners: DataChangeListener[] = []
|
||||
|
||||
constructor(element: []) {
|
||||
this.dataArray = element
|
||||
}
|
||||
|
||||
public getData(index: number) {
|
||||
return this.dataArray[index]
|
||||
}
|
||||
|
||||
public totalCount(): number {
|
||||
return this.dataArray.length
|
||||
}
|
||||
|
||||
public addData(index: number, data: T[]): void {
|
||||
this.dataArray = this.dataArray.concat(data)
|
||||
this.notifyDataAdd(index)
|
||||
}
|
||||
|
||||
unregisterDataChangeListener(listener: DataChangeListener): void {
|
||||
const pos = this.listeners.indexOf(listener);
|
||||
if (pos >= 0) {
|
||||
this.listeners.splice(pos, 1);
|
||||
}
|
||||
}
|
||||
|
||||
registerDataChangeListener(listener: DataChangeListener): void {
|
||||
if (this.listeners.indexOf(listener) < 0) {
|
||||
this.listeners.push(listener)
|
||||
}
|
||||
}
|
||||
|
||||
notifyDataAdd(index: number): void {
|
||||
this.listeners.forEach((listener: DataChangeListener) => {
|
||||
listener.onDataAdd(index)
|
||||
})
|
||||
}
|
||||
}
|
||||
@Entry
|
||||
@ComponentV2
|
||||
struct Index {
|
||||
@Local hotCommendList:CommonDataSource<string> = new CommonDataSource<string>([])
|
||||
private data:string[] = [
|
||||
"https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/56/v3/8MdhfSsCSMKj4sA6okUWrg/5uBx56tLTUO3RYQl-E5JiQ.jpg",
|
||||
"https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/e2/v3/4zI1Xm_3STmV30aZXWRrKw/6aN7WodDRUiBApgffiLPCg.jpg",
|
||||
"https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/42/v3/2dSQCqERTP2TTPyssOMEbQ/zL1ebnKKQ_ilqTDcwCAkOw.jpg",
|
||||
"https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/78/v3/qQJpAtRGQe2e_VhbGHDgIw/b3zlit99S6GybD3XdNwqJw.jpg",
|
||||
"https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/55/v3/5DZ2LLqYSsK85-shqgLveQ/7ZXcyCWNTvOzQP5FFLBGkg.jpg",
|
||||
"https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/3e/v3/LqRoLI-PRSu9Nqa8KdJ-pQ/dSqskBpSR9eraAMn7NBdqA.jpg",
|
||||
"https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/25/v3/jgB2ekkTRX-3yTYZalnANQ/xff_x9cbSPqb7fbNwgJa7A.jpg",
|
||||
"https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/fb/v3/alXwXLHKSyCAIWt_ydgD2g/BCCuu25TREOitQxM7eYOEw.jpg",
|
||||
"https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/63/v3/qbe6NZkCQyGcITvdWoZBgg/Y-5U1z3GT_yaK8CBD3jkwg.jpg",
|
||||
"https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/16/v3/fm2tO4TsRH6mv_D_nSSd5w/FscLpLwQQ-KuV7oaprFK2Q.jpg",
|
||||
"https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/89/v3/UAUvtPHqRD-GWWANsEC57Q/zcRJCQebQ322Aby4jzmwmQ.jpg",
|
||||
"https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/30/v3/tUUzzx73R4yp8G--lMhuWQ/EBbcu_dLTT-Jj68XAh6mtA.jpg",
|
||||
"https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/76/v3/EyF6z4FISpCHhae38eEexw/OtyAiu-zSSevNQYvUdtVmA.jpg",
|
||||
"https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/37/v3/12rH1yiEQmK9wlOOcy5avQ/RzBXiEBRRqOC7LRkwNj6VA.jpg",
|
||||
"https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/9a/v3/TpRN4AIzRoyUXIqWdKoE0g/ShOnD_tfS46HDbpSWhbCkQ.jpg",
|
||||
"https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/03/v3/H3X17s8eTdS2w56JgbB5jQ/a45sT-j8Sbe8sSQXTzeYvQ.jpg",
|
||||
"https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/10/v3/qaEzwkU0QeKb1yehnP2Xig/q7fxAlgMQKup-HUBayRLGQ.jpg",
|
||||
"https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/96/v3/rMJJoAflTDSWa1z2pHs2wg/8dOqD0GlQBOCL5AvQok9FQ.jpg",
|
||||
"https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/ed/v3/KMO4D6D2QGuVOCLX4AhOFA/ef51xAaLQuK7BsnuD9abog.jpg",
|
||||
"https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/d9/v3/FSZH0aTdSqWxeAaxoPvi0g/RqxPxUCXQFiTMBfKTF9kkw.jpg",
|
||||
"https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
|
||||
'https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/bf/v3/lSjrRwFcS-ez6jp1ALSQFg/0n7R7XinSPyrYLqDu_1dfw.jpg',
|
||||
'https://img-blog.csdn.net/20140514114029140',
|
||||
'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
|
||||
]
|
||||
aboutToAppear(): void {
|
||||
MyStorage.getInstance().WeLink_Mob_fontSize_multiple = 1
|
||||
}
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
Button("bigger").onClick(()=>{
|
||||
MyStorage.getInstance().WeLink_Mob_fontSize_multiple = 1.6
|
||||
})
|
||||
Button("small").onClick(()=>{
|
||||
MyStorage.getInstance().WeLink_Mob_fontSize_multiple = 0.8
|
||||
})
|
||||
List(){
|
||||
// LazyForEach(this.hotCommendList,(item:string)=>{
|
||||
// ListItem(){
|
||||
// ReuseImage({
|
||||
// userInfo:item
|
||||
// }).width("100%").height("100%").backgroundColor(Color.Yellow)
|
||||
// }.width(200).height(200).margin({bottom:5})
|
||||
// })
|
||||
Repeat(this.data)
|
||||
.each((repeatItem)=>{
|
||||
ListItem(){
|
||||
ReuseImage({
|
||||
userInfo:repeatItem.item
|
||||
}).width("100%").height("100%").backgroundColor(Color.Yellow)
|
||||
}.width(200).height(200).margin({bottom:5}).key("reuse")
|
||||
})
|
||||
.key(item => item+"reuse")
|
||||
.virtualScroll()
|
||||
.template("1",(repeatItem)=>{
|
||||
ListItem(){
|
||||
ReuseImage({
|
||||
userInfo:repeatItem.item
|
||||
}).width("100%").height("100%").backgroundColor(Color.Yellow)
|
||||
}.width(200).height(200).margin({bottom:5}).key("reuse")
|
||||
})
|
||||
}
|
||||
// .cachedCount(20)
|
||||
.width("100%")
|
||||
.height("100%")
|
||||
.backgroundColor(0xFAEEE0)
|
||||
}.width('100%').height("100%")
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// @Reusable
|
||||
@ComponentV2
|
||||
struct ReuseImage {
|
||||
@Param userInfo:string = ""
|
||||
// aboutToReuse(params: ESObject): void {
|
||||
// this.userInfo = params.userInfo
|
||||
// }
|
||||
|
||||
build() {
|
||||
Column(){
|
||||
UserAvatar({
|
||||
userInfo:this.userInfo
|
||||
})
|
||||
}.width("100%").height("100%")
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeOption,ImageKnifeComponent} from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct BasicTestFeatureAbilityPage {
|
||||
@Watch("watchPathChange") @State filePath: string = "查看featureAbility路径";
|
||||
|
||||
watchPathChange() {
|
||||
console.log("watchPathChange")
|
||||
}
|
||||
urls:string[]=[
|
||||
"http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
|
||||
"http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg",
|
||||
"http://h.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5f2c2a9e953da81cb39db3d1d.jpg",
|
||||
"http://g.hiphotos.baidu.com/image/pic/item/55e736d12f2eb938d5277fd5d0628535e5dd6f4a.jpg",
|
||||
"http://e.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f7e41f5cfe760e0cf3d6cad6ee.jpg",
|
||||
"http://b.hiphotos.baidu.com/image/pic/item/9d82d158ccbf6c81b94575cfb93eb13533fa40a2.jpg",
|
||||
"http://e.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31c1badd5a685d6277f9e2ff81e.jpg",
|
||||
"http://g.hiphotos.baidu.com/image/pic/item/0d338744ebf81a4c87a3add4d52a6059252da61e.jpg",
|
||||
"http://a.hiphotos.baidu.com/image/pic/item/f2deb48f8c5494ee5080c8142ff5e0fe99257e19.jpg",
|
||||
"http://f.hiphotos.baidu.com/image/pic/item/4034970a304e251f503521f5a586c9177e3e53f9.jpg",
|
||||
"http://b.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fbb3586c0168224f4a20a4dd7e.jpg",
|
||||
"http://img2.xkhouse.com/bbs/hfhouse/data/attachment/forum/corebbs/2009-11/2009113011534566298.jpg",
|
||||
"http://a.hiphotos.baidu.com/image/pic/item/e824b899a9014c087eb617650e7b02087af4f464.jpg",
|
||||
"http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg",
|
||||
"http://d.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f119945cbe2fe9925bc317d2a.jpg",
|
||||
"http://h.hiphotos.baidu.com/image/pic/item/902397dda144ad340668b847d4a20cf430ad851e.jpg",
|
||||
"http://b.hiphotos.baidu.com/image/pic/item/359b033b5bb5c9ea5c0e3c23d139b6003bf3b374.jpg",
|
||||
"http://a.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a292d2472199d25bc315d607c7c.jpg",
|
||||
"http://b.hiphotos.baidu.com/image/pic/item/e824b899a9014c08878b2c4c0e7b02087af4f4a3.jpg",
|
||||
"http://g.hiphotos.baidu.com/image/pic/item/6d81800a19d8bc3e770bd00d868ba61ea9d345f2.jpg",
|
||||
]
|
||||
|
||||
@State options:Array<ImageKnifeOption> = new Array
|
||||
|
||||
aboutToAppear(){
|
||||
this.options = this.urls.map<ImageKnifeOption>((url:string)=>{
|
||||
return {
|
||||
loadSrc:url
|
||||
}
|
||||
})
|
||||
console.log('this.options length ='+this.options.length)
|
||||
}
|
||||
|
||||
build() {
|
||||
Stack({ alignContent: Alignment.TopStart }) {
|
||||
Column() {
|
||||
List({ space: 20, initialIndex: 0 }) {
|
||||
ForEach(this.options, (item:ImageKnifeOption) => {
|
||||
ListItem() {
|
||||
ImageKnifeComponent({imageKnifeOption:item}).width(300).height(300)
|
||||
}
|
||||
}, (item:ImageKnifeOption )=> item.loadSrc as string)
|
||||
}
|
||||
.listDirection(Axis.Vertical) // 排列方向
|
||||
.divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
|
||||
.edgeEffect(EdgeEffect.None) // 滑动到边缘无效果
|
||||
.chainAnimation(false) // 联动特效关闭
|
||||
.onScrollIndex((firstIndex: number, lastIndex: number) => {
|
||||
console.info('first' + firstIndex)
|
||||
console.info('last' + lastIndex)
|
||||
})
|
||||
|
||||
}.width('100%')
|
||||
|
||||
}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,161 @@
|
|||
/*
|
||||
* 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)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import featureAbility from '@ohos.ability.featureAbility';
|
||||
import { FileUtils } from '@ohos/libraryimageknife'
|
||||
import { FileTypeUtil } from '@ohos/libraryimageknife'
|
||||
import resourceManager from '@ohos.resourceManager';
|
||||
import { Base64 } from '@ohos/libraryimageknife'
|
||||
import { ParseImageUtil } from '@ohos/libraryimageknife'
|
||||
import { ImageKnifeGlobal } from '@ohos/libraryimageknife'
|
||||
import { BusinessError } from '@ohos.base'
|
||||
import common from '@ohos.app.ability.common';
|
||||
@Entry
|
||||
@Component
|
||||
struct BasicTestMediaImage {
|
||||
@State imagePixelMap?: PixelMap = undefined;
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Button('本地资源jpg')
|
||||
.onClick(() => {
|
||||
((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).resourceManager as resourceManager.ResourceManager)
|
||||
.getMediaContent($r('app.media.jpgSample').id)
|
||||
.then(data => {
|
||||
let arrayBuffer = this.typedArrayToBuffer(data);
|
||||
let parseImageUtil = new ParseImageUtil();
|
||||
parseImageUtil.parseImage(arrayBuffer, (pxielmap) => {
|
||||
this.imagePixelMap = pxielmap;
|
||||
}, (err:BusinessError|string|undefined) => {
|
||||
})
|
||||
})
|
||||
.catch((err:BusinessError) => {
|
||||
console.log('basicTestMediaImage - 本地加载资源err' + JSON.stringify(err));
|
||||
})
|
||||
}).margin({ left: 15 }).backgroundColor(Color.Blue)
|
||||
Button('本地资源png')
|
||||
.onClick(() => {
|
||||
((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).resourceManager as resourceManager.ResourceManager)
|
||||
.getMediaContent($r('app.media.pngSample').id)
|
||||
.then(data => {
|
||||
let arrayBuffer = this.typedArrayToBuffer(data);
|
||||
let parseImageUtil = new ParseImageUtil();
|
||||
parseImageUtil.parseImage(arrayBuffer, (pxielmap) => {
|
||||
this.imagePixelMap = pxielmap;
|
||||
},(err:BusinessError|string|undefined) => {
|
||||
})
|
||||
})
|
||||
.catch((err:BusinessError) => {
|
||||
console.log('basicTestMediaImage - 本地加载资源err' + JSON.stringify(err));
|
||||
})
|
||||
}).margin({ left: 15 }).backgroundColor(Color.Blue)
|
||||
Button('本地资源bmp')
|
||||
.onClick(() => {
|
||||
((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).resourceManager as resourceManager.ResourceManager)
|
||||
.getMediaContent($r('app.media.bmpSample').id)
|
||||
.then(data => {
|
||||
let arrayBuffer = this.typedArrayToBuffer(data);
|
||||
let parseImageUtil = new ParseImageUtil();
|
||||
parseImageUtil.parseImage(arrayBuffer, (pxielmap) => {
|
||||
this.imagePixelMap = pxielmap;
|
||||
}, (err:BusinessError|string|undefined) => {
|
||||
})
|
||||
})
|
||||
.catch((err:BusinessError) => {
|
||||
console.log('basicTestMediaImage - 本地加载资源err' + JSON.stringify(err));
|
||||
})
|
||||
}).margin({ left: 15 }).backgroundColor(Color.Blue)
|
||||
Button('本地资源webp')
|
||||
.onClick(() => {
|
||||
((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).resourceManager as resourceManager.ResourceManager)
|
||||
.getMediaContent($r('app.media.jpgSample').id)
|
||||
.then(data => {
|
||||
let arrayBuffer = this.typedArrayToBuffer(data);
|
||||
let parseImageUtil = new ParseImageUtil();
|
||||
parseImageUtil.parseImage(arrayBuffer, (pxielmap) => {
|
||||
this.imagePixelMap = pxielmap;
|
||||
}, (err:BusinessError|string|undefined) => {
|
||||
})
|
||||
})
|
||||
.catch((err:BusinessError) => {
|
||||
console.log('basicTestMediaImage - 本地加载资源err' + JSON.stringify(err));
|
||||
})
|
||||
}).margin({ left: 15 }).backgroundColor(Color.Blue)
|
||||
Button('本地资源gif')
|
||||
.onClick(() => {
|
||||
((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).resourceManager as resourceManager.ResourceManager)
|
||||
.getMediaContent($r('app.media.gifSample').id)
|
||||
.then(data => {
|
||||
let arrayBuffer = this.typedArrayToBuffer(data);
|
||||
let parseImageUtil = new ParseImageUtil();
|
||||
parseImageUtil.parseImage(arrayBuffer, (pxielmap) => {
|
||||
this.imagePixelMap = pxielmap;
|
||||
}, (err:BusinessError|string|undefined) => {
|
||||
})
|
||||
})
|
||||
.catch((err:BusinessError) => {
|
||||
console.log('basicTestMediaImage - 本地加载资源err' + JSON.stringify(err));
|
||||
})
|
||||
}).margin({ left: 15 }).backgroundColor(Color.Blue)
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
Image(this.imagePixelMap)
|
||||
.width(300)
|
||||
.height(300)
|
||||
.backgroundColor(Color.Pink)
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
typedArrayToBuffer(array: Uint8Array): ArrayBuffer {
|
||||
return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import featureAbility from '@ohos.ability.featureAbility';
|
||||
import {FileUtils} from '@ohos/libraryimageknife'
|
||||
import {FileTypeUtil} from '@ohos/libraryimageknife'
|
||||
import resourceManager from '@ohos.resourceManager';
|
||||
import {Base64} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeGlobal} from '@ohos/libraryimageknife'
|
||||
import { BusinessError } from '@ohos.base'
|
||||
import common from '@ohos.app.ability.common';
|
||||
@Entry
|
||||
@Component
|
||||
struct BasicTestResourceManagerPage {
|
||||
@State fileTypeStr: string = '解析后图片类型';
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Text(this.fileTypeStr).fontSize(20)
|
||||
.width(300).height(200).backgroundColor(Color.Pink)
|
||||
Button('getMedia解析一张jpg图片')
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).resourceManager as resourceManager.ResourceManager)
|
||||
.getMediaContent($r('app.media.jpgSample')
|
||||
.id)
|
||||
.then(data => {
|
||||
console.log('basicTestFileIOPage - 本地加载资源 解析后数据data = ' + data)
|
||||
let arrayBuffer = this.typedArrayToBuffer(data);
|
||||
let filetypeUtil = new FileTypeUtil();
|
||||
let fileType = filetypeUtil.getFileType(arrayBuffer);
|
||||
if(fileType != null) {
|
||||
this.fileTypeStr = fileType;
|
||||
}
|
||||
})
|
||||
.catch((err:BusinessError) => {
|
||||
console.log('basicTestFileIOPage - 本地加载资源err' + JSON.stringify(err));
|
||||
})
|
||||
})
|
||||
Button('getMediaBase64解析一张png图片')
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).resourceManager as resourceManager.ResourceManager)
|
||||
.getMediaContentBase64($r('app.media.pngSample')
|
||||
.id)
|
||||
.then(data => {
|
||||
console.log('ParseResClientBase64 - 本地加载资源 解析后数据data')
|
||||
let matchReg = ';base64,';
|
||||
let firstIndex = data.indexOf(matchReg);
|
||||
data = data.substring(firstIndex + matchReg.length, data.length)
|
||||
console.log('ParseResClientBase64 - 本地加载资源 解析后数据剔除非必要数据后data= ' + data)
|
||||
let arrayBuffer = Base64.getInstance()
|
||||
.decode(data);
|
||||
let filetypeUtil = new FileTypeUtil();
|
||||
let fileType = filetypeUtil.getFileType(arrayBuffer);
|
||||
if(fileType != null) {
|
||||
this.fileTypeStr = fileType;
|
||||
}
|
||||
})
|
||||
.catch((err:BusinessError) => {
|
||||
console.log('basicTestFileIOPage - 本地加载资源err' + JSON.stringify(err));
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
typedArrayToBuffer(array: Uint8Array): ArrayBuffer {
|
||||
return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,152 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnife} from '@ohos/libraryimageknife'
|
||||
import {OnRenameListener} from '@ohos/libraryimageknife'
|
||||
import {OnCompressListener} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeGlobal} from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct CompressPage {
|
||||
@State mRPixelMap?: PixelMap = undefined;
|
||||
@State mFPixelMap?: PixelMap = undefined;
|
||||
@State mResultText: string= "压缩回调结果"
|
||||
@State mResultPath: string= "压缩路径:"
|
||||
@State mAsyncPath: string= ""
|
||||
@State mAsyncPathHint: string= ""
|
||||
|
||||
build() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
|
||||
|
||||
Column() {
|
||||
Column() {
|
||||
Text("Resource image compress").fontColor(Color.Gray).fontSize(16);
|
||||
Button() {
|
||||
Text("同步压缩").fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(120)
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
this.compressAsyncRecource();
|
||||
});
|
||||
Scroll(){
|
||||
Text(this.mAsyncPathHint).fontSize(13)
|
||||
}
|
||||
.height(55)
|
||||
.width(350)
|
||||
|
||||
|
||||
Image(this.mAsyncPath)
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 })
|
||||
.backgroundColor(Color.Pink)
|
||||
|
||||
Button() {
|
||||
Text($r("app.string.resource_image_compress")).fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(120)
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
this.cropressRecource();
|
||||
});
|
||||
Image(this.mRPixelMap == undefined?'': this.mRPixelMap!)
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 })
|
||||
Text(this.mResultText).fontColor(Color.Gray).fontSize(16);
|
||||
Text(this.mResultPath).fontColor(Color.Gray).fontSize(16);
|
||||
}.margin({ top: 10 });
|
||||
|
||||
Column() {
|
||||
Text("file image compress").fontColor(Color.Gray).fontSize(16);
|
||||
Button() {
|
||||
Text($r("app.string.file_image_compress")).fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(120)
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
});
|
||||
Image(this.mFPixelMap == undefined ?'':this.mFPixelMap!)
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 });
|
||||
}.margin({ top: 10 }).visibility(Visibility.Hidden);
|
||||
}.margin({ bottom: 30 });
|
||||
}.width('100%').height('100%');
|
||||
}
|
||||
private compressAsyncRecource() {
|
||||
let data = new Array<Resource>();
|
||||
data.push($r('app.media.jpgSample'))
|
||||
|
||||
let imageKnife:ImageKnife|undefined = ImageKnifeGlobal.getInstance().getImageKnife()
|
||||
if(imageKnife!=undefined) {
|
||||
imageKnife
|
||||
.compressBuilder()
|
||||
.load(data)
|
||||
.ignoreBy(100)
|
||||
.get()
|
||||
.then((path: string) => {
|
||||
this.mAsyncPathHint = path;
|
||||
this.mAsyncPath = 'file://' + path;
|
||||
});
|
||||
}
|
||||
console.info("asasd start compress end")
|
||||
}
|
||||
private cropressRecource() {
|
||||
let data = new Array<Resource>();
|
||||
data.push($r('app.media.jpgSample'))
|
||||
let rename: OnRenameListener = {
|
||||
reName() {
|
||||
return "test_1.jpg";
|
||||
}
|
||||
}
|
||||
|
||||
let listener: OnCompressListener = {
|
||||
start:()=>{
|
||||
this.mResultText = "start"
|
||||
console.info("asasd start")
|
||||
},
|
||||
onSuccess:(p: PixelMap | null | undefined, path: string)=> {
|
||||
if(p!=null && p!=undefined) {
|
||||
let pack = p;
|
||||
this.mRPixelMap = pack as PixelMap;
|
||||
console.info("asasd success path:" + this.mRPixelMap)
|
||||
this.mResultText = "success";
|
||||
this.mResultPath = path;
|
||||
}
|
||||
},
|
||||
onError:(s: string)=>{
|
||||
console.info("asasd onError:" + s)
|
||||
this.mResultText = "fail";
|
||||
}
|
||||
}
|
||||
console.info("asasd start compress")
|
||||
let imageKnife:ImageKnife|undefined = ImageKnifeGlobal.getInstance().getImageKnife()
|
||||
if(imageKnife != undefined) {
|
||||
imageKnife
|
||||
.compressBuilder()
|
||||
.load(data)
|
||||
.ignoreBy(100)
|
||||
.setRenameListener(rename)
|
||||
.setCompressListener(listener)
|
||||
.launch();
|
||||
}
|
||||
console.info("asasd start compress end")
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { CropImage } from '@ohos/libraryimageknife'
|
||||
import { CropOptions } from '@ohos/libraryimageknife'
|
||||
import { Crop } from '@ohos/libraryimageknife'
|
||||
import { RecourseProvider } from '@ohos/libraryimageknife'
|
||||
import { PixelMapCrop,Options } from '@ohos/libraryimageknife'
|
||||
import { CropCallback } from '@ohos/libraryimageknife'
|
||||
import { FileUtils } from '@ohos/libraryimageknife'
|
||||
import { ImageKnifeGlobal } from '@ohos/libraryimageknife'
|
||||
import { BusinessError } from '@ohos.base'
|
||||
import resourceManager from '@ohos.resourceManager';
|
||||
import common from '@ohos.app.ability.common'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
export struct CropImagePage2 {
|
||||
@State options1: Options = new Options();
|
||||
@State cropTap: boolean = false;
|
||||
|
||||
@State width1: number = 0;
|
||||
@State height1: number = 0;
|
||||
@State _rotate: number = 0;
|
||||
@State _scale: number = 1;
|
||||
private _resource: Resource = $r('app.media.bmpSample');
|
||||
private settings: RenderingContextSettings = new RenderingContextSettings(true)
|
||||
private canvasContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
|
||||
build() {
|
||||
Scroll() {
|
||||
Column() {
|
||||
Button('点击解析图片')
|
||||
.onClick(() => {
|
||||
((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).resourceManager as resourceManager.ResourceManager)
|
||||
.getMediaContent($r('app.media.bmpSample').id)
|
||||
.then((data:Uint8Array) => {
|
||||
let arrayBuffer = FileUtils.getInstance().uint8ArrayToBuffer(data);
|
||||
let optionx = new Options();
|
||||
optionx.setWidth(800)
|
||||
.setHeight(800)
|
||||
.setCropFunction((err:BusinessError|string, pixelmap:PixelMap|null, sx:number, sy:number) => {
|
||||
console.log('PMC setCropFunction callback')
|
||||
if (err) {
|
||||
console.error('PMC crop err =' + err)
|
||||
} else {
|
||||
this.width1 = sx * px2vp(1);
|
||||
this.height1 = sy * px2vp(1);
|
||||
if(pixelmap != null) {
|
||||
this.canvasContext.drawImage(pixelmap, 0, 0, this.width1, this.height1)
|
||||
}
|
||||
}
|
||||
})
|
||||
optionx.loadBuffer(arrayBuffer, () => {
|
||||
this.options1 = optionx;
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
|
||||
PixelMapCrop({ options: $options1, cropTap: this.cropTap })
|
||||
|
||||
Button('点击裁剪图片')
|
||||
.onClick(() => {
|
||||
this.cropTap = !this.cropTap;
|
||||
})
|
||||
|
||||
|
||||
Canvas(this.canvasContext)
|
||||
.width(this.width1)
|
||||
.height(this.height1)
|
||||
.rotate({
|
||||
z: 1,
|
||||
centerX: this.width1 / 2,
|
||||
centerY: this.height1 / 2,
|
||||
angle: this._rotate
|
||||
})
|
||||
.scale({ x: this._scale, y: this._scale, z: 1.0 })
|
||||
.gesture(GestureGroup(GestureMode.Parallel,
|
||||
RotationGesture({ fingers: 2 }).onActionUpdate((event?: GestureEvent) => {
|
||||
if(event != undefined) {
|
||||
this._rotate = event.angle;
|
||||
}
|
||||
}), PinchGesture({ fingers: 2 }).onActionUpdate((event?: GestureEvent) => {
|
||||
if(event != undefined) {
|
||||
this._scale = event.scale;
|
||||
}
|
||||
})))
|
||||
}
|
||||
.backgroundColor(Color.Brown)
|
||||
.width('100%')
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -18,23 +18,23 @@ import { photoAccessHelper } from '@kit.MediaLibraryKit';
|
|||
|
||||
|
||||
@Entry
|
||||
@ComponentV2
|
||||
@Component
|
||||
struct DataShareUriLoadPage {
|
||||
@Local imageKnifeOption1: ImageKnifeOption =
|
||||
new ImageKnifeOption({
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.icon'),
|
||||
|
||||
placeholderSrc: $r('app.media.loading'),
|
||||
errorholderSrc: $r('app.media.failed')
|
||||
});
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Text($r('app.string.Retrieve_media_gallery')).fontSize(15)
|
||||
Text("获取媒体图库的uri用ImageKnife展示").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button($r('app.string.Click_load_Uri'))
|
||||
Button("点击加载Uri并展示")
|
||||
.onClick(async () => {
|
||||
let photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
|
||||
photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
|
||||
|
|
@ -43,10 +43,10 @@ struct DataShareUriLoadPage {
|
|||
let photoViewPicker = new photoAccessHelper.PhotoViewPicker();
|
||||
let photoSelectResult: photoAccessHelper.PhotoSelectResult = await photoViewPicker.select(photoSelectOptions);
|
||||
uris = photoSelectResult.photoUris;
|
||||
this.imageKnifeOption1 = new ImageKnifeOption({
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: uris[0],
|
||||
placeholderSrc:$r('app.media.loading')
|
||||
})
|
||||
placeholderSrc:$r('app.media.icon_loading')
|
||||
}
|
||||
}).margin({ top: 5, left: 3 })
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
|
||||
}.width('100%').backgroundColor(Color.Pink)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,366 @@
|
|||
/*
|
||||
* 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 {
|
||||
FitCenter,
|
||||
ImageKnifeComponent,
|
||||
ImageKnifeData,
|
||||
ImageKnifeGlobal,
|
||||
ImageKnifeOption,
|
||||
RequestOption
|
||||
} from '@ohos/libraryimageknife'
|
||||
import { BusinessError } from '@ohos.base'
|
||||
import { fitter, sampleNone } from '@ohos/imageknife';
|
||||
|
||||
let pngUrl = $r('app.media.pngSample');
|
||||
let jpgUrl = $r('app.media.jpgSample');
|
||||
let svgUrl = $r('app.media.svgSample');
|
||||
let gifUrl = $r('app.media.gifSample');
|
||||
let bmpUrl = $r('app.media.bmpSample');
|
||||
let webpUrl = $r('app.media.webpSample');
|
||||
let imageKnife = ImageKnifeGlobal.getInstance().getImageKnife();
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct Index {
|
||||
@State originalMSquarePixelMap?: PixelMap = undefined;
|
||||
@State mSquarePixelMap?: PixelMap = undefined;
|
||||
@State h: number = 0
|
||||
@State w: number = 0
|
||||
@State originalBytesNumber: number = 0
|
||||
@State bytesNumber: number = 0
|
||||
@State url: string = ''
|
||||
@State network: Boolean = false
|
||||
@State imageKnifeOption: ImageKnifeOption = {
|
||||
loadSrc: $r('app.media.icon'),
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
}
|
||||
|
||||
transformSquare1(mUrl: string|Resource|PixelMap) {
|
||||
let imageKnifeOption: RequestOption = new RequestOption();
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener({
|
||||
callback: (err: BusinessError | string, data: ImageKnifeData) => {
|
||||
this.originalMSquarePixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
|
||||
this.originalBytesNumber = (data.drawPixelMap?.imagePixelMap as PixelMap).getPixelBytesNumber()
|
||||
return false;
|
||||
}
|
||||
})
|
||||
imageKnife?.call(imageKnifeOption);
|
||||
}
|
||||
|
||||
transformSquare2(mUrl: string|Resource|PixelMap) {
|
||||
let imageKnifeOption: RequestOption = new RequestOption();
|
||||
let a = new fitter()
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener({
|
||||
callback: (err: BusinessError | string, data: ImageKnifeData) => {
|
||||
this.mSquarePixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
|
||||
this.bytesNumber = (data.drawPixelMap?.imagePixelMap as PixelMap).getPixelBytesNumber()
|
||||
return false;
|
||||
}
|
||||
})
|
||||
.setImageViewSize({ width: this.w, height: this.h })
|
||||
.downsampleOf(a)
|
||||
imageKnife?.call(imageKnifeOption);
|
||||
}
|
||||
|
||||
@Builder
|
||||
TextInputSample() {
|
||||
Flex() {
|
||||
TextInput({ placeholder: '输入宽' })
|
||||
.onChange((enterKeyType) => {
|
||||
this.w = Number(enterKeyType)
|
||||
})
|
||||
TextInput({ placeholder: '输入高' })
|
||||
.onChange((enterKeyType) => {
|
||||
this.h = Number(enterKeyType)
|
||||
})
|
||||
}.padding(20)
|
||||
}
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Column() {
|
||||
Row() {
|
||||
Button('切换网络图片')
|
||||
.onClick(() => {
|
||||
this.network = !this.network
|
||||
})
|
||||
Text('输入网络图片url')
|
||||
TextInput({ placeholder: '输入url' })
|
||||
.onChange((urls) => {
|
||||
this.url = urls
|
||||
})
|
||||
}
|
||||
|
||||
if (this.network) {
|
||||
Column() {
|
||||
Text('原图')
|
||||
Flex() {
|
||||
Button('png')
|
||||
.onClick(() => {
|
||||
this.transformSquare1(this.url);
|
||||
|
||||
});
|
||||
Button('svg')
|
||||
.onClick(() => {
|
||||
this.transformSquare1(this.url);
|
||||
|
||||
});
|
||||
Button('bmp')
|
||||
.onClick(() => {
|
||||
this.transformSquare1(this.url);
|
||||
|
||||
});
|
||||
Button('jpg')
|
||||
.onClick(() => {
|
||||
this.transformSquare1(this.url);
|
||||
|
||||
});
|
||||
// Button('gif')
|
||||
// .onClick(() => {
|
||||
// this.transformSquare1(this.url);
|
||||
//
|
||||
// });
|
||||
// Button('webp')
|
||||
// .onClick(() => {
|
||||
// this.transformSquare1(this.url);
|
||||
//
|
||||
// });
|
||||
}.margin({ top: 20, bottom: 20 })
|
||||
|
||||
Text("原图字节大小：" + this.originalBytesNumber)
|
||||
Column() {
|
||||
if (this.originalMSquarePixelMap) {
|
||||
Image(this.originalMSquarePixelMap == undefined ? '' : this.originalMSquarePixelMap!)
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 })
|
||||
}
|
||||
Text('component用法')
|
||||
|
||||
}.height(300).width('100%').backgroundColor(Color.Pink)
|
||||
|
||||
Text('降采样图片')
|
||||
Flex() {
|
||||
Button('png')
|
||||
.onClick(() => {
|
||||
this.transformSquare2(this.url);
|
||||
this.imageKnifeOption = {
|
||||
loadSrc: pngUrl,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
downsampling: new fitter()
|
||||
}
|
||||
});
|
||||
Button('svg')
|
||||
.onClick(() => {
|
||||
this.transformSquare2(this.url);
|
||||
this.imageKnifeOption = {
|
||||
loadSrc: svgUrl,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
downsampling: new fitter()
|
||||
}
|
||||
|
||||
});
|
||||
Button('bmp')
|
||||
.onClick(() => {
|
||||
this.transformSquare2(this.url);
|
||||
this.imageKnifeOption = {
|
||||
loadSrc: bmpUrl,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
downsampling: new fitter()
|
||||
}
|
||||
});
|
||||
Button('jpg')
|
||||
.onClick(() => {
|
||||
this.transformSquare2(this.url);
|
||||
this.imageKnifeOption = {
|
||||
loadSrc: jpgUrl,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
downsampling: new fitter()
|
||||
}
|
||||
});
|
||||
// Button('gif')
|
||||
// .onClick(() => {
|
||||
// // this.transformSquare2(this.url);
|
||||
// this.imageKnifeOption = {
|
||||
// loadSrc: gifUrl,
|
||||
// placeholderSrc: $r('app.media.icon_loading'),
|
||||
// errorholderSrc: $r('app.media.icon_failed'),
|
||||
// downsampling: new fitter()
|
||||
// }
|
||||
// });
|
||||
// Button('webp')
|
||||
// .onClick(() => {
|
||||
// // this.transformSquare2(this.url);
|
||||
// this.imageKnifeOption = {
|
||||
// loadSrc: webpUrl,
|
||||
// placeholderSrc: $r('app.media.icon_loading'),
|
||||
// errorholderSrc: $r('app.media.icon_failed'),
|
||||
// downsampling: new fitter()
|
||||
// }
|
||||
// });
|
||||
}.margin({ top: 20, bottom: 20 })
|
||||
|
||||
Text("降采样字节大小:" + this.bytesNumber)
|
||||
this.TextInputSample()
|
||||
Column() {
|
||||
if (this.mSquarePixelMap) {
|
||||
Image(this.mSquarePixelMap == undefined ? '' : this.mSquarePixelMap!)
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 })
|
||||
}
|
||||
Text('component用法')
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(200).height(200)
|
||||
}.height(300).width('100%').backgroundColor(Color.Pink)
|
||||
}.backgroundColor(Color.Orange)
|
||||
} else {
|
||||
Column() {
|
||||
Text('原图')
|
||||
Flex() {
|
||||
Button('png')
|
||||
.onClick(() => {
|
||||
this.transformSquare1(pngUrl);
|
||||
|
||||
});
|
||||
Button('svg')
|
||||
.onClick(() => {
|
||||
this.transformSquare1(svgUrl);
|
||||
|
||||
});
|
||||
Button('bmp')
|
||||
.onClick(() => {
|
||||
this.transformSquare1(bmpUrl);
|
||||
|
||||
});
|
||||
Button('jpg')
|
||||
.onClick(() => {
|
||||
this.transformSquare1(jpgUrl);
|
||||
|
||||
});
|
||||
// Button('gif')
|
||||
// .onClick(() => {
|
||||
// this.transformSquare1(gifUrl);
|
||||
//
|
||||
// });
|
||||
// Button('webp')
|
||||
// .onClick(() => {
|
||||
// this.transformSquare1(webpUrl);
|
||||
//
|
||||
// });
|
||||
}.margin({ top: 20, bottom: 20 })
|
||||
|
||||
Text("原图字节大小：" + this.originalBytesNumber)
|
||||
Column() {
|
||||
if (this.originalMSquarePixelMap) {
|
||||
Image(this.originalMSquarePixelMap == undefined ? '' : this.originalMSquarePixelMap!)
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 })
|
||||
}
|
||||
Text('component用法')
|
||||
|
||||
}.height(300).width('100%').backgroundColor(Color.Pink)
|
||||
|
||||
Text('降采样图片')
|
||||
Flex() {
|
||||
Button('png')
|
||||
.onClick(() => {
|
||||
this.transformSquare2(pngUrl);
|
||||
this.imageKnifeOption = {
|
||||
loadSrc: pngUrl,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
}
|
||||
});
|
||||
Button('svg')
|
||||
.onClick(() => {
|
||||
this.transformSquare2(svgUrl);
|
||||
this.imageKnifeOption = {
|
||||
loadSrc: svgUrl,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
}
|
||||
|
||||
});
|
||||
Button('bmp')
|
||||
.onClick(() => {
|
||||
this.transformSquare2(bmpUrl);
|
||||
this.imageKnifeOption = {
|
||||
loadSrc: bmpUrl,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
}
|
||||
});
|
||||
Button('jpg')
|
||||
.onClick(() => {
|
||||
this.transformSquare2(jpgUrl);
|
||||
this.imageKnifeOption = {
|
||||
loadSrc: jpgUrl,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
}
|
||||
});
|
||||
// Button('gif')
|
||||
// .onClick(() => {
|
||||
// // this.transformSquare2(gifUrl);
|
||||
// this.imageKnifeOption = {
|
||||
// loadSrc: gifUrl,
|
||||
// placeholderSrc: $r('app.media.icon_loading'),
|
||||
// errorholderSrc: $r('app.media.icon_failed'),
|
||||
// }
|
||||
// });
|
||||
// Button('webp')
|
||||
// .onClick(() => {
|
||||
// // this.transformSquare2(webpUrl);
|
||||
// this.imageKnifeOption = {
|
||||
// loadSrc: webpUrl,
|
||||
// placeholderSrc: $r('app.media.icon_loading'),
|
||||
// errorholderSrc: $r('app.media.icon_failed'),
|
||||
// }
|
||||
// });
|
||||
}.margin({ top: 20, bottom: 20 })
|
||||
|
||||
Text("降采样字节大小:" + this.bytesNumber)
|
||||
this.TextInputSample()
|
||||
Column() {
|
||||
if (this.mSquarePixelMap) {
|
||||
Image(this.mSquarePixelMap == undefined ? '' : this.mSquarePixelMap!)
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 })
|
||||
}
|
||||
Text('component用法')
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(200).height(200)
|
||||
}.height("100%").width('100%').backgroundColor(Color.Pink)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
/*
|
||||
* Copyright (C) 2022 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import router from '@system.router';
|
||||
import {
|
||||
ImageKnifeComponent,
|
||||
ImageKnifeOption,
|
||||
ImageKnifeDrawFactory,
|
||||
ScaleType
|
||||
} from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct DrawFactoryTestPage {
|
||||
|
||||
types:Array<ScaleType> = [ScaleType.FIT_START,ScaleType.FIT_END,ScaleType.FIT_CENTER,ScaleType.CENTER,ScaleType.CENTER_CROP,ScaleType.FIT_XY,ScaleType.CENTER_INSIDE,ScaleType.NONE]
|
||||
|
||||
|
||||
@State msg:string = `当前ScaleType${this.types[0]}`
|
||||
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc:"https://xximg1.meitudata.com/2LqS1vmqv0.png!thumb-w321-webp75",
|
||||
mainScaleType: this.types[0],
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
drawLifeCycle:ImageKnifeDrawFactory.createOvalLifeCycle(15,'#ff000000')
|
||||
}
|
||||
@State imageKnifeOption2: ImageKnifeOption =
|
||||
{
|
||||
loadSrc:"https://xximg1.meitudata.com/2LqS1vmqv0.png!thumb-w321-webp75",
|
||||
mainScaleType: this.types[0],
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
drawLifeCycle:ImageKnifeDrawFactory.createRoundLifeCycle(10,'#ff000000',30)
|
||||
}
|
||||
|
||||
count:number = 0;
|
||||
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
|
||||
|
||||
Text("用例看护DrawFactory").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button(this.msg)
|
||||
.onClick(() => {
|
||||
this.count++;
|
||||
let index= this.count % this.types.length;
|
||||
this.msg = `当前ScaleType${this.types[index]}`
|
||||
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc:"https://xximg1.meitudata.com/2LqS1vmqv0.png!thumb-w321-webp75",
|
||||
mainScaleType: this.types[index],
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
drawLifeCycle:ImageKnifeDrawFactory.createOvalLifeCycle(15,'#ff000000')
|
||||
}
|
||||
|
||||
this.imageKnifeOption2 = {
|
||||
loadSrc:"https://xximg1.meitudata.com/2LqS1vmqv0.png!thumb-w321-webp75",
|
||||
mainScaleType: this.types[index],
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
drawLifeCycle:ImageKnifeDrawFactory.createRoundLifeCycle(10,'#ff000000',30)
|
||||
}
|
||||
}).margin({ top: 15, bottom:15 })
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width('100%').height(300).backgroundColor(Color.Orange)
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }).width('100%').height(300).backgroundColor(Color.Orange)
|
||||
.margin({ top: 15, bottom:15 })
|
||||
}
|
||||
.width('100%').height('100%').backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}.width('100%')
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeComponent} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeOption} from '@ohos/libraryimageknife'
|
||||
import {RotateImageTransformation} from '@ohos/libraryimageknife'
|
||||
import {RoundedCornersTransformation} from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct FrescoImageTestCasePage {
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
retryholderSrc: $r('app.media.icon_retry'),
|
||||
displayProgress: true,
|
||||
canRetryClick:true
|
||||
};
|
||||
@State ImageKnifeOption: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/0ef60041445edcfd6b38d20e19024b2cd9281dcc3525a4-Vy8fYO_fw658/format/webp",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
retryholderSrc: $r('app.media.icon_retry'),
|
||||
displayProgress: true,
|
||||
canRetryClick:true
|
||||
};
|
||||
@State imageKnifeOption3: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
retryholderSrc: $r('app.media.icon_retry'),
|
||||
displayProgress: true,
|
||||
canRetryClick:true
|
||||
};
|
||||
@State imageKnifeOption4: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/testRetryxxxx",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
retryholderSrc: $r('app.media.icon_retry'),
|
||||
displayProgress: true,
|
||||
canRetryClick:true
|
||||
};
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
// ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
|
||||
// ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
|
||||
// ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 })
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 })
|
||||
.width(300)
|
||||
.height(300)
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
/*
|
||||
* Copyright (C) 2023 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { ImageKnifeComponent, ImageKnifeOption, FileUtils,ImageKnifeGlobal } from '@ohos/libraryimageknife'
|
||||
import common from '@ohos.app.ability.common'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct Index {
|
||||
|
||||
|
||||
@State imageOption1:ImageKnifeOption = {
|
||||
loadSrc: $r('app.media.icon'),
|
||||
|
||||
}
|
||||
@State imageOption2:ImageKnifeOption = {
|
||||
loadSrc: $r('app.media.icon'),
|
||||
|
||||
}
|
||||
@State imageOption3:ImageKnifeOption = {
|
||||
loadSrc: $r('app.media.icon'),
|
||||
|
||||
}
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Column() {
|
||||
Button('点击加载网络图片').onClick(()=>{
|
||||
this.imageOption2 = {
|
||||
loadSrc: 'https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB',
|
||||
}
|
||||
})
|
||||
ImageKnifeComponent({imageKnifeOption:this.imageOption2}).width(300).height(300).backgroundColor(Color.Pink)
|
||||
|
||||
Button('点击加载本地文件').onClick(()=>{
|
||||
let ctx:Object|undefined = ImageKnifeGlobal.getInstance().getHapContext();
|
||||
if(ctx != undefined){
|
||||
let path = (ctx as common.UIAbilityContext).filesDir+"/set.jpeg";
|
||||
FileUtils.getInstance().readFilePicAsync(path).then(buffer=>{
|
||||
this.imageOption3 = {
|
||||
loadSrc: path
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
ImageKnifeComponent({imageKnifeOption:this.imageOption3}).width(300).height(300).backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
|
||||
}.width('100%')
|
||||
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,461 @@
|
|||
/*
|
||||
* 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 })
|
||||
Button("下采样加载")
|
||||
.onClick(() => {
|
||||
router.pushUrl({ url: "pages/downsamplingPage" });
|
||||
}).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 })
|
||||
Button("测试gif播放次数")
|
||||
.onClick(() => {
|
||||
router.pushUrl({ url: "pages/testGifPlayTimesPage" });
|
||||
}).margin({ top: 15 })
|
||||
}.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(() => {
|
||||
router.pushUrl({ url: "pages/testVisiblePage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
Button("懒加载复用列表")
|
||||
.onClick(() => {
|
||||
console.log("测试一级内存缓存")
|
||||
router.pushUrl({ url: "pages/testReusePhotoPage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
Button("适配复用场景")
|
||||
.onClick(() => {
|
||||
console.log("测试一级内存缓存")
|
||||
router.pushUrl({ url: "pages/testReuseAblePages" });
|
||||
}).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/transformsPage" });
|
||||
}).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图Image对比")
|
||||
.onClick(() => {
|
||||
router.pushUrl({ url: "pages/TestDurationAndPlayTimesPage" });
|
||||
}).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 })
|
||||
Button("webp测试")
|
||||
.onClick(() => {
|
||||
router.pushUrl({ url: "pages/webpImageTestPage" });
|
||||
}).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 })
|
||||
Button('测试自定义DataFetch属性')
|
||||
.onClick(() => {
|
||||
router.pushUrl({ url: 'pages/testImageKnifeDataFetch' });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
Button('全局header和request的header')
|
||||
.onClick(() => {
|
||||
router.pushUrl({ url: 'pages/testImageKnifeHttpRequestHeader1' });
|
||||
}).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/testImageKnifeCache' });
|
||||
}).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('测试gif暂停播放属性')
|
||||
.onClick(() => {
|
||||
router.pushUrl({ url: 'pages/testStopPlayingGifPage' });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
}.width('100%').height(60).backgroundColor(Color.Pink)
|
||||
|
||||
Text('测试heic图片加载').fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button('测试heic')
|
||||
.onClick(() => {
|
||||
router.pushUrl({ url: 'pages/testImageKnifeHeic' });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
}.width('100%').height(60).backgroundColor(Color.Pink)
|
||||
|
||||
Text('测试string类型占位图').fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button('测试string类型占位图以及后备回调符')
|
||||
.onClick(() => {
|
||||
router.pushUrl({ url: 'pages/testImageKnifeNetPlaceholder' });
|
||||
}).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/testCustomDataFetchClientWithPage' });
|
||||
}).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/testImageKnifeLoadState' });
|
||||
}).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/testImageKnifeRemoveCache' });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
}.width('100%').height(60).backgroundColor(Color.Pink)
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
}
|
||||
|
||||
onBackPress() {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
/*
|
||||
* Copyright (C) 2022 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import router from '@ohos.router';
|
||||
import {
|
||||
ImageKnifeComponent,
|
||||
ImageKnifeOption,
|
||||
ImageKnifeGlobal,
|
||||
ImageKnife,
|
||||
HeaderOptions
|
||||
} from '@ohos/libraryimageknife'
|
||||
|
||||
import { ObjectKey } from '@ohos/libraryimageknife';
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct IndexFunctionDemo {
|
||||
@State headerOptions1: HeaderOptions = {
|
||||
key: "refer",
|
||||
value: "http://1.94.37.200:7070/AntiTheftChain/downloadImage"
|
||||
};
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.icon'),
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
headerOption: [this.headerOptions1]
|
||||
};
|
||||
@State imageKnifeOption2: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.icon'),
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
headerOption: [this.headerOptions1]
|
||||
};
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Text("简单示例1：加载一张本地png图片").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("加载PNG")
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
signature: new ObjectKey('ccccccc')
|
||||
}
|
||||
}).margin({ top: 5, left: 3 })
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
|
||||
}.width('100%').backgroundColor(Color.Pink)
|
||||
|
||||
Text("简单示例2：加载一张网络gif图片").fontSize(15)
|
||||
Text("gif解析在子线程,请在页面构建后创建worker,注入imageknife").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("加载GIF")
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption2 = {
|
||||
loadSrc: 'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658',
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress:true,
|
||||
}
|
||||
}).margin({ top: 5, left: 3 })
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }).width(300).height(300)
|
||||
}.width('100%').backgroundColor(Color.Pink)
|
||||
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("ImageKnife测试目录页面")
|
||||
.onClick(() => {
|
||||
console.log("pages/imageknifeTestCaseIndex 页面跳转")
|
||||
router.pushUrl({ url: "pages/imageknifeTestCaseIndex" });
|
||||
}).margin({ top: 15 })
|
||||
}.width('100%').height(60).backgroundColor(Color.Pink)
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
|
||||
}
|
||||
aboutToDisappear(){
|
||||
|
||||
}
|
||||
|
||||
onBackPress() {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeComponent, ScaleType} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeOption} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeGlobal} from '@ohos/libraryimageknife'
|
||||
import {RotateImageTransformation} from '@ohos/libraryimageknife'
|
||||
import {Material} from './model/Material'
|
||||
import {TestDataSource} from './model/TestDataSource'
|
||||
import {DiskLruCache} from '@ohos/disklrucache'
|
||||
import ArkWorker from '@ohos.worker'
|
||||
import Prompt from '@system.prompt'
|
||||
@Entry
|
||||
@Component
|
||||
struct ManyPhotoShowPage {
|
||||
private data: TestDataSource = new TestDataSource();
|
||||
|
||||
private elementScroller: Scroller = new Scroller()
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
|
||||
List({ space: 20, scroller: this.elementScroller }) {
|
||||
LazyForEach(this.data, (item: Material, index) => {
|
||||
ListItem() {
|
||||
Column() {
|
||||
Stack({ alignContent: Alignment.BottomEnd }) {
|
||||
// 滤镜图片
|
||||
ImageKnifeComponent({ imageKnifeOption: {
|
||||
loadSrc: item.thumbnail,
|
||||
mainScaleType: ScaleType.FIT_XY,
|
||||
} })
|
||||
}
|
||||
.width(56).height(56)
|
||||
//滤镜标题
|
||||
Text(item.name)
|
||||
.fontSize(10)
|
||||
.maxLines(1)
|
||||
.fontColor(Color.White)
|
||||
.textAlign(TextAlign.Center)
|
||||
.layoutWeight(1)
|
||||
.width('100%')
|
||||
.backgroundColor(Color.Orange)
|
||||
}
|
||||
.width(56)
|
||||
.height(72)
|
||||
.clip(true)
|
||||
.borderRadius(4)
|
||||
}
|
||||
}, (item: Material) => item.material_id)
|
||||
}
|
||||
.listDirection(Axis.Horizontal)
|
||||
.width('100%')
|
||||
.height(72)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
/*
|
||||
* Copyright (C) 2023 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
export class BasicDataSource<T> implements IDataSource {
|
||||
private listeners: DataChangeListener[] = [];
|
||||
|
||||
public totalCount(): number {
|
||||
return 0;
|
||||
}
|
||||
|
||||
public getData(index: number):T | undefined {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
registerDataChangeListener(listener: DataChangeListener): void {
|
||||
if (this.listeners.indexOf(listener) < 0) {
|
||||
console.info('add listener');
|
||||
this.listeners.push(listener);
|
||||
}
|
||||
}
|
||||
|
||||
unregisterDataChangeListener(listener: DataChangeListener): void {
|
||||
const pos = this.listeners.indexOf(listener);
|
||||
if (pos >= 0) {
|
||||
console.info('remove listener');
|
||||
this.listeners.splice(pos, 1);
|
||||
}
|
||||
}
|
||||
|
||||
notifyDataReload(): void {
|
||||
this.listeners.forEach(listener => {
|
||||
listener.onDataReloaded();
|
||||
})
|
||||
}
|
||||
|
||||
notifyDataAdd(index: number): void {
|
||||
this.listeners.forEach(listener => {
|
||||
listener.onDataAdd(index);
|
||||
})
|
||||
}
|
||||
|
||||
notifyDataChange(index: number): void {
|
||||
this.listeners.forEach(listener => {
|
||||
listener.onDataChange(index);
|
||||
})
|
||||
}
|
||||
|
||||
notifyDataDelete(index: number): void {
|
||||
this.listeners.forEach(listener => {
|
||||
listener.onDataDelete(index);
|
||||
})
|
||||
}
|
||||
|
||||
notifyDataMove(from: number, to: number): void {
|
||||
this.listeners.forEach(listener => {
|
||||
listener.onDataMove(from, to);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Copyright (C) 2023 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
|
|
@ -7,15 +7,13 @@
|
|||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
export struct IndexPage {
|
||||
build() {
|
||||
}
|
||||
export class Material{
|
||||
material_id: string ='';
|
||||
thumbnail: string = '';
|
||||
name: string ='';
|
||||
}
|
||||
|
|
@ -0,0 +1,590 @@
|
|||
/*
|
||||
* Copyright (C) 2023 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {BasicDataSource} from './BasicDataSource'
|
||||
import { Material } from './Material';
|
||||
export class TestDataSource extends BasicDataSource<Material> {
|
||||
private dataArray: Material[] = [
|
||||
{name:"测试CBC",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/R9aT7lpEEVxawo4.jpeg!thumb-w321-webp75",material_id:"5060118818"},
|
||||
{name:"通用天空1像素测试",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/1V6c63lKLGPlKVo.png!thumb-w321-webp75",material_id:"506009997"},
|
||||
{name:"像素测试+bin",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/2NxCo49xAB1L96K.jpeg!thumb-w321-webp75",material_id:"506009998"},
|
||||
{name:"像素测试",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/P6gH3pWBGw7L6dD.jpeg!thumb-w321-webp75",material_id:"506009999"},
|
||||
{name:"名称一",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/MKosgAWo5VKpo9Z.jpeg!thumb-w321-webp75",material_id:"50600999"},
|
||||
{name:"质感",thumbnail:"https://xximg1.meitudata.com/XepUPNP4WP.png!thumb-w321-webp75",material_id:"20076061608"},
|
||||
{name:"抠图批量拼图",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/pA2S9lvNpMY4X3N.jpeg!thumb-w321-webp75",material_id:"506002368"},
|
||||
{name:"修改测试",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/69MiA9VxKdkzjWR.png!thumb-w321-webp75",material_id:"50600229"},
|
||||
{name:"兰桂坊-艺术",thumbnail:"https://material-center-pre.meitudata.com/material/image/6228901fd8ddd6350.jpeg!thumb-w321-webp75",material_id:"50639415"},
|
||||
{name:"有门槛的我",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/P98i3gdgDw3Rmx5.png!thumb-w321-webp75",material_id:"506093422"},
|
||||
{name:"222嗯嗯1",thumbnail:"https://stage.meitudata.com/public/creator/ed70a3c696c8e7b.jpg!thumb-w321-webp75",material_id:"50693244"},
|
||||
{name:"滤镜流程11",thumbnail:"https://material-center-pre.meitudata.com/material/image/6194a57b5b9ef7678.jpg!thumb-w321-webp75",material_id:"506017292"},
|
||||
{name:"hsxTest11.8",thumbnail:"https://material-center-pre.meitudata.com/material/image/6189f29b48f165954.jpg!thumb-w321-webp75",material_id:"506530963"},
|
||||
{name:"旧-美食手绘1",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/0lZCW9BrDgMroLL.jpeg!thumb-w321-webp75",material_id:"5060002001"},
|
||||
{name:"Forest",thumbnail:"https://xximg1.meitudata.com/V2jTkoYa96.jpeg!thumb-w321-webp75",material_id:"20106191835"},
|
||||
{name:"春樱",thumbnail:"https://xximg1.meitudata.com/k5DIOxgJpN.jpeg!thumb-w321-webp75",material_id:"20076291634"},
|
||||
{name:"GT G",thumbnail:"http://xximg2.meitudata.com/Z9DCJpkB2l.jpeg!thumb-w321-webp75",material_id:"20085081215"},
|
||||
{name:"测",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/zwdte8R2e5KMMmm.jpeg!thumb-w321-webp75",material_id:"506000000"},
|
||||
{name:"五一鱼块",thumbnail:"https://xximg1.meitudata.com/mlahyxNxjN.jpeg!thumb-w321-webp75",material_id:"20076292056"},
|
||||
{name:"青空",thumbnail:"https://xximg1.meitudata.com/8OkUwBympV.jpeg!thumb-w321-webp75",material_id:"20106311844"},
|
||||
{name:"质感",thumbnail:"https://xximg1.meitudata.com/9nzUydyWeB.png!thumb-w321-webp75",material_id:"20076061589"},
|
||||
{name:"测试CBC",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/R9aT7lpEEVxawo4.jpeg!thumb-w321-webp75",material_id:"5060118818"},
|
||||
{name:"像素天空抠图测试",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/Ymju0r3deAl7xoJ.jpeg!thumb-w321-webp75",material_id:"506005680"},
|
||||
{name:"像素滤镜测试",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/8zPcB0y4vdreG1d.jpeg!thumb-w321-webp75",material_id:"506019998"},
|
||||
{name:"通用天空1像素测试",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/1V6c63lKLGPlKVo.png!thumb-w321-webp75",material_id:"506009997"},
|
||||
{name:"人像风格化",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/VYwIWp0E52v5vaE.jpeg!thumb-w321-webp75",material_id:"50600288888"},
|
||||
{name:"像素+边框测试",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/Z9dtor442OY76KV.jpeg!thumb-w321-webp75",material_id:"506005678"},
|
||||
{name:"像素测试+bin",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/2NxCo49xAB1L96K.jpeg!thumb-w321-webp75",material_id:"506009998"},
|
||||
{name:"像素测试",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/P6gH3pWBGw7L6dD.jpeg!thumb-w321-webp75",material_id:"506009999"},
|
||||
{name:"兰桂坊-艺术",thumbnail:"https://material-center-pre.meitudata.com/material/image/6228901fd8ddd6350.jpeg!thumb-w321-webp75",material_id:"50639415"},
|
||||
{name:"藤黄",thumbnail:"https://xximg1.meitudata.com/KnJSa8X496.jpeg!thumb-w321-webp75",material_id:"20076281728"},
|
||||
{name:"梅幸茶",thumbnail:"https://xximg1.meitudata.com/GYGcPokEQ3.jpeg!thumb-w321-webp75",material_id:"20076281771"},
|
||||
{name:"五一鱼块",thumbnail:"https://xximg1.meitudata.com/mlahyxNxjN.jpeg!thumb-w321-webp75",material_id:"20076292056"},
|
||||
{name:"12.妆容滤镜层级控制",thumbnail:"https://xxtool-release.zone1.meitudata.com/deRP83dkdlR4.png!thumb-w321-webp75",material_id:"200720002017"},
|
||||
{name:"12.妆容滤镜层级控制1",thumbnail:"https://xxtool-release.zone1.meitudata.com/rPJ1vKjJY6jz.png!thumb-w321-webp75",material_id:"200720002018"},
|
||||
{name:"13.3D打光",thumbnail:"https://xxtool-release.zone1.meitudata.com/z8K3P249ZmVW.png!thumb-w321-webp75",material_id:"200720002020"},
|
||||
{name:"14.新bling效果",thumbnail:"https://xxtool-release.zone1.meitudata.com/e4xlVkl0BzMy.png!thumb-w321-webp75",material_id:"200720003001"},
|
||||
{name:"美食手绘效果2",thumbnail:"https://xxtool-release.zone1.meitudata.com/B6MleZrWeMvj.jpg!thumb-w321-webp75",material_id:"200720002002"},
|
||||
{name:"16.美食手绘效果",thumbnail:"https://xxtool-release.zone1.meitudata.com/xEke61aRK6dg.jpg!thumb-w321-webp75",material_id:"200720002003"},
|
||||
{name:"17.素材无人脸规则",thumbnail:"https://xxtool-release.zone1.meitudata.com/B6MleZ1ae5Ry.jpg!thumb-w321-webp75",material_id:"200720002010"},
|
||||
{name:"18.径向色散效果",thumbnail:"https://xxtool-release.zone1.meitudata.com/EyvzkoPgakDL.jpg!thumb-w321-webp75",material_id:"200720002012"},
|
||||
{name:"胶片滤镜2",thumbnail:"https://xxtool-release.zone1.meitudata.com/3zVRo1E16vZG.png!thumb-w321-webp75",material_id:"200720002008"},
|
||||
{name:"20.胶片滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/3zVRo1EdvZ0W.jpg!thumb-w321-webp75",material_id:"200720002009"},
|
||||
{name:"21.虚化滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/1mLMv1kd2BLZ.jpg!thumb-w321-webp75",material_id:"200720002011"},
|
||||
{name:"22.天空分割滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/8NXRMzE019aB.jpg!thumb-w321-webp75",material_id:"200720002006"},
|
||||
{name:"23.妆容滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/0XDRo7xdPkVx.jpg!thumb-w321-webp75",material_id:"200720002007"},
|
||||
{name:"1.随机滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/V06dg1RJ8pDr.jpg!thumb-w321-webp75",material_id:"200720001004"},
|
||||
{name:"15.实时取色效果",thumbnail:"https://xxtool-release.zone1.meitudata.com/2p5Ro1VDZvxR.png!thumb-w321-webp75",material_id:"200720001001"},
|
||||
{name:"10.不带妆容",thumbnail:"https://xxtool-release.zone1.meitudata.com/8NXRMz5oypN7.jpeg!thumb-w321-webp75",material_id:"200720002030"},
|
||||
{name:"16.美食手绘效果1",thumbnail:"https://xxtool-release.zone1.meitudata.com/1mLMWyxNVMAe.jpg!thumb-w321-webp75",material_id:"506088836"},
|
||||
{name:"素材多比例滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/7d8RoA7DXYB9.jpg!thumb-w321-webp75",material_id:"200720002013"},
|
||||
{name:"安德森粉",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/OXOHRLBqVppoxEY.png!thumb-w321-webp75",material_id:"20079982224"},
|
||||
{name:"安德森黄",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/bBZcY8dnYDqZE5v.png!thumb-w321-webp75",material_id:"20079982225"},
|
||||
{name:"安德森冷",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/x5NF1JLYvqGENkj.png!thumb-w321-webp75",material_id:"20079982226"},
|
||||
{name:"安德森暖青",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/KeVUpByXzRp0oPK.png!thumb-w321-webp75",material_id:"20079982227"},
|
||||
{name:"高光+100",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/PB2cdnDGN0nqb8q.png!thumb-w321-webp75",material_id:"20079981113"},
|
||||
{name:"高光-100",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/XepU5b6OZKW90Yv.png!thumb-w321-webp75",material_id:"20079981114"},
|
||||
{name:"阴影+100",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/KeVUp1oQD6W8xg5.png!thumb-w321-webp75",material_id:"20079981115"},
|
||||
{name:"阴影-100",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/GPWcJeyweKZR69d.png!thumb-w321-webp75",material_id:"20079981116"},
|
||||
{name:"cg无素材",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/LEasj5wg0o10JzO.png!thumb-w321-webp75",material_id:"20079981112"},
|
||||
{name:"会员电影胶片",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8QzFJLZVqLlvj8v.png!thumb-w321-webp75",material_id:"20079982254"},
|
||||
{name:"秋1",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/KeVUpByPLRGkgYj.jpeg!thumb-w321-webp75",material_id:"20079982230"},
|
||||
{name:"秋2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/6kQUqeG39YJlEo1.jpeg!thumb-w321-webp75",material_id:"20079982231"},
|
||||
{name:"秋3",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/KeVUpByPvxBLldg.jpeg!thumb-w321-webp75",material_id:"20079982232"},
|
||||
{name:"秋4",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/3YDh1Dl6xY30nqD.jpeg!thumb-w321-webp75",material_id:"20079982233"},
|
||||
{name:"秋5",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/9nzUG9DeeGmn94G.jpeg!thumb-w321-webp75",material_id:"20079982234"},
|
||||
{name:"秋6",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/YkpUjYwlPanLVNg.jpeg!thumb-w321-webp75",material_id:"20079982235"},
|
||||
{name:"秋7",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/OXOHRLB3YBPbD0o.jpeg!thumb-w321-webp75",material_id:"20079982236"},
|
||||
{name:"秋8",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/dWZS0X3P2LjqJ5x.jpeg!thumb-w321-webp75",material_id:"20079982240"},
|
||||
{name:"自然灰2",thumbnail:"https://xximg1.meitudata.com/OXOH0zayv2.png!thumb-w321-webp75",material_id:"20079981854"},
|
||||
{name:"自然灰1",thumbnail:"https://xximg1.meitudata.com/mbeUyRpobN.png!thumb-w321-webp75",material_id:"20079981853"},
|
||||
{name:"色散",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/3YDhOe5eO9.png!thumb-w321-webp75",material_id:"20079981726"},
|
||||
{name:"毕业季",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/4VQt9N8Pjo.png!thumb-w321-webp75",material_id:"20079981254"},
|
||||
{name:"一键美颜质感",thumbnail:"https://xximg1.meitudata.com/x5NFQPRBWG.png!thumb-w321-webp75",material_id:"20079982147"},
|
||||
{name:"相框吸色",thumbnail:"https://xximg1.meitudata.com/2zmU1vvaPD.png!thumb-w321-webp75",material_id:"20079982037"},
|
||||
{name:"美化吸色灰度限制",thumbnail:"https://xximg1.meitudata.com/EPBcLQoodX.png!thumb-w321-webp75",material_id:"20079980037"},
|
||||
{name:"相机吸色测试",thumbnail:"https://xximg1.meitudata.com/p0LTZqZ2Wm.jpeg!thumb-w321-webp75",material_id:"20079981873"},
|
||||
{name:"吸色测试2",thumbnail:"https://xximg1.meitudata.com/9nzUyoDvEQ.png!thumb-w321-webp75",material_id:"20079981874"},
|
||||
{name:"吸色灰度限制0.5",thumbnail:"https://xximg1.meitudata.com/9nzUyYZ5LZ.png!thumb-w321-webp75",material_id:"20079981029"},
|
||||
{name:"foodie锐化",thumbnail:"https://xximg1.meitudata.com/oJWHn2klo6.png!thumb-w321-webp75",material_id:"20079982000"},
|
||||
{name:"自然风光",thumbnail:"https://xximg1.meitudata.com/N8eUq1aDk1.jpeg!thumb-w321-webp75",material_id:"20079982003"},
|
||||
{name:"室内",thumbnail:"https://xximg1.meitudata.com/LEasJPl8mE.jpeg!thumb-w321-webp75",material_id:"20079982004"},
|
||||
{name:"室外",thumbnail:"https://xximg1.meitudata.com/g5eFOyEePx.jpeg!thumb-w321-webp75",material_id:"20079982005"},
|
||||
{name:"老人",thumbnail:"https://xximg1.meitudata.com/vgzUl2EGV5.jpeg!thumb-w321-webp75",material_id:"20079982006"},
|
||||
{name:"街道复用",thumbnail:"https://xximg1.meitudata.com/QEasmNjL8x.jpeg!thumb-w321-webp75",material_id:"20079981781"},
|
||||
{name:"大师1",thumbnail:"https://xximg1.meitudata.com/wgNU30boQ4.png!thumb-w321-webp75",material_id:"20079981962"},
|
||||
{name:"大师2",thumbnail:"https://xximg1.meitudata.com/YkpU1yPmPa.png!thumb-w321-webp75",material_id:"20079981963"},
|
||||
{name:"大师3",thumbnail:"https://xximg1.meitudata.com/qRdTJOZYn8.png!thumb-w321-webp75",material_id:"20079981964"},
|
||||
{name:"大师4",thumbnail:"https://xximg1.meitudata.com/LEasJoKld4.png!thumb-w321-webp75",material_id:"20079981965"},
|
||||
{name:"大师5",thumbnail:"https://xximg1.meitudata.com/KeVUaQnzez.png!thumb-w321-webp75",material_id:"20079981966"},
|
||||
{name:"大师6",thumbnail:"https://xximg1.meitudata.com/BNGiP6vklD.png!thumb-w321-webp75",material_id:"20079981967"},
|
||||
{name:"大师7",thumbnail:"https://xximg1.meitudata.com/wgNU30boLG.png!thumb-w321-webp75",material_id:"20079981968"},
|
||||
{name:"大师8",thumbnail:"https://xximg1.meitudata.com/j4Gce54yGg.png!thumb-w321-webp75",material_id:"20079981969"},
|
||||
{name:"大师9",thumbnail:"https://xximg1.meitudata.com/g5eFO8dEYO.png!thumb-w321-webp75",material_id:"20079981970"},
|
||||
{name:"模糊相机测试",thumbnail:"https://xximg1.meitudata.com/wgNU3GgL0p.png!thumb-w321-webp75",material_id:"20079982016"},
|
||||
{name:"",thumbnail:"https://xximg1.meitudata.com/g5eFOoOWnK.png!thumb-w321-webp75",material_id:"20079981872"},
|
||||
{name:"复古",thumbnail:"https://xximg1.meitudata.com/x5NFQGlPeD.png!thumb-w321-webp75",material_id:"20079982026"},
|
||||
{name:"夜景抠图",thumbnail:"https://xximg1.meitudata.com/qRdTJOxoK4.png!thumb-w321-webp75",material_id:"20079981936"},
|
||||
{name:"我爱中国",thumbnail:"https://xximg1.meitudata.com/3YDhOJgLgp.png!thumb-w321-webp75",material_id:"20079981422"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/oJQiW3WX68vDyaW.jpeg!thumb-w321-webp75",material_id:"20079992271"},
|
||||
{name:"桃子奶油",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/lk0HjR5ealbk2Ze.jpeg!thumb-w321-webp75",material_id:"20079992275"},
|
||||
{name:"橘粉奶油",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/5JOi8ZVNnqE8w8g.jpeg!thumb-w321-webp75",material_id:"20079990090"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/DyOHJnqNb5o8LQg.jpeg!thumb-w321-webp75",material_id:"20079992277"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/y59IlX8wQXoNGEK.jpeg!thumb-w321-webp75",material_id:"20079992276"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/dWku02V3BpYDylY.jpeg!thumb-w321-webp75",material_id:"20079990081"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/p0GcOvOamLXoD3Z.jpeg!thumb-w321-webp75",material_id:"20079992273"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/6kOHqmQ3qjPoYQa.jpeg!thumb-w321-webp75",material_id:"20079992266"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/RwXHJpZKvlQK2GJ.jpeg!thumb-w321-webp75",material_id:"20079992267"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/2zVHE2XGb3d0xgv.jpeg!thumb-w321-webp75",material_id:"20079990045"},
|
||||
{name:"炫光",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/dWku0XJZxGgDLO9.jpeg!thumb-w321-webp75",material_id:"20079992229"},
|
||||
{name:"CG3",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/JdXHB6LLY8agV8O.jpeg!thumb-w321-webp75",material_id:"20079992238"},
|
||||
{name:"CG测试2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/j4QUVv66nq0P55z.jpeg!thumb-w321-webp75",material_id:"20079991111"},
|
||||
{name:"国庆挂历2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/YkVHj0oP36pmOL1.jpeg!thumb-w321-webp75",material_id:"20079999999"},
|
||||
{name:"美化国庆挂历",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/g5yIKQJdqK1aBlQ.jpeg!thumb-w321-webp75",material_id:"20079998888"},
|
||||
{name:"在逃公主",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/N8RHzY8o4oKQqEJ.jpeg!thumb-w321-webp75",material_id:"20079992200"},
|
||||
{name:"2020美颜默认",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/qR1tRvwgl5mmZDp.jpeg!thumb-w321-webp75",material_id:"20079990088"},
|
||||
{name:"复古画册",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/zq9HXROgvWQpXJp.jpeg!thumb-w321-webp75",material_id:"20079990080"},
|
||||
{name:"美食1",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/PBXUkeGKl4.jpeg!thumb-w321-webp75",material_id:"20079990060"},
|
||||
{name:"美食改",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8QYIwP5P0x.jpeg!thumb-w321-webp75",material_id:"20079990059"},
|
||||
{name:"细细闪",thumbnail:"https://xximg1.meitudata.com/XeVHPQGmWg.jpeg!thumb-w321-webp75",material_id:"20079991001"},
|
||||
{name:"细细闪2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/qR1tRvRVBLmGaQK.jpeg!thumb-w321-webp75",material_id:"20079990069"},
|
||||
{name:"新闪闪1",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/aOWsGzGNdEOkngB.jpeg!thumb-w321-webp75",material_id:"20079990068"},
|
||||
{name:"新闪闪3-2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/qR1tRvbq9BkKZZv.jpeg!thumb-w321-webp75",material_id:"20079990078"},
|
||||
{name:"新闪闪5",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/j4QUVwNX4q6LV80.jpeg!thumb-w321-webp75",material_id:"20079990077"},
|
||||
{name:"天空闪-橙",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/wgRHvqkwVNgzaQO.jpeg!thumb-w321-webp75",material_id:"20079990073"},
|
||||
{name:"新说3",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/6kOHRdweoL.jpeg!thumb-w321-webp75",material_id:"20079990057"},
|
||||
{name:"新说2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/QEXSmQ3JNP.jpeg!thumb-w321-webp75",material_id:"20079990056"},
|
||||
{name:"新说",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/nBqUo2nYVw.jpeg!thumb-w321-webp75",material_id:"20079990055"},
|
||||
{name:"少女胶片颗粒",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/EPdUL929P1.jpeg!thumb-w321-webp75",material_id:"20079990053"},
|
||||
{name:"折纸3",thumbnail:"https://xximg1.meitudata.com/j4QUeqxb8N.jpeg!thumb-w321-webp75",material_id:"20079990021"},
|
||||
{name:"折纸滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/dWkuagV42R.jpeg!thumb-w321-webp75",material_id:"20079990050"},
|
||||
{name:"温柔纹理2",thumbnail:"https://xximg1.meitudata.com/5JOiDgbOjz.jpeg!thumb-w321-webp75",material_id:"20079990003"},
|
||||
{name:"温柔纹理",thumbnail:"https://xximg1.meitudata.com/mbZHy9Kyd4.jpeg!thumb-w321-webp75",material_id:"20079990024"},
|
||||
{name:"油画新说1",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/dWkuaga464.jpeg!thumb-w321-webp75",material_id:"20079990054"},
|
||||
{name:"油画新说2",thumbnail:"https://xximg1.meitudata.com/V2jTkpeb8e.jpeg!thumb-w321-webp75",material_id:"20079990001"},
|
||||
{name:"油画新说3",thumbnail:"https://xximg1.meitudata.com/8QYIw15O85.jpeg!thumb-w321-webp75",material_id:"20079991994"},
|
||||
{name:"珍珠2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/zq9H5VqpGo.jpeg!thumb-w321-webp75",material_id:"20079990043"},
|
||||
{name:"珍珠",thumbnail:"https://xximg1.meitudata.com/dWkua4m2NL.jpeg!thumb-w321-webp75",material_id:"20079991002"},
|
||||
{name:"爱心月亮",thumbnail:"https://xximg1.meitudata.com/LEKSJEmG9L.png!thumb-w321-webp75",material_id:"20079990041"},
|
||||
{name:"星星月亮",thumbnail:"https://xximg1.meitudata.com/3YVfOV8JWX.jpeg!thumb-w321-webp75",material_id:"20079990040"},
|
||||
{name:"钢笔淡彩",thumbnail:"https://xximg1.meitudata.com/6kOHRlg2E8.jpeg!thumb-w321-webp75",material_id:"20079990039"},
|
||||
{name:"拯救废片2",thumbnail:"https://xximg1.meitudata.com/KeEHax9bao.jpeg!thumb-w321-webp75",material_id:"20079990038"},
|
||||
{name:"书本感",thumbnail:"https://xximg1.meitudata.com/WYBfmxXLVz.jpeg!thumb-w321-webp75",material_id:"20079990036"},
|
||||
{name:"拯救废片1",thumbnail:"https://xximg1.meitudata.com/dWkuaGDnaG.jpeg!thumb-w321-webp75",material_id:"20079990037"},
|
||||
{name:"夏日4",thumbnail:"https://xximg1.meitudata.com/j4QUeglDGW.jpeg!thumb-w321-webp75",material_id:"20079990035"},
|
||||
{name:"夏日2",thumbnail:"https://xximg1.meitudata.com/zq9H5obmPq.jpeg!thumb-w321-webp75",material_id:"20079990034"},
|
||||
{name:"夏日3",thumbnail:"https://xximg1.meitudata.com/lk0Hk4z4JE.jpeg!thumb-w321-webp75",material_id:"20079990033"},
|
||||
{name:"春日柔光",thumbnail:"https://xximg1.meitudata.com/oJQinkgLpN.jpeg!thumb-w321-webp75",material_id:"20079992020"},
|
||||
{name:"春日日系",thumbnail:"https://xximg1.meitudata.com/JdXHWgQ588.jpeg!thumb-w321-webp75",material_id:"20079990022"},
|
||||
{name:"2020情人节2",thumbnail:"https://xximg1.meitudata.com/p0GcZg6o2m.jpeg!thumb-w321-webp75",material_id:"20079990017"},
|
||||
{name:"11",thumbnail:"https://xximg1.meitudata.com/j4QUeR0ylz.jpeg!thumb-w321-webp75",material_id:"20079990014"},
|
||||
{name:"锐化+颗粒",thumbnail:"https://xximg1.meitudata.com/nBqUoWm5Eq.jpeg!thumb-w321-webp75",material_id:"20079990015"},
|
||||
{name:"22",thumbnail:"https://xximg1.meitudata.com/EPdULoXbK8.jpeg!thumb-w321-webp75",material_id:"20079990004"},
|
||||
{name:"2019圣诞2",thumbnail:"https://xximg1.meitudata.com/aOWsL0gy9L.jpeg!thumb-w321-webp75",material_id:"20079990008"},
|
||||
{name:"bling裸妆",thumbnail:"https://xximg1.meitudata.com/Z3Vspe2qwl.jpeg!thumb-w321-webp75",material_id:"20079991976"},
|
||||
{name:"水雾",thumbnail:"https://xximg1.meitudata.com/eqOHv8b9Jy.jpeg!thumb-w321-webp75",material_id:"20079990009"},
|
||||
{name:"泫雅柔光2",thumbnail:"https://xximg1.meitudata.com/1zVH1X80BW.jpeg!thumb-w321-webp75",material_id:"20079990000"},
|
||||
{name:"无辜妆",thumbnail:"https://xximg1.meitudata.com/8QYIw5OwzQ.jpeg!thumb-w321-webp75",material_id:"20079990020"},
|
||||
{name:"2023",thumbnail:"https://xximg1.meitudata.com/WYBfmyJ4jO.jpeg!thumb-w321-webp75",material_id:"20079992023"},
|
||||
{name:"风格妆22",thumbnail:"https://xximg1.meitudata.com/y59IbNv8ek.jpeg!thumb-w321-webp75",material_id:"20079990013"},
|
||||
{name:"吸色测试",thumbnail:"https://xximg1.meitudata.com/g5yIOn36zo.jpeg!thumb-w321-webp75",material_id:"20079991234"},
|
||||
{name:"爱国",thumbnail:"https://xximg1.meitudata.com/nBqUonb8dG.jpeg!thumb-w321-webp75",material_id:"20079991919"},
|
||||
{name:"春樱改良",thumbnail:"https://xximg1.meitudata.com/2zVH1mYp8m.jpeg!thumb-w321-webp75",material_id:"20079991858"},
|
||||
{name:"爱心阴影",thumbnail:"https://xximg1.meitudata.com/8QYIw59nPj.jpeg!thumb-w321-webp75",material_id:"20079991935"},
|
||||
{name:"无辜妆2",thumbnail:"https://xximg1.meitudata.com/LEKSJPXj2E.jpeg!thumb-w321-webp75",material_id:"20079990006"},
|
||||
{name:"1993",thumbnail:"https://xximg1.meitudata.com/vgyHlz3kOv.jpeg!thumb-w321-webp75",material_id:"20079991993"},
|
||||
{name:"皮肤质感3",thumbnail:"https://xximg1.meitudata.com/LEKSJooQb8.jpeg!thumb-w321-webp75",material_id:"20079991113"},
|
||||
{name:"皮肤质感2",thumbnail:"https://xximg1.meitudata.com/p0GcZPPXNW.jpeg!thumb-w321-webp75",material_id:"20079991112"},
|
||||
{name:"皮肤质感",thumbnail:"https://xximg1.meitudata.com/WYBfmDvxQK.jpeg!thumb-w321-webp75",material_id:"20079991884"},
|
||||
{name:"万圣2",thumbnail:"https://xximg1.meitudata.com/dWkuap6DpQ.jpeg!thumb-w321-webp75",material_id:"20079991866"},
|
||||
{name:"闪闪压缩2",thumbnail:"https://xximg1.meitudata.com/BNPTP2XB6X.jpeg!thumb-w321-webp75",material_id:"20079990030"},
|
||||
{name:"闪闪压缩",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/oJQiWKQQE3VWLKR.jpeg!thumb-w321-webp75",material_id:"20079990076"},
|
||||
{name:"复古画册加纸纹",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/QEXSyJENWDbBkna.jpeg!thumb-w321-webp75",material_id:"20079990079"},
|
||||
{name:"新闪闪2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/KeEHpDpzvPgVOqY.jpeg!thumb-w321-webp75",material_id:"20079990067"},
|
||||
{name:"新闪闪4",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/mbZHO5dyaXPe91g.jpeg!thumb-w321-webp75",material_id:"20079990072"},
|
||||
{name:"天空闪",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/bBLUYpzJY518dqa.jpeg!thumb-w321-webp75",material_id:"20079990070"},
|
||||
{name:"美食3改",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/RwXHmlPzDO.jpeg!thumb-w321-webp75",material_id:"20079990058"},
|
||||
{name:"质感胶片颗粒",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/1zVH1pkp0o.jpeg!thumb-w321-webp75",material_id:"20079990052"},
|
||||
{name:"雀斑",thumbnail:"https://xximg1.meitudata.com/bBLUvke8mb.jpeg!thumb-w321-webp75",material_id:"20079991000"},
|
||||
{name:"春日柔光1",thumbnail:"https://xximg1.meitudata.com/KeEHa9ZGYO.jpeg!thumb-w321-webp75",material_id:"20079990031"},
|
||||
{name:"灰调2",thumbnail:"https://xximg1.meitudata.com/JdXHW51qgp.jpeg!thumb-w321-webp75",material_id:"20079990002"},
|
||||
{name:"移轴虚化2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/WYBf3WkazQXvlwl.jpeg!thumb-w321-webp75",material_id:"506000008"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/6kOHqmdRWjl4BEm.jpeg!thumb-w321-webp75",material_id:"50600006"},
|
||||
{name:"微光",thumbnail:"https://xximg1.meitudata.com/KeEHa4wl8p.jpeg!thumb-w321-webp75",material_id:"20076251574"},
|
||||
{name:"微光",thumbnail:"https://xximg1.meitudata.com/eqZUvNY3YL.png!thumb-w321-webp75",material_id:"20076251567"},
|
||||
{name:"微光",thumbnail:"https://xximg1.meitudata.com/BNPTPoVbeV.jpeg!thumb-w321-webp75",material_id:"20076251575"},
|
||||
{name:"微光",thumbnail:"https://xximg1.meitudata.com/bBZcvmqk8z.png!thumb-w321-webp75",material_id:"20076251568"},
|
||||
{name:"微光",thumbnail:"https://xximg1.meitudata.com/g5yIOPJmZn.jpeg!thumb-w321-webp75",material_id:"20076251573"},
|
||||
{name:"微光",thumbnail:"https://xximg1.meitudata.com/5JeHDVNROj.png!thumb-w321-webp75",material_id:"20076251569"},
|
||||
{name:"微光",thumbnail:"https://xximg1.meitudata.com/wgNU3PJVzR.png!thumb-w321-webp75",material_id:"20076251577"},
|
||||
{name:"17.素材无人脸规则",thumbnail:"https://xxtool-release.zone1.meitudata.com/owv1PzKKkaEz.jpg!thumb-w321-webp75",material_id:"506088832"},
|
||||
{name:"22.天空分割滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/laM7B2WRZRve.jpg!thumb-w321-webp75",material_id:"506088818"},
|
||||
{name:"11.柔发效果支持",thumbnail:"https://xxtool-release.zone1.meitudata.com/L24ZJRgYjyw5.png!thumb-w321-webp75",material_id:"506088812"},
|
||||
{name:"13.3D打光",thumbnail:"https://xxtool-release.zone1.meitudata.com/owv1PzXYWoxL.png!thumb-w321-webp75",material_id:"506088810"},
|
||||
{name:"（仅日本）10.不带妆容",thumbnail:"https://xxtool-release.zone1.meitudata.com/y1B45rOXGkBW.jpeg!thumb-w321-webp75",material_id:"506088811"},
|
||||
{name:"12.妆容滤镜层级控制1",thumbnail:"https://xxtool-release.zone1.meitudata.com/e4xlJA94A6Mp.png!thumb-w321-webp75",material_id:"506088831"},
|
||||
{name:"6.强制曝光滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/kOo1k0DW9drL.jpg!thumb-w321-webp75",material_id:"506088835"},
|
||||
{name:"5.男生、女生滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/OmB4J1oagj0M.jpg!thumb-w321-webp75",material_id:"506088815"},
|
||||
{name:"4.带有动效滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/V06dJl3051WA.jpg!thumb-w321-webp75",material_id:"506088823"},
|
||||
{name:"12.妆容滤镜层级控制",thumbnail:"https://xxtool-release.zone1.meitudata.com/kOo1k0Nva6LL.png!thumb-w321-webp75",material_id:"506088816"},
|
||||
{name:"3.妆容滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/OmB4J13jO5Dg.jpg!thumb-w321-webp75",material_id:"506088822"},
|
||||
{name:"2.bling滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/e4xlJA9WZJoy.jpg!thumb-w321-webp75",material_id:"506088834"},
|
||||
{name:"1.随机滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/GYZza015D1LE.jpg!thumb-w321-webp75",material_id:"506088824"},
|
||||
{name:"19.素材多比例滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/B6MlzDxYm10N.jpg!thumb-w321-webp75",material_id:"506088821"},
|
||||
{name:"16.美食手绘效果",thumbnail:"https://xxtool-release.zone1.meitudata.com/4JpRm4Em6Y7J.jpg!thumb-w321-webp75",material_id:"506088833"},
|
||||
{name:"16.美食手绘效果2",thumbnail:"https://xxtool-release.zone1.meitudata.com/3zVRNe69zMKM.jpg!thumb-w321-webp75",material_id:"506088829"},
|
||||
{name:"23.妆容滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/L24ZJRgjNYWe.jpg!thumb-w321-webp75",material_id:"506088814"},
|
||||
{name:"18.径向色散效果",thumbnail:"https://xxtool-release.zone1.meitudata.com/y1B45rOEZeMP.jpg!thumb-w321-webp75",material_id:"506088813"},
|
||||
{name:"14.新bling效果",thumbnail:"https://xxtool-release.zone1.meitudata.com/y1B45rp8Ky7z.png!thumb-w321-webp75",material_id:"506088837"},
|
||||
{name:"绵绵",thumbnail:"https://xximg1.meitudata.com/EPdUL42bLj.jpeg!thumb-w321-webp75",material_id:"20076412020"},
|
||||
{name:"清澈",thumbnail:"https://xximg1.meitudata.com/nBqUo6pveO.jpeg!thumb-w321-webp75",material_id:"20076412057"},
|
||||
{name:"阴雨",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/N3OFzPJbwBgXG6z.jpeg!thumb-w321-webp75",material_id:"506002342"},
|
||||
{name:"ar胶片",thumbnail:"https://xximg1.meitudata.com/lkjUk85p5G.png!thumb-w321-webp75",material_id:"20108891781"},
|
||||
{name:"INS",thumbnail:"https://xximg1.meitudata.com/bBLUv93q2O.jpeg!thumb-w321-webp75",material_id:"20108890012"},
|
||||
{name:"高级灰",thumbnail:"https://xximg1.meitudata.com/jzOIeJz1mK.png!thumb-w321-webp75",material_id:"20108891777"},
|
||||
{name:"夜景2",thumbnail:"https://xximg1.meitudata.com/1zVH1nl3nL.jpeg!thumb-w321-webp75",material_id:"20108890014"},
|
||||
{name:"藕色颗粒",thumbnail:"https://xximg1.meitudata.com/V2jTkoQgO6.jpeg!thumb-w321-webp75",material_id:"20108890015"},
|
||||
{name:"胶片1",thumbnail:"https://xximg1.meitudata.com/KnJSa8gWE4.png!thumb-w321-webp75",material_id:"20108891783"},
|
||||
{name:"fuji",thumbnail:"https://xximg1.meitudata.com/qR1tJbvd5d.jpeg!thumb-w321-webp75",material_id:"20108890010"},
|
||||
{name:"咸咸测试",thumbnail:"https://xximg1.meitudata.com/EPdULqxXOR.jpeg!thumb-w321-webp75",material_id:"20108899999"},
|
||||
{name:"古风藕色",thumbnail:"https://xximg1.meitudata.com/JdXHWjK4o9.jpeg!thumb-w321-webp75",material_id:"20108891775"},
|
||||
{name:"natural1",thumbnail:"https://xximg1.meitudata.com/zq9H5ekDQv.jpeg!thumb-w321-webp75",material_id:"20108891682"},
|
||||
{name:"受伤妆",thumbnail:"https://xximg1.meitudata.com/nBqUoEKnoD.jpeg!thumb-w321-webp75",material_id:"20108891787"},
|
||||
{name:"natural2",thumbnail:"https://xximg1.meitudata.com/j4QUedKlNv.jpeg!thumb-w321-webp75",material_id:"20108891848"},
|
||||
{name:"描边2",thumbnail:"https://xximg1.meitudata.com/4VOC9QOZRd.jpeg!thumb-w321-webp75",material_id:"20108891835"},
|
||||
{name:"natural3",thumbnail:"https://xximg1.meitudata.com/9nOHy6gJOb.jpeg!thumb-w321-webp75",material_id:"20108890019"},
|
||||
{name:"宝丽来1",thumbnail:"https://xximg1.meitudata.com/JdXHW5qp88.jpeg!thumb-w321-webp75",material_id:"20108891840"},
|
||||
{name:"日系复古",thumbnail:"https://xximg1.meitudata.com/6zZIRWym8L.png!thumb-w321-webp75",material_id:"20108891846"},
|
||||
{name:"暗调测试",thumbnail:"https://xximg1.meitudata.com/YkVH1pNvLW.jpeg!thumb-w321-webp75",material_id:"20108897777"},
|
||||
{name:"宝丽来2",thumbnail:"https://xximg1.meitudata.com/6kOHRWaqeJ.jpeg!thumb-w321-webp75",material_id:"20108891841"},
|
||||
{name:"海外柔光",thumbnail:"https://xximg1.meitudata.com/p0GcZyqa5z.jpeg!thumb-w321-webp75",material_id:"20108891801"},
|
||||
{name:"绯红",thumbnail:"https://xximg1.meitudata.com/wgNU340lGP.png!thumb-w321-webp75",material_id:"20108891770"},
|
||||
{name:"霜色",thumbnail:"https://xximg1.meitudata.com/lkjUkL6GXp.png!thumb-w321-webp75",material_id:"20108891769"},
|
||||
{name:"梅幸茶",thumbnail:"https://xximg1.meitudata.com/GPWcPEw1Wj.png!thumb-w321-webp75",material_id:"20108891771"},
|
||||
{name:"水墨",thumbnail:"https://xximg1.meitudata.com/9nzUyjane8.png!thumb-w321-webp75",material_id:"20108891772"},
|
||||
{name:"1780",thumbnail:"https://xximg1.meitudata.com/vgyHlJoLg3.jpeg!thumb-w321-webp75",material_id:"20108891780"},
|
||||
{name:"描边3",thumbnail:"https://xximg1.meitudata.com/nBqUoz0g3y.jpeg!thumb-w321-webp75",material_id:"20108891837"},
|
||||
{name:"描边4",thumbnail:"https://xximg1.meitudata.com/1zVH1XvE4z.jpeg!thumb-w321-webp75",material_id:"20108891838"},
|
||||
{name:"描边1",thumbnail:"https://xximg1.meitudata.com/WYBfmdWOoQ.jpeg!thumb-w321-webp75",material_id:"20108891834"},
|
||||
{name:"青空",thumbnail:"https://xximg1.meitudata.com/8OkUwBympV.jpeg!thumb-w321-webp75",material_id:"20106311844"},
|
||||
{name:"暮霭",thumbnail:"https://xximg1.meitudata.com/9QktyzB0nW.jpeg!thumb-w321-webp75",material_id:"20106311843"},
|
||||
{name:"糖果",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/qp4IReJkzbEZD41.jpeg!thumb-w321-webp75",material_id:"506002348"},
|
||||
{name:"苏打",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/nplIo2XOm6.jpeg!thumb-w321-webp75",material_id:"20096442168"},
|
||||
{name:"淡奶油",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/PVQIkeOx5L.jpeg!thumb-w321-webp75",material_id:"20096442169"},
|
||||
{name:"温柔",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/N8RHqBW392.jpeg!thumb-w321-webp75",material_id:"20096442166"},
|
||||
{name:"珠光",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/nBqUo2X8lP.jpeg!thumb-w321-webp75",material_id:"20096442165"},
|
||||
{name:"丝绸",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/BNPTPWpNRL.jpeg!thumb-w321-webp75",material_id:"20096442167"},
|
||||
{name:"黑白",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/OXOHRJnJ5vOXBpY.jpeg!thumb-w321-webp75",material_id:"20096081095"},
|
||||
{name:"暗房",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/eqZU6dBdw3EY3d1.jpeg!thumb-w321-webp75",material_id:"506002307"},
|
||||
{name:"低反差",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/4VQtnwmwpBL5wDN.jpeg!thumb-w321-webp75",material_id:"506002309"},
|
||||
{name:"森山",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/1zXUmEWE4DWbQW2.jpeg!thumb-w321-webp75",material_id:"506002313"},
|
||||
{name:"Instant",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/qRdTR9w9ygLqdeb.jpeg!thumb-w321-webp75",material_id:"506002310"},
|
||||
{name:"范戴克",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/BNGiqXNXZkljKlb.jpeg!thumb-w321-webp75",material_id:"506002312"},
|
||||
{name:"圣诞",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/PVQIdno4bnlEEOq.jpeg!thumb-w321-webp75",material_id:"20076452266"},
|
||||
{name:"小梦境",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/2zVHEkJKPj3q5nz.jpeg!thumb-w321-webp75",material_id:"20076452193"},
|
||||
{name:"在逃公主",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/lk0HjoJRKlq9E0Z.jpeg!thumb-w321-webp75",material_id:"20076452200"},
|
||||
{name:"璀璨",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/DyOHJWjXJGk6Ojl.jpeg!thumb-w321-webp75",material_id:"20076452189"},
|
||||
{name:"星河",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/LEKSjB8pREZExxZ.jpeg!thumb-w321-webp75",material_id:"20076452180"},
|
||||
{name:"星河II",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/g5yIKQq99XvKZQP.jpeg!thumb-w321-webp75",material_id:"20076452181"},
|
||||
{name:"星河III",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/oJQiWKVVJNXe3PB.jpeg!thumb-w321-webp75",material_id:"20076452184"},
|
||||
{name:"年味",thumbnail:"https://xximg1.meitudata.com/EVvILvqjRQ.jpeg!thumb-w321-webp75",material_id:"20076352017"},
|
||||
{name:"白日梦 ",thumbnail:"https://xximg1.meitudata.com/vgyHlzq34j.jpeg!thumb-w321-webp75",material_id:"20076351989"},
|
||||
{name:"白桃",thumbnail:"https://xximg1.meitudata.com/g5eFOnEgJj.png!thumb-w321-webp75",material_id:"20076351888"},
|
||||
{name:"Norge",thumbnail:"https://xximg1.meitudata.com/9nOHylkdjn.jpeg!thumb-w321-webp75",material_id:"2007635584"},
|
||||
{name:"冬至",thumbnail:"https://xximg1.meitudata.com/zqOU5K9Q5m.png!thumb-w321-webp75",material_id:"20076351887"},
|
||||
{name:"红杉",thumbnail:"https://xximg1.meitudata.com/QEasmkjv09.png!thumb-w321-webp75",material_id:"20076351981"},
|
||||
{name:"暖暖 ",thumbnail:"https://xximg1.meitudata.com/y59Ib9kQZw.jpeg!thumb-w321-webp75",material_id:"20076351988"},
|
||||
{name:"神仙奶油光",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/XRLI50zwLEBpQ19.jpeg!thumb-w321-webp75",material_id:"20096472176"},
|
||||
{name:"神仙奶油光Ⅱ",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/PVQIdB3VbL63GQN.jpeg!thumb-w321-webp75",material_id:"20096472177"},
|
||||
{name:"法式油画",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/99ETGwRbEnKn9qd.jpeg!thumb-w321-webp75",material_id:"20096472178"},
|
||||
{name:"法式油画Ⅱ",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/wkQsvqJNVn9GaaP.jpeg!thumb-w321-webp75",material_id:"20096472179"},
|
||||
{name:"曼哈顿大桥",thumbnail:"https://xximg1.meitudata.com/bBLUvjadBB.jpeg!thumb-w321-webp75",material_id:"20106301861"},
|
||||
{name:"维多利亚港",thumbnail:"https://xximg1.meitudata.com/wgRH3jVEDg.jpeg!thumb-w321-webp75",material_id:"20106301862"},
|
||||
{name:"新宿",thumbnail:"https://xximg1.meitudata.com/x5eIQyn1bp.jpeg!thumb-w321-webp75",material_id:"20106301935"},
|
||||
{name:"那不勒斯",thumbnail:"https://xximg1.meitudata.com/zqOU5LPDwe.png!thumb-w321-webp75",material_id:"20106301936"},
|
||||
{name:"赛博朋克",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/ykGslXOBVOZ1wZm.jpeg!thumb-w321-webp75",material_id:"20106302217"},
|
||||
{name:"盐系",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/29gtLmJEWLAadDk.jpeg!thumb-w321-webp75",material_id:"20096522258"},
|
||||
{name:"29",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/wOXiNM4O8Jxyv7E.jpeg!thumb-w321-webp75",material_id:"506030029"},
|
||||
{name:"28",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/jkEIPyplzRPYXmP.jpeg!thumb-w321-webp75",material_id:"506030028"},
|
||||
{name:"27",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/JgpCWo3NL2G81JZ.jpeg!thumb-w321-webp75",material_id:"506030027"},
|
||||
{name:"26",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/DpWhZ42RzkXpDgW.jpeg!thumb-w321-webp75",material_id:"5060230026"},
|
||||
{name:"25",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/Ng9CWAVaM342ERY.jpeg!thumb-w321-webp75",material_id:"506030025"},
|
||||
{name:"24",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/3MLhOxa9x2m49Rp.jpeg!thumb-w321-webp75",material_id:"506030024"},
|
||||
{name:"23",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/Ng9CWAVy999Ea27.jpeg!thumb-w321-webp75",material_id:"506030023"},
|
||||
{name:"22",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/mjkuw39egW2Lv9V.jpeg!thumb-w321-webp75",material_id:"506030022"},
|
||||
{name:"21",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/9L1IrA1E6l7799X.jpeg!thumb-w321-webp75",material_id:"506030021"},
|
||||
{name:"20",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/rOwi0AkzJo210E5.jpeg!thumb-w321-webp75",material_id:"506030020"},
|
||||
{name:"19",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/ed7IAoW6mr4OVwl.jpeg!thumb-w321-webp75",material_id:"506030019"},
|
||||
{name:"18",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/3MLhOx2A2R5GJom.jpeg!thumb-w321-webp75",material_id:"506030018"},
|
||||
{name:"17",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/DpWhZ4mE9OZYEv2.jpeg!thumb-w321-webp75",material_id:"506030017"},
|
||||
{name:"16",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/lK4H8LpVG7o8ZWo.jpeg!thumb-w321-webp75",material_id:"506030016"},
|
||||
{name:"15",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/JgpCWoverVMGlGE.jpeg!thumb-w321-webp75",material_id:"506030015"},
|
||||
{name:"14",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/rOwi0Akmj2Wrg8e.jpeg!thumb-w321-webp75",material_id:"506030014"},
|
||||
{name:"13",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/ZWdUX61ERRREYx7.jpeg!thumb-w321-webp75",material_id:"506030013"},
|
||||
{name:"12",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/Ng9CWAdDvZDZWN0.jpeg!thumb-w321-webp75",material_id:"506030012"},
|
||||
{name:"10",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/5O0iJdZB9VKpZYK.jpeg!thumb-w321-webp75",material_id:"506030006"},
|
||||
{name:"9",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/AY4T4jpeo29dAJY.jpeg!thumb-w321-webp75",material_id:"506030005"},
|
||||
{name:"8",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/EZNHdk171m9Z1Zp.jpeg!thumb-w321-webp75",material_id:"506030004"},
|
||||
{name:"7",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/ed7IAorRPGr2DV1.jpeg!thumb-w321-webp75",material_id:"506030003"},
|
||||
{name:"测试红点6",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/wOXiNMwZDXGyaOW.jpeg!thumb-w321-webp75",material_id:"506030002"},
|
||||
{name:"测试红点5",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/9L1IrAz4yYjKLOp.jpeg!thumb-w321-webp75",material_id:"506030001"},
|
||||
{name:"测试红点4",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/EZNHdk1owgyDp9Z.jpeg!thumb-w321-webp75",material_id:"5060238998"},
|
||||
{name:"测试红点3",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/3MLhOxDGxyVLwmV.jpeg!thumb-w321-webp75",material_id:"5060238997"},
|
||||
{name:"测试红点2",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/jkEIPyVeNwvW4X8.jpeg!thumb-w321-webp75",material_id:"5060238996"},
|
||||
{name:"测试红点",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/3MLhOxDGZNlxerJ.jpeg!thumb-w321-webp75",material_id:"5060238995"},
|
||||
{name:"123",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/8LxIzOLaGM06Ekx.jpeg!thumb-w321-webp75",material_id:"5060238991"},
|
||||
{name:"小草3",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/09mIW9BGz4DdNPK.jpeg!thumb-w321-webp75",material_id:"5060238990"},
|
||||
{name:"小草2",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/wOXiNMPBxwoymBv.jpeg!thumb-w321-webp75",material_id:"5060238989"},
|
||||
{name:"小草",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/rOwi0AO9BdZzzkv.jpeg!thumb-w321-webp75",material_id:"5060238988"},
|
||||
{name:"星星1",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/71zSrY2veyMDEaE.jpeg!thumb-w321-webp75",material_id:"506010255"},
|
||||
{name:"小树1",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/4AVSv70z5YzveBy.jpeg!thumb-w321-webp75",material_id:"506010256"},
|
||||
{name:"小花4",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/G5wUz1B4zNpRE0P.jpeg!thumb-w321-webp75",material_id:"506010254"},
|
||||
{name:"31",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/Kg2CJr4d5PKRP4p.jpeg!thumb-w321-webp75",material_id:"506030031"},
|
||||
{name:"西西里",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/yNmTl3VBD1Nz5yE.jpeg!thumb-w321-webp75",material_id:"506002337"},
|
||||
{name:"尼斯",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/5JeH8E3e6Vvq8YY.jpeg!thumb-w321-webp75",material_id:"506002331"},
|
||||
{name:"布达佩斯",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/lkjUjRxbeV2moG0.jpeg!thumb-w321-webp75",material_id:"20096082224"},
|
||||
{name:"月升",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/qRdTRadQlQanwQa.jpeg!thumb-w321-webp75",material_id:"20096082225"},
|
||||
{name:"聚会",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/5JeH8ZOg14O3Jq6.jpeg!thumb-w321-webp75",material_id:"20096082226"},
|
||||
{name:"法兰西",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8QzFJz90eZ3lExp.jpeg!thumb-w321-webp75",material_id:"20096082227"},
|
||||
{name:"油画",thumbnail:"https://xximg1.meitudata.com/BNPTPRjbyl.jpeg!thumb-w321-webp75",material_id:"20096082032"},
|
||||
{name:"油画Ⅱ",thumbnail:"https://xximg1.meitudata.com/8QYIw41QVq.jpeg!thumb-w321-webp75",material_id:"20096082033"},
|
||||
{name:"安东尼亚",thumbnail:"https://xximg1.meitudata.com/2LqS1vmqv0.png!thumb-w321-webp75",material_id:"20096082038"},
|
||||
{name:"情人节限定",thumbnail:"https://xximg1.meitudata.com/8QYIwbzm81.jpeg!thumb-w321-webp75",material_id:"20096082019"},
|
||||
{name:"勒芒",thumbnail:"https://xximg1.meitudata.com/ndzuolR3v9.jpeg!thumb-w321-webp75",material_id:"20096081869"},
|
||||
{name:"电影",thumbnail:"https://xximg1.meitudata.com/PBXUkm2yq5.jpeg!thumb-w321-webp75",material_id:"20096081274"},
|
||||
{name:"1980",thumbnail:"http://xximg2.meitudata.com/LEKSJx0N8y.jpeg!thumb-w321-webp75",material_id:"20096081108"},
|
||||
{name:"电影",thumbnail:"http://xximg2.meitudata.com/6kOHRa1OpD.jpeg!thumb-w321-webp75",material_id:"20096081253"},
|
||||
{name:"中环码头",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/496TnZaRxddxonY.jpeg!thumb-w321-webp75",material_id:"2009608530"},
|
||||
{name:"显影",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8QYIJLL6NE94K2l.jpeg!thumb-w321-webp75",material_id:"20086391964"},
|
||||
{name:"焦点",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8QYIJLL6o5PVGyv.jpeg!thumb-w321-webp75",material_id:"20086391965"},
|
||||
{name:"扫街",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/5JOi8ooNJ25wpg2.jpeg!thumb-w321-webp75",material_id:"20086391963"},
|
||||
{name:"Photog",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/OX8iREk4LJ3qgad.jpeg!thumb-w321-webp75",material_id:"20086391968"},
|
||||
{name:"超焦距",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/5JOi8ZQeZkvzQQD.jpeg!thumb-w321-webp75",material_id:"20086391970"},
|
||||
{name:"影调",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/XeVH5bx1bz4NVdk.jpeg!thumb-w321-webp75",material_id:"20086391967"},
|
||||
{name:"名称一",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/MKosgAWo5VKpo9Z.jpeg!thumb-w321-webp75",material_id:"50600999"},
|
||||
{name:"修改测试",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/69MiA9VxKdkzjWR.png!thumb-w321-webp75",material_id:"50600229"},
|
||||
{name:"有门槛的我",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/P98i3gdgDw3Rmx5.png!thumb-w321-webp75",material_id:"506093422"},
|
||||
{name:"222嗯嗯1",thumbnail:"https://stage.meitudata.com/public/creator/ed70a3c696c8e7b.jpg!thumb-w321-webp75",material_id:"50693244"},
|
||||
{name:"抠图批量拼图",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/pA2S9lvNpMY4X3N.jpeg!thumb-w321-webp75",material_id:"506002368"},
|
||||
{name:"滤镜流程11",thumbnail:"https://material-center-pre.meitudata.com/material/image/6194a57b5b9ef7678.jpg!thumb-w321-webp75",material_id:"506017292"},
|
||||
{name:"月辉",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/wOXiBYpWgxA7ej5.jpeg!thumb-w321-webp75",material_id:"5060112313"},
|
||||
{name:"旧-美食手绘1",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/0lZCW9BrDgMroLL.jpeg!thumb-w321-webp75",material_id:"5060002001"},
|
||||
{name:"hsxTest11.8",thumbnail:"https://material-center-pre.meitudata.com/material/image/6189f29b48f165954.jpg!thumb-w321-webp75",material_id:"506530963"},
|
||||
{name:"GT G",thumbnail:"http://xximg2.meitudata.com/Z9DCJpkB2l.jpeg!thumb-w321-webp75",material_id:"20085081215"},
|
||||
{name:"自然",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/j4QUVvP9GPkJ4n3.jpeg!thumb-w321-webp75",material_id:"20076051317"},
|
||||
{name:"自然",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/5JOi8o1nKlqXmb2.jpeg!thumb-w321-webp75",material_id:"20076051233"},
|
||||
{name:"Room",thumbnail:"https://xximg1.meitudata.com/WYphm4QnOx.jpeg!thumb-w321-webp75",material_id:"20076052148"},
|
||||
{name:"模糊",thumbnail:"https://xximg1.meitudata.com/qR1tJmaVZg.jpeg!thumb-w321-webp75",material_id:"20076052016"},
|
||||
{name:"追光",thumbnail:"https://xximg1.meitudata.com/mbZHyl6E8Y.jpeg!thumb-w321-webp75",material_id:"20076051714"},
|
||||
{name:"春樱",thumbnail:"https://xximg1.meitudata.com/OX8i0kV1vG.jpeg!thumb-w321-webp75",material_id:"20076051634"},
|
||||
{name:"夏橙",thumbnail:"https://xximg1.meitudata.com/YkVH1doZzv.jpeg!thumb-w321-webp75",material_id:"20076051635"},
|
||||
{name:"梨花白",thumbnail:"https://xximg1.meitudata.com/bBLUvgJmoK.jpeg!thumb-w321-webp75",material_id:"20076051633"},
|
||||
{name:"青柠",thumbnail:"https://xximg1.meitudata.com/gn9SOPYgQ6.jpeg!thumb-w321-webp75",material_id:"20076051733"},
|
||||
{name:"西柚",thumbnail:"https://xximg1.meitudata.com/WXgfmKYZJv.jpeg!thumb-w321-webp75",material_id:"20076051628"},
|
||||
{name:"恋人未满",thumbnail:"https://xximg1.meitudata.com/3YVfO0zBXJ.jpeg!thumb-w321-webp75",material_id:"20076051075"},
|
||||
{name:"春樱",thumbnail:"https://xximg1.meitudata.com/k5DIOxgJpN.jpeg!thumb-w321-webp75",material_id:"20076291634"},
|
||||
{name:"自然",thumbnail:"https://xximg1.meitudata.com/nBqUoGPX5Q.jpeg!thumb-w321-webp75",material_id:"20076051907"},
|
||||
{name:"Forest",thumbnail:"https://xximg1.meitudata.com/V2jTkoYa96.jpeg!thumb-w321-webp75",material_id:"20106191835"},
|
||||
{name:"高级灰Ⅱ",thumbnail:"https://xximg1.meitudata.com/LEKSJO5x8V.jpeg!thumb-w321-webp75",material_id:"20076051853"},
|
||||
{name:"晴空",thumbnail:"https://xximg1.meitudata.com/LEKSJO5VaL.jpeg!thumb-w321-webp75",material_id:"20076052027"},
|
||||
{name:"白兔糖",thumbnail:"https://xximg1.meitudata.com/k5DIOjzV9d.jpeg!thumb-w321-webp75",material_id:"2007605675"},
|
||||
{name:"测",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/zwdte8R2e5KMMmm.jpeg!thumb-w321-webp75",material_id:"506000000"},
|
||||
{name:"素颜",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/DyOHJNKyxWGbpeg.jpeg!thumb-w321-webp75",material_id:"20076052222"},
|
||||
{name:"奶杏",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/3YVf1DOlq5jVlLe.jpeg!thumb-w321-webp75",material_id:"20076052221"},
|
||||
{name:"蜜桃",thumbnail:"https://xximg1.meitudata.com/9QktygQgDn.jpeg!thumb-w321-webp75",material_id:"20076291732"},
|
||||
{name:"青柠",thumbnail:"https://xximg1.meitudata.com/edzuvqDqwJ.jpeg!thumb-w321-webp75",material_id:"20076291733"},
|
||||
{name:"西柚",thumbnail:"https://xximg1.meitudata.com/kGVuOxgxm5.jpeg!thumb-w321-webp75",material_id:"20076291628"},
|
||||
{name:"牛油果",thumbnail:"https://xximg1.meitudata.com/1zXU1zyp3V.jpeg!thumb-w321-webp75",material_id:"20076292053"},
|
||||
{name:"胶片字体1",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/wkQsv9BqOlk01j6.jpeg!thumb-w321-webp75",material_id:"506001241"},
|
||||
{name:"503cw",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/YadfjNxP2ng3b0v.jpeg!thumb-w321-webp75",material_id:"506001236"},
|
||||
{name:"爱心",thumbnail:"https://xximg1.meitudata.com/8D5Fwm9VLE.jpeg!thumb-w321-webp75",material_id:"20079971111"},
|
||||
{name:"",thumbnail:"https://xximg1.meitudata.com/xkbsQOl9bX.jpeg!thumb-w321-webp75",material_id:"20079971995"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/YadfjWvZDeK8Pjb.jpeg!thumb-w321-webp75",material_id:"200799700078"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/54Kf8ZNP6YkBdnZ.jpeg!thumb-w321-webp75",material_id:"200799700077"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/20dfEzWa33vvbEJ.jpeg!thumb-w321-webp75",material_id:"200799700076"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/L3xFj5Y1l5qyO8k.jpeg!thumb-w321-webp75",material_id:"200799700075"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/qp4IRaqOvg208Vx.jpeg!thumb-w321-webp75",material_id:"200799700074"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/opkIW3BY6gJ6DP8.jpeg!thumb-w321-webp75",material_id:"200799700073"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/39nT1zN9v2p5BBy.jpeg!thumb-w321-webp75",material_id:"200799700072"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/Kz3fp1lekbGJY52.jpeg!thumb-w321-webp75",material_id:"200799700071"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/20dfEz9V3L935WD.jpeg!thumb-w321-webp75",material_id:"200799700070"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/R3GFJpZEd0pD5xY.jpeg!thumb-w321-webp75",material_id:"200799700069"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/54Kf8o3GlPJgW3Q.jpeg!thumb-w321-webp75",material_id:"200799700067"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/DaofJN9Gzxd8O5a.jpeg!thumb-w321-webp75",material_id:"200799700063"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/qp4IRN9PaZ1Penl.jpeg!thumb-w321-webp75",material_id:"200799700055"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/vkRsK6OxQ60gkJR.jpeg!thumb-w321-webp75",material_id:"200799700045"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/1ZLIm5ExEmVpobj.jpeg!thumb-w321-webp75",material_id:"200799700053"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/wkQsvL9y9XX1ZL8.jpeg!thumb-w321-webp75",material_id:"200799700054"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/BmDFqnXBXod6LKx.jpeg!thumb-w321-webp75",material_id:"200799700061"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/39nT1DmnGNQp8Gy.jpeg!thumb-w321-webp75",material_id:"200799700060"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/k2ou2a6aPWDR5nX.jpeg!thumb-w321-webp75",material_id:"200799700058"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/Q3bFyBOB1DxY6Dx.jpeg!thumb-w321-webp75",material_id:"200799700059"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/O3RFRL3v0Jpd0Wk.jpeg!thumb-w321-webp75",material_id:"200799700057"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/BmDFqnWadYGzXxP.jpeg!thumb-w321-webp75",material_id:"20079970049"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/Q3bFyBQ8JLx2Wvb.jpeg!thumb-w321-webp75",material_id:"20079970051"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/vkRsK6eLxeGj9w8.jpeg!thumb-w321-webp75",material_id:"200799700041"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/gkmsKBGp36w8wEO.jpeg!thumb-w321-webp75",material_id:"200799700056"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/ee9h6Qk4Y1wJpoY.jpeg!thumb-w321-webp75",material_id:"200799700047"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/jeyhVvLBDqo64yy.jpeg!thumb-w321-webp75",material_id:"20079970050"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/DaofJNY4pKnpQxa.jpeg!thumb-w321-webp75",material_id:"20079970053"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/99ETG9z6NzjmBwQ.jpeg!thumb-w321-webp75",material_id:"200799700046"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/ee9h6QD4PGmGBGa.jpeg!thumb-w321-webp75",material_id:"200799700042"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/BmDFqnwGbGvXPq3.png!thumb-w321-webp75",material_id:"200799700038"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/VwJigjRRPoRz8Xl.png!thumb-w321-webp75",material_id:"200799700039"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/54Kf8BmB9dyqY2k.jpeg!thumb-w321-webp75",material_id:"200799700027"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/ze1hXRywlnq18zj.jpeg!thumb-w321-webp75",material_id:"200799700025"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/xkbs1eVvOEB46wE.jpeg!thumb-w321-webp75",material_id:"200799700032"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/bxgsY85V4j5W3PY.jpeg!thumb-w321-webp75",material_id:"200799700034"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/54Kf8oxaX5kVpN6.jpeg!thumb-w321-webp75",material_id:"200799700033"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/EVvIj5VjGJyBNLO.png!thumb-w321-webp75",material_id:"200799700031"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/Q3bFyJ2yqXlmJJz.png!thumb-w321-webp75",material_id:"200799700030"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/1ZLImgemPooxWqv.jpeg!thumb-w321-webp75",material_id:"200799700024"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8D5FJjdJmO4VRbg.jpeg!thumb-w321-webp75",material_id:"200799700029"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/EVvIj595ekZpN3X.jpeg!thumb-w321-webp75",material_id:"200799700023"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/vkRsKg3OONyzZLb.png!thumb-w321-webp75",material_id:"200799700021"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/496TndEvWqJynwo.png!thumb-w321-webp75",material_id:"200799700019"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8D5FJjkBmkNlpkd.png!thumb-w321-webp75",material_id:"200799700020"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/WPWF3ODzRYPzo3K.jpeg!thumb-w321-webp75",material_id:"200799700018"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/PVQIdBDb3b998XB.jpeg!thumb-w321-webp75",material_id:"200799700017"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/99ETGwpo0Lv8dEZ.jpeg!thumb-w321-webp75",material_id:"200799700008"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/gkmsKQKGPVm3j8E.jpeg!thumb-w321-webp75",material_id:"200799700012"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8D5FJjJJ310zYBQ.jpeg!thumb-w321-webp75",material_id:"200799700010"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/lpvIjojjEYRbwWL.jpeg!thumb-w321-webp75",material_id:"200799700011"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/xkbs1e1ee83wlP0.jpeg!thumb-w321-webp75",material_id:"200799700014"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/DaofJWJnxRe3W09.jpeg!thumb-w321-webp75",material_id:"200799700015"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/XRLI50Bdlg9joZ2.png!thumb-w321-webp75",material_id:"200799700009"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/99ETGwkej4aqVjo.png!thumb-w321-webp75",material_id:"200799700016"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/VwJikyzE29.png!thumb-w321-webp75",material_id:"200799700000"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/ze1h5O9oKb.jpeg!thumb-w321-webp75",material_id:"200799700002"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/a3wFLXLnx2.jpeg!thumb-w321-webp75",material_id:"200799700001"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/6DqFRdykvn.png!thumb-w321-webp75",material_id:"200799700004"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/1ZLI1pjZgP.jpeg!thumb-w321-webp75",material_id:"200799700003"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/opkIn0ZXgW.jpeg!thumb-w321-webp75",material_id:"200799700006"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/ze1h5VwNLD.jpeg!thumb-w321-webp75",material_id:"20079976666"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/mlahykPGYd.jpeg!thumb-w321-webp75",material_id:"2007997666"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/XRLIPQX4qj.jpeg!thumb-w321-webp75",material_id:"20079972"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/k2ouOWwP2b.jpeg!thumb-w321-webp75",material_id:"20079971"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/xkbsQP2W5z.jpeg!thumb-w321-webp75",material_id:"20079971234"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/EVvIjl5B2q1P3Ld.jpeg!thumb-w321-webp75",material_id:"200799700062"},
|
||||
{name:"新年静物",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8D5FJzenN2v99KG.jpeg!thumb-w321-webp75",material_id:"200799700079"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/20dfEzd1lndjOwg.jpeg!thumb-w321-webp75",material_id:"20079972282"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/nplIyLnnEm9o41W.png!thumb-w321-webp75",material_id:"200799700022"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/ze1h5ONoeg.png!thumb-w321-webp75",material_id:"200799700007"},
|
||||
{name:"原生",thumbnail:"https://xximg1.meitudata.com/XeVHPQpbgR.jpeg!thumb-w321-webp75",material_id:"20079930000"},
|
||||
{name:"减龄2",thumbnail:"https://xximg1.meitudata.com/GPoUPW5m8n.jpeg!thumb-w321-webp75",material_id:"20079930003"},
|
||||
{name:"质感",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/nBJcyLgw0QZmvB2.png!thumb-w321-webp75",material_id:"20079932147"},
|
||||
{name:"眼睑下至",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/1zVH1xKebW.jpeg!thumb-w321-webp75",material_id:"20079930007"},
|
||||
{name:"原生2",thumbnail:"https://xximg1.meitudata.com/aOWsLZ14vp.jpeg!thumb-w321-webp75",material_id:"20079930001"},
|
||||
{name:"减龄2优化",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/5JOiDRnL9l.jpeg!thumb-w321-webp75",material_id:"20079930070"},
|
||||
{name:"DIOR",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/5JOi8BVv09mRyGK.jpeg!thumb-w321-webp75",material_id:"20079930075"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/N3OFqdNzda.jpeg!thumb-w321-webp75",material_id:"20079932157"},
|
||||
{name:"bling",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/9nzUy0eQGq.png!thumb-w321-webp75",material_id:"20079932158"},
|
||||
{name:"色散光",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/JdaUWkbq92.png!thumb-w321-webp75",material_id:"20079932154"},
|
||||
{name:"闪光夏日",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/bBLUvkadVZ.jpeg!thumb-w321-webp75",material_id:"20079932153"},
|
||||
{name:"闪光女团",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/qR1tJPGR0j.jpeg!thumb-w321-webp75",material_id:"20079930053"},
|
||||
{name:"闪光少女",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/eqOHv3wnlD.jpeg!thumb-w321-webp75",material_id:"20079932152"},
|
||||
{name:"bling01",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/EPdULXNn66.jpeg!thumb-w321-webp75",material_id:"20079930010"},
|
||||
{name:"bling02",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/6kOHR9OGvP.jpeg!thumb-w321-webp75",material_id:"20079930011"},
|
||||
{name:"bling03",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/eqOHv38nPz.jpeg!thumb-w321-webp75",material_id:"20079930012"},
|
||||
{name:"Disco6",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/RwXHmzP9Y0.jpeg!thumb-w321-webp75",material_id:"20079930009"},
|
||||
{name:"Dream1",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/XeVHPQWGGZ.jpeg!thumb-w321-webp75",material_id:"20079930013"},
|
||||
{name:"Hypno1",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/j4QUeORQE4.jpeg!thumb-w321-webp75",material_id:"20079930014"},
|
||||
{name:"Stellar2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/5JOiDpKNRz.jpeg!thumb-w321-webp75",material_id:"20079930008"},
|
||||
{name:"光1",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/OX8i06ZB9D.jpeg!thumb-w321-webp75",material_id:"20079930004"},
|
||||
{name:"Prisma1",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/JdXHWkgq5D.jpeg!thumb-w321-webp75",material_id:"20079930017"},
|
||||
{name:"Plastic1",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/V2jTkWZbP6.jpeg!thumb-w321-webp75",material_id:"20079930016"},
|
||||
{name:"莫奈",thumbnail:"https://xximg1.meitudata.com/9nzUy0bwDV.png!thumb-w321-webp75",material_id:"20079932086"},
|
||||
{name:"雾柔水光",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/JdaUWkEplJ.png!thumb-w321-webp75",material_id:"20079932146"},
|
||||
{name:"muji",thumbnail:"https://xximg1.meitudata.com/LEasJNJplP.png!thumb-w321-webp75",material_id:"20079932148"},
|
||||
{name:"相机打光测试",thumbnail:"https://xximg1.meitudata.com/j4QUexO3K5.jpeg!thumb-w321-webp75",material_id:"20079932054"},
|
||||
{name:"1222",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/3XwSOKRJjx.jpeg!thumb-w321-webp75",material_id:"20079931222"},
|
||||
{name:"1333",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/EQYuL9LqvV.jpeg!thumb-w321-webp75",material_id:"20079931333"},
|
||||
{name:"1999",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/VqVfkykO5y.jpeg!thumb-w321-webp75",material_id:"20079931999"},
|
||||
{name:"1666",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/1pgI1plVVv.jpeg!thumb-w321-webp75",material_id:"20079931666"},
|
||||
{name:"1888",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/OJbF06VvmK.jpeg!thumb-w321-webp75",material_id:"20079931888"},
|
||||
{name:"1888",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/ke8UOWwVz6.jpeg!thumb-w321-webp75",material_id:"20079931777"},
|
||||
{name:"2057",thumbnail:"https://xximg1.meitudata.com/3YVfOVKVmm.jpeg!thumb-w321-webp75",material_id:"20079932057"},
|
||||
{name:"五一鱼块",thumbnail:"https://xximg1.meitudata.com/39nTOVegOn.jpeg!thumb-w321-webp75",material_id:"20079932056"},
|
||||
{name:"五一",thumbnail:"https://xximg1.meitudata.com/bBZcvykbxP.png!thumb-w321-webp75",material_id:"20079932053"},
|
||||
{name:"bling04",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/OX8i06XB3L.jpeg!thumb-w321-webp75",material_id:"20079930015"},
|
||||
{name:"元旦",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/mbZHO6bOgR5YgdB.jpeg!thumb-w321-webp75",material_id:"20106401993"},
|
||||
{name:"瞬间",thumbnail:"https://xximg1.meitudata.com/y59Ib9JKjm.jpeg!thumb-w321-webp75",material_id:"20106401997"},
|
||||
{name:"新专辑轰顶",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/BR7fMkae0elL9DK.png!thumb-w321-webp75",material_id:"506093294"},
|
||||
{name:"新素材",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/LL8SozrWaMVRP5L.png!thumb-w321-webp75",material_id:"506093299"},
|
||||
{name:"素材不在功能页",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/69MiA9JxOErJvvP.png!thumb-w321-webp75",material_id:"506093238"},
|
||||
{name:"我被禁用了😄我被禁用了😄",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/D18Iz3ZaAPm0za3.png!thumb-w321-webp75",material_id:"506093239"},
|
||||
{name:"低版本不可见",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/757SWMrAkzKAorX.png!thumb-w321-webp75",material_id:"506093243"},
|
||||
{name:"3d立体弹窗",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/k4gtA430gyk3Wx9.png!thumb-w321-webp75",material_id:"506093241"},
|
||||
{name:"加州",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/RKgUJnKn126zbGG.jpeg!thumb-w321-webp75",material_id:"50602339"},
|
||||
{name:"爱心光",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/j4GcVXWgv200k0D.jpeg!thumb-w321-webp75",material_id:"506002288"},
|
||||
{name:"2053太空漫游",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/wgNUven5XxgKmG4.jpeg!thumb-w321-webp75",material_id:"20096492276"},
|
||||
{name:"CCD",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/XepU5b3WG3BDJNp.jpeg!thumb-w321-webp75",material_id:"20096492265"},
|
||||
{name:"IMAX胶片",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/bBZcYlQVDNVde5Y.jpeg!thumb-w321-webp75",material_id:"20096492254"},
|
||||
{name:"皮囊之下",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/p0LTO938OKJLV2k.jpeg!thumb-w321-webp75",material_id:"506002350"},
|
||||
{name:"号手就位",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/J34FBw2bEwzGbWp.jpeg!thumb-w321-webp75",material_id:"506002317"},
|
||||
{name:"海绵3",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/26guLmK1p0M13Zr.jpeg!thumb-w321-webp75",material_id:"506010277"},
|
||||
{name:"海绵4",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/KgaiJr4o77waN4d.jpeg!thumb-w321-webp75",material_id:"506010276"},
|
||||
{name:"海绵1",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/71MfrYOoEDyKLJA.jpeg!thumb-w321-webp75",material_id:"506010279"},
|
||||
{name:"TR2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/k51F2wNOkqQgBjX.jpeg!thumb-w321-webp75",material_id:"506002345"},
|
||||
{name:"TR3",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/JdaUB94WJJqQlwK.jpeg!thumb-w321-webp75",material_id:"506002344"},
|
||||
{name:"TR4",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/5JeH8WzDLm1NmPy.jpeg!thumb-w321-webp75",material_id:"506002347"},
|
||||
{name:"TR5",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/lkjUjGvk4VORqlR.jpeg!thumb-w321-webp75",material_id:"506002343"},
|
||||
{name:"TR6",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/k51F2wNOLjj94dK.jpeg!thumb-w321-webp75",material_id:"506002346"},
|
||||
{name:"乌布",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/V2xig11N0vQLpxm.jpeg!thumb-w321-webp75",material_id:"506002333"},
|
||||
{name:"微缩世界",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/oJQiWgqo5kodE1B.jpeg!thumb-w321-webp75",material_id:"506002298"},
|
||||
{name:"微缩世界Ⅱ",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/N8RHzP6aP44Xex6.jpeg!thumb-w321-webp75",material_id:"506002299"},
|
||||
{name:"旅程",thumbnail:"https://xximg1.meitudata.com/V2jTkEY8Y9.jpeg!thumb-w321-webp75",material_id:"20086101254"},
|
||||
{name:"旅程",thumbnail:"https://xximg1.meitudata.com/GPoUPwOj1b.jpeg!thumb-w321-webp75",material_id:"20086101315"},
|
||||
{name:"且听风吟",thumbnail:"https://xximg1.meitudata.com/Z3VspeGOy3.jpeg!thumb-w321-webp75",material_id:"2008610635"},
|
||||
{name:"Sky",thumbnail:"https://xximg1.meitudata.com/p0GcZPbnV0.jpeg!thumb-w321-webp75",material_id:"20086101612"},
|
||||
{name:"清新蓝",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/BbWiqXBp8X869e9.jpeg!thumb-w321-webp75",material_id:"20086162162"},
|
||||
{name:"男友力",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/6PocqE9aB8nZgOl.jpeg!thumb-w321-webp75",material_id:"20086161259"},
|
||||
{name:"男友力",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8boiJnm9e69J3GB.jpeg!thumb-w321-webp75",material_id:"20086161256"},
|
||||
{name:"男友力",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/oeGiWgmVL06ppzo.jpeg!thumb-w321-webp75",material_id:"20086161469"},
|
||||
{name:"chiffon",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/JdXHB6PXY9dzmjl.jpeg!thumb-w321-webp75",material_id:"2008607975"},
|
||||
{name:"新年限定",thumbnail:"https://xximg1.meitudata.com/mlahymLEBk.jpeg!thumb-w321-webp75",material_id:"20086072015"},
|
||||
{name:"新春食堂",thumbnail:"https://xximg1.meitudata.com/dDpFaD19J9.jpeg!thumb-w321-webp75",material_id:"20086071687"},
|
||||
{name:"围炉",thumbnail:"https://xximg1.meitudata.com/jo2UegGjqj.jpeg!thumb-w321-webp75",material_id:"20086071688"},
|
||||
{name:"橘子汽水",thumbnail:"https://xximg1.meitudata.com/voWUlvO8Dd.jpeg!thumb-w321-webp75",material_id:"2008607571"},
|
||||
{name:"舒芙蕾",thumbnail:"https://xximg1.meitudata.com/xmdFQwl5J0.jpeg!thumb-w321-webp75",material_id:"2008607569"},
|
||||
{name:"野Ⅰ",thumbnail:"https://xximg1.meitudata.com/6KwCRlbG6g.jpeg!thumb-w321-webp75",material_id:"20086070001"},
|
||||
{name:"野餐Ⅱ",thumbnail:"https://xximg1.meitudata.com/Nzjuq2XDGQ.jpeg!thumb-w321-webp75",material_id:"20086070002"},
|
||||
{name:"食欲",thumbnail:"https://xximg1.meitudata.com/jo2UegGzVl.jpeg!thumb-w321-webp75",material_id:"20086071585"},
|
||||
{name:"食欲",thumbnail:"https://xximg1.meitudata.com/0J6fWJbYW8.jpeg!thumb-w321-webp75",material_id:"20086071587"},
|
||||
{name:"橘子汽水",thumbnail:"https://xximg1.meitudata.com/bz0uvoO5Po.jpeg!thumb-w321-webp75",material_id:"20086071908"},
|
||||
{name:"",thumbnail:"https://xximg1.meitudata.com/xmdFQwgNGx.png!thumb-w321-webp75",material_id:"2008607014"},
|
||||
{name:"粉花面包",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/gkmsKBakKNO6ynd.jpeg!thumb-w321-webp75",material_id:"2008607973"},
|
||||
{name:"",thumbnail:"https://xximg1.meitudata.com/RzLumonEvG.png!thumb-w321-webp75",material_id:"2008607015"},
|
||||
{name:"Brunch",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/V2jTgxyR4xG9k4d.jpeg!thumb-w321-webp75",material_id:"20086072197"},
|
||||
{name:"vista200",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/LJwUjvN4awZDWOw.jpeg!thumb-w321-webp75",material_id:"506002301"},
|
||||
{name:"胶片时光",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/kBwi28Wm6y698oy.jpeg!thumb-w321-webp75",material_id:"20086171381"},
|
||||
{name:"胶片时光",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8boiJnmYZ8NbvJ6.jpeg!thumb-w321-webp75",material_id:"20086171339"},
|
||||
{name:"胶片时光",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/vEdtKOx0n2gEyBg.jpeg!thumb-w321-webp75",material_id:"20086171336"},
|
||||
{name:"菲林日记",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/OdpiRJVedvxlR4m.jpeg!thumb-w321-webp75",material_id:"20096221571"},
|
||||
{name:"菲林日记",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/kBwi28w05RB11de.jpeg!thumb-w321-webp75",material_id:"20096221570"},
|
||||
{name:"菲林日记",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/KBPipZwDElPR1bl.jpeg!thumb-w321-webp75",material_id:"20096221783"},
|
||||
{name:"菲林日记",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/2bkiEXqkWmBZzjL.jpeg!thumb-w321-webp75",material_id:"20096221781"},
|
||||
{name:"菲林日记",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/PnkTd0zBvKKRYb0.jpeg!thumb-w321-webp75",material_id:"20096221780"},
|
||||
{name:"Outdoors",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/NL9HzPdl9WLnlq9.jpeg!thumb-w321-webp75",material_id:"20086172023"},
|
||||
{name:"蒸汽波",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/DyjUJpgEgyP8nDL.jpeg!thumb-w321-webp75",material_id:"506002182"},
|
||||
{name:"落日",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/V2jTgj1akYWmEvP.jpeg!thumb-w321-webp75",material_id:"20106112264"},
|
||||
{name:"音浪",thumbnail:"http://xximg2.meitudata.com/VXgfk8zEJ3.jpeg!thumb-w321-webp75",material_id:"20106111100"},
|
||||
{name:"毕业季",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/y56Fb5qaXq.jpeg!thumb-w321-webp75",material_id:"20076121254"},
|
||||
{name:"游乐园",thumbnail:"https://xximg1.meitudata.com/N8eUq2XE0E.jpeg!thumb-w321-webp75",material_id:"20076091595"},
|
||||
{name:"粉黛",thumbnail:"https://xximg1.meitudata.com/wgNU3GlNRj.jpeg!thumb-w321-webp75",material_id:"20076091618"},
|
||||
{name:"游乐园",thumbnail:"https://xximg1.meitudata.com/Z3GfpjWOKV.jpeg!thumb-w321-webp75",material_id:"20076091596"},
|
||||
{name:"水彩画",thumbnail:"https://xximg1.meitudata.com/eqOHvqo0ej.jpeg!thumb-w321-webp75",material_id:"20106041764"},
|
||||
{name:"钢笔淡彩",thumbnail:"https://xximg1.meitudata.com/V2jTkopPGQ.jpeg!thumb-w321-webp75",material_id:"20106041765"},
|
||||
{name:"质感",thumbnail:"https://xximg1.meitudata.com/XepUPNP4WP.png!thumb-w321-webp75",material_id:"20076061608"},
|
||||
{name:"质感",thumbnail:"https://xximg1.meitudata.com/9nzUydyWeB.png!thumb-w321-webp75",material_id:"20076061589"},
|
||||
{name:"质感",thumbnail:"http://xximg2.meitudata.com/yObUbokjlb.jpeg!thumb-w321-webp75",material_id:"20076061609"},
|
||||
{name:"荼白",thumbnail:"https://xximg1.meitudata.com/6kOHRW8WGD.jpeg!thumb-w321-webp75",material_id:"20076061859"}
|
||||
]
|
||||
|
||||
public totalCount(): number {
|
||||
return this.dataArray.length;
|
||||
}
|
||||
|
||||
public getData(index: number): Material | undefined {
|
||||
return this.dataArray[index];
|
||||
}
|
||||
|
||||
public addData(index: number, data: Material): void {
|
||||
this.dataArray.splice(index, 0, data);
|
||||
this.notifyDataAdd(index);
|
||||
}
|
||||
|
||||
public pushData(data: Material): void {
|
||||
this.dataArray.push(data);
|
||||
this.notifyDataAdd(this.dataArray.length - 1);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
/*
|
||||
* Copyright (C) 2023 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { ImageKnifeComponent, ImageKnifeOption, FileUtils, ImageKnifeGlobal, GetRes1 } from '@ohos/libraryimageknife'
|
||||
import common from '@ohos.app.ability.common'
|
||||
import { GetRes2 } from '@ohos/sharedlibrary2'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct Index {
|
||||
@State imageOption1: ImageKnifeOption = {
|
||||
loadSrc: $r('app.media.icon'),
|
||||
}
|
||||
@State imageOption2: ImageKnifeOption = {
|
||||
loadSrc: $r('app.media.icon'),
|
||||
}
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Column() {
|
||||
Button('点击HSP1主图，HSP2占位,无context').onClick(() => {
|
||||
let mainRes = GetRes1.getSample1();
|
||||
let placeholderRes = GetRes2.getSample2();
|
||||
this.imageOption1 = {
|
||||
loadSrc:mainRes,
|
||||
placeholderSrc:placeholderRes
|
||||
}
|
||||
})
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageOption1 }).width(300).height(300).backgroundColor(Color.Pink)
|
||||
Button('点击HSP1主图，HSP2占位,有context ').onClick(() => {
|
||||
let mainRes = GetRes1.getSample1();
|
||||
let placeholderRes = GetRes2.getSample2();
|
||||
this.imageOption2 = {
|
||||
loadSrc:mainRes,
|
||||
placeholderSrc:placeholderRes,
|
||||
context:getContext(this) as common.UIAbilityContext
|
||||
}
|
||||
})
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageOption2 }).width(300).height(300).backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
}.width('100%')
|
||||
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeComponent, ScaleType,ImageKnife} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeOption} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeGlobal} from '@ohos/libraryimageknife'
|
||||
import {RotateImageTransformation} from '@ohos/libraryimageknife'
|
||||
import {Material} from './model/Material'
|
||||
import {TestDataSource} from './model/TestDataSource'
|
||||
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct photosPausedResumedPage {
|
||||
private data: TestDataSource = new TestDataSource();
|
||||
|
||||
private elementScroller: Scroller = new Scroller()
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
|
||||
Button('点击暂停加载')
|
||||
.margin({top:10,bottom:5})
|
||||
.onClick(()=>{
|
||||
let imageKnife:ImageKnife|undefined = ImageKnifeGlobal.getInstance().getImageKnife();
|
||||
if(imageKnife!= undefined){
|
||||
imageKnife.pauseRequests()
|
||||
}
|
||||
})
|
||||
|
||||
Button('点击重新加载')
|
||||
.margin({top:10,bottom:5})
|
||||
.onClick(()=>{
|
||||
let imageKnife:ImageKnife|undefined = ImageKnifeGlobal.getInstance().getImageKnife();
|
||||
if(imageKnife!= undefined){
|
||||
imageKnife.resumeRequests()
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
List({ space: 20, scroller: this.elementScroller }) {
|
||||
LazyForEach(this.data, (item: Material, index) => {
|
||||
ListItem() {
|
||||
Column() {
|
||||
Stack({ alignContent: Alignment.BottomEnd }) {
|
||||
// 滤镜图片
|
||||
ImageKnifeComponent({ imageKnifeOption: {
|
||||
loadSrc: item.thumbnail,
|
||||
mainScaleType: ScaleType.FIT_XY,
|
||||
} })
|
||||
}
|
||||
.width(56).height(56)
|
||||
//滤镜标题
|
||||
Text(item.name)
|
||||
.fontSize(10)
|
||||
.maxLines(1)
|
||||
.fontColor(Color.White)
|
||||
.textAlign(TextAlign.Center)
|
||||
.layoutWeight(1)
|
||||
.width('100%')
|
||||
.backgroundColor(Color.Orange)
|
||||
}
|
||||
.width(56)
|
||||
.height(72)
|
||||
.clip(true)
|
||||
.borderRadius(4)
|
||||
}
|
||||
}, (item: Material) => item.material_id)
|
||||
}
|
||||
.listDirection(Axis.Horizontal)
|
||||
.width('100%')
|
||||
.height(72)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeComponent, ScaleType,ImageKnife} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeOption} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeGlobal} from '@ohos/libraryimageknife'
|
||||
import {RotateImageTransformation} from '@ohos/libraryimageknife'
|
||||
import {Material} from './model/Material'
|
||||
import {TestDataSource} from './model/TestDataSource'
|
||||
import {DiskLruCache} from '@ohos/disklrucache'
|
||||
import ArkWorker from '@ohos.worker'
|
||||
import Prompt from '@system.prompt'
|
||||
@Entry
|
||||
@Component
|
||||
struct photosPausedResumedPage {
|
||||
private data: TestDataSource = new TestDataSource();
|
||||
|
||||
private elementScroller: Scroller = new Scroller()
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
|
||||
Button('这个List通过监听： 开始滑动,停止加载图片;滑动结束,恢复加载图片')
|
||||
.margin({top:10,bottom:5})
|
||||
.onClick(()=>{
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
List({ space: 20, scroller: this.elementScroller }) {
|
||||
LazyForEach(this.data, (item: Material, index) => {
|
||||
ListItem() {
|
||||
Column() {
|
||||
Stack({ alignContent: Alignment.BottomEnd }) {
|
||||
// 滤镜图片
|
||||
ImageKnifeComponent({ imageKnifeOption: {
|
||||
loadSrc: item.thumbnail,
|
||||
mainScaleType: ScaleType.FIT_XY,
|
||||
} })
|
||||
}
|
||||
.width(56).height(56)
|
||||
//滤镜标题
|
||||
Text(item.name)
|
||||
.fontSize(10)
|
||||
.maxLines(1)
|
||||
.fontColor(Color.White)
|
||||
.textAlign(TextAlign.Center)
|
||||
.layoutWeight(1)
|
||||
.width('100%')
|
||||
.backgroundColor(Color.Orange)
|
||||
}
|
||||
.width(56)
|
||||
.height(72)
|
||||
.clip(true)
|
||||
.borderRadius(4)
|
||||
}
|
||||
}, (item: Material) => item.material_id)
|
||||
}
|
||||
.onScrollStart(()=>{
|
||||
let imageKnife:ImageKnife|undefined = ImageKnifeGlobal.getInstance().getImageKnife();
|
||||
if(imageKnife!= undefined){
|
||||
imageKnife.pauseRequests()
|
||||
}
|
||||
})
|
||||
.onScrollStop(()=>{
|
||||
let imageKnife:ImageKnife|undefined = ImageKnifeGlobal.getInstance().getImageKnife();
|
||||
if(imageKnife!= undefined){
|
||||
imageKnife.resumeRequests()
|
||||
}
|
||||
})
|
||||
.listDirection(Axis.Horizontal)
|
||||
.width('100%')
|
||||
.height(72)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
aboutToDisappear(){
|
||||
// 如果用户滑动过程中就退出了页面我们需要恢复图片加载能力
|
||||
let imageKnife:ImageKnife|undefined = ImageKnifeGlobal.getInstance().getImageKnife();
|
||||
if(imageKnife!= undefined){
|
||||
imageKnife.resumeRequests()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,257 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { Pngj } from '@ohos/libraryimageknife'
|
||||
import resourceManager from '@ohos.resourceManager';
|
||||
import { FileUtils,ImageKnifeGlobal } from '@ohos/libraryimageknife'
|
||||
import { BusinessError } from '@ohos.base'
|
||||
import common from '@ohos.app.ability.common';
|
||||
interface WorkerType {
|
||||
type: string
|
||||
name: string
|
||||
}
|
||||
@Entry
|
||||
@Component
|
||||
struct PngjTestCasePage {
|
||||
pngSource1?: ArrayBuffer = undefined;
|
||||
pngSource2?: ArrayBuffer = undefined;
|
||||
pngSource3?: ArrayBuffer = undefined;
|
||||
pngSource4?: ArrayBuffer = undefined;
|
||||
pngdecodeRun1: boolean = false;
|
||||
pngdecodeRun2: boolean = false;
|
||||
pngdecodeRun3: boolean = false;
|
||||
pngdecodeRun4: boolean = false;
|
||||
rootFolder: string = '';
|
||||
@State hint1: string = 'readPngImageInfo内容展示'
|
||||
@State hint2: string = 'readPngImage内容展示'
|
||||
@State hint3: string = 'writePngWithString内容展示'
|
||||
@State hint4: string = 'writePngWithString内容展示'
|
||||
@State hint5: string = '测试readMetadata'
|
||||
@State hint6: string = '测试writeMetadata'
|
||||
@State hint7: string = '首先点击获取PNG图片buffer'
|
||||
@State hint8: string = '首先点击获取PNG图片buffer'
|
||||
@State hint9: string = '首先点击获取PNG图片buffer'
|
||||
@State hint10: string = '首先点击获取PNG图片buffer'
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Text('pngj接口测试列表').fontSize(20)
|
||||
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
|
||||
Button(this.hint7).fontSize(30)
|
||||
.onClick(() => {
|
||||
this.rootFolder = (ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).filesDir as string;
|
||||
((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext)
|
||||
.resourceManager as resourceManager.ResourceManager)
|
||||
.getMediaContent($r('app.media.pngSample').id)
|
||||
.then(data => {
|
||||
this.pngSource1 = FileUtils.getInstance().uint8ArrayToBuffer(data);
|
||||
this.hint7 = '获取buffer成功，可以测试'
|
||||
})
|
||||
.catch( (err:BusinessError) => {
|
||||
console.log('点击获取Png图片buffer err=' + err)
|
||||
})
|
||||
})
|
||||
Button('测试readPng')
|
||||
.onClick(() => {
|
||||
|
||||
if (this.pngSource1!=undefined) {
|
||||
if (!this.pngdecodeRun1) {
|
||||
this.pngdecodeRun1 = true;
|
||||
let pngj = new Pngj();
|
||||
pngj.readPngImageInfo(this.pngSource1,{pngCallback: (sender, value) => {
|
||||
this.hint1 = JSON.stringify(value);
|
||||
this.pngdecodeRun1 = false;
|
||||
}})
|
||||
|
||||
} else {
|
||||
this.hint7 = '已经在执行了,请稍等'
|
||||
}
|
||||
} else {
|
||||
this.hint7 = '请先点击此处获取buffer'
|
||||
}
|
||||
}).margin({ top: 5, left: 10 })
|
||||
|
||||
|
||||
}.width('100%')
|
||||
.height(60).backgroundColor(Color.Pink)
|
||||
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button(this.hint8).fontSize(30)
|
||||
.onClick(() => {
|
||||
|
||||
|
||||
|
||||
this.rootFolder = (ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).filesDir as string;
|
||||
((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext)
|
||||
.resourceManager as resourceManager.ResourceManager)
|
||||
.getMediaContent($r('app.media.pngSample').id)
|
||||
|
||||
.then(data => {
|
||||
this.pngSource2 = FileUtils.getInstance().uint8ArrayToBuffer(data);
|
||||
this.hint8 = '获取buffer成功，可以测试'
|
||||
})
|
||||
.catch((err:BusinessError) => {
|
||||
console.log('点击获取Png图片buffer err=' + err)
|
||||
})
|
||||
})
|
||||
Button('readPngAsync')
|
||||
.onClick(() => {
|
||||
|
||||
if (this.pngSource2!=undefined) {
|
||||
if (!this.pngdecodeRun2) {
|
||||
this.pngdecodeRun2 = true;
|
||||
let pngj = new Pngj();
|
||||
let png_worker: WorkerType = {
|
||||
type: 'classic',
|
||||
name: 'readPngImageAsync'
|
||||
}
|
||||
pngj.readPngImageAsync(png_worker, this.pngSource2!, (value:ESObject) => {
|
||||
this.hint8 = '重新获取buffer才能测试'
|
||||
this.hint2 = 'img with=' + value.width + ' img height=' + value.height
|
||||
+ ' img depth=' + value.depth + ' img ctype=' + value.ctype
|
||||
this.pngdecodeRun2 = false;
|
||||
})
|
||||
|
||||
} else {
|
||||
this.hint8 = '已经在执行了,请稍等'
|
||||
}
|
||||
} else {
|
||||
this.hint8 = '请先点击此处获取buffer'
|
||||
}
|
||||
|
||||
}).margin({ top: 5, left: 10 })
|
||||
|
||||
}.width('100%')
|
||||
.height(60).backgroundColor(Color.Pink)
|
||||
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button(this.hint9).fontSize(30)
|
||||
.onClick(() => {
|
||||
this.rootFolder = (ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).filesDir as string;
|
||||
((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext)
|
||||
.resourceManager as resourceManager.ResourceManager)
|
||||
.getMediaContent($r('app.media.pngSample').id)
|
||||
.then(data => {
|
||||
this.pngSource3 = FileUtils.getInstance().uint8ArrayToBuffer(data);
|
||||
this.hint9 = '获取buffer成功，可以测试'
|
||||
})
|
||||
.catch((err:BusinessError) => {
|
||||
console.log('点击获取Png图片buffer err=' + err)
|
||||
})
|
||||
})
|
||||
Button('测试writePngWithString')
|
||||
.onClick(() => {
|
||||
|
||||
if (this.pngSource3 != undefined) {
|
||||
if (!this.pngdecodeRun3) {
|
||||
this.pngdecodeRun3 = true;
|
||||
let pngj = new Pngj();
|
||||
let png_worker: WorkerType = {
|
||||
type: 'classic',
|
||||
name: 'writePngWithStringAsync'
|
||||
}
|
||||
pngj.writePngWithStringAsync(png_worker, this.pngSource3, ( value:ESObject) => {
|
||||
FileUtils.getInstance().createFileProcess(
|
||||
this.rootFolder + '/pngj',
|
||||
this.rootFolder + '/pngj/newPng.png',
|
||||
value)
|
||||
let png1 = new Uint8Array(value)
|
||||
this.hint3 = 'png写入后长度' + png1.byteLength + '目录文件：' + this.rootFolder + '/pngj/newPng.png' + '保存后使用2进制查看数据是否新增'
|
||||
this.pngdecodeRun3 = false;
|
||||
},'hello world')
|
||||
} else {
|
||||
this.hint9 = '已经在执行了,请稍等'
|
||||
}
|
||||
} else {
|
||||
this.hint9 = '请先点击此处获取buffer'
|
||||
}
|
||||
|
||||
}).margin({ top: 5, left: 10 })
|
||||
|
||||
}.width('100%')
|
||||
.height(60).backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
|
||||
Button(this.hint10).fontSize(30)
|
||||
.onClick(() => {
|
||||
this.rootFolder = (ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).filesDir as string;
|
||||
((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext)
|
||||
.resourceManager as resourceManager.ResourceManager)
|
||||
.getMediaContent($r('app.media.pngSample').id)
|
||||
.then(data => {
|
||||
this.pngSource4 = FileUtils.getInstance().uint8ArrayToBuffer(data);
|
||||
this.hint10 = '获取buffer成功，可以测试'
|
||||
})
|
||||
.catch((err:BusinessError) => {
|
||||
console.log('点击获取Png图片buffer err=' + err)
|
||||
})
|
||||
})
|
||||
Button('writePng')
|
||||
.onClick(()=>{
|
||||
if (this.pngSource4 != undefined) {
|
||||
if (!this.pngdecodeRun4) {
|
||||
this.pngdecodeRun4 = true;
|
||||
let pngj = new Pngj();
|
||||
let png_worker: WorkerType = {
|
||||
type: 'classic',
|
||||
name: 'writePngAsync'
|
||||
}
|
||||
pngj.writePngAsync(png_worker, this.pngSource4, ( value:ESObject) => {
|
||||
FileUtils.getInstance().createFileProcess(
|
||||
this.rootFolder + '/pngj',
|
||||
this.rootFolder + '/pngj/newPng2.png',
|
||||
value)
|
||||
let png2 = new Uint8Array(value)
|
||||
this.hint4 = 'png2未写入长度' + png2.byteLength + '目录文件：' + this.rootFolder + '/pngj/newPng2.png' + '保存后使用2进制查看数据是否新增'
|
||||
this.pngdecodeRun4 = false;
|
||||
})
|
||||
} else {
|
||||
this.hint10 = '已经在执行了,请稍等'
|
||||
}
|
||||
} else {
|
||||
this.hint10 = '请先点击此处获取buffer'
|
||||
}
|
||||
})
|
||||
.margin({ top: 5, left: 10 })
|
||||
}.width('100%')
|
||||
.height(60).backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
Text(this.hint1)
|
||||
.width('100%')
|
||||
.height(120)
|
||||
Text(this.hint2)
|
||||
.width('100%')
|
||||
.height(120)
|
||||
Text(this.hint3)
|
||||
.width('100%')
|
||||
.height(120)
|
||||
Text(this.hint4)
|
||||
.width('100%')
|
||||
.height(120)
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
||||
typedArrayToBuffer(array: Uint8Array): ArrayBuffer {
|
||||
return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeComponent} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeOption} from '@ohos/libraryimageknife'
|
||||
import {RotateImageTransformation} from '@ohos/libraryimageknife'
|
||||
import {RoundedCornersTransformation} from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct ShowErrorholderTestCasePage {
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://thirdwx.qlogo.cn/mmopen/xxxxx",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
@State imageKnifeOption: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/xxxxx",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
@State imageKnifeOption3: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/xxxxx",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
@State imageKnifeOption4: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/xxxxx",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(300).height(300)
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 }).width(300).height(300)
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 }).width(300).height(300)
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import {LruCache} from '@ohos/libraryimageknife'
|
||||
|
||||
function getRandomInt(min:number, max:number):number {
|
||||
min = Math.ceil(min);
|
||||
max = Math.floor(max);
|
||||
return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
|
||||
}
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct StorageTestLruCache {
|
||||
@State logText:string = "打印日志结果";
|
||||
@State nowNumText:string = "显示输入的数据";
|
||||
mLruCache:LruCache<string,string> = new LruCache(5);
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Text("默认创建一个容量为5的LruCache")
|
||||
.backgroundColor(Color.Blue)
|
||||
Button("随机存入一个数字0-9")
|
||||
.onClick(()=>{
|
||||
let randomNum = getRandomInt(0,10);
|
||||
this.nowNumText = ''+randomNum;
|
||||
this.mLruCache.put(randomNum+"",randomNum+"")
|
||||
this.logText = "日志结果:"+this.mLruCache.print();
|
||||
}) .margin({top:20})
|
||||
|
||||
Button(this.nowNumText)
|
||||
.margin({top:20})
|
||||
|
||||
Scroll() {
|
||||
Text(this.logText).fontSize(15)
|
||||
}.width(300).height(200).margin({top:20}).backgroundColor(Color.Pink)
|
||||
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
/*
|
||||
* Copyright (C) 2022 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {SVGParseImpl} from '@ohos/libraryimageknife'
|
||||
import { ImageKnifeComponent } from '@ohos/libraryimageknife'
|
||||
import resourceManager from '@ohos.resourceManager';
|
||||
import {BusinessError} from '@ohos.base'
|
||||
import common from '@ohos.app.ability.common';
|
||||
@Entry
|
||||
@Component
|
||||
struct svgTestCasePage {
|
||||
|
||||
@State svgSamplePixelMap?: Resource = undefined
|
||||
@State svgIconPixelMap?: Resource = undefined
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Flex({direction:FlexDirection.Row}){
|
||||
Button("加载SVG图片")
|
||||
.onClick(()=>{
|
||||
this.svgSamplePixelMap = $r('app.media.svgSample')
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
|
||||
}
|
||||
.margin({top:15})
|
||||
|
||||
Text("下面为展示图片区域").margin({top:5})
|
||||
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
|
||||
ImageKnifeComponent({imageKnifeOption:{
|
||||
loadSrc:this.svgSamplePixelMap as Resource
|
||||
}})
|
||||
.width(400)
|
||||
.height(400)
|
||||
.backgroundColor(Color.Pink)
|
||||
}.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)
|
||||
|
||||
Flex({direction:FlexDirection.Row}){
|
||||
Button("加载SVG图片")
|
||||
.onClick(()=>{
|
||||
this.svgIconPixelMap = $r('app.media.iconsvg')
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
|
||||
}
|
||||
.margin({top:15})
|
||||
|
||||
Text("下面为展示图片区域").margin({top:5})
|
||||
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
|
||||
ImageKnifeComponent({imageKnifeOption:{
|
||||
loadSrc:this.svgIconPixelMap as Resource
|
||||
}})
|
||||
.width(400)
|
||||
.height(400)
|
||||
.backgroundColor(Color.Pink)
|
||||
}.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
console.log("aboutToAppear()")
|
||||
}
|
||||
typedArrayToBuffer(array: Uint8Array): ArrayBuffer {
|
||||
return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
/*
|
||||
* Copyright (C) 2022 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import {
|
||||
ImageKnifeComponent,
|
||||
ImageKnifeOption,
|
||||
ImageKnifeGlobal,
|
||||
ImageKnife,
|
||||
ImageKnifeDrawFactory,
|
||||
ScaleType
|
||||
} from '@ohos/libraryimageknife'
|
||||
import worker from '@ohos.worker';
|
||||
@Entry
|
||||
@Component
|
||||
struct tempUrlTestPage {
|
||||
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.icon'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
|
||||
@State imageKnifeOption2: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.icon'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Text("简单示例1：加载一张本地png图片").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("加载PNG")
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption1 = {
|
||||
// loadSrc:"https://res.vmallres.com/cmscdn/CN/2023-03/a11790b9335a4d598d59f14795368e14.png.75.webp",
|
||||
loadSrc:"https://xximg1.meitudata.com/2LqS1vmqv0.png!thumb-w321-webp75",
|
||||
mainScaleType: ScaleType.FIT_XY,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
drawLifeCycle:ImageKnifeDrawFactory.createRoundLifeCycle(0,'#00000000',30)
|
||||
}
|
||||
}).margin({ top: 5, left: 3 })
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width('100%').height(300).backgroundColor(Color.Orange)
|
||||
}
|
||||
.width('100%').height(400).backgroundColor(Color.Pink)
|
||||
|
||||
Text("简单示例2：加载一张网络gif图片").fontSize(15)
|
||||
Text("gif解析在子线程,请在页面构建后创建worker,注入imageknife").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("加载GIF")
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption2 = {
|
||||
loadSrc: 'https://res.vmallres.com/cmscdn/CN/2023-03/7052a601ac3e428c84c9415ad9734735.gif',
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress:true,
|
||||
}
|
||||
}).margin({ top: 5, left: 3 })
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }).width(300).height(300)
|
||||
}.width('100%').backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
}.width('100%')
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
|
||||
}
|
||||
aboutToDisappear(){
|
||||
|
||||
}
|
||||
|
||||
onBackPress() {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {RequestOption} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeData} from '@ohos/libraryimageknife'
|
||||
import {AllCacheInfo,IAllCacheInfoCallback} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeComponent} from '@ohos/libraryimageknife'
|
||||
import {TransformType} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeOption} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeGlobal} from '@ohos/libraryimageknife'
|
||||
import {RotateImageTransformation} from '@ohos/libraryimageknife'
|
||||
import {BusinessError} from '@ohos.base'
|
||||
@Entry
|
||||
@Component
|
||||
struct TestAllCacheInfoPage {
|
||||
@State nativePixelMap?: PixelMap = undefined;
|
||||
@State networkPixelMap?: PixelMap = undefined;
|
||||
allCacheInfoCallback1:IAllCacheInfoCallback ={callback:(allCacheInfo:AllCacheInfo)=>{
|
||||
let info = allCacheInfo as AllCacheInfo;
|
||||
console.log("AllCacheInfoCallback imageknifecomponent1 memory ="+JSON.stringify(info.memoryCacheInfo))
|
||||
console.log("AllCacheInfoCallback imageknifecomponent1 resource ="+JSON.stringify(info.resourceCacheInfo))
|
||||
console.log("AllCacheInfoCallback imageknifecomponent1 data ="+JSON.stringify(info.dataCacheInfo))
|
||||
this.cacheinfo3 = "memory="+JSON.stringify(info.memoryCacheInfo)+
|
||||
"\n resource ="+JSON.stringify(info.resourceCacheInfo)+
|
||||
"\n data ="+JSON.stringify(info.dataCacheInfo)
|
||||
}}
|
||||
allCacheInfoCallback2:IAllCacheInfoCallback ={callback:(allCacheInfo:AllCacheInfo)=>{
|
||||
let info = allCacheInfo as AllCacheInfo;
|
||||
console.log("AllCacheInfoCallback ImageKnifeComponent memory ="+JSON.stringify(info.memoryCacheInfo))
|
||||
console.log("AllCacheInfoCallback ImageKnifeComponent resource ="+JSON.stringify(info.resourceCacheInfo))
|
||||
console.log("AllCacheInfoCallback ImageKnifeComponent data ="+JSON.stringify(info.dataCacheInfo))
|
||||
this.cacheinfo4 = "memory="+JSON.stringify(info.memoryCacheInfo)+
|
||||
"\n resource ="+JSON.stringify(info.resourceCacheInfo)+
|
||||
"\n data ="+JSON.stringify(info.dataCacheInfo)
|
||||
}}
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
transform: {
|
||||
transformType:TransformType.RotateImageTransformation,
|
||||
rotateImage:180
|
||||
},
|
||||
allCacheInfoCallback:this.allCacheInfoCallback1
|
||||
};
|
||||
@State imageKnifeOption: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
transform: {
|
||||
transformType:TransformType.RotateImageTransformation,
|
||||
rotateImage:180
|
||||
},
|
||||
allCacheInfoCallback:this.allCacheInfoCallback2
|
||||
};
|
||||
imageKnifeComponentAngle:number = 90;
|
||||
|
||||
@State cacheinfo1:string = "观察本地资源获取缓存信息输出"
|
||||
@State cacheinfo2:string = "观察网络资源获取缓存信息输出"
|
||||
@State cacheinfo3:string = "观察ImageKnifeComponent本地缓存输出"
|
||||
@State cacheinfo4:string = "观察ImageKnifeComponent网络缓存输出"
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("加载本地资源获取缓存信息")
|
||||
.width(300).height(25)
|
||||
.onClick(() => {
|
||||
this.testAllCacheInfoNative();
|
||||
}).margin({ top: 15 })
|
||||
Scroll() {
|
||||
Text(this.cacheinfo1).fontSize(15)
|
||||
}.width(300).height(200)
|
||||
Image(this.nativePixelMap == undefined ? '':this.nativePixelMap!)
|
||||
.width(300)
|
||||
.height(300)
|
||||
.objectFit(ImageFit.Contain)
|
||||
.backgroundColor(Color.Green)
|
||||
.margin({ top: 15 })
|
||||
Button("加载网络资源获取缓存信息").width(300).height(25)
|
||||
.onClick(() => {
|
||||
this.testAllCacheInfoNetwork();
|
||||
}).margin({ top: 15 })
|
||||
Scroll() {
|
||||
Text(this.cacheinfo2).fontSize(15)
|
||||
}.width(300).height(200)
|
||||
Image(this.networkPixelMap==undefined?'':this.networkPixelMap! )
|
||||
.width(300)
|
||||
.height(300)
|
||||
.objectFit(ImageFit.Contain)
|
||||
.backgroundColor(Color.Green)
|
||||
.margin({ top: 15 })
|
||||
|
||||
Button("ImageKnifeComponent加载本地资源获取缓存信息").width(300).height(25)
|
||||
.onClick(() => {
|
||||
this.imageKnifeComponentAngle = this.imageKnifeComponentAngle + 45;
|
||||
this.imageKnifeOption1 =
|
||||
{
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
transform: {
|
||||
transformType:TransformType.RotateImageTransformation,
|
||||
rotateImage:this.imageKnifeComponentAngle
|
||||
},
|
||||
allCacheInfoCallback:this.allCacheInfoCallback1
|
||||
};
|
||||
}).margin({ top: 15 })
|
||||
Scroll() {
|
||||
Text(this.cacheinfo3).fontSize(15)
|
||||
}.width(300).height(200)
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
|
||||
|
||||
Button("ImageKnifeComponent加载网络资源获取缓存信息").width(300).height(25)
|
||||
.onClick(() => {
|
||||
this.imageKnifeComponentAngle = this.imageKnifeComponentAngle + 45;
|
||||
this.imageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
transform: {
|
||||
transformType:TransformType.RotateImageTransformation,
|
||||
rotateImage:this.imageKnifeComponentAngle
|
||||
},
|
||||
allCacheInfoCallback:this.allCacheInfoCallback2
|
||||
};
|
||||
})
|
||||
Scroll() {
|
||||
Text(this.cacheinfo4).fontSize(15)
|
||||
}.width(300).height(200)
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(300).height(300)
|
||||
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
|
||||
}
|
||||
|
||||
private testAllCacheInfoNative() {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
imageKnifeOption.load($r('app.media.pngSample'))
|
||||
.setImageViewSize({width:300,height:300})
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
let pack = data.drawPixelMap?.imagePixelMap as PixelMap;;
|
||||
this.nativePixelMap = pack;
|
||||
return false;
|
||||
}}).addAllCacheInfoCallback({callback:(allCacheInfo:AllCacheInfo)=>{
|
||||
let info = allCacheInfo as AllCacheInfo;
|
||||
console.log("AllCacheInfoCallback memory ="+JSON.stringify(info.memoryCacheInfo))
|
||||
console.log("AllCacheInfoCallback resource ="+JSON.stringify(info.resourceCacheInfo))
|
||||
console.log("AllCacheInfoCallback data ="+JSON.stringify(info.dataCacheInfo))
|
||||
this.cacheinfo1 = "memory="+JSON.stringify(info.memoryCacheInfo)+
|
||||
"\n resource ="+JSON.stringify(info.resourceCacheInfo)+
|
||||
"\n data ="+JSON.stringify(info.dataCacheInfo)
|
||||
}})
|
||||
ImageKnife?.call(imageKnifeOption);
|
||||
}
|
||||
|
||||
private testAllCacheInfoNetwork() {
|
||||
let ImageKnifeOption = new RequestOption();
|
||||
ImageKnifeOption.load("https://hbimg.huabanimg.com/0ef60041445edcfd6b38d20e19024b2cd9281dcc3525a4-Vy8fYO_fw658/format/webp")
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
let pack = data.drawPixelMap?.imagePixelMap as PixelMap;
|
||||
this.networkPixelMap = pack;
|
||||
console.log("imageknife2 图片2 赋值！")
|
||||
return false;
|
||||
}}).addAllCacheInfoCallback({callback:(allCacheInfo:AllCacheInfo)=>{
|
||||
let info = allCacheInfo as AllCacheInfo;
|
||||
console.log("AllCacheInfoCallback memory ="+JSON.stringify(info.memoryCacheInfo))
|
||||
console.log("AllCacheInfoCallback resource ="+JSON.stringify(info.resourceCacheInfo))
|
||||
console.log("AllCacheInfoCallback data ="+JSON.stringify(info.dataCacheInfo))
|
||||
this.cacheinfo2 = "memory="+JSON.stringify(info.memoryCacheInfo)+
|
||||
"\n resource ="+JSON.stringify(info.resourceCacheInfo)+
|
||||
"\n data ="+JSON.stringify(info.dataCacheInfo)
|
||||
}})
|
||||
.setImageViewSize({width:300,height:300})
|
||||
.rotateImage(180)
|
||||
ImageKnife?.call(ImageKnifeOption);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let ImageKnife = (ImageKnifeGlobal.getInstance().getImageKnife())
|
||||
|
|
@ -0,0 +1,243 @@
|
|||
/*
|
||||
* 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 {
|
||||
CustomDataFetchClient,
|
||||
DataFetchResult,
|
||||
DownloadClient,
|
||||
ImageKnifeComponent,
|
||||
ImageKnifeGlobal,
|
||||
ImageKnifeOption,
|
||||
LogUtil,
|
||||
ScaleType
|
||||
} from '@ohos/libraryimageknife';
|
||||
|
||||
import http from '@ohos.net.http';
|
||||
|
||||
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 TestCustomDataFetchClientWithPage {
|
||||
@State hotCommendList: CommonDataSource<string> = new CommonDataSource<string>([])
|
||||
@State singleImageKnifeOption: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.icon'),
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
@State isSingleImageVisible: boolean = true;
|
||||
@State isAllImageVisible: boolean = false;
|
||||
@State isCustom: boolean = false;
|
||||
private isAllImageAdded: boolean = false;
|
||||
private isCancelImageAdded: boolean = false;
|
||||
private data: Array<string> = [
|
||||
"http://img2.xkhouse.com/bbs/hfhouse/data/attachment/forum/corebbs/2009-11/2009113011534566298.jpg",
|
||||
"http://a.hiphotos.baidu.com/image/pic/item/e824b899a9014c087eb617650e7b02087af4f464.jpg"
|
||||
]
|
||||
private addData: Array<string> = [
|
||||
"http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg",
|
||||
"http://h.hiphotos.baidu.com/image/pic/item/902397dda144ad340668b847d4a20cf430ad851e.jpg"
|
||||
|
||||
]
|
||||
private cancelData: Array<string> = [
|
||||
"http://b.hiphotos.baidu.com/image/pic/item/359b033b5bb5c9ea5c0e3c23d139b6003bf3b374.jpg",
|
||||
"http://a.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a292d2472199d25bc315d607c7c.jpg"
|
||||
]
|
||||
|
||||
aboutToAppear(): void {
|
||||
this.hotCommendList.addData(this.hotCommendList.totalCount(), this.data)
|
||||
LogUtil.log('TestCustomDataFetch about to appear.')
|
||||
}
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
|
||||
Button("单个图片").margin(16).onClick(() => {
|
||||
LogUtil.log('TestCustomDataFetch click single.');
|
||||
this.isSingleImageVisible = true;
|
||||
this.isAllImageVisible = false;
|
||||
|
||||
this.singleImageKnifeOption = {
|
||||
loadSrc: 'http://e.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f7e41f5cfe760e0cf3d6cad6ee.jpg',
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
customGetImage: custom
|
||||
}
|
||||
})
|
||||
Button("全部图片").margin(16).onClick(() => {
|
||||
LogUtil.log('TestCustomDataFetch click all.');
|
||||
this.isSingleImageVisible = false;
|
||||
this.isAllImageVisible = true;
|
||||
|
||||
ImageKnifeGlobal.getInstance().getImageKnife()?.replaceDataFetch(new CustomDataFetchClient());
|
||||
if (!this.isAllImageAdded) {
|
||||
this.hotCommendList.addData(this.hotCommendList.totalCount(), this.addData);
|
||||
this.isAllImageAdded = true;
|
||||
}
|
||||
})
|
||||
|
||||
Button("取消自定义全部图片").margin(16).onClick(() => {
|
||||
LogUtil.log('TestCustomDataFetch click cancel.');
|
||||
this.isSingleImageVisible = false;
|
||||
this.isAllImageVisible = true;
|
||||
|
||||
ImageKnifeGlobal.getInstance().getImageKnife()?.replaceDataFetch(new DownloadClient());
|
||||
if (!this.isCancelImageAdded) {
|
||||
this.hotCommendList.addData(this.hotCommendList.totalCount(), this.cancelData);
|
||||
this.isCancelImageAdded = true;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 单个图片使用自定义网络栈
|
||||
ImageKnifeComponent({ imageKnifeOption: this.singleImageKnifeOption })
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 50 })
|
||||
.visibility(this.isSingleImageVisible ? Visibility.Visible : Visibility.None)
|
||||
|
||||
// 全部图片使用自定义网络栈
|
||||
Column() {
|
||||
Grid() {
|
||||
LazyForEach(this.hotCommendList, (item: string) => {
|
||||
GridItem() {
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: {
|
||||
loadSrc: item,
|
||||
placeholderSrc: $r('app.media.icon'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
placeholderScaleType: ScaleType.CENTER_CROP,
|
||||
mainScaleType: ScaleType.CENTER_CROP,
|
||||
}
|
||||
}).width('100%').height('100%')
|
||||
}.width('40%').height(200)
|
||||
}, (item: string) => JSON.stringify(item))
|
||||
}
|
||||
.columnsTemplate('1fr 1fr')
|
||||
.columnsGap(8)
|
||||
.rowsGap(10)
|
||||
.width('100%')
|
||||
.hitTestBehavior(HitTestMode.None)
|
||||
.maxCount(10)
|
||||
}.margin({ top: 5 })
|
||||
.visibility(this.isAllImageVisible ? Visibility.Visible : Visibility.None)
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
||||
@Concurrent
|
||||
async function custom(context: Context, loadSrc: string): Promise<DataFetchResult> {
|
||||
let result: DataFetchResult = new DataFetchResult();
|
||||
try {
|
||||
let arrayBuffers = new Array<ArrayBuffer>();
|
||||
let httpRequest = http.createHttp()
|
||||
httpRequest.on('headersReceive', (header: Object) => {
|
||||
// 跟服务器连接成功准备下载
|
||||
})
|
||||
httpRequest.on('dataReceive', (data: ArrayBuffer) => {
|
||||
// 下载数据流多次返回
|
||||
arrayBuffers.push(data);
|
||||
})
|
||||
httpRequest.on('dataEnd', () => {
|
||||
// 下载完毕
|
||||
})
|
||||
|
||||
const resultCode = await httpRequest.requestInStream(loadSrc as string,
|
||||
{
|
||||
method: http.RequestMethod.GET,
|
||||
expectDataType: http.HttpDataType.ARRAY_BUFFER,
|
||||
connectTimeout: 60000, // 可选 默认60000ms
|
||||
readTimeout: 0, // 可选, 默认为60000ms
|
||||
usingProtocol: http.HttpProtocol.HTTP1_1, // 可选,协议类型默认值由系统自动指定
|
||||
usingCache: false
|
||||
}).catch((err: Error) => {
|
||||
result.error = 'TestCustomDataFetchClientWithPage requestInStream error.' + JSON.stringify(err);
|
||||
})
|
||||
if (resultCode == 200) {
|
||||
//let combineArray = this.combineArrayBuffers(arrayBuffers);
|
||||
// 计算多个ArrayBuffer的总字节大小
|
||||
let totalByteLength = 0;
|
||||
for (const arrayBuffer of arrayBuffers) {
|
||||
totalByteLength += arrayBuffer.byteLength;
|
||||
}
|
||||
// 创建一个新的ArrayBuffer
|
||||
const combinedArrayBuffer = new ArrayBuffer(totalByteLength);
|
||||
|
||||
// 创建一个Uint8Array来操作新的ArrayBuffer
|
||||
const combinedUint8Array = new Uint8Array(combinedArrayBuffer);
|
||||
|
||||
// 依次复制每个ArrayBuffer的内容到新的ArrayBuffer中
|
||||
let offset = 0;
|
||||
for (const arrayBuffer of arrayBuffers) {
|
||||
const sourceUint8Array = new Uint8Array(arrayBuffer);
|
||||
combinedUint8Array.set(sourceUint8Array, offset);
|
||||
offset += sourceUint8Array.length;
|
||||
}
|
||||
result.data = combinedArrayBuffer;
|
||||
} else {
|
||||
result.error = 'TestCustomDataFetchClientWithPage error. resultCode = ' + resultCode;
|
||||
}
|
||||
console.log('TestCustomDataFetch single onComplete, code = ' + resultCode + ',length = ' + result.data?.byteLength);
|
||||
} catch (error) {
|
||||
result.error = 'TestCustomDataFetchClientWithPage error' + error.stack;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
/*
|
||||
* 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%')
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestGifPlayTimesPage {
|
||||
@State ImageKnifeOption1: ImageKnifeOption = {
|
||||
loadSrc: $r('app.media.icon'),
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
}
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Column() {
|
||||
Text("测试gif播放次数").fontSize(25)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
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')
|
||||
}
|
||||
})
|
||||
Button("设置gif播放1次").onClick(() => {
|
||||
this.ImageKnifeOption1 = {
|
||||
loadSrc: "https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
gif: {
|
||||
playTimes: 1
|
||||
}
|
||||
}
|
||||
})
|
||||
Button("设置gif播放2次").onClick(() => {
|
||||
this.ImageKnifeOption1 = {
|
||||
loadSrc: "https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
gif: {
|
||||
playTimes: 2
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption1 }).width(300).height(300).borderWidth(3)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnifeComponent,AntiAliasing } from '@ohos/libraryimageknife'
|
||||
import { ImageKnifeOption } from '@ohos/libraryimageknife'
|
||||
import { RotateImageTransformation } from '@ohos/libraryimageknife'
|
||||
import { RoundedCornersTransformation } from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestImageAntiAliasingWithPage {
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Text("ImageKnife开启抗锯齿").fontSize(15)
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1,imageSmoothingQuality: AntiAliasing.FIT_HIGH }).width(600).height(600)
|
||||
Text("Image开启抗锯齿").fontSize(15)
|
||||
Image($r('app.media.icon_failed'))
|
||||
.width(600)
|
||||
.height(600)
|
||||
.margin(15)
|
||||
.overlay('png', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
|
||||
.interpolation(ImageInterpolation.High)
|
||||
Text("ImageKnife开启抗锯齿且设置为中等").fontSize(15)
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1,imageSmoothingQuality: AntiAliasing.FIT_MEDIUM }).width(600).height(600)
|
||||
Text("Image开启抗锯齿且设置为中等").fontSize(15)
|
||||
Image($r('app.media.icon_failed'))
|
||||
.width(600)
|
||||
.height(600)
|
||||
.margin(15)
|
||||
.overlay('png', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
|
||||
.interpolation(ImageInterpolation.Medium)
|
||||
Text("ImageKnife未开启抗锯齿").fontSize(15)
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1,imageSmoothingEnabled: false }).width(600).height(600)
|
||||
Text("Image未开启抗锯齿").fontSize(15)
|
||||
Image($r('app.media.icon_failed'))
|
||||
.width(600)
|
||||
.height(600)
|
||||
.margin(15)
|
||||
.overlay('png', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
/*
|
||||
* 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)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
/*
|
||||
* 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)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
/*
|
||||
* 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)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,239 @@
|
|||
/*
|
||||
* 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,
|
||||
ImageKnifeData,
|
||||
RequestOption,
|
||||
Size,
|
||||
CacheType
|
||||
} from '@ohos/libraryimageknife'
|
||||
import image from '@ohos.multimedia.image';
|
||||
import { BusinessError } from '@ohos.base';
|
||||
|
||||
let imageKnife: ImageKnife | undefined = ImageKnifeGlobal.getInstance().getImageKnife();
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct testImageKnifeCache {
|
||||
@State url: string = '';
|
||||
@State urlGif: string = 'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658';
|
||||
@State urlPng: string = 'https://img-blog.csdnimg.cn/20191215043500229.png';
|
||||
@State urlJpg: string = 'https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB';
|
||||
@State urlBmp: string = 'https://img-blog.csdn.net/20140514114029140';
|
||||
@State urlWebp: string = 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp';
|
||||
@State imagePixelMap: PixelMap | undefined = undefined;
|
||||
@State imagePixelMap_: PixelMap | undefined = undefined;
|
||||
private index_: number = -1;
|
||||
private tempSize: number = 200;
|
||||
private timeId = -1;
|
||||
private comSize: Size = {
|
||||
width: this.tempSize,
|
||||
height: this.tempSize,
|
||||
}
|
||||
@State imageKnifeOption: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.icon'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
loadSuccess = (data: ImageKnifeData) => {
|
||||
clearTimeout(this.timeId);
|
||||
if (data.isPixelMap()) {
|
||||
if (data.drawPixelMap) {
|
||||
let pixelmap = data.drawPixelMap.imagePixelMap
|
||||
if (pixelmap) {
|
||||
if (this.index_ == 1) {
|
||||
this.imagePixelMap = pixelmap;
|
||||
} else if (this.index_ == 2) {
|
||||
this.imagePixelMap_ = 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 (this.index_ == 1) {
|
||||
this.imagePixelMap = pixelmap;
|
||||
} else if (this.index_ == 2) {
|
||||
this.imagePixelMap_ = pixelmap;
|
||||
}
|
||||
}
|
||||
index++;
|
||||
if (index == data.drawGIFFrame.imageGIFFrames.length - 1) {
|
||||
index = 0
|
||||
}
|
||||
this.timeId = setTimeout(renderGif, data!.drawGIFFrame!.imageGIFFrames![index].delay)
|
||||
}
|
||||
}
|
||||
}
|
||||
renderGif()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
loadError = (err: BusinessError) => {
|
||||
}
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Column() {
|
||||
|
||||
Text('图片内存和磁盘读取').fontSize(30);
|
||||
Text('加载的缓存时候关闭掉网络').fontSize(15);
|
||||
|
||||
Row() {
|
||||
Button('png')
|
||||
.onClick(() => {
|
||||
this.index_ = 0;
|
||||
this.url = this.urlPng;
|
||||
this.imageKnifeOption =
|
||||
{
|
||||
loadSrc: this.url,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
}
|
||||
})
|
||||
|
||||
Button('bmp')
|
||||
.onClick(() => {
|
||||
this.index_ = 0;
|
||||
this.url = this.urlBmp;
|
||||
this.imageKnifeOption =
|
||||
{
|
||||
loadSrc: this.url,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
}
|
||||
})
|
||||
|
||||
Button('webp')
|
||||
.onClick(() => {
|
||||
this.index_ = 0;
|
||||
this.url = this.urlWebp;
|
||||
this.imageKnifeOption =
|
||||
{
|
||||
loadSrc: this.url,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
}
|
||||
})
|
||||
|
||||
Button('jpg')
|
||||
.onClick(() => {
|
||||
this.index_ = 0;
|
||||
this.url = this.urlJpg;
|
||||
this.imageKnifeOption =
|
||||
{
|
||||
loadSrc: this.url,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
}
|
||||
})
|
||||
|
||||
Button('gif')
|
||||
.onClick(() => {
|
||||
this.index_ = 0;
|
||||
this.url = this.urlGif;
|
||||
this.imageKnifeOption =
|
||||
{
|
||||
loadSrc: this.url,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
Row() {
|
||||
Button('缓存图片')
|
||||
.onClick(() => {
|
||||
this.index_ = 1;
|
||||
imageKnife?.isUrlExist(this.url, CacheType.Cache, this.comSize).then(this.loadSuccess)
|
||||
.catch(this.loadError);
|
||||
})
|
||||
|
||||
Button('磁盘图片')
|
||||
.onClick(() => {
|
||||
this.index_ = 2;
|
||||
imageKnife?.isUrlExist(this.url, CacheType.Disk, this.comSize).then(this.loadSuccess)
|
||||
.catch(this.loadError);
|
||||
})
|
||||
|
||||
Button('默认')
|
||||
.onClick(() => {
|
||||
this.index_ = 2;
|
||||
imageKnife?.isUrlExist(this.url, CacheType.Default, this.comSize).then(this.loadSuccess)
|
||||
.catch(this.loadError);
|
||||
})
|
||||
}
|
||||
|
||||
Text('网络图').fontSize(15);
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
|
||||
.width(200)
|
||||
.height(200)
|
||||
.backgroundColor(Color.Orange)
|
||||
Text('缓存图').fontSize(15);
|
||||
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: {
|
||||
loadSrc: this.imagePixelMap as image.PixelMap
|
||||
}
|
||||
})
|
||||
.width(200)
|
||||
.height(200)
|
||||
.backgroundColor(Color.Orange)
|
||||
Text('磁盘图').fontSize(15);
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: {
|
||||
loadSrc: this.imagePixelMap_ as image.PixelMap
|
||||
}
|
||||
})
|
||||
.width(200)
|
||||
.height(200)
|
||||
.backgroundColor(Color.Orange)
|
||||
|
||||
}
|
||||
.alignItems(HorizontalAlign.Center)
|
||||
.width('100%')
|
||||
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
|
||||
}
|
||||
|
||||
aboutToDisappear() {
|
||||
|
||||
}
|
||||
|
||||
onBackPress() {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
/*
|
||||
* 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 {
|
||||
Base64,
|
||||
IDataFetch,
|
||||
ImageKnife,
|
||||
ImageKnifeComponent,
|
||||
ImageKnifeGlobal,
|
||||
ImageKnifeOption,
|
||||
DataFetchResult,
|
||||
RequestOption} from '@ohos/libraryimageknife'
|
||||
import common from '@ohos.app.ability.common';
|
||||
import resourceManager from '@ohos.resourceManager';
|
||||
import { BusinessError } from '@ohos.base'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestImageKnifeDataFetch {
|
||||
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.icon'),
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
|
||||
build() {
|
||||
Column(){
|
||||
Text("简单示例1：加载一张本地png图片").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("加载PNG")
|
||||
.onClick(() => {
|
||||
let dataFetch:MyDataFetch = new MyDataFetch();
|
||||
let imageKnife:ImageKnife|undefined = ImageKnifeGlobal.getInstance().getImageKnife()
|
||||
if(imageKnife != undefined) {
|
||||
imageKnife.replaceDataFetch(dataFetch)
|
||||
}
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "",
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
isCacheable: false,
|
||||
}
|
||||
}).margin({ top: 5, left: 3 })
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
|
||||
}.width('100%').backgroundColor(Color.Pink)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@Sendable
|
||||
class MyDataFetch implements IDataFetch{
|
||||
loadData(option: RequestOption) {
|
||||
let result:DataFetchResult = new DataFetchResult();
|
||||
((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).resourceManager as resourceManager.ResourceManager)
|
||||
.getMediaContentBase64($r('app.media.pngSample').id)
|
||||
.then(data => {
|
||||
let matchReg = ';base64,';
|
||||
let firstIndex = data.indexOf(matchReg);
|
||||
data = data.substring(firstIndex + matchReg.length, data.length)
|
||||
console.log('MyDataFetch - 本地加载资源 解析后数据剔除非必要数据后data= ' + data)
|
||||
let arrayBuffer = Base64.getInstance()
|
||||
.decode(data);
|
||||
result.data = arrayBuffer;
|
||||
}).catch((err:BusinessError) => {
|
||||
result.error = 'MyDataFetch - 本地加载资源err' + JSON.stringify(err);
|
||||
})
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
/*
|
||||
* 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 } from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct testImageKnifeHeic {
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.yunHeic'),
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
|
||||
@State flag: boolean = true;
|
||||
|
||||
build() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
|
||||
Button("heic图片测试")
|
||||
.onClick(() => {
|
||||
this.flag = !this.flag
|
||||
}).margin({ top: 15 })
|
||||
if(this.flag) {
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
|
||||
}
|
||||
}.width('100%').height(400).backgroundColor(Color.Pink)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,261 @@
|
|||
/*
|
||||
* 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'),
|
||||
signature: new ObjectKey('refer11'),
|
||||
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'),
|
||||
signature: new ObjectKey('xx22'),
|
||||
headerOption: [this.headerOptions2]
|
||||
};
|
||||
|
||||
// RequestOption调用
|
||||
load(src: string | image.PixelMap | Resource, type: string, num: number) {
|
||||
clearTimeout(timeId)
|
||||
let request = new RequestOption()
|
||||
let key: string | null = ''
|
||||
if (type == 'error') {
|
||||
key = 'xx'
|
||||
} else {
|
||||
key = 'refer'
|
||||
}
|
||||
request.addHeader(key, src)
|
||||
//清理缓存
|
||||
request.signature = new ObjectKey(key + num)
|
||||
key = null
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,172 @@
|
|||
/*
|
||||
* 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 {
|
||||
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 testImageKnifeHttpRequestHeader1 {
|
||||
@State pixelMap: PixelMap | undefined = undefined;
|
||||
@State pixelMap1: PixelMap | undefined = undefined;
|
||||
@State domeType1: boolean = false;
|
||||
@State domeType2: boolean = false;
|
||||
@State successHeader: string = "requestOption调用成功";
|
||||
@State errorHeader: string = "requestOption调用失败";
|
||||
@State allKeySame: string = "全局添加header和request成功的键相同值不同";
|
||||
@State allKeyNoSame: string = "全局添加header和request成功的键不同";
|
||||
@State clearnAllHeader: string = "清空全局header";
|
||||
|
||||
@State message: string = "图片header属性测试";
|
||||
|
||||
imageKnife: ImageKnife | undefined = ImageKnifeGlobal.getInstance().getImageKnife()
|
||||
// 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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
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
|
||||
}
|
||||
}
|
||||
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
|
||||
setHeader1() {
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: {
|
||||
loadSrc: this.pixelMap1 as image.PixelMap
|
||||
}
|
||||
}).width(200).height(200).borderWidth(1)
|
||||
}
|
||||
|
||||
|
||||
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.setHeader1()
|
||||
}
|
||||
Button(this.allKeySame)
|
||||
.margin(16)
|
||||
.onClick(() => {
|
||||
this.imageKnife?.addHeader('refer','test')
|
||||
})
|
||||
Button(this.allKeyNoSame)
|
||||
.margin(16)
|
||||
.onClick(() => {
|
||||
this.imageKnife?.addHeader('ceshi','http://1.94.37.200:7070/AntiTheftChain/downloadImage')
|
||||
})
|
||||
Button(this.clearnAllHeader)
|
||||
.margin(16)
|
||||
.onClick(() => {
|
||||
this.imageKnife?.deleteHeader('refer');
|
||||
this.imageKnife?.deleteHeader('ceshi');
|
||||
})
|
||||
}
|
||||
}.width("100%")
|
||||
.justifyContent(FlexAlign.Start)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct testImageKnifeCache {
|
||||
@State imageKnifeOption: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.icon'),
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Column() {
|
||||
Text('测试失败场景时关闭掉网络').fontSize(15);
|
||||
Row() {
|
||||
Button('测试加载成功/失败监听')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption =
|
||||
{
|
||||
loadSrc: 'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658',
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
onLoadListener: {
|
||||
onLoadSuccess: (data) => {
|
||||
console.log('Load Successful: ' + data);
|
||||
return data;
|
||||
},
|
||||
onLoadFailed: (err) => {
|
||||
console.error('Load Failed Reason: ' + err);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
Text('网络图').fontSize(15);
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
|
||||
.width(200)
|
||||
.height(200)
|
||||
.backgroundColor(Color.Orange)
|
||||
}
|
||||
.alignItems(HorizontalAlign.Center)
|
||||
.width('100%')
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
|
||||
}
|
||||
|
||||
aboutToDisappear() {
|
||||
|
||||
}
|
||||
|
||||
onBackPress() {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct testImageKnifeNetPlaceholder {
|
||||
@State imageKnifeOption: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.icon'),
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
@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() {
|
||||
Column() {
|
||||
Text('string类型占位图支持内存和磁盘读取').fontSize(30);
|
||||
Text('验证磁盘有无图片可以先主图缓存一张图片，再退出应用').fontSize(15);
|
||||
Text('仅第一次打开应用加载主图可以看到效果，因主图第二次加载速度很快').fontSize(15);
|
||||
|
||||
Row() {
|
||||
Button('缓存一张图片作为占位图 图一')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption =
|
||||
{
|
||||
loadSrc: 'https://img-blog.csdn.net/20140514114029140',
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
Text('当图一没有展示，会从磁盘中拿占位图').fontSize(15);
|
||||
Text('当图一展示时，会从内存中拿占位图，不会走磁盘逻辑').fontSize(15);
|
||||
|
||||
Text('下图展示的为后备回调符的图片').fontSize(15);
|
||||
ImageKnifeComponent({ imageKnifeOption: {loadSrc:$r('app.media.mask_starfish')} })
|
||||
.width(200)
|
||||
.height(200)
|
||||
.backgroundColor(Color.Orange)
|
||||
|
||||
Text('下图展示的主图为图二string类型的占位图').fontSize(15);
|
||||
Text('图一:').fontSize(20);
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
|
||||
.width(200)
|
||||
.height(200)
|
||||
.backgroundColor(Color.Orange)
|
||||
|
||||
Row() {
|
||||
Button('展示已缓存的占位图')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption1 =
|
||||
{
|
||||
loadSrc : $r('app.media.pngSample'),
|
||||
placeholderSrc: 'https://img-blog.csdn.net/20140514114029140',
|
||||
fallbackSrc: $r('app.media.mask_starfish'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
}
|
||||
})
|
||||
|
||||
Button('当占位图未缓存时展示后备回调符')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption2 =
|
||||
{
|
||||
loadSrc : $r('app.media.gifSample'),
|
||||
placeholderSrc: 'https://img0.baidu.com/it/u=2794536113,2700219306&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
|
||||
fallbackSrc: $r('app.media.mask_starfish'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
Text('展示已缓存的占位图，如图一未加载过则会显示后备回调符').fontSize(15);
|
||||
Text('图二:').fontSize(20);
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
|
||||
.width(200)
|
||||
.height(200)
|
||||
.backgroundColor(Color.Orange)
|
||||
|
||||
Text('占位图未缓存展示后备回调符，如图三').fontSize(15);
|
||||
Text('图三:').fontSize(20);
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 })
|
||||
.width(200)
|
||||
.height(200)
|
||||
.backgroundColor(Color.Orange)
|
||||
|
||||
}
|
||||
.alignItems(HorizontalAlign.Center)
|
||||
.width('100%')
|
||||
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
|
||||
}
|
||||
|
||||
aboutToDisappear() {
|
||||
|
||||
}
|
||||
|
||||
onBackPress() {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,214 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeComponent} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeOption} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeGlobal} from '@ohos/libraryimageknife'
|
||||
import {ImageKnife} from '@ohos/libraryimageknife'
|
||||
import {RotateImageTransformation} from '@ohos/libraryimageknife'
|
||||
import ArkWorker from '@ohos.worker'
|
||||
import worker from '@ohos.worker'
|
||||
@Entry
|
||||
@Component
|
||||
struct TestImageKnifeOptionChangedPage {
|
||||
|
||||
svgUrl:string = ''
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Flex({direction:FlexDirection.Row}){
|
||||
Button('本地jpg')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button('png')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button('bmp')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.bmpSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button('webp')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button('svg')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.svgSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button('gif')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.gifSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
}
|
||||
.margin({top:15})
|
||||
Flex({direction:FlexDirection.Row}){
|
||||
Button('网络jpg')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB',
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button('png')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://img-blog.csdnimg.cn/20191215043500229.png',
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button('bmp')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://img-blog.csdn.net/20140514114029140',
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button('webp')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
|
||||
Text("请先设置SVG图片的url地址")
|
||||
TextArea({ placeholder: '请输入SVG图片的url地址' })
|
||||
.placeholderColor("rgb(0,0,35)")
|
||||
.placeholderFont({ size: 20, weight: 100, family: 'cursive', style: FontStyle.Italic })
|
||||
.textAlign(TextAlign.Center)
|
||||
.caretColor(Color.Blue)
|
||||
.height(40)
|
||||
.width(400)
|
||||
.fontSize(20)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
.fontFamily("sans-serif")
|
||||
.fontStyle(FontStyle.Normal)
|
||||
.fontColor(Color.Red)
|
||||
.onChange((value: string) => {
|
||||
this.svgUrl = value
|
||||
})
|
||||
|
||||
Button('svg')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: this.svgUrl,
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button('gif')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658',
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
|
||||
Button("dpg")
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://img13.360buyimg.com/n1/jfs/t1/220646/38/10395/30916/61d6e061E1a6d91c8/c0a9a67e726dd7a4.jpg.dpg",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
}
|
||||
.margin({top:15})
|
||||
|
||||
Text('下面为展示图片区域').margin({top:5})
|
||||
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
|
||||
.width(300)
|
||||
.height(300)
|
||||
}.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
|
||||
}
|
||||
aboutToDisappear(){
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeComponent} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeOption} from '@ohos/libraryimageknife'
|
||||
import {BaseTransform} from '@ohos/libraryimageknife'
|
||||
import {RotateImageTransformation} from '@ohos/libraryimageknife'
|
||||
import {GrayscaleTransformation} from '@ohos/libraryimageknife'
|
||||
import {SketchFilterTransformation} from '@ohos/libraryimageknife'
|
||||
import image from '@ohos.multimedia.image'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestImageKnifeOptionChangedPage2 {
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
thumbSizeMultiplier:0.1
|
||||
};
|
||||
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Flex({direction:FlexDirection.Row}){
|
||||
Button("网络jpg")
|
||||
.onClick(()=>{
|
||||
let rotateTrans:BaseTransform<image.PixelMap> = new RotateImageTransformation(180)
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
thumbSizeMultiplier:0.1,
|
||||
transformation:rotateTrans
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button("png")
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
thumbSizeMultiplier:0.1,
|
||||
transformations:[new RotateImageTransformation(180)]
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button("bmp")
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://img-blog.csdn.net/20140514114029140",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
thumbSizeMultiplier:0.1,
|
||||
transformations:[new GrayscaleTransformation()]
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button("webp")
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
thumbSizeMultiplier:0.1,
|
||||
transformations:[new SketchFilterTransformation()]
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
}
|
||||
.margin({top:15})
|
||||
|
||||
Text("下面为展示图片区域").margin({top:5})
|
||||
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
|
||||
}.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
console.log("aboutToAppear()")
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeComponent} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeOption} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeGlobal} from '@ohos/libraryimageknife'
|
||||
import {ImageKnife} from '@ohos/libraryimageknife'
|
||||
import {ScaleType} from '@ohos/libraryimageknife'
|
||||
import {RotateImageTransformation} from '@ohos/libraryimageknife'
|
||||
import {GrayscaleTransformation} from '@ohos/libraryimageknife'
|
||||
import {SketchFilterTransformation} from '@ohos/libraryimageknife'
|
||||
import ArkWorker from '@ohos.worker'
|
||||
import worker from '@ohos.worker'
|
||||
import {BaseTransform} from '@ohos/libraryimageknife'
|
||||
import image from '@ohos.multimedia.image'
|
||||
@Entry
|
||||
@Component
|
||||
struct TestImageKnifeOptionChangedPage3 {
|
||||
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
mainScaleType: ScaleType.FIT_CENTER,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
@State compWidht:number = 300
|
||||
@State compHeight:number = 300
|
||||
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Flex({direction:FlexDirection.Row}){
|
||||
Button("本地jpg")
|
||||
.onClick(()=>{
|
||||
let rotateTrans:BaseTransform<image.PixelMap> = new RotateImageTransformation(180)
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
mainScaleType: ScaleType.FIT_CENTER,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
thumbSizeMultiplier:0.1,
|
||||
transformation:rotateTrans,
|
||||
};
|
||||
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button("本地png")
|
||||
.onClick(()=>{
|
||||
|
||||
let rotateTrans:BaseTransform<image.PixelMap> = new RotateImageTransformation(180)
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
mainScaleType: ScaleType.FIT_CENTER,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
thumbSizeMultiplier:0.1,
|
||||
transformation:rotateTrans,
|
||||
};
|
||||
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
}.margin({top:15})
|
||||
Flex({direction:FlexDirection.Row}){
|
||||
Button("本地bmp")
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.bmpSample'),
|
||||
mainScaleType: ScaleType.FIT_CENTER,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
thumbSizeMultiplier:0.1,
|
||||
transformations:[new GrayscaleTransformation()],
|
||||
};
|
||||
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button("本地webp")
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.webpSample'),
|
||||
mainScaleType: ScaleType.FIT_CENTER,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
thumbSizeMultiplier:0.1,
|
||||
transformations:[new SketchFilterTransformation()],
|
||||
};
|
||||
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
}.margin({top:15})
|
||||
Flex({direction:FlexDirection.Row}){
|
||||
Button("网络jpg")
|
||||
.onClick(()=>{
|
||||
let rotateTrans:BaseTransform<image.PixelMap> = new RotateImageTransformation(180)
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress:true,
|
||||
thumbSizeMultiplier:0.1,
|
||||
transformation:rotateTrans
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button("网络png")
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png",
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress:true,
|
||||
thumbSizeMultiplier:0.1,
|
||||
transformations:[new RotateImageTransformation(180)]
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
}.margin({top:15})
|
||||
Flex({direction:FlexDirection.Row}){
|
||||
Button("网络bmp")
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://img-blog.csdn.net/20140514114029140",
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress:true,
|
||||
thumbSizeMultiplier:0.1,
|
||||
transformations:[new GrayscaleTransformation()]
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button("网络webp")
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress:true,
|
||||
thumbSizeMultiplier:0.1,
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
}.margin({top:15})
|
||||
|
||||
Text("下面为展示图片区域").margin({top:5})
|
||||
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(this.compWidht).height(this.compHeight)
|
||||
}.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
aboutToAppear() {
|
||||
|
||||
}
|
||||
aboutToDisappear(){
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,277 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {
|
||||
GrayscaleTransformation,
|
||||
ImageKnifeComponent,
|
||||
ImageKnifeData,
|
||||
ImageKnifeOption,
|
||||
RotateImageTransformation,
|
||||
SketchFilterTransformation,
|
||||
ScaleTypeHelper,
|
||||
IDrawLifeCycle,
|
||||
ScaleType,
|
||||
ImageKnifeGlobal,
|
||||
BaseTransform
|
||||
} from '@ohos/libraryimageknife'
|
||||
import ArkWorker from '@ohos.worker'
|
||||
import worker from '@ohos.worker';
|
||||
import image from '@ohos.multimedia.image';
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestImageKnifeOptionChangedPage4 {
|
||||
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
thumbSizeMultiplier: 0.1,
|
||||
drawLifeCycle: this.createViewLifeCycle()
|
||||
};
|
||||
private mTimerId: number = 0
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Button("网络jpg")
|
||||
.onClick(() => {
|
||||
let rotateTrans: BaseTransform<image.PixelMap> = new RotateImageTransformation(180)
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
thumbSizeMultiplier: 0.1,
|
||||
transformation: rotateTrans,
|
||||
drawLifeCycle: this.createViewLifeCycle()
|
||||
};
|
||||
}).margin({ left: 5 }).backgroundColor(Color.Blue)
|
||||
Button("网络png")
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
thumbSizeMultiplier: 0.1,
|
||||
transformations: [new RotateImageTransformation(180)],
|
||||
drawLifeCycle: this.createViewLifeCycle()
|
||||
};
|
||||
}).margin({ left: 5 }).backgroundColor(Color.Blue)
|
||||
}.margin({ top: 15 })
|
||||
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Button("网络bmp")
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://img-blog.csdn.net/20140514114029140",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
thumbSizeMultiplier: 0.1,
|
||||
transformations: [new GrayscaleTransformation()],
|
||||
drawLifeCycle: this.createViewLifeCycle()
|
||||
};
|
||||
}).margin({ left: 5 }).backgroundColor(Color.Blue)
|
||||
Button("网络webp")
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
thumbSizeMultiplier: 0.1,
|
||||
transformations: [new SketchFilterTransformation()],
|
||||
drawLifeCycle: this.createViewLifeCycle()
|
||||
};
|
||||
}).margin({ left: 5 }).backgroundColor(Color.Blue)
|
||||
}.margin({ top: 15 })
|
||||
|
||||
Text("下面为展示图片区域").margin({ top: 5 })
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
|
||||
}.width(400).height(400).margin({ top: 10 }).backgroundColor(Color.Pink)
|
||||
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
|
||||
}
|
||||
|
||||
aboutToDisappear() {
|
||||
|
||||
}
|
||||
|
||||
drawMainAnimate_index: number = 0;
|
||||
drawMainAnimate_context?: CanvasRenderingContext2D = undefined;
|
||||
drawMainAnimate_scaleType: ScaleType = ScaleType.FIT_CENTER;
|
||||
drawMainAnimate_imagePixelMap?: PixelMap = undefined;
|
||||
drawMainAnimate_widthPixel: number = 0;
|
||||
drawMainAnimate_heightPixel: number = 0;
|
||||
drawMainAnimate_compWidth: number = 0;
|
||||
drawMainAnimate_compHeight: number = 0;
|
||||
drawMainAnimate = () => {
|
||||
console.log('drawMainAnimate index = ' + this.drawMainAnimate_index)
|
||||
|
||||
let clipScale = (this.drawMainAnimate_index / 30.0)
|
||||
this.drawMainAnimate_context?.save()
|
||||
this.drawMainAnimate_context?.beginPath();
|
||||
let path2d = new Path2D()
|
||||
let maxRadius = Math.sqrt(this.drawMainAnimate_compWidth / 2 * this.drawMainAnimate_compWidth / 2 + this.drawMainAnimate_compHeight / 2 * this.drawMainAnimate_compHeight / 2)
|
||||
path2d.arc(this.drawMainAnimate_compWidth / 2, this.drawMainAnimate_compHeight / 2, maxRadius * clipScale, 0, Math.PI * 2)
|
||||
this.drawMainAnimate_context?.clip(path2d)
|
||||
this.drawMainAnimate_context?.save()
|
||||
ScaleTypeHelper.drawImageWithScaleType(this.drawMainAnimate_context!, this.drawMainAnimate_scaleType, this.drawMainAnimate_imagePixelMap, px2vp(this.drawMainAnimate_widthPixel), px2vp(this.drawMainAnimate_heightPixel), this.drawMainAnimate_compWidth, this.drawMainAnimate_compHeight, 0, 0)
|
||||
this.drawMainAnimate_context?.restore();
|
||||
this.drawMainAnimate_context?.restore();
|
||||
if (this.drawMainAnimate_index < 30) {
|
||||
this.drawMainAnimate_index++
|
||||
let nextFunc = this.drawMainAnimate
|
||||
|
||||
this.mTimerId = setTimeout(nextFunc, 1000 / 30.0)
|
||||
} else {
|
||||
// 不做处理
|
||||
}
|
||||
}
|
||||
|
||||
private stopAnimate() {
|
||||
if (this.mTimerId > 0) {
|
||||
clearTimeout(this.mTimerId)
|
||||
this.mTimerId = 0
|
||||
} else {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
private createViewLifeCycle(): IDrawLifeCycle {
|
||||
let viewLifeCycle: IDrawLifeCycle = {
|
||||
// 展示占位图
|
||||
displayPlaceholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
|
||||
|
||||
this.stopAnimate()
|
||||
return false;
|
||||
},
|
||||
// 展示加载进度
|
||||
displayProgress: (context: CanvasRenderingContext2D, progress: number, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
|
||||
|
||||
this.stopAnimate()
|
||||
context.save();
|
||||
context.clearRect(0, 0, compWidth, compHeight)
|
||||
let pi = Math.PI * 2 / 100; //pi 讲圆的周长划分为100份
|
||||
let rate = progress - 25;
|
||||
let diameter = compWidth > compHeight ? compHeight : compWidth
|
||||
context.lineWidth = Math.floor(diameter * 0.03)
|
||||
context.lineCap = "round"
|
||||
context.fillStyle = "white"
|
||||
context.font = Math.floor(diameter * 0.5) + 'px'
|
||||
let x0 = (compWidth - diameter) / 2.0 + Math.floor(diameter * 0.5)
|
||||
let y0 = (compHeight - diameter) / 2.0 + Math.floor(diameter * 0.1)
|
||||
let x1 = (compWidth - diameter) / 2.0 + Math.floor(diameter * 0.5)
|
||||
let y1 = (compHeight - diameter) / 2.0 + Math.floor(diameter * 0.8)
|
||||
let gradient = context.createLinearGradient(x0, y0, x1, y1)
|
||||
gradient.addColorStop(0, "#11ffe4")
|
||||
gradient.addColorStop(0.5, "#03c6fd")
|
||||
gradient.addColorStop(1, "#10a5ff")
|
||||
context.clearRect(0, 0, compWidth, compHeight)
|
||||
context.shadowBlur = 0
|
||||
context.beginPath()
|
||||
context.strokeStyle = "#15222d"
|
||||
let radius = Math.floor(diameter * 0.3)
|
||||
let arcX = compWidth / 2.0
|
||||
let arcY = compHeight / 2.0
|
||||
context.arc(arcX, arcY, radius, 0, Math.PI * 2, true)
|
||||
context.stroke()
|
||||
context.beginPath()
|
||||
let showText = rate + 25 + '%'
|
||||
let metrics = context.measureText(showText)
|
||||
let textX = (compWidth / 2.0) - metrics.width / 2.0
|
||||
let textY = (compHeight / 2.0) + metrics.height * 0.3
|
||||
context.fillText(showText, textX, textY)
|
||||
context.stroke()
|
||||
context.beginPath()
|
||||
context.strokeStyle = gradient
|
||||
context.arc(arcX, arcY, radius, pi * -25, pi * rate)
|
||||
context.stroke();
|
||||
context.restore();
|
||||
return true;
|
||||
},
|
||||
// 展示缩略图
|
||||
displayThumbSizeMultiplier: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
|
||||
|
||||
this.stopAnimate()
|
||||
return false;
|
||||
},
|
||||
|
||||
// 展示主图
|
||||
displayMainSource: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
|
||||
this.stopAnimate()
|
||||
if (data.isPixelMap()) {
|
||||
|
||||
data.drawPixelMap?.imagePixelMap?.getImageInfo().then((imageInfo) => {
|
||||
let scaleType = (typeof imageKnifeOption.mainScaleType == 'number') ? imageKnifeOption.mainScaleType : ScaleType.FIT_CENTER
|
||||
console.log('imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height + 'scaleType=' + scaleType)
|
||||
|
||||
|
||||
this.drawMainAnimate_index = 0;
|
||||
this.drawMainAnimate_context = context;
|
||||
this.drawMainAnimate_scaleType = scaleType
|
||||
this.drawMainAnimate_imagePixelMap = data.drawPixelMap?.imagePixelMap
|
||||
this.drawMainAnimate_widthPixel = imageInfo.size.width
|
||||
this.drawMainAnimate_heightPixel = imageInfo.size.height
|
||||
this.drawMainAnimate_compWidth = compWidth
|
||||
this.drawMainAnimate_compHeight = compHeight
|
||||
|
||||
let func = this.drawMainAnimate
|
||||
|
||||
this.mTimerId = setTimeout(func, 1000 / 30.0)
|
||||
|
||||
console.log('TestImageKnifeOptionChangedPage4 drawMainSource end!')
|
||||
})
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
// 展示重试图层
|
||||
displayRetryholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
|
||||
|
||||
this.stopAnimate()
|
||||
return false;
|
||||
},
|
||||
|
||||
// 展示失败占位图
|
||||
displayErrorholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
|
||||
|
||||
this.stopAnimate()
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return viewLifeCycle;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,238 @@
|
|||
/*
|
||||
* 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';
|
||||
|
||||
let gifUrl: string = 'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658';
|
||||
|
||||
@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 })
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
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)
|
||||
Button("网络gif")
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: gifUrl,
|
||||
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("网络gif - 圆角小")
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: gifUrl,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
drawLifeCycle: ImageKnifeDrawFactory.createRoundLifeCycle(3, "#ff0000", 30)
|
||||
};
|
||||
}).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'),
|
||||
drawLifeCycle: ImageKnifeDrawFactory.createRoundLifeCycle(5, "#ffff00", 300)
|
||||
};
|
||||
}).margin({ left: 5 }).backgroundColor(Color.Blue)
|
||||
}.margin({ top: 15 })
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Button("网络gif-椭圆长方形资源")
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: gifUrl,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
drawLifeCycle: ImageKnifeDrawFactory.createOvalLifeCycle(8, "#88ee00")
|
||||
};
|
||||
}).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'),
|
||||
drawLifeCycle: ImageKnifeDrawFactory.createOvalLifeCycle(5, "#ff00ff")
|
||||
};
|
||||
}).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
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,269 @@
|
|||
/*
|
||||
* 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,
|
||||
ImageKnifeGlobal,
|
||||
ImageKnife,
|
||||
ImageKnifeData,
|
||||
Size,
|
||||
CacheType
|
||||
} from '@ohos/libraryimageknife'
|
||||
import image from '@ohos.multimedia.image';
|
||||
import { BusinessError } from '@ohos.base';
|
||||
|
||||
let imageKnife: ImageKnife | undefined = ImageKnifeGlobal.getInstance().getImageKnife();
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct testImageKnifeRemoveCache {
|
||||
@State url: string = '';
|
||||
@State urlGif: string = 'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658';
|
||||
@State urlPng: string = 'https://img-blog.csdnimg.cn/20191215043500229.png';
|
||||
@State urlJpg: string = 'https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB';
|
||||
@State urlBmp: string = 'https://img-blog.csdn.net/20140514114029140';
|
||||
@State urlWebp: string = 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp';
|
||||
@State imagePixelMap: PixelMap | undefined = undefined;
|
||||
@State imagePixelMap_: PixelMap | undefined = undefined;
|
||||
private index_: number = -1;
|
||||
private tempSize: number = 200;
|
||||
private timeId = -1;
|
||||
private comSize: Size = {
|
||||
width: this.tempSize,
|
||||
height: this.tempSize,
|
||||
}
|
||||
@State imageKnifeOption: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.icon'),
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
loadSuccess = (data: ImageKnifeData) => {
|
||||
clearTimeout(this.timeId);
|
||||
if (data.isPixelMap()) {
|
||||
if (data.drawPixelMap) {
|
||||
let pixelmap = data.drawPixelMap.imagePixelMap;
|
||||
if (pixelmap) {
|
||||
if (this.index_ == 1) {
|
||||
this.imagePixelMap = pixelmap;
|
||||
} else if (this.index_ == 2) {
|
||||
this.imagePixelMap_ = 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 (this.index_ == 1) {
|
||||
this.imagePixelMap = pixelmap;
|
||||
} else if (this.index_ == 2) {
|
||||
this.imagePixelMap_ = pixelmap;
|
||||
}
|
||||
}
|
||||
index++;
|
||||
if (index == data.drawGIFFrame.imageGIFFrames.length - 1) {
|
||||
index = 0;
|
||||
}
|
||||
this.timeId = setTimeout(renderGif, data!.drawGIFFrame!.imageGIFFrames![index].delay);
|
||||
}
|
||||
}
|
||||
}
|
||||
renderGif();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
loadError = (err: BusinessError) => {
|
||||
}
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Column() {
|
||||
|
||||
Text('图片内存和磁盘缓存删除').fontSize(30);
|
||||
Text('测试删除缓存时候关闭掉网络').fontSize(15);
|
||||
|
||||
Row() {
|
||||
Button('png')
|
||||
.margin({right:10})
|
||||
.onClick(() => {
|
||||
this.index_ = 0;
|
||||
this.url = this.urlPng;
|
||||
this.imageKnifeOption =
|
||||
{
|
||||
loadSrc: this.url,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
}
|
||||
})
|
||||
|
||||
Button('bmp')
|
||||
.margin({right:10})
|
||||
.onClick(() => {
|
||||
this.index_ = 0;
|
||||
this.url = this.urlBmp;
|
||||
this.imageKnifeOption =
|
||||
{
|
||||
loadSrc: this.url,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
}
|
||||
})
|
||||
|
||||
Button('webp')
|
||||
.margin({right:10})
|
||||
.onClick(() => {
|
||||
this.index_ = 0;
|
||||
this.url = this.urlWebp;
|
||||
this.imageKnifeOption =
|
||||
{
|
||||
loadSrc: this.url,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
}
|
||||
})
|
||||
|
||||
Button('jpg')
|
||||
.margin({right:10})
|
||||
.onClick(() => {
|
||||
this.index_ = 0;
|
||||
this.url = this.urlJpg;
|
||||
this.imageKnifeOption =
|
||||
{
|
||||
loadSrc: this.url,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
}
|
||||
})
|
||||
|
||||
Button('gif')
|
||||
.margin({right:10})
|
||||
.onClick(() => {
|
||||
this.index_ = 0;
|
||||
this.url = this.urlGif;
|
||||
this.imageKnifeOption =
|
||||
{
|
||||
loadSrc: this.url,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
}
|
||||
})
|
||||
}.margin({top: 20})
|
||||
|
||||
Row() {
|
||||
Button('缓存图片')
|
||||
.margin({right:10})
|
||||
.onClick(() => {
|
||||
this.index_ = 1;
|
||||
imageKnife?.isUrlExist(this.url, CacheType.Cache, this.comSize).then(this.loadSuccess)
|
||||
.catch(this.loadError);
|
||||
})
|
||||
|
||||
Button('磁盘图片')
|
||||
.margin({right:10})
|
||||
.onClick(() => {
|
||||
this.index_ = 2;
|
||||
imageKnife?.isUrlExist(this.url, CacheType.Disk, this.comSize).then(this.loadSuccess)
|
||||
.catch(this.loadError);
|
||||
})
|
||||
}.margin({top: 20})
|
||||
|
||||
Row() {
|
||||
Button('清除全部缓存')
|
||||
.onClick(() => {
|
||||
imageKnife?.removeAllMemoryCache();
|
||||
imageKnife?.removeAllFileCache();
|
||||
})
|
||||
|
||||
Button('清除全部内存缓存')
|
||||
.onClick(() => {
|
||||
imageKnife?.removeAllMemoryCache();
|
||||
})
|
||||
|
||||
Button('清除全部磁盘缓存')
|
||||
.onClick(() => {
|
||||
imageKnife?.removeAllFileCache();
|
||||
})
|
||||
}.margin({top: 20})
|
||||
|
||||
Row() {
|
||||
Button('清除指定内存缓存')
|
||||
.margin({right:10})
|
||||
.onClick(() => {
|
||||
imageKnife?.removeMemoryCache(this.url);
|
||||
})
|
||||
|
||||
Button('清除指定磁盘缓存')
|
||||
.margin({right:10})
|
||||
.onClick(() => {
|
||||
imageKnife?.removeFileCache(this.url);
|
||||
})
|
||||
}.margin({top: 20})
|
||||
|
||||
Text('网络图').fontSize(15);
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
|
||||
.width(200)
|
||||
.height(200)
|
||||
.backgroundColor(Color.Orange)
|
||||
Text('缓存图').fontSize(15);
|
||||
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: {
|
||||
loadSrc: this.imagePixelMap as image.PixelMap
|
||||
}
|
||||
})
|
||||
.width(200)
|
||||
.height(200)
|
||||
.backgroundColor(Color.Orange)
|
||||
Text('磁盘图').fontSize(15);
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: {
|
||||
loadSrc: this.imagePixelMap_ as image.PixelMap
|
||||
}
|
||||
})
|
||||
.width(200)
|
||||
.height(200)
|
||||
.backgroundColor(Color.Orange)
|
||||
|
||||
}
|
||||
.alignItems(HorizontalAlign.Center)
|
||||
.width('100%')
|
||||
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
|
||||
}
|
||||
|
||||
aboutToDisappear() {
|
||||
|
||||
}
|
||||
|
||||
onBackPress() {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
/*
|
||||
* Copyright (C) 2023 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnifeComponent } from '@ohos/libraryimageknife'
|
||||
import router from '@ohos.router'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestImageKnifeRouter {
|
||||
@State array: Array<string> = [
|
||||
"https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
|
||||
'https://img-blog.csdnimg.cn/20191215043500229.png',
|
||||
'https://img-blog.csdn.net/20140514114029140',
|
||||
'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp'
|
||||
]
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
Grid() {
|
||||
ForEach(this.array, (item: string, index: number) => {
|
||||
GridItem() {
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: {
|
||||
loadSrc: item,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
onClick: () => {
|
||||
router.pushUrl({ url: "pages/testImageKnifeRouter2", params: { url: this.array[index] } })
|
||||
}
|
||||
}
|
||||
}).width(150).height(150)
|
||||
.sharedTransition(this.array[index], {
|
||||
duration: 500,
|
||||
curve: Curve.Linear,
|
||||
type: SharedTransitionEffectType.Exchange
|
||||
})
|
||||
}
|
||||
})
|
||||
}.columnsTemplate('1fr 1fr')
|
||||
.rowsTemplate('1fr 1fr')
|
||||
}.width("100%").height("100%")
|
||||
}
|
||||
|
||||
pageTransition() {
|
||||
PageTransitionEnter({ duration: 0 })
|
||||
PageTransitionExit({ duration: 0 })
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
/*
|
||||
* Copyright (C) 2023 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnifeComponent } from '@ohos/libraryimageknife'
|
||||
import router from '@ohos.router'
|
||||
|
||||
interface ParamsType {
|
||||
url: string
|
||||
}
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestImageKnifeRouter {
|
||||
@State url: string = ""
|
||||
|
||||
aboutToAppear() {
|
||||
this.url = (router.getParams() as ParamsType).url
|
||||
}
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: {
|
||||
loadSrc: this.url,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
onClick: () => {
|
||||
router.back()
|
||||
}
|
||||
}
|
||||
}).width("100%").height(600)
|
||||
.sharedTransition(this.url, {
|
||||
duration: 500,
|
||||
curve: Curve.Linear,
|
||||
type: SharedTransitionEffectType.Exchange
|
||||
})
|
||||
}.width("100%").height("100%")
|
||||
}
|
||||
|
||||
pageTransition() {
|
||||
PageTransitionEnter({ duration: 0 })
|
||||
PageTransitionExit({ duration: 0 })
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
/*
|
||||
* Copyright (C) 2023 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnife, ImageKnifeComponent, ImageKnifeGlobal, ImageKnifeOption } from "@ohos/libraryimageknife"
|
||||
import worker from '@ohos.worker';
|
||||
|
||||
let gifUrl = "https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658"
|
||||
|
||||
let data: string[] = [
|
||||
'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658',
|
||||
'https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB',
|
||||
'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700',
|
||||
'https://img-blog.csdnimg.cn/20191215043500229.png',
|
||||
'https://res.vmallres.com/cmscdn/CN/2023-03/7052a601ac3e428c84c9415ad9734735.gif',
|
||||
'https://img-blog.csdn.net/20140514114029140'
|
||||
]
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestManyGifLoadWithPage {
|
||||
|
||||
@State p1: PixelMap | undefined = undefined
|
||||
@State p2: PixelMap | undefined = undefined
|
||||
@State workerOption: ImageKnifeOption = {
|
||||
loadSrc: $r('app.media.icon'),
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
Text('gif Demo').align(Alignment.Center).fontSize(25).margin(10).fontWeight(FontWeight.Bolder)
|
||||
Row() {
|
||||
Column() {
|
||||
Button('use Origin Image').align(Alignment.Center).fontSize(10).margin(2)
|
||||
Image(gifUrl).width('100%').height(100).backgroundColor(Color.Blue).objectFit(ImageFit.Contain)
|
||||
}.width('50%').backgroundColor(Color.Orange)
|
||||
|
||||
Column() {
|
||||
Button('use ImageKnifeComponent').align(Alignment.Center).fontSize(10).margin(2)
|
||||
ImageKnifeComponent({ imageKnifeOption: { loadSrc: gifUrl } })
|
||||
.width('100%')
|
||||
.height(100)
|
||||
.backgroundColor(Color.Orange)
|
||||
}.width('50%').backgroundColor(Color.Blue)
|
||||
}
|
||||
|
||||
Grid() {
|
||||
ForEach(data, (url: string) => {
|
||||
GridItem(){
|
||||
ImageKnifeComponent({imageKnifeOption:{
|
||||
loadSrc:url
|
||||
}}).backgroundColor(0x38393D).width(150).height(100)
|
||||
}
|
||||
})
|
||||
}.rowsGap(2)
|
||||
.columnsGap(2)
|
||||
}.width('100%').height('100%').backgroundColor(0xF1F3F5)
|
||||
}
|
||||
aboutToAppear(){
|
||||
|
||||
}
|
||||
aboutToDisappear(){
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
/*
|
||||
* Copyright (C) 2023 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ScaleType, ImageKnifeComponent } from "@ohos/libraryimageknife"
|
||||
|
||||
class CommonDataSource <T> implements IDataSource {
|
||||
private dataArray: T[] = []
|
||||
private listeners: DataChangeListener[] = []
|
||||
|
||||
constructor(element: []) {
|
||||
this.dataArray = element
|
||||
}
|
||||
|
||||
public getData(index: number) {
|
||||
return this.dataArray[index]
|
||||
}
|
||||
|
||||
public totalCount(): number {
|
||||
return this.dataArray.length
|
||||
}
|
||||
|
||||
public addData(index: number, data: T[]): void {
|
||||
this.dataArray = this.dataArray.concat(data)
|
||||
this.notifyDataAdd(index)
|
||||
}
|
||||
|
||||
unregisterDataChangeListener(listener: DataChangeListener): void {
|
||||
const pos = this.listeners.indexOf(listener);
|
||||
if (pos >= 0) {
|
||||
this.listeners.splice(pos, 1);
|
||||
}
|
||||
}
|
||||
|
||||
registerDataChangeListener(listener: DataChangeListener): void {
|
||||
if (this.listeners.indexOf(listener) < 0) {
|
||||
this.listeners.push(listener)
|
||||
}
|
||||
}
|
||||
|
||||
notifyDataAdd(index: number): void {
|
||||
this.listeners.forEach((listener: DataChangeListener) => {
|
||||
listener.onDataAdd(index)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestManyNetImageLoadWithPage {
|
||||
@State hotCommendList:CommonDataSource<string> = new CommonDataSource<string>([])
|
||||
private data:Array<string> = [
|
||||
"http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
|
||||
"http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg",
|
||||
"http://h.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5f2c2a9e953da81cb39db3d1d.jpg",
|
||||
"http://g.hiphotos.baidu.com/image/pic/item/55e736d12f2eb938d5277fd5d0628535e5dd6f4a.jpg",
|
||||
"http://e.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f7e41f5cfe760e0cf3d6cad6ee.jpg",
|
||||
"http://b.hiphotos.baidu.com/image/pic/item/9d82d158ccbf6c81b94575cfb93eb13533fa40a2.jpg",
|
||||
"http://e.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31c1badd5a685d6277f9e2ff81e.jpg",
|
||||
"http://g.hiphotos.baidu.com/image/pic/item/0d338744ebf81a4c87a3add4d52a6059252da61e.jpg",
|
||||
"http://a.hiphotos.baidu.com/image/pic/item/f2deb48f8c5494ee5080c8142ff5e0fe99257e19.jpg",
|
||||
"http://f.hiphotos.baidu.com/image/pic/item/4034970a304e251f503521f5a586c9177e3e53f9.jpg",
|
||||
"http://b.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fbb3586c0168224f4a20a4dd7e.jpg",
|
||||
"http://img2.xkhouse.com/bbs/hfhouse/data/attachment/forum/corebbs/2009-11/2009113011534566298.jpg",
|
||||
"http://a.hiphotos.baidu.com/image/pic/item/e824b899a9014c087eb617650e7b02087af4f464.jpg",
|
||||
"http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg",
|
||||
"http://d.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f119945cbe2fe9925bc317d2a.jpg",
|
||||
"http://h.hiphotos.baidu.com/image/pic/item/902397dda144ad340668b847d4a20cf430ad851e.jpg",
|
||||
"http://b.hiphotos.baidu.com/image/pic/item/359b033b5bb5c9ea5c0e3c23d139b6003bf3b374.jpg",
|
||||
"http://a.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a292d2472199d25bc315d607c7c.jpg",
|
||||
"http://b.hiphotos.baidu.com/image/pic/item/e824b899a9014c08878b2c4c0e7b02087af4f4a3.jpg",
|
||||
"http://g.hiphotos.baidu.com/image/pic/item/6d81800a19d8bc3e770bd00d868ba61ea9d345f2.jpg",
|
||||
]
|
||||
aboutToAppear() {
|
||||
this.hotCommendList.addData(this.hotCommendList.totalCount(),this.data)
|
||||
}
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Column() {
|
||||
Grid() {
|
||||
LazyForEach(this.hotCommendList, (item: string) => {
|
||||
GridItem() {
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: {
|
||||
loadSrc: item,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
mainScaleType: ScaleType.CENTER_CROP,
|
||||
placeholderScaleType: ScaleType.CENTER_CROP
|
||||
}
|
||||
}).width('100%').height('100%')
|
||||
}.width('45%').height(200)
|
||||
}, (item: string) => JSON.stringify(item))
|
||||
}
|
||||
.columnsTemplate('1fr 1fr')
|
||||
.columnsGap(8)
|
||||
.rowsGap(10)
|
||||
.width('100%')
|
||||
.hitTestBehavior(HitTestMode.None)
|
||||
.maxCount(10)
|
||||
}.margin({ top: 5 })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
/*
|
||||
* Copyright (C) 2023 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ScaleType, ImageKnifeComponent, NONE, DiskStrategy } from "@ohos/libraryimageknife"
|
||||
import { Material } from './model/Material';
|
||||
import { TestDataSource } from './model/TestDataSource';
|
||||
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestManyNetImageLoadWithPage2 {
|
||||
private data: TestDataSource = new TestDataSource();
|
||||
private setting: DiskStrategy = new NONE();
|
||||
private scroller: Scroller = new Scroller()
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Column() {
|
||||
Grid(this.scroller) {
|
||||
LazyForEach(this.data, (item: Material, index) => {
|
||||
GridItem() {
|
||||
Stack({ alignContent: Alignment.BottomEnd }) {
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: {
|
||||
loadSrc: item.thumbnail,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
mainScaleType: ScaleType.CENTER_CROP,
|
||||
placeholderScaleType: ScaleType.CENTER_CROP,
|
||||
isCacheable: false,
|
||||
strategy: this.setting
|
||||
}
|
||||
}).width('100%').height('100%')
|
||||
Text(index + "." + item.name)
|
||||
.fontSize(10)
|
||||
.maxLines(1)
|
||||
.fontColor(Color.White)
|
||||
.textAlign(TextAlign.Center)
|
||||
.layoutWeight(1)
|
||||
.width('100%')
|
||||
.backgroundColor(Color.Orange)
|
||||
}
|
||||
}.width('45%').height(200)
|
||||
}, (item: Material,index:number) => item.material_id + index.toString())
|
||||
}
|
||||
.columnsTemplate('1fr 1fr')
|
||||
.columnsGap(8)
|
||||
.rowsGap(10)
|
||||
.width('100%')
|
||||
.cachedCount(3)
|
||||
.height('100%')
|
||||
}.margin({ top: 5 })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,642 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeComponent} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeData} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeOption} from '@ohos/libraryimageknife'
|
||||
import {RequestOption} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeGlobal } from '@ohos/libraryimageknife'
|
||||
import worker from '@ohos.worker'
|
||||
import { BusinessError } from '@ohos.base'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestPreloadPage {
|
||||
svgUrl:string = ''
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
@State imageKnifeOption: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
@State imageKnifeOption3: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
|
||||
@State imageKnifeOption4: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
@State imageKnifeOption5: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
@State imageKnifeOption6: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Column() {
|
||||
Column() {
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Button('预加载本地资源gif')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load($r('app.media.gifSample'))
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
if (err) {
|
||||
console.log('预加载本地资源gif 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载本地资源gif成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
}})
|
||||
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
Button('本地资源gif')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.gifSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
Button('预加载本地资源gif静态')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load($r('app.media.gifSample'))
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.dontAnimate()
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
if (err ) {
|
||||
console.log('预加载本地资源gif静态 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载本地资源gif静态成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
}})
|
||||
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
Button('本地资源gif静态')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.gifSample'),
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
dontAnimateFlag: true
|
||||
}
|
||||
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
|
||||
Button('预加载网络资源gif')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load('https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658')
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
if (err) {
|
||||
console.log('预加载网络资源gif 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载网络资源gif成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
}})
|
||||
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
Button('网络资源gif')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658',
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
Button('预加载网络资源gif静态')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load('https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658')
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.dontAnimate()
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
if (err) {
|
||||
console.log('预加载网络资源gif静态 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载网络资源gif静态成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
}})
|
||||
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
Button('网络资源gif静态')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658',
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
dontAnimateFlag: true
|
||||
};
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(200).height(200)
|
||||
|
||||
}
|
||||
|
||||
Column() {
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Button('预加载本地资源svg')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load($r('app.media.svgSample'))
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
if (err ) {
|
||||
console.log('预加载本地资源svg 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载本地资源svg成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
}})
|
||||
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
Button('本地资源svg')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption = {
|
||||
loadSrc: $r('app.media.svgSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
Text("请先设置SVG图片的url地址")
|
||||
TextArea({ placeholder: '请输入SVG图片的url地址' })
|
||||
.placeholderColor("rgb(0,0,35)")
|
||||
.placeholderFont({ size: 20, weight: 100, family: 'cursive', style: FontStyle.Italic })
|
||||
.textAlign(TextAlign.Center)
|
||||
.caretColor(Color.Blue)
|
||||
.height(40)
|
||||
.width(400)
|
||||
.fontSize(20)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
.fontFamily("sans-serif")
|
||||
.fontStyle(FontStyle.Normal)
|
||||
.fontColor(Color.Red)
|
||||
.onChange((value: string) => {
|
||||
this.svgUrl = value
|
||||
})
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
|
||||
Button('预加载网络资源svg')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load(this.svgUrl)
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
if (err) {
|
||||
console.log('预加载网络资源gif 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载网络资源gif成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
}})
|
||||
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
Button('网络资源svg')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption = {
|
||||
loadSrc: this.svgUrl,
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(200).height(200)
|
||||
|
||||
}
|
||||
|
||||
Column() {
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Button('预加载本地资源webp')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load($r('app.media.jpgSample'))
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
if (err) {
|
||||
console.log('预加载本地资源webp 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载本地资源webp成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
}})
|
||||
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
Button('本地资源webp')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption3 = {
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
|
||||
Button('预加载网络资源webp')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load('https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp')
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
if (err) {
|
||||
console.log('预加载网络资源webp 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载网络资源webp成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
}})
|
||||
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
Button('网络资源webp')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption3 = {
|
||||
loadSrc: 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 }).width(200).height(200)
|
||||
|
||||
}
|
||||
|
||||
Column() {
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Button('预加载本地资源bmp')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load($r('app.media.bmpSample'))
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
if (err) {
|
||||
console.log('预加载本地资源bmp 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载本地资源bmp成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
}})
|
||||
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
Button('本地资源bmp')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption4 = {
|
||||
loadSrc: $r('app.media.bmpSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
|
||||
Button('预加载网络资源bmp')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load('https://img-blog.csdn.net/20140514114029140')
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
if (err) {
|
||||
console.log('预加载网络资源bmp 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载网络资源bmp成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
}})
|
||||
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
Button('网络资源bmp')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption4 = {
|
||||
loadSrc: 'https://img-blog.csdn.net/20140514114029140',
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 }).width(200).height(200)
|
||||
|
||||
}
|
||||
|
||||
Column() {
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Button('预加载本地资源png')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load($r('app.media.pngSample'))
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
if (err) {
|
||||
console.log('预加载本地资源png 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载本地资源png成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
}})
|
||||
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
Button('本地资源png')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption5 = {
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
|
||||
Button('预加载网络资源png')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load('https://img-blog.csdnimg.cn/20191215043500229.png')
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
if (err) {
|
||||
console.log('预加载网络资源bmp 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载网络资源bmp成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
}})
|
||||
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
Button('网络资源png')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption5 = {
|
||||
loadSrc: 'https://img-blog.csdnimg.cn/20191215043500229.png',
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption5 }).width(200).height(200)
|
||||
|
||||
}
|
||||
|
||||
Column() {
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Button('预加载本地资源jpg')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load($r('app.media.jpgSample'))
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
if (err) {
|
||||
console.log('预加载本地资源jpg 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载本地资源jpg成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
}})
|
||||
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
Button('本地资源jpg')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption6 = {
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
|
||||
Button('预加载网络资源jpg')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load('https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB')
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
if (err) {
|
||||
console.log('预加载网络资源jpg 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载网络资源jpg成功! imageknifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
}})
|
||||
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
Button('网络资源jpg')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption6 = {
|
||||
loadSrc: 'https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB',
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption6 }).width(200).height(200)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
|
||||
}
|
||||
aboutToDisappear(){
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,190 @@
|
|||
/*
|
||||
* 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, NONE, ImageKnifeGlobal } from '@ohos/libraryimageknife';
|
||||
import { taskpool } from '@kit.ArkTS';
|
||||
|
||||
const dataBak: ImageKnifeOption[] = [
|
||||
{
|
||||
loadSrc: "http://b.hiphotos.baidu.com/image/pic/item/9d82d158ccbf6c81b94575cfb93eb13533fa40a2.jpg",
|
||||
priority: taskpool.Priority.HIGH
|
||||
},
|
||||
{
|
||||
loadSrc: "http://e.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31c1badd5a685d6277f9e2ff81e.jpg",
|
||||
priority: taskpool.Priority.HIGH
|
||||
},
|
||||
{
|
||||
loadSrc: "http://g.hiphotos.baidu.com/image/pic/item/0d338744ebf81a4c87a3add4d52a6059252da61e.jpg",
|
||||
priority: taskpool.Priority.HIGH
|
||||
},
|
||||
{
|
||||
loadSrc: "http://a.hiphotos.baidu.com/image/pic/item/f2deb48f8c5494ee5080c8142ff5e0fe99257e19.jpg",
|
||||
priority: taskpool.Priority.HIGH
|
||||
},
|
||||
{
|
||||
loadSrc: "http://f.hiphotos.baidu.com/image/pic/item/4034970a304e251f503521f5a586c9177e3e53f9.jpg",
|
||||
priority: taskpool.Priority.HIGH
|
||||
},
|
||||
{
|
||||
loadSrc: "https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
|
||||
priority: taskpool.Priority.MEDIUM
|
||||
},
|
||||
{
|
||||
loadSrc: "http://h.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5f2c2a9e953da81cb39db3d1d.jpg",
|
||||
priority: taskpool.Priority.MEDIUM
|
||||
},
|
||||
{
|
||||
loadSrc: "http://a.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a292d2472199d25bc315d607c7c.jpg",
|
||||
priority: taskpool.Priority.MEDIUM
|
||||
},
|
||||
{
|
||||
loadSrc: "https://img-blog.csdn.net/20140514114029140",
|
||||
priority: taskpool.Priority.MEDIUM
|
||||
},
|
||||
{
|
||||
loadSrc: "http://g.hiphotos.baidu.com/image/pic/item/6d81800a19d8bc3e770bd00d868ba61ea9d345f2.jpg",
|
||||
priority: taskpool.Priority.MEDIUM
|
||||
},
|
||||
{
|
||||
loadSrc: "http://b.hiphotos.baidu.com/image/pic/item/e824b899a9014c08878b2c4c0e7b02087af4f4a3.jpg",
|
||||
priority: taskpool.Priority.LOW
|
||||
},
|
||||
{
|
||||
loadSrc: "http://b.hiphotos.baidu.com/image/pic/item/359b033b5bb5c9ea5c0e3c23d139b6003bf3b374.jpg",
|
||||
priority: taskpool.Priority.LOW
|
||||
},
|
||||
{
|
||||
loadSrc: "http://h.hiphotos.baidu.com/image/pic/item/902397dda144ad340668b847d4a20cf430ad851e.jpg",
|
||||
priority: taskpool.Priority.LOW
|
||||
},
|
||||
{
|
||||
loadSrc: "http://d.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f119945cbe2fe9925bc317d2a.jpg",
|
||||
priority: taskpool.Priority.LOW
|
||||
},
|
||||
{
|
||||
loadSrc:"http://img2.xkhouse.com/bbs/hfhouse/data/attachment/forum/corebbs/2009-11/2009113011534566298.jpg",
|
||||
priority: taskpool.Priority.LOW
|
||||
}
|
||||
];
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestPriorityComponent {
|
||||
@State data: ImageKnifeOption[] = [
|
||||
{
|
||||
loadSrc: "https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
|
||||
priority: taskpool.Priority.HIGH
|
||||
},
|
||||
{
|
||||
loadSrc: "http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg",
|
||||
priority: taskpool.Priority.HIGH
|
||||
},
|
||||
{
|
||||
loadSrc: "http://h.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5f2c2a9e953da81cb39db3d1d.jpg",
|
||||
priority: taskpool.Priority.HIGH
|
||||
},
|
||||
{
|
||||
loadSrc: "http://g.hiphotos.baidu.com/image/pic/item/55e736d12f2eb938d5277fd5d0628535e5dd6f4a.jpg",
|
||||
priority: taskpool.Priority.HIGH
|
||||
},
|
||||
{
|
||||
loadSrc: "http://e.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f7e41f5cfe760e0cf3d6cad6ee.jpg",
|
||||
priority: taskpool.Priority.HIGH
|
||||
},
|
||||
{
|
||||
loadSrc: "http://b.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fbb3586c0168224f4a20a4dd7e.jpg",
|
||||
priority: taskpool.Priority.MEDIUM
|
||||
},
|
||||
{
|
||||
loadSrc: "http://img2.xkhouse.com/bbs/hfhouse/data/attachment/forum/corebbs/2009-11/2009113011534566298.jpg",
|
||||
priority: taskpool.Priority.MEDIUM
|
||||
},
|
||||
{
|
||||
loadSrc: "http://a.hiphotos.baidu.com/image/pic/item/e824b899a9014c087eb617650e7b02087af4f464.jpg",
|
||||
priority: taskpool.Priority.MEDIUM
|
||||
},
|
||||
{
|
||||
loadSrc: "http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg",
|
||||
priority: taskpool.Priority.MEDIUM
|
||||
},
|
||||
{
|
||||
loadSrc: "http://d.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f119945cbe2fe9925bc317d2a.jpg",
|
||||
priority: taskpool.Priority.MEDIUM
|
||||
},
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
|
||||
priority: taskpool.Priority.LOW
|
||||
},
|
||||
{
|
||||
loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png",
|
||||
priority: taskpool.Priority.LOW
|
||||
},
|
||||
{
|
||||
loadSrc: "https://img-blog.csdn.net/20140514114029140",
|
||||
priority: taskpool.Priority.LOW
|
||||
},
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
|
||||
priority: taskpool.Priority.LOW
|
||||
},
|
||||
{
|
||||
loadSrc: "http://g.hiphotos.baidu.com/image/pic/item/6d81800a19d8bc3e770bd00d868ba61ea9d345f2.jpg",
|
||||
priority: taskpool.Priority.LOW
|
||||
}
|
||||
];
|
||||
@State maxRequests: number | undefined = ImageKnifeGlobal?.getInstance()?.getImageKnife()?.maxRequests;
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Column() {
|
||||
Text('最大并发数： ' + this.maxRequests).width('50%').height(30)
|
||||
Button('修改最大并发数为1').width('50%').height(30)
|
||||
.onClick(() => {
|
||||
if (ImageKnifeGlobal?.getInstance()?.getImageKnife()) {
|
||||
ImageKnifeGlobal?.getInstance()?.getImageKnife()?.setMaxRequests(1);
|
||||
this.maxRequests = ImageKnifeGlobal?.getInstance()?.getImageKnife()?.maxRequests;
|
||||
this.data = [...dataBak, ...dataBak, ...dataBak];
|
||||
}
|
||||
})
|
||||
Grid() {
|
||||
ForEach(this.data, (item: ImageKnifeOption, index: number) => {
|
||||
GridItem() {
|
||||
Flex() {
|
||||
Text(item?.priority?.toString() || '')
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: {
|
||||
loadSrc: item.loadSrc,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
strategy: new NONE(),
|
||||
isCacheable: false,
|
||||
priority: item.priority
|
||||
}
|
||||
})
|
||||
}.height(60)
|
||||
}
|
||||
})
|
||||
}
|
||||
.width("100%")
|
||||
.height("100%")
|
||||
.columnsTemplate("1fr 1fr 1fr 1fr 1fr")
|
||||
.columnsGap(10)
|
||||
.rowsGap(10)
|
||||
.backgroundColor(0xFAEEE0)
|
||||
.maxCount(10)
|
||||
}
|
||||
.backgroundColor(Color.Pink)
|
||||
.margin({ top: 5 })
|
||||
}
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue