Pre Merge pull request !338 from zgf/master
This commit is contained in:
zgf
Gitee
commit
d08768b5b2
|
|
@ -1,10 +1,11 @@
|
|||
/node_modules
|
||||
/oh_modules
|
||||
/local.properties
|
||||
/.idea
|
||||
**/build
|
||||
/oh_modules/
|
||||
/.hvigor/
|
||||
/oh-package-lock.json5
|
||||
/.hvigor
|
||||
.cxx
|
||||
/.clangd
|
||||
/.clang-format
|
||||
/.clang-tidy
|
||||
**/.test
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
"bundleName": "com.openharmony.imageknife",
|
||||
"vendor": "example",
|
||||
"versionCode": 1000000,
|
||||
"versionName": "2.1.2-rc.0",
|
||||
"versionName": "3.0.0-rc.0",
|
||||
"icon": "$media:app_icon",
|
||||
"label": "$string:app_name",
|
||||
"distributedNotificationEnabled": true
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 6.6 KiB After Width: | Height: | Size: 2.0 KiB |
101
CHANGELOG.md
101
CHANGELOG.md
|
|
@ -1,31 +1,94 @@
|
|||
## 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增加请求取消回调
|
||||
|
||||
## 2.2.0
|
||||
- 修复错误图绘制完后变成占位图
|
||||
- 提供图片加载成功/失败的事件
|
||||
- 修复懒加载在多次点击出现卡死的问题
|
||||
## 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释放
|
||||
- 提供清理缓存能力
|
||||
- 修复preLoad接口失效
|
||||
- 修复多线程图片加载出现空白问题
|
||||
|
||||
## 3.0.0-rc.4
|
||||
- 支持hsp多包图片资源
|
||||
- 新增putCache写入缓存接口
|
||||
- 修复入参为pixelMap图片不显示问题
|
||||
- 网络请求减少拼接操作，修复网络加载速度慢
|
||||
- 提供图片加载成功/失败的事件
|
||||
|
||||
## 3.0.0-rc.3
|
||||
- 将请求默认并行从64调整到8，减少对taskpool execute内存消耗
|
||||
- 补充option参数：placeholderObjectFit，errorholderObjectFit分别支持占位图填充效果和错误图填充效果
|
||||
|
||||
## 3.0.0-rc.2
|
||||
- 新增支持使用一个或多个图片变换，如模糊，高亮等
|
||||
|
||||
## 3.0.0-rc.1
|
||||
- 新增从内存或文件缓存获取图片数据接口getCacheImage
|
||||
- 新增图片预加载preLoadCache并返回文件缓存路径
|
||||
- ImageKnifeOption新增writeCacheStrategy存入策略(只存入内存或文件缓存)
|
||||
- ImageKnifeOption新增onlyRetrieveFromCache仅用缓存加载
|
||||
- 新增单个和全局请求头
|
||||
- 补齐自定key特性
|
||||
- 获取组件宽高改用onSizeChange （需要API12）
|
||||
- svg解码宽高单位给位px
|
||||
- 修复复用场景下从内存获取图片后又清空了画布导致图片不显示
|
||||
- 修复复用场景主图比占位图绘制快后下次不显示占位图问题
|
||||
|
||||
## 3.0.0-rc.0
|
||||
- 使用Image组件替换Canvas组件渲染，并重构大部分的实现逻辑，提升渲染性能
|
||||
|
||||
较2.x版本增强点：
|
||||
- 使用Image组件代替Canvas组件渲染
|
||||
- 重构Dispatch分发逻辑，支持控制并发请求数，支持请求排队队列的优先级
|
||||
- 支持通过initMemoryCache自定义策略内存缓存策略和大小。
|
||||
- 支持option自定义实现图片获取/网络下载
|
||||
- 继承Image的能力，支持option传入border，设置边框，圆角
|
||||
- 继承Image的能力，支持option传入objectFit设置图片缩放
|
||||
- 修复发送消息时最近的两条消息头像闪动的问题
|
||||
|
||||
缺失特性
|
||||
- 不支持drawLifeCycle接口，通过canvas自会图片
|
||||
- mainScaleType，border等参数，新版本与系统Image保持一致
|
||||
- gif/webp动图播放与控制
|
||||
- signature自定义key的实现
|
||||
- 支持进行图片变换: 支持图像像素源图片变换效果。
|
||||
- 抗锯齿相关参数
|
||||
|
||||
## 2.2.0-rc.2
|
||||
- ImageKnife支持下采样
|
||||
- ImageKnife支持heic图片修改demo，按钮控制组件是否展示
|
||||
- 修复通过磁盘链接加载图片无法显示
|
||||
- ImageKnife控制可视化区域图片
|
||||
- 修复占位图、错误图、重试图从内存获取之后进入子线程导致内存泄露
|
||||
- ImageKnifeComponent组件key属性改为id属性
|
||||
- 修改header图的存储标志位
|
||||
|
||||
## 2.2.0-rc.1
|
||||
- 修改ImageKnife跳过网络,点击默认,图片没有传入宽高,无显示bug
|
||||
|
|
|
|||
26
OAT.xml
26
OAT.xml
|
|
@ -1,21 +1,4 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Copyright (c) 2021 Huawei Device Co., Ltd.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
|
||||
This is the configuration file template for OpenHarmony OSS Audit Tool, please copy it to your project root dir and modify it refer to OpenHarmony/tools_oat/README.
|
||||
|
||||
-->
|
||||
<configuration>
|
||||
<oatconfig>
|
||||
<filefilterlist>
|
||||
|
|
@ -27,8 +10,7 @@
|
|||
<filteritem type="filename" name="hvigorw" desc="hvigorw配置文件，DevEco Studio自动生成，不手动修改"/>
|
||||
<filteritem type="filename" name="hvigorw.bat" desc="hvigorw配置文件，DevEco Studio自动生成，不手动修改"/>
|
||||
<filteritem type="filename" name="hvigor-wrapper.js" desc="hvigorw配置文件，DevEco Studio自动生成，不手动修改"/>
|
||||
<filteritem type="filepath" name="library/src/main/ets/components/3rd_party/.*" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
|
||||
<filteritem type="filename" name=".gitmodules" desc="项目工程配置文件，不需要添加版权头"/>
|
||||
<filteritem type="filepath" name="library/src/main/ets/3rd_party/.*" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
|
||||
</filefilter>
|
||||
<filefilter name="defaultPolicyFilter" desc="Filters for compatibility，license header policies">
|
||||
<filteritem type="filename" name="hvigorfile.*" desc="hvigor配置文件，DevEco Studio自动生成，不手动修改"/>
|
||||
|
|
@ -38,8 +20,7 @@
|
|||
<filteritem type="filename" name="hvigorw" desc="hvigorw配置文件，DevEco Studio自动生成，不手动修改"/>
|
||||
<filteritem type="filename" name="hvigorw.bat" desc="hvigorw配置文件，DevEco Studio自动生成，不手动修改"/>
|
||||
<filteritem type="filename" name="hvigor-wrapper.js" desc="hvigorw配置文件，DevEco Studio自动生成，不手动修改"/>
|
||||
<filteritem type="filepath" name="library/src/main/ets/components/3rd_party/.*" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
|
||||
<filteritem type="filename" name=".gitmodules" desc="项目工程配置文件，不需要添加版权头"/>
|
||||
<filteritem type="filepath" name="library/src/main/ets/3rd_party/.*" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
|
||||
</filefilter>
|
||||
<filefilter name="binaryFileTypePolicyFilter" desc="Filters for binary file policies">
|
||||
<filteritem type="filename" name="*.dpg" desc="dpg图片格式文件,用于展示示例"/>
|
||||
|
|
@ -51,10 +32,9 @@
|
|||
<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/components/3rd_party/.*" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
|
||||
<filteritem type="filepath" name="library/src/main/ets/3rd_party/.*" desc="第三方开源软件源码，不修改版权头，以防有修改版权风险"/>
|
||||
</filefilter>
|
||||
</filefilterlist>
|
||||
</oatconfig>
|
||||
|
|
|
|||
901
README.md
901
README.md
|
|
@ -4,630 +4,332 @@
|
|||
|
||||
## 简介
|
||||
|
||||
本项目基于开源库 [Glide](https://github.com/bumptech/glide) 进行OpenHarmony的自研版本：
|
||||
本项目参考开源库 [Glide](https://github.com/bumptech/glide) 进行OpenHarmony的自研版本：
|
||||
|
||||
- 支持内存缓存，使用LRUCache算法，对图片数据进行内存缓存。
|
||||
- 支持磁盘缓存，对于下载图片会保存一份至磁盘当中。
|
||||
- 支持进行图片变换: 支持图像像素源图片变换效果。
|
||||
- 支持用户配置参数使用:(
|
||||
例如：配置是否开启一级内存缓存，配置磁盘缓存策略，配置仅使用缓存加载数据，配置图片变换效果，配置占位图，配置加载失败占位图等)。
|
||||
- 推荐使用ImageKnifeComponent组件配合ImageKnifeOption参数来实现功能。
|
||||
- 支持用户自定义配置实现能力参考ImageKnifeComponent组件中对于入参ImageKnifeOption的处理。
|
||||
- 支持自定义内存缓存策略，支持设置内存缓存的大小(默认LRU策略)。
|
||||
- 支持磁盘二级缓存，对于下载图片会保存一份至磁盘当中。
|
||||
- 支持自定义实现图片获取/网络下载
|
||||
- 支持监听网络下载回调进度
|
||||
- 继承Image的能力，支持option传入border，设置边框，圆角
|
||||
- 继承Image的能力，支持option传入objectFit设置图片缩放，包括objectFit为auto时根据图片自适应高度
|
||||
- 支持通过设置transform缩放图片
|
||||
- 并发请求数量，支持请求排队队列的优先级
|
||||
- 支持生命周期已销毁的图片，不再发起请求
|
||||
- 自定义缓存key
|
||||
- 自定义http网络请求头
|
||||
- 支持writeCacheStrategy控制缓存的存入策略(只存入内存或文件缓存)
|
||||
- 支持preLoadCache预加载图片
|
||||
- 支持onlyRetrieveFromCache仅用缓存加载
|
||||
- 支持使用一个或多个图片变换，如模糊，高亮等
|
||||
|
||||
<img src="screenshot/gif1.gif" width="50%"/>
|
||||
待实现特性
|
||||
|
||||
- gif/webp动图显示与控制
|
||||
- 内存降采样优化，节约内存的占用
|
||||
- 支持自定义图片解码
|
||||
|
||||
注意：3.x版本相对2.x版本做了重大的重构，主要体现在：
|
||||
|
||||
- 使用Image组件代替Canvas组件渲染
|
||||
- 重构Dispatch分发逻辑，支持控制并发请求数，支持请求排队队列的优先级
|
||||
- 支持通过initMemoryCache自定义策略内存缓存策略和大小
|
||||
- 支持option自定义实现图片获取/网络下载
|
||||
|
||||
因此API及能力上，目前有部分差异，主要体现在：
|
||||
|
||||
- 不支持drawLifeCycle接口，通过canvas自会图片
|
||||
- mainScaleType，border等参数，新版本与系统Image保持一致
|
||||
- gif/webp动图播放与控制
|
||||
- 抗锯齿相关参数
|
||||
|
||||
## 下载安装
|
||||
|
||||
```
|
||||
ohpm install @ohos/imageknife
|
||||
|
||||
// 如果需要用文件缓存，需要提前初始化文件缓存
|
||||
await ImageKnife.getInstance().initFileCache(context, 256, 256 * 1024 * 1024)
|
||||
```
|
||||
|
||||
## X86模拟器配置
|
||||
## 使用说明
|
||||
|
||||
[使用模拟器运行应用/服务](https://developer.huawei.com/consumer/cn/deveco-developer-suite/enabling/kit?currentPage=1&pageSize=100)
|
||||
#### 1.显示本地资源图片
|
||||
|
||||
|
||||
## 使用说明
|
||||
|
||||
### 1.依赖配置
|
||||
在entry\src\main\ets\entryability\EntryAbility.ts中做如下配置初始化全局ImageKnife实例：
|
||||
|
||||
```typescript
|
||||
import UIAbility from '@ohos.app.ability.UIAbility';
|
||||
import window from '@ohos.window';
|
||||
import { ImageKnife } from '@ohos/imageknife'
|
||||
|
||||
export default class EntryAbility extends UIAbility {
|
||||
onWindowStageCreate(windowStage: window.WindowStage) {
|
||||
windowStage.loadContent('pages/Index', (err, data) => {
|
||||
});
|
||||
// 初始化全局ImageKnife
|
||||
ImageKnife.with(this.context);
|
||||
// 后续访问ImageKnife请通过:ImageKnifeGlobal.getInstance().getImageKnife()方式
|
||||
```
|
||||
ImageKnifeComponent({
|
||||
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.加载普通图片
|
||||
#### 2.显示本地context files下文件
|
||||
|
||||
接下来我们来写个简单实例看看:
|
||||
|
||||
```extendtypescript
|
||||
import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/imageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct Index {
|
||||
@State message: string = 'Hello World'
|
||||
@State option: ImageKnifeOption = {
|
||||
loadSrc: $r('app.media.icon')
|
||||
```
|
||||
ImageKnifeComponent({
|
||||
ImageKnifeOption: {
|
||||
loadSrc: this.localFile,
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Auto
|
||||
}
|
||||
}).width(100).height(100)
|
||||
```
|
||||
|
||||
build() {
|
||||
Row() {
|
||||
Column() {
|
||||
Text(this.message)
|
||||
.fontSize(50)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
ImageKnifeComponent({ imageKnifeOption: this.option })
|
||||
.width(300)
|
||||
.height(300)
|
||||
}.width('100%')
|
||||
}.height('100%')
|
||||
#### 3.显示网络图片
|
||||
|
||||
```
|
||||
ImageKnifeComponent({
|
||||
ImageKnifeOption: {
|
||||
loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Auto
|
||||
}
|
||||
}
|
||||
}).width(100).height(100)
|
||||
```
|
||||
|
||||
非常简单，仅需定义一个ImageKnifeOption数据对象，然后在你需要的UI位置，加入ImageKnifeComponent自定义组件就可以加载出一张图像了。
|
||||
#### 4.自定义下载图片
|
||||
|
||||
### 3.加载SVG图片
|
||||
|
||||
加载svg其实和普通流程没有区别,只要将 `loadSrc: $r('app.media.jpgSample'),` `改成一张 loadSrc: $r('app.media.svgSample'),`
|
||||
svg类型图片即可。
|
||||
|
||||
注:SVG文件需添加xml声明,应以"<?xml"开头,并且SVG标签需设置width, height。
|
||||
|
||||
|
||||
### 4.加载GIF图片
|
||||
|
||||
加载GIF其实和普通流程也没有区别只要将 `loadSrc: $r('app.media.jpgSample'),` `改成一张 loadSrc: $r('app.media.gifSample'),`
|
||||
GIF图片即可。
|
||||
|
||||
#### 4.1加载GIF图片
|
||||
|
||||
更改ImageKnifeOption对象的autoPlay（可选autoPlay = true为开始播放，autoPlay = false为暂停播放）
|
||||
|
||||
### 5.自定义Key
|
||||
因为通常改变标识符比较困难或者根本不可能，所以ImageKnife也提供了 签名 API 来混合（你可以控制的）额外数据到你的缓存键中。
|
||||
签名(signature)适用于媒体内容，也适用于你可以自行维护的一些版本元数据。
|
||||
|
||||
将签名传入加载请求
|
||||
```extendtypescript
|
||||
imageKnifeOption = {
|
||||
loadSrc: 'https://aahyhy.oss-cn-beijing.aliyuncs.com/blue.jpg',
|
||||
signature: new ObjectKey(new Date().getTime().toString())
|
||||
}
|
||||
```
|
||||
详细样例请参考SignatureTestPage文件
|
||||
|
||||
代码示例
|
||||
|
||||
### 6.自定义请求头规格
|
||||
设置全局header并且设置request的header时，当key不同时全局和request并行，当key相同时request的header覆盖全局的header
|
||||
|
||||
### 7.自定义网络栈加载图片
|
||||
7.1 自定义网络栈加载单个图片，在imageKnifeNextOption中添加customGetImage标签，然后完善custom函数的逻辑即可，
|
||||
```
|
||||
ImageKnifeNextComponent({
|
||||
imageKnifeNextOption: {
|
||||
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
|
||||
ImageKnifeComponent({
|
||||
ImageKnifeOption: {
|
||||
loadSrc: "https://file.atomgit.com/uploads/user/1704857786989_8994.jpeg",
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Auto,
|
||||
customGetImage: custom
|
||||
}
|
||||
}).width(100).height(100)
|
||||
|
||||
// 自定义实现图片获取方法，如自定义网络下载
|
||||
@Concurrent
|
||||
async function custom(context: Context, src: string): Promise<ArrayBuffer | undefined> {
|
||||
let result: DataFetchResult = new DataFetchResult();
|
||||
result.data = arraybuffer; //此处替换成自己网络获取的ArrayBuffer的逻辑
|
||||
return result;
|
||||
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
|
||||
}
|
||||
```
|
||||
7.2 自定义网络栈加载全部图片
|
||||
```
|
||||
1.先执行ImageKnifeGlobal.getInstance().getImageKnife()?.replaceDataFetch(new CustomDataFetchClient()); 替换网络栈
|
||||
2.在CustomDataFetchClient这个类中也通过下面的逻辑替换成自己网络获取的ArrayBuffer的逻辑
|
||||
let result: DataFetchResult = new DataFetchResult();
|
||||
result.data = arraybuffer; //此处替换成自己网络获取的ArrayBuffer的逻辑
|
||||
return result;
|
||||
```
|
||||
7.3 取消自定义网络栈加载全部图片
|
||||
```
|
||||
如果用户执行了自定义网络加载全部图片，后面又不想自定义网络栈加载全部图片了，可以通过下面的方式恢复
|
||||
ImageKnifeGlobal.getInstance().getImageKnife()?.replaceDataFetch(new CustomDataFetchClient());
|
||||
```
|
||||
|
||||
### 8.监听图片加载成功与失败
|
||||
#### 5.监听网络下载进度
|
||||
|
||||
```
|
||||
ImageKnifeNextComponent({
|
||||
imageKnifeNextOption: {
|
||||
loadSrc: 'http://e.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f7e41f5cfe760e0cf3d6cad6ee.jpg',
|
||||
onLoadListener: {
|
||||
console.log('Load Successful: ' + data);
|
||||
return data;
|
||||
},
|
||||
onLoadFailed: (err) => {
|
||||
console.error('Load Failed Reason: ' + err);
|
||||
}
|
||||
ImageKnifeComponent({
|
||||
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，设置边框，圆角
|
||||
|
||||
如果简单的加载一张图像无法满足需求，我们可以看看ImageKnifeOption这个类提供了哪些扩展能力。
|
||||
```
|
||||
ImageKnifeComponent({ ImageKnifeOption:
|
||||
{
|
||||
loadSrc: $r("app.media.rabbit"),
|
||||
border: {radius:50}
|
||||
}
|
||||
}).width(100).height(100)
|
||||
```
|
||||
|
||||
#### 7.支持option图片变换
|
||||
|
||||
```
|
||||
ImageKnifeComponent({ 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({
|
||||
{
|
||||
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:
|
||||
{
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
objectFit: ImageFit.Cover,
|
||||
border: { radius: 150 }
|
||||
}
|
||||
}).width(300)
|
||||
.height(300)
|
||||
```
|
||||
|
||||
圆形裁剪带边框变换示例
|
||||
|
||||
```
|
||||
ImageKnifeComponent({ ImageKnifeOption:
|
||||
{
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
objectFit: ImageFit.Cover,
|
||||
border: { radius: 150, color: Color.Red, width: 5 }
|
||||
}
|
||||
}).width(300)
|
||||
.height(300)
|
||||
```
|
||||
|
||||
对比度滤波变换示例
|
||||
|
||||
```
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: {
|
||||
loadSrc: $r('app.media.pngSample')
|
||||
}
|
||||
}).width(300)
|
||||
.height(300)
|
||||
.contrast(12)
|
||||
```
|
||||
|
||||
旋转变换示例
|
||||
|
||||
```
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: {
|
||||
loadSrc: $r('app.media.pngSample')
|
||||
}
|
||||
}).width(300)
|
||||
.height(300)
|
||||
.rotate({angle:90})
|
||||
.backgroundColor(Color.Pink)
|
||||
```
|
||||
|
||||
#### 8.监听图片加载成功与失败
|
||||
|
||||
```
|
||||
ImageKnifeComponent({ 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
|
||||
设置是否同步加载图片，默认是异步加载。建议加载尺寸较小的本地图片时将syncLoad设为true，因为耗时较短，在主线程上执行即可
|
||||
```
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption:{
|
||||
loadSrc:$r("app.media.pngSample"),
|
||||
placeholderSrc:$r("app.media.loading")
|
||||
},syncLoad:true
|
||||
})
|
||||
```
|
||||
## 接口说明
|
||||
|
||||
### ImageKnifeOption参数列表
|
||||
|
||||
| 参数名称 | 入参内容 | 功能简介 |
|
||||
|------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------|
|
||||
| loadSrc | string\ | PixelMap\ |Resource | 图片数据源 |
|
||||
| mainScaleType | ScaleType | 设置主图展示样式（可选） |
|
||||
| strategy | DiskStrategy | 设置磁盘缓存策略（可选） |
|
||||
| dontAnimateFlag | boolean | gif加载展示一帧（可选） |
|
||||
| placeholderSrc | string\ (占位图不支持gif图且不支持网络下载功能) | PixelMap\ |Resource | 占位图数据源 |
|
||||
| placeholderScaleType | ScaleType | 设置占位图展示样式（可选） |
|
||||
| errorholderSrc | PixelMap\ | Resource | 错误占位图数据源 |
|
||||
| errorholderSrcScaleType | ScaleType | 设置失败占位图展示样式（可选） |
|
||||
| retryholderSrc | PixelMap\ | Resource | 重试占位图数据源 |
|
||||
| retryholderScaleType | ScaleType | 设置重试占位图展示样式（可选） |
|
||||
| fallbackSrc | PixelMap\ | Resource | 后备回调符数据源 |
|
||||
| thumbSizeMultiplier | number 范围(0,1] | 设置缩略图占比（可选） |
|
||||
| thumbSizeDelay | number | 设置缩略图展示时间（可选） |
|
||||
| thumbSizeMultiplierScaleType | ScaleType | 设置缩略图展示样式（可选） |
|
||||
| displayProgress | boolean | 设置是否展示下载进度条（可选） |
|
||||
| canRetryClick | boolean | 设置重试图层是否点击重试（可选） |
|
||||
| onlyRetrieveFromCache | boolean | 仅使用缓存加载数据（可选） |
|
||||
| isCacheable | boolean | 是否开启一级内存缓存（可选） |
|
||||
| gif | {<br/> // 返回一周期动画gif消耗的时间<br/> loopFinish?: (loopTime?) => void<br/> // gif播放速率相关<br/> speedFactory?: number<br/> // 直接展示gif第几帧数据<br/> seekTo?: number<br/> playTimes?: number<br/> } | GIF播放控制能力（可选） |
|
||||
| transformation | BaseTransform<PixelMap> | 单个变换（可选） |
|
||||
| transformations | Array<BaseTransform<PixelMap>> | 多个变换（可选） |
|
||||
| allCacheInfoCallback | IAllCacheInfoCallback | 输出缓存相关内容和信息（可选） |
|
||||
| signature | ObjectKey | 自定key（可选） |
|
||||
| **drawLifeCycle** | **IDrawLifeCycle** | **用户自定义实现绘制方案（可选）** |
|
||||
| imageSmoothingEnabled | boolean | 抗锯齿是否开启属性配置，设置为false时，imageSmoothingQuality失效 |
|
||||
| imageSmoothingQuality | AntiAliasing | 抗锯齿属性配置 |
|
||||
| autoPlay | boolean | GIF播放暂停控制（可选） |
|
||||
| customGetImage | (Context, string) | 设置是否使用应用自定义的方式加载图片（可选） |
|
||||
| onLoadListener | onLoadSuccess: (data: string | PixelMap | Resource | undefined) => void;onLoadFailed: (err: string) => void; | 监听图片加载成功/失败 |
|
||||
| 参数名称 | 入参内容 | 功能简介 |
|
||||
|-----------------------|-------------------------------------------------------|-----------------|
|
||||
| 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| 监听图片加载成功与失败 |
|
||||
|
||||
其他参数只需要在ImageKnifeOption对象上按需添加即可。
|
||||
### ImageKnife接口
|
||||
|
||||
这里我们着重讲一下**自定义实现绘制方案**。为了增强绘制扩展能力，目前ImageKnifeComponent使用了Canvas的渲染能力作为基础。在此之上为了抽象组件绘制表达。我将图像的状态使用了
|
||||
**IDrawLifeCycle绘制生命周期进行表达**，
|
||||
| 参数名称 | 入参内容 | 功能简介 |
|
||||
|------------------|-------------------------------------------------------------------------------------------------------|---------------|
|
||||
| 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请求头 |
|
||||
| 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） |
|
||||
|
||||
<img src="screenshot/png1.png" width="100%"/>
|
||||
|
||||
ImageKnifeComponent内部，责任链实现。 用户参数设置->全局参数设置->自定义组件内部设置
|
||||
|
||||
采用责任链的好处是，用户可以通过自定义绘制，重新绘制图层。如果不想绘制也可以通过预制回调获取绘制流程信息。
|
||||
|
||||
<img src="screenshot/png2.png" width="70%"/>
|
||||
|
||||
### 场景1:默认的展示不满足需求，需要加个圆角效果。
|
||||
|
||||
代码如下:
|
||||
|
||||
```typescript
|
||||
import { ImageKnifeComponent } from '@ohos/imageknife'
|
||||
import { ImageKnifeOption } from '@ohos/imageknife'
|
||||
import { ImageKnifeDrawFactory } from '@ohos/imageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct Index {
|
||||
@State imageKnifeOption1: ImageKnifeOption = {
|
||||
// 加载一张本地的jpg资源（必选）
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
// 占位图使用本地资源icon_loading（可选）
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
// 失败占位图使用本地资源icon_failed（可选）
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
// 绘制圆角30，边框5，边框"#ff00ff".用户自定义绘制（可选）
|
||||
drawLifeCycle:ImageKnifeDrawFactory.createRoundLifeCycle(5,"#ff00ff",30)
|
||||
};
|
||||
|
||||
build(){
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
|
||||
.width(300)
|
||||
.height(300)
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
## 下载安装GPUImage依赖
|
||||
方法一：在Terminal窗口中，执行如下命令安装三方包，DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。
|
||||
```
|
||||
ohpm install @ohos/gpu_transform
|
||||
```
|
||||
方法二： 在工程的oh-package.json5中设置三方包依赖，配置示例如下：
|
||||
```
|
||||
"dependencies": {
|
||||
"@ohos/gpu_transform": "^1.0.2"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
`ImageKnifeDrawFactory.createRoundLifeCycle(5,"#ff00ff",30)`
|
||||
我们深入查看源码可以发现，实际上是对IDrawLifeCycle接口的部分实现，这里我介绍一下IDrawLifeCycle。
|
||||
|
||||
*
|
||||
*IDrawLifeCycle的返回值代表事件是否被消费，如果被消费接下来组件内部就不会处理，如果没被消费就会传递到下一个使用者。目前消费流程（用户自定义->
|
||||
全局配置定义->组件内部默认定义）**
|
||||
|
||||
所以我们在当数据是一张PixelMap的时候（目前jpg png bmp webp
|
||||
svg返回的都是PixelMap，gif返回GIFFrame数组），我们返回了true。消费了事件，代表这个绘制流程用户自定义完成。
|
||||
|
||||
<img src="screenshot/gif2.gif" width="50%"/>
|
||||
|
||||
由于IDrawLifeCycle实现较为冗长，我们封装了ImageKnifeDrawFactory工厂，提供了网络下载百分比效果、圆角、椭圆添加边框等能力。下面我们就再看看使用工厂封装之后的场景代码。
|
||||
|
||||
### 场景2: 网络下载百分比效果展示
|
||||
|
||||
当进行加载网络图片时，可能需要展示网络下载百分比动画。但是默认的动画又不能满足需求，这个时候我们就需要自定义网络下载百分比效果。代码如下:
|
||||
|
||||
```typescript
|
||||
import UIAbility from '@ohos.app.ability.UIAbility';
|
||||
import window from '@ohos.window';
|
||||
import { ImageKnifeGlobal,ImageKnife,ImageKnifeDrawFactory,LogUtil } from '@ohos/imageknife'
|
||||
import abilityAccessCtrl,{Permissions} from '@ohos.abilityAccessCtrl';
|
||||
export default class EntryAbility extends UIAbility {
|
||||
onWindowStageCreate(windowStage: window.WindowStage) {
|
||||
//.. 删除不必要代码
|
||||
windowStage.loadContent('pages/index', (err, data) => {
|
||||
});
|
||||
// 初始化ImageKnifeGlobal和ImageKnife
|
||||
ImageKnife.with(this.context);
|
||||
// 全局配置网络加载进度条 使用ImageKnifeGlobal.getInstance().getImageKnife()访问ImageKnife
|
||||
ImageKnifeGlobal.getInstance().getImageKnife().setDefaultLifeCycle(ImageKnifeDrawFactory.createProgressLifeCycle("#10a5ff", 0.5))
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
这里大家可能会问，为什么会将这个IDrawLifeCycle放在AbilityStage里面实现？
|
||||
|
||||
这是因为网络下载百分比进度很多时候都是全局通用，如果有需要全局配置的自定义展示方案。推荐在AbilityStage里面，往ImageKnife的setDefaultLifeCycle函数中注入，即可将ImageKnifeComponent中的默认绘制方案替换。
|
||||
|
||||
在这里我们实现的效果如下图所示。
|
||||
|
||||
<img src="screenshot/gif3.gif" width="50%"/>
|
||||
|
||||
## 高级用法
|
||||
|
||||
以上简单使用和进阶使用都是经过一层自定义组件封装之后形成的，RequestOption封装成了ImageKnifeOption,绘制部分封装成了自定义组件ImageKnifeComponent。
|
||||
|
||||
如果用户其实并不关心绘制部分，或者说想用自己的通用方案对自定义组件ImageKnifeComponent重构都是可以的。
|
||||
|
||||
下面我们会着重指导用户如何复用图片加载逻辑，重构自定义组件ImageKnifeComponent。
|
||||
|
||||
首先我们先看看RequestOption构建的内容,如下所示:
|
||||
|
||||
### 数据加载
|
||||
|
||||
#### RequestOption构建:
|
||||
|
||||
请查阅下文接口内容：[RequestOption接口方法](#requestoption用户配置参数)
|
||||
|
||||
了解了RequestOption的参数内容后，我们可以参考ImageKnifeComponent组件代码进行分析。
|
||||
|
||||
**从`imageKnifeExecute()`函数入口，首先我们需要构建一个RequestOption对象，`let request = new RequestOption()`,
|
||||
接下来就是按需配置request对象的内容，最后使用 `ImageKnifeGlobal.getInstance().getImageKnife()?.call(request)`发送request执行任务即可。**
|
||||
|
||||
是不是很简单，而其实最重要的内容是就是: **按需配置request对象的内容** 为了更好理解，我举例说明一下:
|
||||
|
||||
#### 场景一: 简单加载一张图片
|
||||
|
||||
```
|
||||
let request = new RequestOption();
|
||||
// (必传)
|
||||
request.load("图片url")
|
||||
// (可选 整个request监听回调)
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
// data 是ImageKnifeData对象
|
||||
if(data.isPixelMap()){
|
||||
// 这样就获取到了目标PixelMap
|
||||
let pixelmap = data.drawPixleMap.imagePixelMap;
|
||||
}
|
||||
return false;
|
||||
})
|
||||
|
||||
let compSize:Size = {
|
||||
width: this.currentWidth,
|
||||
height:this.currentHeight
|
||||
}
|
||||
// (必传)这里setImageViewSize函数必传组件大小，因为涉及到图片变换效果都需要适配图像源和组件大小
|
||||
request.setImageViewSize(compSize)
|
||||
// 最后使用ImageKnife的call函数调用request即可
|
||||
let imageKnife:ImageKnife|undefined = ImageKnifeGlobal.getInstance().getImageKnife();
|
||||
if(imageKnife != undefined){
|
||||
imageKnife.call(request)
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
**其他场景，可以按需加载**
|
||||
|
||||
比如我需要配置 **占位图** 只需要 在request对象创建好之后,调用 **placeholder** 函数即可
|
||||
|
||||
```
|
||||
request.placeholder(this.imageKnifeOption.placeholderSrc, (data) => {
|
||||
console.log('request.placeholder callback')
|
||||
this.displayPlaceholder(data)
|
||||
})
|
||||
```
|
||||
|
||||
再比如 我对缓存配置有要求，我要禁用内存缓存，调用 **skipMemoryCache** 函数即可
|
||||
|
||||
```
|
||||
request.skipMemoryCache(true)
|
||||
```
|
||||
|
||||
这里只是简单介绍部分使用，更多的内容请参考 **按需加载** 原则，并且可以参考ImageKnifeComponent源码或者根据文档自行探索实现。
|
||||
|
||||
## 接口说明
|
||||
|
||||
### RequestOption用户配置参数
|
||||
|
||||
| 方法名 | 入参 | 接口描述 |
|
||||
| ------------------------------------------------------------ | ------------------------------------------------------------ | -------------------------------------------------------- |
|
||||
| load(src: string \| PixelMap \|Resource) | src:string\|PixelMap\|Resource | 用户加载图片源 |
|
||||
| setImageViewSize(imageSize: { width: number, height: number }) | imageSize:{width: number, height: number } | 传入显示图片组件的大小，变换的时候需要作为参考 |
|
||||
| diskCacheStrategy(strategy: DiskStrategy) | strategy:DiskStrategy | 配置磁盘缓存策略 NONE SOURCE RESULT ALL AUTOMATIC |
|
||||
| placeholder(src: string \| PixelMap\|Resource, func?: AsyncSuccess<ImageKnifeData>) | src: string\|PixelMap\|Resource, func?: AsyncSuccess<ImageKnifeData> | 占位图，占位图回调数据ImageKnifeData |
|
||||
| errorholder(src: PixelMap\|Resource, func?: AsyncSuccess<ImageKnifeData>) | src: PixelMap\|Resource, func?: AsyncSuccess<ImageKnifeData> | 错误占位图，错误占位图回调数据ImageKnifeData |
|
||||
| retryholder(src: PixelMap\|Resource, func?: AsyncSuccess<ImageKnifeData>) | src: PixelMap\|Resource, func?: AsyncSuccess<ImageKnifeData> | 重试占位图，重试占位图回调数据ImageKnifeData |
|
||||
| fallback(src: PixelMap\|Resource, func?: AsyncSuccess<ImageKnifeData>) | src: PixelMap\|Resource, func?: AsyncSuccess<ImageKnifeData> | 重试占位图，重试占位图回调数据ImageKnifeData |
|
||||
| addListener(func: AsyncCallback<ImageKnifeData>) | func: AsyncCallback<ImageKnifeData> | 配置整个监听回调，数据正常加载返回，加载失败返回错误信息 |
|
||||
| thumbnail(sizeMultiplier:number, func?: AsyncSuccess<ImageKnifeData>) | sizeMultiplier:number, func?: AsyncSuccess<ImageKnifeData> | 设置缩略图比例，缩略图返回后，加载并展示缩略图 |
|
||||
| addProgressListener(func?: AsyncSuccess<number>) | func?: AsyncSuccess<number> | 设置网络下载百分比监听，返回数据加载百分比数值 |
|
||||
| addAllCacheInfoCallback(func: IAllCacheInfoCallback) | func: IAllCacheInfoCallback | 设置获取所有缓存信息监听 |
|
||||
| skipMemoryCache(skip: boolean) | skip: boolean | 配置是否跳过内存缓存 |
|
||||
| retrieveDataFromCache(flag: boolean) | flag: boolean | 配置仅从缓存中加载数据 |
|
||||
| signature | ObjectKey | 自定义key |
|
||||
|
||||
同时支持[图片变换相关](#图片变换相关)接口。
|
||||
|
||||
### ImageKnife 启动器/门面类
|
||||
|
||||
| 方法名 | 入参 | 接口描述 |
|
||||
|----------------------------------| ---------------------- | ------------------------------------------------------------ |
|
||||
| call(request: RequestOption) | request: RequestOption | 根据用户配置参数具体执行加载流程 |
|
||||
| preload(request: RequestOption) | request: RequestOption | 根据用户配置参数具体执行预加载流程 |
|
||||
| pauseRequests() | | 全局暂停请求 |
|
||||
| resumeRequests() | | 全局恢复暂停 |
|
||||
| isUrlExist(url, cacheType, size) | url, CacheType, Size | 判断图片是否在 缓存和磁盘中存在，如果入参是缓存，需要传入值图片大小,参数 CacheType, Size（可选） |
|
||||
| setMaxRequests(count: number) | count | 设置请求的最大并发数量 |
|
||||
| removeAllMemoryCache() | | 清除全部内存缓存 |
|
||||
| removeAllFileCache() | | 清除全部磁盘缓存 |
|
||||
| removeMemoryCache(url: string) | url: string | 清除指定内存缓存 |
|
||||
| removeFileCache(url: string) | url: string | 清除指定磁盘缓存 |
|
||||
| getMemoryCacheKey(url: string) | url: string | 获取指定图片内存缓存key |
|
||||
| getDiskCacheKey(url: string) | url: string | 获取指定图片磁盘缓存key |
|
||||
|
||||
### 缓存策略相关
|
||||
|
||||
| 使用方法 | 类型 | 策略描述 |
|
||||
|--------------------------------------------|-----------|----------------------|
|
||||
| request.diskCacheStrategy(new ALL()) | ALL | 表示既缓存原始图片，也缓存转换过后的图片 |
|
||||
| request.diskCacheStrategy(new AUTOMATIC()) | AUTOMATIC | 表示尝试对本地和远程图片使用适合的策略 |
|
||||
| request.diskCacheStrategy(new DATA()) | DATA | 表示只缓存原始图片 |
|
||||
| request.diskCacheStrategy(new NONE()) | NONE | 表示不缓存任何内容 |
|
||||
| request.diskCacheStrategy(new RESOURCE()) | RESOURCE | 表示只缓存转换过后的图片 |
|
||||
|
||||
### AntiAliasing类型展示效果
|
||||
|
||||
| 使用方法 | 类型 | 策略描述 |
|
||||
|-------------------------|--------|-------------|
|
||||
| AntiAliasing.FIT_HIGH | String | 图像抗锯齿设置为高画质 |
|
||||
| AntiAliasing.FIT_MEDIUM | String | 图像抗锯齿设置为中画质 |
|
||||
| AntiAliasing.FIT_LOW | String | 图像抗锯齿设置为低画质 |
|
||||
|
||||
### CacheType类型展示效果
|
||||
|
||||
| 使用方法 | 类型 | 策略描述 |
|
||||
|-------------------------|-----|-----------------------------------|
|
||||
| CacheType.Default| int | 默认值，先从内存获取，无值则从磁盘获取 |
|
||||
| CacheType.Cache| int | 缓存 |
|
||||
| CacheType.Disk | int | 磁盘 |
|
||||
|
||||
### ScaleType类型展示效果
|
||||
|
||||
| 使用方法 | 类型 | 策略描述 |
|
||||
|-------------------------|-----|-----------------------------------|
|
||||
| ScaleType.FIT_START | int | 图像位于用户设置组件左上角显示,图像会缩放至全部展示 |
|
||||
| ScaleType.FIT_END | int | 图像位于用户设置组件右下角显示,图像会缩放至全部展示 |
|
||||
| ScaleType.FIT_CENTER | int | 图像位于用户设置组件居中,图像会缩放至全部展示 |
|
||||
| ScaleType.CENTER | int | 图像居中展示,不缩放 |
|
||||
| ScaleType.CENTER_CROP | int | 图像的宽高长度,短的部分缩放至组件大小,超出的全部裁剪 |
|
||||
| ScaleType.FIT_XY | int | 图像拉伸至组件大小 |
|
||||
| ScaleType.CENTER_INSIDE | int | 如果图像大于组件则执行FIT_CENTER,小于组件则CENTER |
|
||||
| ScaleType.NONE | int | 如果不想适配，直接展示原图大小 |
|
||||
| ScaleType.AUTO_HEIGHT | int | 设置宽的时候，图片高度自适应 |
|
||||
| ScaleType.AUTO_WIDTH | int | 设置高的时候，图片宽度自适应 |
|
||||
| ScaleType.AUTO | int | 没有设置宽和高，图片按照自身宽高显示 |
|
||||
|
||||
### 图片变换相关
|
||||
|
||||
| 使用方法 | 类型 | 相关描述 |
|
||||
|--------------------------------|------------------------------------|--------------------------------|
|
||||
| request.centerCrop() | CenterCrop | 可以根据图片文件，目标显示大小，进行对应centerCrop |
|
||||
| request.centerInside() | CenterInside | 可以根据图片文件，目标显示大小，进行对应centerInside |
|
||||
| request.fitCenter() | FitCenter | 可以根据图片文件，目标显示大小，进行对应fitCenter |
|
||||
| request.blur() | BlurTransformation | 模糊处理(图片分辨率较大建议传递第二个参数将图片进行缩小) |
|
||||
| request.brightnessFilter() | BrightnessFilterTransformation | 亮度滤波器 |
|
||||
| request.contrastFilter() | ContrastFilterTransformation | 对比度滤波器 |
|
||||
| request.cropCircle() | CropCircleTransformation | 圆形剪裁显示 |
|
||||
| request.cropCircleWithBorder() | CropCircleWithBorderTransformation | 圆环展示 |
|
||||
| request.cropSquare() | CropSquareTransformation | 正方形剪裁 |
|
||||
| request.crop() | CropTransformation | 自定义矩形剪裁 |
|
||||
| request.grayscale() | GrayscaleTransformation | 灰度级转换 |
|
||||
| request.invertFilter() | InvertFilterTransformation | 反转滤波器 |
|
||||
| request.pixelationFilter() | PixelationFilterTransformation | 像素化滤波器 |
|
||||
| request.rotateImage() | RotateImageTransformation | 图片旋转 |
|
||||
| request.roundedCorners() | RoundedCornersTransformation | 圆角剪裁 |
|
||||
| request.sepiaFilter() | SepiaFilterTransformation | 乌墨色滤波器 |
|
||||
| request.sketchFilter() | SketchFilterTransformation | 素描滤波器 |
|
||||
| request.mask() | MaskTransformation | 遮罩 |
|
||||
| request.swirlFilter() | SwirlFilterTransformation | 扭曲滤波器 |
|
||||
| request.kuwaharaFilter() | KuwaharaFilterTransform | 桑原滤波器 |
|
||||
| request.toonFilter() | ToonFilterTransform | 动画滤波器 |
|
||||
| request.vignetteFilter() | VignetteFilterTransform | 装饰滤波器 |
|
||||
| request.downsampleOf() | BaseDownsampling | 下采样 |
|
||||
|
||||
<img src="screenshot/gif4.gif" width="50%"/>
|
||||
|
||||
### setLruCacheSize
|
||||
|
||||
setLruCacheSize(size: number,memory:number): void
|
||||
|
||||
设置图片文件缓存的大小上限，size单位为张数，memory单位为字节，提升再次加载同源图片的加载速度，特别是对网络图源会有较明显提升。
|
||||
如果不设置则默认为100张，100MB。缓存采用内置的LRU策略。
|
||||
size为0则代表不限制缓存张数，memory为0则代表不限制缓存大小。
|
||||
建议根据应用实际需求，设置合理缓存上限，数字过大可能导致内存占用过高，可能导致OOM异常。
|
||||
|
||||
**参数：**
|
||||
|
||||
| 参数名 | 类型 | 必填 | 说明 |
|
||||
| -------- | -------- | -------- |-------------------------|
|
||||
| size | number | 是 | 图片文件的缓存张数，单位为张。只支持正整数，0 |
|
||||
| memory | number | 是 | 图片文件的缓存大小，单位为字节。只支持正数，0 |
|
||||
|
||||
**示例：**
|
||||
```ts
|
||||
//EntryAbility.ets
|
||||
import { InitImageKnife } from '...imageknife'
|
||||
export default class EntryAbility extends UIAbility {
|
||||
onWindowStageCreate(windowStage: window.WindowStage) {
|
||||
InitImageKnife.init(this.context);
|
||||
let imageKnife: ImageKnife | undefined = ImageKnifeGlobal.getInstance().getImageKnife()
|
||||
if (imageKnife != undefined) {
|
||||
//设置全局内存缓存大小张数
|
||||
imageKnife.setLruCacheSize(100, 100 * 1204 * 1024)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Queue
|
||||
|
||||
| 方法名 | 入参 | 接口描述 |
|
||||
| ----------------------------------- | ----------------------- | ------------------------------ |
|
||||
| getQueueLength(): number | | 获取队列总长度 |
|
||||
| add(request: RequestOption) | request:RequestOption | 在队列尾部插入元素 |
|
||||
| pop(): RequestOption | undefined | | 删除队列头元素并返回该删除元素 |
|
||||
|
||||
## 约束与限制
|
||||
|
||||
在下述版本验证通过：
|
||||
DevEco Studio 4.1（4.1.3.520）--SDK:API11（ 4.1.0.63）
|
||||
DevEco Studio 4.1（4.1.3.418）--SDK:API11（ 4.1.0.56）
|
||||
DevEco Studio 4.1（4.1.3.322）--SDK:API11（ 4.1.0.36）
|
||||
DevEco Studio 4.0（4.0.3.700）--SDK:API10（ 4.0.10.15）
|
||||
|
||||
HSP场景适配:
|
||||
|
||||
在使用ImageKnifeComponent进行加载图片时, 提供的ImageKnifeOption配置类新增了可选参数context, 在HSP场景下需要传入正确的context, 才能保证三方库后续正确获取Resource资源。
|
||||
|
||||
在使用RquestOption进行加载图片时, 提供的RquestOption配置类新增了接口`setModuleContext(moduleCtx:common.UIAbilityContext)`, 在HSP场景下需要传入正确的context, 才能保证三方库后续正确获取Resource资源。
|
||||
|
||||
非HSP场景不影响原功能, ImageKnifeOption配置类新增的可选参数context可以不传, RquestOption配置类新增的接口可以不调用。
|
||||
|
||||
注意：
|
||||
|
||||
基于性能优化的原因，2.1.2-rc.13及以后版本引用了API12 Sendable接口，至此以后的版本只支持API12。
|
||||
|
||||
## 目录结构
|
||||
|
||||
```
|
||||
/library/src/
|
||||
- main/ets/components
|
||||
- cache # 缓存相关内容
|
||||
- diskstrategy # 缓存策略
|
||||
- key # 缓存key生成策略
|
||||
- Base64.ets # Base64算法
|
||||
- CustomMap.ets # 自定义Map封装
|
||||
- DiskCacheEntry.ets # 磁盘缓存entry
|
||||
- DiskLruCache.ets # 磁盘LRU缓存策略
|
||||
- FileReader.ets # 文件读取相关
|
||||
- FileUtils.ets # 文件工具类
|
||||
- LruCache.ets # 内存LRU缓存策略
|
||||
- Md5.ets # MD5算法
|
||||
|
||||
- imageknife # imageknife主要内容
|
||||
- compress # 压缩相关
|
||||
- constants # 常量相关
|
||||
- Downsampling # 下采样相关
|
||||
- entry # 部分数据结构
|
||||
- holder # 占位图相关解析
|
||||
- interface # 接口相关
|
||||
- networkmanage # 网络相关
|
||||
- pngj # pngj相关
|
||||
- requestmanage # imageknife请求相关
|
||||
- resourcemanage # 本地资源解析相关
|
||||
- transform # 图片变换相关
|
||||
- utils # 工具类相关
|
||||
- ImageKnife.ets # imageknife门面，app持久化类
|
||||
- ImageKnifeData.ets # 数据封装
|
||||
- ImageKnifeComponent.ets # 自定义控件封装
|
||||
- ImageKnifeDrawFactory.ets # IDrawLifeCycle用户自定义实现
|
||||
- ImageKnifeOption.ets # 用户传参数封装
|
||||
- RequestOption.ets # 用户设置参数封装
|
||||
|
||||
/entry/src/
|
||||
- main/ets
|
||||
- entryability
|
||||
- CustomEngineKeyImpl.ets
|
||||
- EntryAbility.ts
|
||||
- pages # 测试page页面列表
|
||||
- basicTestFeatureAbilityPage.ets # 测试列表加载
|
||||
- basicTestFileIOPage.ets # 测试fileio
|
||||
- basicTestMediaImage.ets # 测试媒体image
|
||||
- basicTestResourceManagerPage.ets # 测试本地资源解析
|
||||
- compressPage.ets # 压缩页面
|
||||
- cropImagePage2.ets # 手势裁剪页面
|
||||
- DownsamplingPage.ets # 图片下采样测试
|
||||
- frescoImageTestCasePage.ets # 测试属性动画组件切换
|
||||
- frescoRetryTestCasePage.ets # 测试ImageKnifeComponent加载失败重试
|
||||
- svgTestCasePage.ets # 测试svg解析页面
|
||||
- imageknifeTestCaseIndex.ets # 测试用例页面入口
|
||||
- index.ets # 程序入口页面
|
||||
- loadNetworkTestCasePage.ets # 网络加载测试
|
||||
- loadResourceTestCasePage.ets # 本地加载测试
|
||||
- showErrorholderTestCasePage.ets # 加载失败占位图测试
|
||||
- SignatureTestPage.ets # 自定义key测试
|
||||
- storageTestDiskLruCache.ets # 磁盘缓存测试
|
||||
- storageTestLruCache.ets # 内存缓存测试
|
||||
- testAllCacheInfoPage.ets # 所有缓存信息获取测试
|
||||
- testCustomDataFetchClientWithPage # 测试图片下载使用自定义的网络栈
|
||||
- testImageKnifeAutoHeightPage.ets # 图片高度自适应测试
|
||||
- testImageKnifeAutoWidthPage.ets # 图片宽度自适应测试
|
||||
- testImageKnifeAutoPage.ets # 图片宽高自适应测试
|
||||
- testImageKnifeOptionChangedPage.ets # 数据切换测试
|
||||
- testImageKnifeOptionChangedPage2.ets # 数据切换测试,部分变换
|
||||
- testImageKnifeOptionChangedPage3.ets # 数据切换测试,组件动画
|
||||
- testImageKnifeOptionChangedPage4.ets # 数据切换测试,内容动画
|
||||
- testImageKnifeOptionChangedPage5.ets # 数据切换测试,ImageKnifeDrawFactory封装圆角圆环边框等
|
||||
- testPreloadPage.ets # 预加载测试
|
||||
- transformPixelMapPage.ets # 所有类型变换测试
|
||||
- testSingleFrameGifPage.ets # 单帧gif加载测试
|
||||
- TestStopPlayingGifPage # gif播放暂停测试
|
||||
- TestImageKnifeNetPlaceholder # 缓存获取string类型占位图以及后备回调符测试
|
||||
|
||||
- OptionTestPage.ets # 图片缓存测试
|
||||
- testManyGifLoadWithPage # 测试gif加载页面
|
||||
- testImageKnifeCache # 测试图片是否在缓存或者磁盘中
|
||||
-workers
|
||||
- upngWorkerTestCase.ets # png子线程解析
|
||||
- upngWorkerDepend.ts # png子线程解析具体执行
|
||||
```
|
||||
在下述版本验证通过：
|
||||
DevEco Studio 5.0 Canary3（5.0.3.221）--SDK:API12
|
||||
|
||||
## 贡献代码
|
||||
|
||||
|
|
@ -640,47 +342,4 @@ HSP场景适配:
|
|||
|
||||
## 遗留问题
|
||||
|
||||
1.目前svg和gif动图不支持变换效果。
|
||||
|
||||
## 补充说明
|
||||
### SVG标签说明
|
||||
从API version 10开始支持SVG标签, 使用版本为(SVG)1.1,SVG文件需添加xml声明,应以"<?xml"开头,并且SVG标签需设置width, height。
|
||||
当前支持的标签列表有：
|
||||
- a
|
||||
- circla
|
||||
- clipPath
|
||||
- defs
|
||||
- ellipse
|
||||
- feBlend
|
||||
- feColorMatrix
|
||||
- feComposite
|
||||
- feDiffuseLighting
|
||||
- feDisplacementMap
|
||||
- feDistantLight
|
||||
- feFlood
|
||||
- feGaussianBlur
|
||||
- feImage
|
||||
- feMorphology
|
||||
- feOffset
|
||||
- fePointLight
|
||||
- feSpecularLighting
|
||||
- feSpotLight
|
||||
- feTurbulence
|
||||
- filter
|
||||
- g
|
||||
- image
|
||||
- line
|
||||
- linearGradient
|
||||
- mask
|
||||
- path
|
||||
- pattern
|
||||
- polygon
|
||||
- polyline
|
||||
- radialGradient
|
||||
- rect
|
||||
- stop
|
||||
- svg
|
||||
- text
|
||||
- textPath
|
||||
- tspan
|
||||
- use
|
||||
- 添加组件闪动问题
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
],
|
||||
"buildModeSet": [
|
||||
{
|
||||
"name": "debug"
|
||||
"name": "debug",
|
||||
},
|
||||
{
|
||||
"name": "release"
|
||||
|
|
@ -34,10 +34,6 @@
|
|||
"name": "library",
|
||||
"srcPath": "./library"
|
||||
},
|
||||
{
|
||||
"name": "gpu_transform",
|
||||
"srcPath": "./gpu_transform"
|
||||
},
|
||||
{
|
||||
"name": "sharedlibrary",
|
||||
"srcPath": "./sharedlibrary",
|
||||
|
|
@ -49,18 +45,6 @@
|
|||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "sharedlibrary2",
|
||||
"srcPath": "./sharedlibrary2",
|
||||
"targets": [
|
||||
{
|
||||
"name": "default",
|
||||
"applyToProducts": [
|
||||
"default"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
/node_modules
|
||||
/oh_modules
|
||||
/.preview
|
||||
/build
|
||||
/oh_modules/
|
||||
/oh-package-lock.json5
|
||||
/.cxx
|
||||
/.test
|
||||
|
|
@ -1,15 +1,28 @@
|
|||
{
|
||||
"apiType": 'stageMode',
|
||||
"apiType": "stageMode",
|
||||
"buildOption": {
|
||||
"sourceOption": {
|
||||
"workers": [
|
||||
"./src/main/ets/workers/upngWorkerTestCase.ets"
|
||||
]
|
||||
"arkOptions": {
|
||||
// "apPath": "./modules.ap" /* Profile used for profile-guided optimization (PGO), a compiler optimization technique to improve app runtime performance. */
|
||||
}
|
||||
},
|
||||
"buildOptionSet": [
|
||||
{
|
||||
"name": "release",
|
||||
"arkOptions": {
|
||||
"obfuscation": {
|
||||
"ruleOptions": {
|
||||
"enable": true,
|
||||
"files": [
|
||||
"./obfuscation-rules.txt"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
],
|
||||
"targets": [
|
||||
{
|
||||
"name": "default",
|
||||
"name": "default"
|
||||
},
|
||||
{
|
||||
"name": "ohosTest",
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
// Script for compiling build behavior. It is built in the build plug-in and cannot be modified currently.
|
||||
module.exports = require('@ohos/hvigor-ohos-plugin').hapTasks
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { hapTasks } from '@ohos/hvigor-ohos-plugin';
|
||||
|
||||
export default {
|
||||
system: hapTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
|
||||
plugins:[] /* Custom plugin to extend the functionality of Hvigor. */
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
# Define project specific obfuscation rules here.
|
||||
# You can include the obfuscation configuration files in the current module's build-profile.json5.
|
||||
#
|
||||
# For more details, see
|
||||
# https://gitee.com/openharmony/arkcompiler_ets_frontend/blob/master/arkguard/README.md
|
||||
|
||||
# Obfuscation options:
|
||||
# -disable-obfuscation: disable all obfuscations
|
||||
# -enable-property-obfuscation: obfuscate the property names
|
||||
# -enable-toplevel-obfuscation: obfuscate the names in the global scope
|
||||
# -compact: remove unnecessary blank spaces and all line feeds
|
||||
# -remove-log: remove all console.* statements
|
||||
# -print-namecache: print the name cache that contains the mapping from the old names to new names
|
||||
# -apply-namecache: reuse the given cache file
|
||||
|
||||
# Keep options:
|
||||
# -keep-property-name: specifies property names that you want to keep
|
||||
# -keep-global-name: specifies names that you want to keep in the global scope
|
||||
|
|
@ -1,14 +1,13 @@
|
|||
{
|
||||
"license": "Apache License 2.0",
|
||||
"devDependencies": {},
|
||||
"name": "entry",
|
||||
"description": "example description",
|
||||
"repository": {},
|
||||
"version": "2.2.0-rc.3",
|
||||
"version": "1.0.0",
|
||||
"description": "Please describe the basic information.",
|
||||
"main": "",
|
||||
"author": "",
|
||||
"license": "",
|
||||
"dependencies": {
|
||||
"@ohos/libraryimageknife": "file:../sharedlibrary",
|
||||
"@ohos/sharedlibrary2": "file:../sharedlibrary2",
|
||||
"@ohos/disklrucache": "^2.0.2-rc.0",
|
||||
"@ohos/imageknife": "file:../library"
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
* Copyright (C) 2023 Huawei Device Co., Ltd.
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
|
|
@ -7,13 +7,11 @@
|
|||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
export class Material{
|
||||
material_id: string ='';
|
||||
thumbnail: string = '';
|
||||
name: string ='';
|
||||
export default class Constants {
|
||||
static readonly TAG: string = "MyImageKnifeTest: "
|
||||
}
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
/*
|
||||
* 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 { 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, 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 = "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) + ";"
|
||||
}
|
||||
}
|
||||
return key
|
||||
}
|
||||
|
||||
// 生成文件缓存key
|
||||
generateFileKey(loadSrc: string | PixelMap | Resource, signature?: string): string {
|
||||
let src = ""
|
||||
if(signature == "aaa" && typeof loadSrc == "string") {
|
||||
let num = loadSrc.indexOf("?")
|
||||
let key = loadSrc.substring(0,num)
|
||||
src = "loadSrc=" + key
|
||||
} else {
|
||||
src = "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()
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may 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.
|
||||
|
|
@ -20,7 +20,7 @@ export class GlobalContext {
|
|||
private static instance: GlobalContext;
|
||||
private _objects = new Map<string, Object>();
|
||||
|
||||
public static getInstance(): GlobalContext {
|
||||
public static getContext(): GlobalContext {
|
||||
if (!GlobalContext.instance) {
|
||||
GlobalContext.instance = new GlobalContext();
|
||||
}
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2023 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { EngineKeyFactories, EngineKeyInterface, RequestOption } from '@ohos/libraryimageknife'
|
||||
import { ObjectKey } from '@ohos/libraryimageknife';
|
||||
|
||||
export class CustomEngineKeyImpl implements EngineKeyInterface {
|
||||
redefineUrl: (loadSrc: string) => string;
|
||||
addOtherInfo: string = "Version=1.0.0;"
|
||||
|
||||
constructor() {
|
||||
this.redefineUrl = this.urlNeedClearToken;
|
||||
}
|
||||
|
||||
// request只读
|
||||
generateMemoryCacheKey(loadSrc: string, size: string, transformed: string, dontAnimate: boolean, signature: ObjectKey): string {
|
||||
return EngineKeyFactories.createMemoryCacheKey(loadSrc, size, transformed, dontAnimate, signature, this.redefineUrl, this.addOtherInfo);
|
||||
}
|
||||
|
||||
generateTransformedDiskCacheKey(loadSrc: string, size: string, transformed: string, dontAnimate: boolean, signature: ObjectKey): string {
|
||||
return EngineKeyFactories.createTransformedDiskCacheKey(loadSrc, size, transformed, dontAnimate, signature, this.redefineUrl, this.addOtherInfo);
|
||||
}
|
||||
|
||||
generateOriginalDiskCacheKey(loadSrc: string, signature: ObjectKey): string {
|
||||
return EngineKeyFactories.createOriginalDiskCacheKey(loadSrc, signature, this.redefineUrl, this.addOtherInfo);
|
||||
}
|
||||
|
||||
|
||||
// 需求场景: 请求图片可能 请求中存在token需要清除， 可以把输入的url清除token后作为key的一部分，这样token发生变化也能命中缓存。
|
||||
urlNeedClearToken = (url: string) => {
|
||||
if (this.isHttpRequest(url)) {
|
||||
return this.clearToken(url)
|
||||
} else {
|
||||
return url;
|
||||
}
|
||||
}
|
||||
|
||||
isHttpRequest(loadSrc: string) {
|
||||
if (typeof loadSrc == "string" && loadSrc.toLowerCase().startsWith("http")) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// 清除url里面中携带的token
|
||||
clearToken(url: string): string {
|
||||
let retUrl = url.replace(this.findTokenParam(url), "")
|
||||
return retUrl;
|
||||
}
|
||||
|
||||
// 网络图片加载 可能因为Token问题导致缓存失效
|
||||
findTokenParam(url: string): string {
|
||||
let tokenParam = "";
|
||||
let tokenKeyIndex = url.indexOf("?token=") >= 0 ? url.indexOf("?token=") : url.indexOf("&token=");
|
||||
if (tokenKeyIndex != -1) {
|
||||
let nextAndIndex = url.indexOf("&", tokenKeyIndex + 1);
|
||||
if (nextAndIndex != -1) {
|
||||
tokenParam = url.substring(tokenKeyIndex + 1, nextAndIndex + 1);
|
||||
} else {
|
||||
tokenParam = url.substring(tokenKeyIndex);
|
||||
}
|
||||
}
|
||||
return tokenParam;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,27 +1,37 @@
|
|||
/*
|
||||
* Copyright (C) 2023 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* 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,
|
||||
* 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 UIAbility from '@ohos.app.ability.UIAbility';
|
||||
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 window from '@ohos.window';
|
||||
import { InitImageKnife, ImageKnifeGlobal, ImageKnife, ImageKnifeDrawFactory, LogUtil } from '@ohos/libraryimageknife'
|
||||
import { CustomEngineKeyImpl } from './CustomEngineKeyImpl'
|
||||
import { ImageKnife, InitImageKnife, LogUtil } from '@ohos/libraryimageknife';
|
||||
import { CustomEngineKeyImpl } from '../common/CustomEngineKeyImpl';
|
||||
import abilityAccessCtrl, { Permissions } from '@ohos.abilityAccessCtrl';
|
||||
import { BusinessError } from '@ohos.base'
|
||||
|
||||
export default class EntryAbility extends UIAbility {
|
||||
onWindowStageCreate(windowStage: window.WindowStage) {
|
||||
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
|
||||
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
|
||||
}
|
||||
|
||||
onDestroy(): void {
|
||||
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
|
||||
}
|
||||
|
||||
async onWindowStageCreate(windowStage: window.WindowStage): Promise<void> {
|
||||
// Main window is created, set main page for this ability
|
||||
let list: Array<Permissions> = ['ohos.permission.READ_IMAGEVIDEO', 'ohos.permission.WRITE_IMAGEVIDEO'];
|
||||
let permissionRequestResult: Object;
|
||||
|
|
@ -35,25 +45,37 @@ export default class EntryAbility extends UIAbility {
|
|||
}
|
||||
})
|
||||
|
||||
windowStage.loadContent('pages/index', (err: BusinessError, data: void) => {
|
||||
});
|
||||
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
|
||||
|
||||
InitImageKnife.init(this.context);
|
||||
|
||||
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
|
||||
// 初始化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) ?? '');
|
||||
});
|
||||
}
|
||||
|
||||
onWindowStageDestroy(): void {
|
||||
// Main window is destroyed, release UI related resources
|
||||
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,104 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {
|
||||
ImageKnifeComponent,
|
||||
ImageKnifeOption,
|
||||
RotateImageTransformation,
|
||||
RoundedCornersTransformation
|
||||
} from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct CacheRuleChangedPage {
|
||||
@State progresshint: string = "输出加载百分比回调信息"
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress: true
|
||||
};
|
||||
@State ImageKnifeOption: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/0ef60041445edcfd6b38d20e19024b2cd9281dcc3525a4-Vy8fYO_fw658/format/webp",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress: true
|
||||
};
|
||||
@State imageKnifeOption3: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress: true
|
||||
};
|
||||
@State imageKnifeOption4: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress: true,
|
||||
};
|
||||
@State imageKnifeOption5: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp?mama=sdafsfasdfsdfsdaf&baba=sdfsafsafsd",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress: true,
|
||||
};
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
|
||||
Text('下图默认加载网络图片不带?token=').margin({ top: 20 })
|
||||
Button('点击加载网络图片?token=').margin({ top: 5 }).onClick(() => {
|
||||
|
||||
this.imageKnifeOption4 = {
|
||||
loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB?token=fsdafsfsafsafsdaf111111",
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress: true,
|
||||
}
|
||||
})
|
||||
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 })
|
||||
.width(300)
|
||||
.height(300)
|
||||
|
||||
Text('下图默认加载网络图片不带&token=').margin({ top: 20 })
|
||||
|
||||
Button('点击加载网络图片&token=').margin({ top: 5 }).onClick(() => {
|
||||
this.imageKnifeOption5 = {
|
||||
loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp?mama=sdafsfasdfsdfsdaf&token=fsdafsfsafsafsdaf111111&baba=sdfsafsafsd",
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress: true,
|
||||
}
|
||||
})
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption5 })
|
||||
.width(300)
|
||||
.height(300)
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,432 @@
|
|||
/*
|
||||
* 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
|
||||
@Component
|
||||
struct ImageTransformation {
|
||||
@State imageKnifeOption: ImageKnifeOption = {
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Contain
|
||||
}
|
||||
@State isRound: boolean = false;
|
||||
@State isContrast: boolean = false;
|
||||
@State 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('模糊效果').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('高亮效果').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('灰化效果').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('反转效果').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('动画滤镜效果').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('裁剪圆形效果').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('裁剪圆形带边框效果').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('对比度效果').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('乌墨色滤波效果').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('旋转效果').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('圆角效果').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('桑原滤波效果').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('像素化滤波效果').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('素描滤波效果').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('扭曲滤波效果').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('装饰滤波效果').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('正方形裁剪效果').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('上方裁剪效果').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('中间裁剪效果').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('底下裁剪效果').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('遮罩效果').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 = {
|
||||
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 };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
/*
|
||||
* 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
|
||||
@Component
|
||||
struct Index {
|
||||
|
||||
|
||||
aboutToAppear(): void {
|
||||
|
||||
}
|
||||
|
||||
build() {
|
||||
Scroll(){
|
||||
Column() {
|
||||
Button("测试加载多张相同图片").onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/TestCommonImage',
|
||||
|
||||
});
|
||||
})
|
||||
Button("测试HSP场景预加载").margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/TestHspPreLoadImage',
|
||||
|
||||
});
|
||||
})
|
||||
Button("单个图片使用").margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/SingleImage',
|
||||
|
||||
});
|
||||
})
|
||||
Button("多图 + LazyForEach").margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/ManyPhotoShowPage',
|
||||
|
||||
});
|
||||
})
|
||||
Button("多图 + reuse + LazyForeach").margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/UserPage',
|
||||
|
||||
});
|
||||
})
|
||||
Button("长图显示").margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/LongImagePage',
|
||||
|
||||
});
|
||||
})
|
||||
Button("缩放图片").margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/TransformPage',
|
||||
|
||||
});
|
||||
})
|
||||
Button("消息+List").margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/TestImageFlash',
|
||||
|
||||
});
|
||||
})
|
||||
Button("自定义缓存key").margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/SignatureTestPage',
|
||||
|
||||
});
|
||||
})
|
||||
Button("预加载图片到文件缓存").margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/TestPrefetchToFileCache',
|
||||
|
||||
});
|
||||
})
|
||||
Button("从缓存获取图片显示").margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/TestIsUrlExist',
|
||||
|
||||
});
|
||||
})
|
||||
Button("测试单个请求头").margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/TestHeader',
|
||||
|
||||
});
|
||||
})
|
||||
Button("测试写入缓存策略").margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/TestWriteCacheStage',
|
||||
|
||||
});
|
||||
})
|
||||
Button("图片变换").margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/ImageTransformation',
|
||||
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
Button("不同的ObjectFit").margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/ObjectFitPage',
|
||||
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
Button('测试图片加载成功/失败事件').margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/LoadStatePage',
|
||||
})
|
||||
})
|
||||
|
||||
Button('测试移除图片缓存接口').margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/TestRemoveCache',
|
||||
});
|
||||
})
|
||||
|
||||
Button("测试媒体url").margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/dataShareUriLoadPage',
|
||||
|
||||
});
|
||||
})
|
||||
|
||||
}
|
||||
} .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, ImageKnifeOption } from '@ohos/libraryimageknife';
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct ListPage {
|
||||
|
||||
private data: string[] = []
|
||||
@State ImageKnifeOption: 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%')
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
/*
|
||||
* 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
|
||||
@Component
|
||||
struct LoadStatePage {
|
||||
|
||||
starTime:number = new Date().getTime()
|
||||
|
||||
@State ImageKnifeOption: 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 }
|
||||
}
|
||||
@State currentWidth: number = 200
|
||||
@State currentHeight: number = 200
|
||||
@State typeValue: string = ""
|
||||
build() {
|
||||
Column() {
|
||||
Text('测试失败场景请先关闭网络，并保证本地没有此网络图片的缓存')
|
||||
.margin({ top: 20 })
|
||||
Row() {
|
||||
Button('测试失败/成功场景')
|
||||
.onClick(() => {
|
||||
this.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(this.typeValue)
|
||||
ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption }).height(this.currentHeight).width(this.currentWidth)
|
||||
.margin({ top: 20 })
|
||||
|
||||
}
|
||||
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnifeComponent } from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct LongImagePage {
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
|
||||
// Image("https://wx2.sinaimg.cn/mw690/006HyQKGgy1hnqp08dw09j30u04twu0x.jpg").objectFit(ImageFit.Auto).height(300)
|
||||
|
||||
// Image($r("app.media.aaa")).objectFit(ImageFit.Auto).width(200)
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: {
|
||||
loadSrc:"https://wx2.sinaimg.cn/mw690/006HyQKGgy1hnqp08dw09j30u04twu0x.jpg",
|
||||
//src:$r("app.media.aaa"),
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.failed"),
|
||||
objectFit: ImageFit.Auto
|
||||
}
|
||||
})
|
||||
}
|
||||
.height('100%') .width('100%')
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,71 @@
|
|||
/*
|
||||
* 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
|
||||
@Component
|
||||
struct ObjectFitPage {
|
||||
@State imageKnifeOption: ImageKnifeOption = {
|
||||
loadSrc: $r("app.media.app_icon"),
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Fill
|
||||
}
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
|
||||
Button("主图Fill拉伸填充").onClick(()=>{
|
||||
this.imageKnifeOption = {
|
||||
loadSrc: $r("app.media.app_icon"),
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Fill
|
||||
}
|
||||
})
|
||||
|
||||
Button("占位图Contain保持比例填充").margin({top:10}).onClick(async () => {
|
||||
ImageKnife.getInstance().removeAllMemoryCache()
|
||||
await ImageKnife.getInstance().removeAllFileCache()
|
||||
|
||||
this.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("错误图None不变化").margin({top:10}).onClick(() => {
|
||||
this.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%')
|
||||
}
|
||||
}
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2022 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { ImageKnifeComponent, ImageKnifeOption,NONE,DiskStrategy } from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct OptionTestPage {
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.icon'),
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
@State imageKnifeOption2: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.icon'),
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
|
||||
Text("示例加载图片不进行缓存").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("加载")
|
||||
.onClick(() => {
|
||||
let setting:DiskStrategy = new NONE();
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://img-blog.csdn.net/20140514114029140',
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
onlyRetrieveFromCache: false,
|
||||
isCacheable: false,
|
||||
strategy: setting
|
||||
}
|
||||
}).margin({ top: 5, left: 3 })
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
|
||||
}.width('100%').backgroundColor(Color.Pink)
|
||||
|
||||
Text("示例：加载图片进行缓存").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("加载")
|
||||
.onClick(() => {
|
||||
let setting2:DiskStrategy = new NONE();
|
||||
this.imageKnifeOption2 = {
|
||||
loadSrc: 'https://img-blog.csdn.net/20140514114029140',
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
onlyRetrieveFromCache: true,
|
||||
isCacheable: true,
|
||||
strategy: setting2
|
||||
}
|
||||
}).margin({ top: 5, left: 3 })
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }).width(300).height(300)
|
||||
}.width('100%').backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
}
|
||||
|
||||
}.width('100%')
|
||||
.height('100%')
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,109 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import image from '@ohos.multimedia.image'
|
||||
import {
|
||||
ImageKnifeData,
|
||||
RequestOption,
|
||||
Size,
|
||||
ImageKnife,
|
||||
ImageKnifeGlobal,
|
||||
ImageKnifeComponent,
|
||||
ObjectKey
|
||||
} from '@ohos/libraryimageknife'
|
||||
import { BusinessError } from '@ohos.base'
|
||||
|
||||
const TAG = "TEST-"
|
||||
let timeId = -1
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct RequestOptionLoadImage {
|
||||
@State pixelMap: PixelMap | undefined = undefined
|
||||
|
||||
load(src: string | image.PixelMap | Resource) {
|
||||
clearTimeout(timeId)
|
||||
let request = new RequestOption()
|
||||
//*requestOption调用*
|
||||
request.addHeader('refer', 'http://1.94.37.200:7070/AntiTheftChain/downloadImage');
|
||||
//通过时间戳去清除缓存
|
||||
request.signature = new ObjectKey(new Date().getTime().toString())
|
||||
request.load(src)
|
||||
.addListener({ callback: (err: BusinessError | string, data: ImageKnifeData) => {
|
||||
if (data.isPixelMap()) {
|
||||
if (data.drawPixelMap) {
|
||||
let pixelmap = data.drawPixelMap.imagePixelMap
|
||||
if (pixelmap) {
|
||||
this.pixelMap = pixelmap
|
||||
}
|
||||
}
|
||||
}
|
||||
if (data.isGIFFrame()) {
|
||||
let index: number = 0
|
||||
if (data.drawGIFFrame) {
|
||||
if (data.drawGIFFrame.imageGIFFrames) {
|
||||
let renderGif = () => {
|
||||
if (data.drawGIFFrame) {
|
||||
if (data.drawGIFFrame.imageGIFFrames) {
|
||||
let pixelmap = data.drawGIFFrame.imageGIFFrames[index].drawPixelMap
|
||||
let delay = data.drawGIFFrame.imageGIFFrames[index].delay
|
||||
if (pixelmap) {
|
||||
this.pixelMap = pixelmap
|
||||
}
|
||||
index++;
|
||||
if (index == data.drawGIFFrame.imageGIFFrames.length - 1) {
|
||||
index = 0
|
||||
}
|
||||
timeId = setTimeout(renderGif, data!.drawGIFFrame!.imageGIFFrames![index].delay)
|
||||
}
|
||||
}
|
||||
}
|
||||
renderGif()
|
||||
}
|
||||
}
|
||||
}
|
||||
if (err) {
|
||||
console.log(TAG + "error:" + JSON.stringify(err));
|
||||
}
|
||||
return false
|
||||
}
|
||||
})
|
||||
let compSize: Size = {
|
||||
width: 300,
|
||||
height: 300
|
||||
}
|
||||
request.setImageViewSize(compSize)
|
||||
let imageknife: ImageKnife | undefined = ImageKnifeGlobal.getInstance().getImageKnife()
|
||||
if (imageknife != undefined) {
|
||||
imageknife.call(request)
|
||||
}
|
||||
}
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Column() {
|
||||
Text("RequestOption加载图片").fontSize(25)
|
||||
Button("加载网络gif").onClick(() => {
|
||||
this.load("https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658")
|
||||
})
|
||||
Button("加载静态图").onClick(() => {
|
||||
this.load($r('app.media.pngSample'))
|
||||
})
|
||||
ImageKnifeComponent({ imageKnifeOption: {
|
||||
loadSrc: this.pixelMap as image.PixelMap
|
||||
} }).width(300).height(300).borderWidth(3)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* 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
|
||||
|
|
@ -12,9 +12,8 @@
|
|||
* 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
|
||||
@Component
|
||||
|
|
@ -22,43 +21,39 @@ struct SignatureTestPage {
|
|||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.icon'),
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
placeholderSrc:$r("app.media.loading"),
|
||||
};
|
||||
@State imageKnifeOption2: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.icon'),
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
placeholderSrc:$r("app.media.loading"),
|
||||
};
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
|
||||
Text("Signature固定为 1").fontSize(15)
|
||||
Text("key固定为 1").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("加载")
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://img-blog.csdn.net/20140514114029140',
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
signature: new ObjectKey("1")
|
||||
placeholderSrc:$r("app.media.loading"),
|
||||
signature: "1"
|
||||
}
|
||||
}).margin({ top: 5, left: 3 })
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
|
||||
}.width('100%').backgroundColor(Color.Pink)
|
||||
|
||||
Text("设置Signature，每次为时间戳").fontSize(15)
|
||||
Text("key每次变化：时间戳").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("加载")
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption2 = {
|
||||
loadSrc: 'https://img-blog.csdn.net/20140514114029140',
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
signature: new ObjectKey(new Date().getTime().toString())
|
||||
placeholderSrc:$r("app.media.loading"),
|
||||
signature: new Date().getTime().toString()
|
||||
}
|
||||
}).margin({ top: 5, left: 3 })
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }).width(300).height(300)
|
||||
|
|
@ -71,7 +66,7 @@ struct SignatureTestPage {
|
|||
}
|
||||
|
||||
aboutToAppear() {
|
||||
console.log("唯一标识页面：" + new ObjectKey(new Date().getTime().toString()).getKey())
|
||||
console.log("唯一标识页面：" + new Date().getTime().toString())
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
/*
|
||||
* 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 } from '@ohos/libraryimageknife';
|
||||
import fs from '@ohos.file.fs';
|
||||
import image from '@ohos.multimedia.image';
|
||||
import { common2D, drawing } from '@kit.ArkGraphics2D';
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct SingleImage {
|
||||
resource: string = "app.media.svgSample"
|
||||
scroller: Scroller = new Scroller;
|
||||
localFile: string = getContext(this).filesDir + "/icon.png"
|
||||
@State pixelMap:PixelMap | undefined = undefined;
|
||||
@State 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("本地资源svg图片")
|
||||
.fontSize(30)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
ImageKnifeComponent({
|
||||
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("本地context files下文件")
|
||||
.fontSize(30)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: {
|
||||
loadSrc: this.localFile,
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.failed"),
|
||||
objectFit: ImageFit.Contain
|
||||
}
|
||||
}).width(100).height(100)
|
||||
Text("网络图片")
|
||||
.fontSize(30)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: {
|
||||
loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.failed"),
|
||||
objectFit: ImageFit.Contain,
|
||||
progressListener:(progress:number)=>{console.info("ImageKnife:: call back progress = " + progress)}
|
||||
}
|
||||
}).width(100).height(100)
|
||||
Text("自定义下载")
|
||||
.fontSize(30)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: {
|
||||
loadSrc: "https://file.atomgit.com/uploads/user/1704857786989_8994.jpeg",
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.failed"),
|
||||
objectFit: ImageFit.Contain,
|
||||
customGetImage: custom,
|
||||
transformation: new BlurTransformation(10)
|
||||
}
|
||||
}).width(100).height(100)
|
||||
Text("pixelMap加载图片")
|
||||
.fontSize(30)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
ImageKnifeComponent({
|
||||
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
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
/*
|
||||
* 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 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: {
|
||||
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%")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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, } 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%')
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnifeComponent,ImageKnifeOption } from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestPrefetchToFileCachePage {
|
||||
@State imageKnifeOption: 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,21 +1,25 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* 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,
|
||||
* 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 Sandbox {
|
||||
|
||||
|
||||
public static convert(origFileName: string, destFileName: string) {
|
||||
import { IndexComponent } from "@ohos/libraryimageknife"
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestHspPreLoadImage {
|
||||
build() {
|
||||
Column() {
|
||||
IndexComponent()
|
||||
}.width("100%").height('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
/*
|
||||
* 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'
|
||||
|
||||
@Observed
|
||||
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
|
||||
@Component
|
||||
export struct MsgItem {
|
||||
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:{
|
||||
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:{
|
||||
loadSrc:this.data[this.count - 6],
|
||||
placeholderSrc:$r("app.media.loading")
|
||||
},syncLoad:true
|
||||
})
|
||||
}else {
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption:{
|
||||
loadSrc:$r("app.media.pngSample"),
|
||||
placeholderSrc:$r("app.media.loading")
|
||||
},syncLoad:true
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct ImageTestPage {
|
||||
count : number = 0
|
||||
rCount: number = 0
|
||||
scroller: Scroller = new Scroller()
|
||||
@State list: MsgModel[] = []
|
||||
@State 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("点击尺寸加50")
|
||||
.onClick(()=> {
|
||||
this.imageSize = this.imageSize + 50
|
||||
})
|
||||
.width('50%').backgroundColor(0x88ff0000).textAlign(TextAlign.Center).height(50)
|
||||
Text("点击尺寸减50")
|
||||
.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%')
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
/*
|
||||
* 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
|
||||
@Component
|
||||
struct TestIsUrlExist {
|
||||
@State imageKnifeOption: ImageKnifeOption = {
|
||||
loadSrc: $r('app.media.startIcon'),
|
||||
placeholderSrc: $r('app.media.loading'),
|
||||
errorholderSrc:$r('app.media.failed')
|
||||
}
|
||||
@State source: PixelMap | string | Resource = $r("app.media.startIcon")
|
||||
@State source1: PixelMap | string | Resource = $r("app.media.startIcon")
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
Flex() {
|
||||
Button("预加载gif图").onClick(() => {
|
||||
this.imageKnifeOption.loadSrc =
|
||||
"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658"
|
||||
})
|
||||
Button("内存缓存获取gif").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("文件缓存获取gif").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("预加载静态图").onClick(() => {
|
||||
this.imageKnifeOption.loadSrc =
|
||||
'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp'
|
||||
})
|
||||
Button("内存缓存获取").onClick(() => {
|
||||
ImageKnife.getInstance()
|
||||
.getCacheImage('https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
|
||||
CacheStrategy.Memory)
|
||||
.then((data) => {
|
||||
this.source = data!.source
|
||||
})
|
||||
})
|
||||
Button("文件缓存获取").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%')
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
/*
|
||||
* 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
|
||||
@Component
|
||||
struct TestPrefetchToFileCachePage {
|
||||
@State imageKnifeOption: 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({ loadSrc: url })
|
||||
console.log("preload-fileCachePath1=="+ fileCachePath)
|
||||
}
|
||||
build() {
|
||||
Column() {
|
||||
Button("url预加载图片到文件缓存").margin({top:10}).onClick(async ()=>{
|
||||
await this.preload("https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658")
|
||||
})
|
||||
Button("option预加载图片到文件缓存").margin({top:10}).onClick(async ()=>{
|
||||
await this.preload1("https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658")
|
||||
})
|
||||
Button("加载图片(预加载后可断网加载)").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%')
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
/*
|
||||
* 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
|
||||
@Component
|
||||
struct TestRemoveCache {
|
||||
@State imageKnifeOption: ImageKnifeOption = {
|
||||
loadSrc: $r('app.media.startIcon'),
|
||||
placeholderSrc: $r('app.media.loading'),
|
||||
errorholderSrc:$r('app.media.failed')
|
||||
}
|
||||
@State source: PixelMap | string | Resource = $r("app.media.startIcon");
|
||||
@State source1: PixelMap | string | Resource = $r("app.media.startIcon");
|
||||
@State url: string = '';
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
Flex() {
|
||||
Button("预加载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("内存缓存获取gif").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("文件缓存获取gif").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("预加载静态图").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("内存缓存获取").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("文件缓存获取").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("删除全部缓存").onClick(() => {
|
||||
ImageKnife.getInstance()
|
||||
.removeAllMemoryCache()
|
||||
ImageKnife.getInstance()
|
||||
.removeAllFileCache()
|
||||
})
|
||||
.margin({left:5})
|
||||
Button("删除全部内存缓存").onClick(() => {
|
||||
ImageKnife.getInstance()
|
||||
.removeAllMemoryCache()
|
||||
})
|
||||
.margin({left:5})
|
||||
Button("删除全部文件缓存").onClick(() => {
|
||||
ImageKnife.getInstance()
|
||||
.removeAllFileCache()
|
||||
})
|
||||
.margin({left:5})
|
||||
}.margin({ top: 10 })
|
||||
|
||||
Flex() {
|
||||
Button("删除自定义内存缓存").onClick(() => {
|
||||
ImageKnife.getInstance()
|
||||
.removeMemoryCache(this.url)
|
||||
})
|
||||
.margin({left:20})
|
||||
Button("删除自定义文件缓存").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%')
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
/*
|
||||
* 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
|
||||
@Component
|
||||
struct TestWriteCacheStage {
|
||||
@State imageKnifeOption1: ImageKnifeOption = {
|
||||
loadSrc:$r('app.media.startIcon'),
|
||||
placeholderSrc:$r('app.media.loading'),
|
||||
errorholderSrc:$r('app.media.failed')
|
||||
}
|
||||
@State imageKnifeOption2: ImageKnifeOption = {
|
||||
loadSrc:$r('app.media.startIcon'),
|
||||
placeholderSrc:$r('app.media.loading'),
|
||||
errorholderSrc:$r('app.media.failed')
|
||||
}
|
||||
@State imageKnifeOption3: ImageKnifeOption = {
|
||||
loadSrc:$r('app.media.startIcon'),
|
||||
placeholderSrc:$r('app.media.loading'),
|
||||
errorholderSrc:$r('app.media.failed')
|
||||
}
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
Button("写入内存文件缓存").margin({top:10}).onClick(async ()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
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("写入内存缓存").margin({top:10}).onClick(async ()=>{
|
||||
this.imageKnifeOption2 = {
|
||||
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("写入文件缓存").margin({top:10}).onClick(async ()=>{
|
||||
this.imageKnifeOption3 = {
|
||||
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%')
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnifeComponent, ImageKnifeOption } from "@ohos/libraryimageknife"
|
||||
import matrix4 from '@ohos.matrix4'
|
||||
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TransformPage {
|
||||
private custom_scale:number = 1
|
||||
@State matrix1:object = matrix4.identity().scale({ x: 1, y: 1 })
|
||||
@State ImageKnifeOption: ImageKnifeOption = {
|
||||
loadSrc: $r("app.media.rabbit"),
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Contain,
|
||||
border: { radius: 50 }
|
||||
}
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption }).height(200).width(200)
|
||||
.transform(this.matrix1)
|
||||
// Image($r('app.media.rabbit')).objectFit(ImageFit.Contain).height(200).width(200).transform(this.matrix1)
|
||||
Button("放大").onClick(()=>{
|
||||
this.custom_scale = this.custom_scale * 2
|
||||
this.matrix1 = matrix4.identity().scale({ x: this.custom_scale, y: this.custom_scale })
|
||||
})
|
||||
|
||||
Button("缩小").onClick(()=>{
|
||||
this.custom_scale = this.custom_scale / 2
|
||||
this.matrix1 = matrix4.identity().scale({ x: this.custom_scale, y: this.custom_scale })
|
||||
})
|
||||
}
|
||||
.width('100%')
|
||||
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
/*
|
||||
* 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')
|
||||
|
||||
class MyImageOption extends ImageKnifeOption {
|
||||
account?: string
|
||||
}
|
||||
|
||||
@Component
|
||||
export struct UserAvatar {
|
||||
@Prop @Watch('userInfoUpdate') userInfo: string = ""
|
||||
// @Prop userInfo: string = ""
|
||||
imgSize: number = 100
|
||||
radius: number = 12
|
||||
borderSize: number = 0
|
||||
imgSizes: number = 1
|
||||
@State ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption()
|
||||
@StorageProp('WeLink_Mob_fontSize_multiple') @Watch('updateImgSize') WeLink_Mob_fontSize_multiple: number = 0
|
||||
scalable: boolean = true;
|
||||
@State calcImgSize: number = 100
|
||||
|
||||
aboutToAppear(): void {
|
||||
this.userInfoUpdate()
|
||||
this.setImageSize()
|
||||
}
|
||||
|
||||
setImageSize() {
|
||||
if (!this.scalable) {
|
||||
this.calcImgSize = this.imgSize
|
||||
} else if (this.WeLink_Mob_fontSize_multiple < 0.9) {
|
||||
this.calcImgSize = this.imgSize * 0.9
|
||||
} else if (this.WeLink_Mob_fontSize_multiple > 1.6) {
|
||||
this.calcImgSize = this.imgSize * 1.6
|
||||
} else {
|
||||
this.calcImgSize = this.imgSize * this.WeLink_Mob_fontSize_multiple
|
||||
}
|
||||
}
|
||||
|
||||
updateImgSize() {
|
||||
this.setImageSize()
|
||||
}
|
||||
|
||||
aboutToReuse(param: ESObject) {
|
||||
this.userInfoUpdate()
|
||||
}
|
||||
|
||||
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 = {
|
||||
//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())
|
||||
}
|
||||
}
|
||||
|
||||
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,18 +1,18 @@
|
|||
/*
|
||||
* Copyright (C) 2023 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* 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,
|
||||
* 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"
|
||||
import { UserAvatar } from './User'
|
||||
|
||||
class CommonDataSource <T> implements IDataSource {
|
||||
private dataArray: T[] = []
|
||||
|
|
@ -54,12 +54,11 @@ class CommonDataSource <T> implements IDataSource {
|
|||
})
|
||||
}
|
||||
}
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestManyNetImageLoadWithPage {
|
||||
struct Index {
|
||||
@State hotCommendList:CommonDataSource<string> = new CommonDataSource<string>([])
|
||||
private data:Array<string> = [
|
||||
private data:string[] = [
|
||||
"http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
|
||||
"http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg",
|
||||
"http://h.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5f2c2a9e953da81cb39db3d1d.jpg",
|
||||
|
|
@ -80,35 +79,55 @@ struct TestManyNetImageLoadWithPage {
|
|||
"http://a.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a292d2472199d25bc315d607c7c.jpg",
|
||||
"http://b.hiphotos.baidu.com/image/pic/item/e824b899a9014c08878b2c4c0e7b02087af4f4a3.jpg",
|
||||
"http://g.hiphotos.baidu.com/image/pic/item/6d81800a19d8bc3e770bd00d868ba61ea9d345f2.jpg",
|
||||
"https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
|
||||
'https://img-blog.csdnimg.cn/20191215043500229.png',
|
||||
'https://img-blog.csdn.net/20140514114029140',
|
||||
'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
|
||||
]
|
||||
aboutToAppear() {
|
||||
aboutToAppear(): void {
|
||||
this.hotCommendList.addData(this.hotCommendList.totalCount(),this.data)
|
||||
AppStorage.set("WeLink_Mob_fontSize_multiple",1)
|
||||
}
|
||||
|
||||
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 })
|
||||
}
|
||||
Column() {
|
||||
Button("bigger").onClick(()=>{
|
||||
AppStorage.set("WeLink_Mob_fontSize_multiple",1.6)
|
||||
})
|
||||
Button("small").onClick(()=>{
|
||||
AppStorage.set("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})
|
||||
})
|
||||
}
|
||||
// .cachedCount(20)
|
||||
.width("100%")
|
||||
.height("100%")
|
||||
.backgroundColor(0xFAEEE0)
|
||||
}.width('100%').height("100%")
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@Reusable
|
||||
@Component
|
||||
struct ReuseImage {
|
||||
@State userInfo:string = ""
|
||||
aboutToReuse(params: ESObject): void {
|
||||
this.userInfo = params.userInfo
|
||||
}
|
||||
|
||||
build() {
|
||||
Column(){
|
||||
UserAvatar({
|
||||
userInfo:this.userInfo
|
||||
})
|
||||
}.width("100%").height("100%")
|
||||
}
|
||||
}
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeOption,ImageKnifeComponent} from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct BasicTestFeatureAbilityPage {
|
||||
@Watch("watchPathChange") @State filePath: string = "查看featureAbility路径";
|
||||
|
||||
watchPathChange() {
|
||||
console.log("watchPathChange")
|
||||
}
|
||||
urls:string[]=[
|
||||
"http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
|
||||
"http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg",
|
||||
"http://h.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5f2c2a9e953da81cb39db3d1d.jpg",
|
||||
"http://g.hiphotos.baidu.com/image/pic/item/55e736d12f2eb938d5277fd5d0628535e5dd6f4a.jpg",
|
||||
"http://e.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f7e41f5cfe760e0cf3d6cad6ee.jpg",
|
||||
"http://b.hiphotos.baidu.com/image/pic/item/9d82d158ccbf6c81b94575cfb93eb13533fa40a2.jpg",
|
||||
"http://e.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31c1badd5a685d6277f9e2ff81e.jpg",
|
||||
"http://g.hiphotos.baidu.com/image/pic/item/0d338744ebf81a4c87a3add4d52a6059252da61e.jpg",
|
||||
"http://a.hiphotos.baidu.com/image/pic/item/f2deb48f8c5494ee5080c8142ff5e0fe99257e19.jpg",
|
||||
"http://f.hiphotos.baidu.com/image/pic/item/4034970a304e251f503521f5a586c9177e3e53f9.jpg",
|
||||
"http://b.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fbb3586c0168224f4a20a4dd7e.jpg",
|
||||
"http://img2.xkhouse.com/bbs/hfhouse/data/attachment/forum/corebbs/2009-11/2009113011534566298.jpg",
|
||||
"http://a.hiphotos.baidu.com/image/pic/item/e824b899a9014c087eb617650e7b02087af4f464.jpg",
|
||||
"http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg",
|
||||
"http://d.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f119945cbe2fe9925bc317d2a.jpg",
|
||||
"http://h.hiphotos.baidu.com/image/pic/item/902397dda144ad340668b847d4a20cf430ad851e.jpg",
|
||||
"http://b.hiphotos.baidu.com/image/pic/item/359b033b5bb5c9ea5c0e3c23d139b6003bf3b374.jpg",
|
||||
"http://a.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a292d2472199d25bc315d607c7c.jpg",
|
||||
"http://b.hiphotos.baidu.com/image/pic/item/e824b899a9014c08878b2c4c0e7b02087af4f4a3.jpg",
|
||||
"http://g.hiphotos.baidu.com/image/pic/item/6d81800a19d8bc3e770bd00d868ba61ea9d345f2.jpg",
|
||||
]
|
||||
|
||||
@State options:Array<ImageKnifeOption> = new Array
|
||||
|
||||
aboutToAppear(){
|
||||
this.options = this.urls.map<ImageKnifeOption>((url:string)=>{
|
||||
return {
|
||||
loadSrc:url
|
||||
}
|
||||
})
|
||||
console.log('this.options length ='+this.options.length)
|
||||
}
|
||||
|
||||
build() {
|
||||
Stack({ alignContent: Alignment.TopStart }) {
|
||||
Column() {
|
||||
List({ space: 20, initialIndex: 0 }) {
|
||||
ForEach(this.options, (item:ImageKnifeOption) => {
|
||||
ListItem() {
|
||||
ImageKnifeComponent({imageKnifeOption:item}).width(300).height(300)
|
||||
}
|
||||
}, (item:ImageKnifeOption )=> item.loadSrc as string)
|
||||
}
|
||||
.listDirection(Axis.Vertical) // 排列方向
|
||||
.divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
|
||||
.edgeEffect(EdgeEffect.None) // 滑动到边缘无效果
|
||||
.chainAnimation(false) // 联动特效关闭
|
||||
.onScrollIndex((firstIndex: number, lastIndex: number) => {
|
||||
console.info('first' + firstIndex)
|
||||
console.info('last' + lastIndex)
|
||||
})
|
||||
|
||||
}.width('100%')
|
||||
|
||||
}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
|
||||
}
|
||||
}
|
||||
|
|
@ -1,161 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { FileUtils, ImageKnifeGlobal} from '@ohos/libraryimageknife'
|
||||
import resourceManager from '@ohos.resourceManager';
|
||||
import { BusinessError } from '@ohos.base'
|
||||
import common from '@ohos.app.ability.common';
|
||||
@Entry
|
||||
@Component
|
||||
struct basicTestFileIOPage {
|
||||
@State filePath: string = '查看featureAbility路径';
|
||||
appFilePath = '';
|
||||
appCachePath = '';
|
||||
@State imageHint: string = '文字提醒1'
|
||||
@State imageHint2: string = '文字提醒2'
|
||||
@State imageFile: string = ''
|
||||
|
||||
@State imageRes: Resource = $r('app.media.pngSample')
|
||||
@State imagePixelMap?: PixelMap = undefined
|
||||
@State normalPixelMap: boolean = false;
|
||||
@State normalResource: boolean = false;
|
||||
|
||||
watchPathChange() {
|
||||
console.log('watchPathChange');
|
||||
}
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Text(this.filePath).fontSize(20)
|
||||
Button('featureAbility.getContext().getFilesDir()')
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
|
||||
let data:string = (ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).filesDir as string;
|
||||
console.log('ImageKnife filesPath = ' + data)
|
||||
this.filePath = data
|
||||
this.appFilePath = data;
|
||||
|
||||
})
|
||||
Button('featureAbility.getContext().getCacheDir()')
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
|
||||
let data:string = (ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).cacheDir as string;
|
||||
console.log('ImageKnife cachesPath = ' + data)
|
||||
this.filePath = data
|
||||
this.appFilePath = data;
|
||||
|
||||
})
|
||||
Text(this.imageHint)
|
||||
Button('files目录创建Folder1和Folder2 验证statSync mkdirSync')
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
if(this.appFilePath == '' || this.appFilePath == null){
|
||||
this.imageHint = 'appFilePath未取到值,请按顺序从上往下,从左往右依次测试'
|
||||
return
|
||||
}
|
||||
console.log('files目录创建Folder1和Folder2 验证statSync mkdirSync')
|
||||
try {
|
||||
FileUtils.getInstance()
|
||||
.createFolder(this.appFilePath + '/Folder1');
|
||||
FileUtils.getInstance()
|
||||
.createFolder(this.appFilePath + '/Folder2');
|
||||
} catch (e) {
|
||||
console.log('appFilePath未取到值,请按顺序从上往下,从左往右依次测试"'+JSON.stringify(e));
|
||||
}
|
||||
})
|
||||
Button('将media资源存入Folder1 验证writeSync mkdirSync createStreamSync')
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
console.log('将media资源存入Folder1 验证writeSync mkdirSync createStreamSync')
|
||||
if(this.appFilePath == '' || this.appFilePath == null){
|
||||
this.appFilePath = 'appFilePath未取到值,请按顺序从上往下,从左往右依次测试'
|
||||
return
|
||||
}
|
||||
((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).resourceManager as resourceManager.ResourceManager)
|
||||
.getMediaContent($r('app.media.gifSample').id)
|
||||
.then(data => {
|
||||
console.log('result.getMedia')
|
||||
console.log('basicTestFileIOPage - 本地加载资源 解析后数据data length= ' + data.byteLength)
|
||||
let arrayBuffer = this.typedArrayToBuffer(data);
|
||||
FileUtils.getInstance().writeFile(this.appFilePath + '/Folder1/jpgSample.gif', arrayBuffer)
|
||||
this.imageFile = 'file://' + this.appFilePath + '/Folder1/jpgSample.gif'
|
||||
console.log('Folder1 imaeFile =' + this.imageFile)
|
||||
})
|
||||
.catch((err:BusinessError) => {
|
||||
console.log('basicTestFileIOPage - 本地加载资源err' + JSON.stringify(err as BusinessError));
|
||||
})
|
||||
})
|
||||
Text(this.imageHint2)
|
||||
Button('copy:Folder1至Folder2， 验证copyFileSync')
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
console.log('copy:Folder1至Folder2， 验证copyFileSync')
|
||||
if(this.appFilePath == '' || this.appFilePath == null){
|
||||
this.imageHint2 = 'appFilePath未取到值,请按顺序从上往下,从左往右依次测试'
|
||||
return
|
||||
}
|
||||
try {
|
||||
let filePath1 = this.appFilePath + '/Folder1/jpgSample.gif';
|
||||
let filePath2 = this.appFilePath + '/Folder2/jpgSample.gif';
|
||||
FileUtils.getInstance().createFolder(this.appFilePath + '/Folder1')
|
||||
FileUtils.getInstance().createFolder(this.appFilePath + '/Folder2')
|
||||
FileUtils.getInstance().copyFile(filePath1, filePath2);
|
||||
this.imageFile = 'file://' + this.appFilePath + '/Folder2/jpgSample.gif'
|
||||
console.log('Folder2 imaeFile =' + this.imageFile)
|
||||
} catch (e) {
|
||||
console.log('appFilePath未取到值,请按顺序从上往下,从左往右依次测试:'+JSON.stringify(e))
|
||||
}
|
||||
|
||||
})
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button('显示空PixelMap')
|
||||
.margin({ left: 10 })
|
||||
.onClick(() => {
|
||||
this.normalPixelMap = true;
|
||||
this.normalResource = false;
|
||||
})
|
||||
Button('显示RES')
|
||||
.margin({ left: 10 })
|
||||
.onClick(() => {
|
||||
this.normalPixelMap = false;
|
||||
this.normalResource = true;
|
||||
})
|
||||
Button('显示String')
|
||||
.margin({ left: 10 })
|
||||
.onClick(() => {
|
||||
this.normalPixelMap = false;
|
||||
this.normalResource = false;
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
Image(this.normalPixelMap ? this.imagePixelMap : (this.normalResource ? this.imageRes : this.imageFile))
|
||||
.width(200)
|
||||
.height(200)
|
||||
.backgroundColor(Color.Pink)
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
typedArrayToBuffer(array: Uint8Array): ArrayBuffer {
|
||||
return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,129 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import featureAbility from '@ohos.ability.featureAbility';
|
||||
import { FileUtils } from '@ohos/libraryimageknife'
|
||||
import { FileTypeUtil } from '@ohos/libraryimageknife'
|
||||
import resourceManager from '@ohos.resourceManager';
|
||||
import { Base64 } from '@ohos/libraryimageknife'
|
||||
import { ParseImageUtil } from '@ohos/libraryimageknife'
|
||||
import { ImageKnifeGlobal } from '@ohos/libraryimageknife'
|
||||
import { BusinessError } from '@ohos.base'
|
||||
import common from '@ohos.app.ability.common';
|
||||
@Entry
|
||||
@Component
|
||||
struct BasicTestMediaImage {
|
||||
@State imagePixelMap?: PixelMap = undefined;
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Button('本地资源jpg')
|
||||
.onClick(() => {
|
||||
((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).resourceManager as resourceManager.ResourceManager)
|
||||
.getMediaContent($r('app.media.jpgSample').id)
|
||||
.then(data => {
|
||||
let arrayBuffer = this.typedArrayToBuffer(data);
|
||||
let parseImageUtil = new ParseImageUtil();
|
||||
parseImageUtil.parseImage(arrayBuffer, (pxielmap) => {
|
||||
this.imagePixelMap = pxielmap;
|
||||
}, (err:BusinessError|string|undefined) => {
|
||||
})
|
||||
})
|
||||
.catch((err:BusinessError) => {
|
||||
console.log('basicTestMediaImage - 本地加载资源err' + JSON.stringify(err));
|
||||
})
|
||||
}).margin({ left: 15 }).backgroundColor(Color.Blue)
|
||||
Button('本地资源png')
|
||||
.onClick(() => {
|
||||
((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).resourceManager as resourceManager.ResourceManager)
|
||||
.getMediaContent($r('app.media.pngSample').id)
|
||||
.then(data => {
|
||||
let arrayBuffer = this.typedArrayToBuffer(data);
|
||||
let parseImageUtil = new ParseImageUtil();
|
||||
parseImageUtil.parseImage(arrayBuffer, (pxielmap) => {
|
||||
this.imagePixelMap = pxielmap;
|
||||
},(err:BusinessError|string|undefined) => {
|
||||
})
|
||||
})
|
||||
.catch((err:BusinessError) => {
|
||||
console.log('basicTestMediaImage - 本地加载资源err' + JSON.stringify(err));
|
||||
})
|
||||
}).margin({ left: 15 }).backgroundColor(Color.Blue)
|
||||
Button('本地资源bmp')
|
||||
.onClick(() => {
|
||||
((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).resourceManager as resourceManager.ResourceManager)
|
||||
.getMediaContent($r('app.media.bmpSample').id)
|
||||
.then(data => {
|
||||
let arrayBuffer = this.typedArrayToBuffer(data);
|
||||
let parseImageUtil = new ParseImageUtil();
|
||||
parseImageUtil.parseImage(arrayBuffer, (pxielmap) => {
|
||||
this.imagePixelMap = pxielmap;
|
||||
}, (err:BusinessError|string|undefined) => {
|
||||
})
|
||||
})
|
||||
.catch((err:BusinessError) => {
|
||||
console.log('basicTestMediaImage - 本地加载资源err' + JSON.stringify(err));
|
||||
})
|
||||
}).margin({ left: 15 }).backgroundColor(Color.Blue)
|
||||
Button('本地资源webp')
|
||||
.onClick(() => {
|
||||
((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).resourceManager as resourceManager.ResourceManager)
|
||||
.getMediaContent($r('app.media.jpgSample').id)
|
||||
.then(data => {
|
||||
let arrayBuffer = this.typedArrayToBuffer(data);
|
||||
let parseImageUtil = new ParseImageUtil();
|
||||
parseImageUtil.parseImage(arrayBuffer, (pxielmap) => {
|
||||
this.imagePixelMap = pxielmap;
|
||||
}, (err:BusinessError|string|undefined) => {
|
||||
})
|
||||
})
|
||||
.catch((err:BusinessError) => {
|
||||
console.log('basicTestMediaImage - 本地加载资源err' + JSON.stringify(err));
|
||||
})
|
||||
}).margin({ left: 15 }).backgroundColor(Color.Blue)
|
||||
Button('本地资源gif')
|
||||
.onClick(() => {
|
||||
((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).resourceManager as resourceManager.ResourceManager)
|
||||
.getMediaContent($r('app.media.gifSample').id)
|
||||
.then(data => {
|
||||
let arrayBuffer = this.typedArrayToBuffer(data);
|
||||
let parseImageUtil = new ParseImageUtil();
|
||||
parseImageUtil.parseImage(arrayBuffer, (pxielmap) => {
|
||||
this.imagePixelMap = pxielmap;
|
||||
}, (err:BusinessError|string|undefined) => {
|
||||
})
|
||||
})
|
||||
.catch((err:BusinessError) => {
|
||||
console.log('basicTestMediaImage - 本地加载资源err' + JSON.stringify(err));
|
||||
})
|
||||
}).margin({ left: 15 }).backgroundColor(Color.Blue)
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
Image(this.imagePixelMap)
|
||||
.width(300)
|
||||
.height(300)
|
||||
.backgroundColor(Color.Pink)
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
typedArrayToBuffer(array: Uint8Array): ArrayBuffer {
|
||||
return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import featureAbility from '@ohos.ability.featureAbility';
|
||||
import {FileUtils} from '@ohos/libraryimageknife'
|
||||
import {FileTypeUtil} from '@ohos/libraryimageknife'
|
||||
import resourceManager from '@ohos.resourceManager';
|
||||
import {Base64} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeGlobal} from '@ohos/libraryimageknife'
|
||||
import { BusinessError } from '@ohos.base'
|
||||
import common from '@ohos.app.ability.common';
|
||||
@Entry
|
||||
@Component
|
||||
struct BasicTestResourceManagerPage {
|
||||
@State fileTypeStr: string = '解析后图片类型';
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Text(this.fileTypeStr).fontSize(20)
|
||||
.width(300).height(200).backgroundColor(Color.Pink)
|
||||
Button('getMedia解析一张jpg图片')
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).resourceManager as resourceManager.ResourceManager)
|
||||
.getMediaContent($r('app.media.jpgSample')
|
||||
.id)
|
||||
.then(data => {
|
||||
console.log('basicTestFileIOPage - 本地加载资源 解析后数据data = ' + data)
|
||||
let arrayBuffer = this.typedArrayToBuffer(data);
|
||||
let filetypeUtil = new FileTypeUtil();
|
||||
let fileType = filetypeUtil.getFileType(arrayBuffer);
|
||||
if(fileType != null) {
|
||||
this.fileTypeStr = fileType;
|
||||
}
|
||||
})
|
||||
.catch((err:BusinessError) => {
|
||||
console.log('basicTestFileIOPage - 本地加载资源err' + JSON.stringify(err));
|
||||
})
|
||||
})
|
||||
Button('getMediaBase64解析一张png图片')
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).resourceManager as resourceManager.ResourceManager)
|
||||
.getMediaContentBase64($r('app.media.pngSample')
|
||||
.id)
|
||||
.then(data => {
|
||||
console.log('ParseResClientBase64 - 本地加载资源 解析后数据data')
|
||||
let matchReg = ';base64,';
|
||||
let firstIndex = data.indexOf(matchReg);
|
||||
data = data.substring(firstIndex + matchReg.length, data.length)
|
||||
console.log('ParseResClientBase64 - 本地加载资源 解析后数据剔除非必要数据后data= ' + data)
|
||||
let arrayBuffer = Base64.getInstance()
|
||||
.decode(data);
|
||||
let filetypeUtil = new FileTypeUtil();
|
||||
let fileType = filetypeUtil.getFileType(arrayBuffer);
|
||||
if(fileType != null) {
|
||||
this.fileTypeStr = fileType;
|
||||
}
|
||||
})
|
||||
.catch((err:BusinessError) => {
|
||||
console.log('basicTestFileIOPage - 本地加载资源err' + JSON.stringify(err));
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
typedArrayToBuffer(array: Uint8Array): ArrayBuffer {
|
||||
return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,152 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnife} from '@ohos/libraryimageknife'
|
||||
import {OnRenameListener} from '@ohos/libraryimageknife'
|
||||
import {OnCompressListener} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeGlobal} from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct CompressPage {
|
||||
@State mRPixelMap?: PixelMap = undefined;
|
||||
@State mFPixelMap?: PixelMap = undefined;
|
||||
@State mResultText: string= "压缩回调结果"
|
||||
@State mResultPath: string= "压缩路径:"
|
||||
@State mAsyncPath: string= ""
|
||||
@State mAsyncPathHint: string= ""
|
||||
|
||||
build() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
|
||||
|
||||
Column() {
|
||||
Column() {
|
||||
Text("Resource image compress").fontColor(Color.Gray).fontSize(16);
|
||||
Button() {
|
||||
Text("同步压缩").fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(120)
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
this.compressAsyncRecource();
|
||||
});
|
||||
Scroll(){
|
||||
Text(this.mAsyncPathHint).fontSize(13)
|
||||
}
|
||||
.height(55)
|
||||
.width(350)
|
||||
|
||||
|
||||
Image(this.mAsyncPath)
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 })
|
||||
.backgroundColor(Color.Pink)
|
||||
|
||||
Button() {
|
||||
Text($r("app.string.resource_image_compress")).fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(120)
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
this.cropressRecource();
|
||||
});
|
||||
Image(this.mRPixelMap == undefined?'': this.mRPixelMap!)
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 })
|
||||
Text(this.mResultText).fontColor(Color.Gray).fontSize(16);
|
||||
Text(this.mResultPath).fontColor(Color.Gray).fontSize(16);
|
||||
}.margin({ top: 10 });
|
||||
|
||||
Column() {
|
||||
Text("file image compress").fontColor(Color.Gray).fontSize(16);
|
||||
Button() {
|
||||
Text($r("app.string.file_image_compress")).fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(120)
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
});
|
||||
Image(this.mFPixelMap == undefined ?'':this.mFPixelMap!)
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 });
|
||||
}.margin({ top: 10 }).visibility(Visibility.Hidden);
|
||||
}.margin({ bottom: 30 });
|
||||
}.width('100%').height('100%');
|
||||
}
|
||||
private compressAsyncRecource() {
|
||||
let data = new Array<Resource>();
|
||||
data.push($r('app.media.jpgSample'))
|
||||
|
||||
let imageKnife:ImageKnife|undefined = ImageKnifeGlobal.getInstance().getImageKnife()
|
||||
if(imageKnife!=undefined) {
|
||||
imageKnife
|
||||
.compressBuilder()
|
||||
.load(data)
|
||||
.ignoreBy(100)
|
||||
.get()
|
||||
.then((path: string) => {
|
||||
this.mAsyncPathHint = path;
|
||||
this.mAsyncPath = 'file://' + path;
|
||||
});
|
||||
}
|
||||
console.info("asasd start compress end")
|
||||
}
|
||||
private cropressRecource() {
|
||||
let data = new Array<Resource>();
|
||||
data.push($r('app.media.jpgSample'))
|
||||
let rename: OnRenameListener = {
|
||||
reName() {
|
||||
return "test_1.jpg";
|
||||
}
|
||||
}
|
||||
|
||||
let listener: OnCompressListener = {
|
||||
start:()=>{
|
||||
this.mResultText = "start"
|
||||
console.info("asasd start")
|
||||
},
|
||||
onSuccess:(p: PixelMap | null | undefined, path: string)=> {
|
||||
if(p!=null && p!=undefined) {
|
||||
let pack = p;
|
||||
this.mRPixelMap = pack as PixelMap;
|
||||
console.info("asasd success path:" + this.mRPixelMap)
|
||||
this.mResultText = "success";
|
||||
this.mResultPath = path;
|
||||
}
|
||||
},
|
||||
onError:(s: string)=>{
|
||||
console.info("asasd onError:" + s)
|
||||
this.mResultText = "fail";
|
||||
}
|
||||
}
|
||||
console.info("asasd start compress")
|
||||
let imageKnife:ImageKnife|undefined = ImageKnifeGlobal.getInstance().getImageKnife()
|
||||
if(imageKnife != undefined) {
|
||||
imageKnife
|
||||
.compressBuilder()
|
||||
.load(data)
|
||||
.ignoreBy(100)
|
||||
.setRenameListener(rename)
|
||||
.setCompressListener(listener)
|
||||
.launch();
|
||||
}
|
||||
console.info("asasd start compress end")
|
||||
}
|
||||
}
|
||||
|
|
@ -1,107 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { CropImage } from '@ohos/libraryimageknife'
|
||||
import { CropOptions } from '@ohos/libraryimageknife'
|
||||
import { Crop } from '@ohos/libraryimageknife'
|
||||
import { RecourseProvider } from '@ohos/libraryimageknife'
|
||||
import { PixelMapCrop,Options } from '@ohos/libraryimageknife'
|
||||
import { CropCallback } from '@ohos/libraryimageknife'
|
||||
import { FileUtils } from '@ohos/libraryimageknife'
|
||||
import { ImageKnifeGlobal } from '@ohos/libraryimageknife'
|
||||
import { BusinessError } from '@ohos.base'
|
||||
import resourceManager from '@ohos.resourceManager';
|
||||
import common from '@ohos.app.ability.common'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
export struct CropImagePage2 {
|
||||
@State options1: Options = new Options();
|
||||
@State cropTap: boolean = false;
|
||||
|
||||
@State width1: number = 0;
|
||||
@State height1: number = 0;
|
||||
@State _rotate: number = 0;
|
||||
@State _scale: number = 1;
|
||||
private _resource: Resource = $r('app.media.bmpSample');
|
||||
private settings: RenderingContextSettings = new RenderingContextSettings(true)
|
||||
private canvasContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
|
||||
build() {
|
||||
Scroll() {
|
||||
Column() {
|
||||
Button('点击解析图片')
|
||||
.onClick(() => {
|
||||
((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).resourceManager as resourceManager.ResourceManager)
|
||||
.getMediaContent($r('app.media.bmpSample').id)
|
||||
.then((data:Uint8Array) => {
|
||||
let arrayBuffer = FileUtils.getInstance().uint8ArrayToBuffer(data);
|
||||
let optionx = new Options();
|
||||
optionx.setWidth(800)
|
||||
.setHeight(800)
|
||||
.setCropFunction((err:BusinessError|string, pixelmap:PixelMap|null, sx:number, sy:number) => {
|
||||
console.log('PMC setCropFunction callback')
|
||||
if (err) {
|
||||
console.error('PMC crop err =' + err)
|
||||
} else {
|
||||
this.width1 = sx * px2vp(1);
|
||||
this.height1 = sy * px2vp(1);
|
||||
if(pixelmap != null) {
|
||||
this.canvasContext.drawImage(pixelmap, 0, 0, this.width1, this.height1)
|
||||
}
|
||||
}
|
||||
})
|
||||
optionx.loadBuffer(arrayBuffer, () => {
|
||||
this.options1 = optionx;
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
|
||||
PixelMapCrop({ options: $options1, cropTap: this.cropTap })
|
||||
|
||||
Button('点击裁剪图片')
|
||||
.onClick(() => {
|
||||
this.cropTap = !this.cropTap;
|
||||
})
|
||||
|
||||
|
||||
Canvas(this.canvasContext)
|
||||
.width(this.width1)
|
||||
.height(this.height1)
|
||||
.rotate({
|
||||
z: 1,
|
||||
centerX: this.width1 / 2,
|
||||
centerY: this.height1 / 2,
|
||||
angle: this._rotate
|
||||
})
|
||||
.scale({ x: this._scale, y: this._scale, z: 1.0 })
|
||||
.gesture(GestureGroup(GestureMode.Parallel,
|
||||
RotationGesture({ fingers: 2 }).onActionUpdate((event?: GestureEvent) => {
|
||||
if(event != undefined) {
|
||||
this._rotate = event.angle;
|
||||
}
|
||||
}), PinchGesture({ fingers: 2 }).onActionUpdate((event?: GestureEvent) => {
|
||||
if(event != undefined) {
|
||||
this._scale = event.scale;
|
||||
}
|
||||
})))
|
||||
}
|
||||
.backgroundColor(Color.Brown)
|
||||
.width('100%')
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -24,8 +24,8 @@ struct DataShareUriLoadPage {
|
|||
{
|
||||
loadSrc: $r('app.media.icon'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
placeholderSrc: $r('app.media.loading'),
|
||||
errorholderSrc: $r('app.media.failed')
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -51,8 +51,7 @@ struct DataShareUriLoadPage {
|
|||
console.info("photoAsset.displayName :"+photoAsset.displayName)
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: photoAsset.uri,
|
||||
placeholderSrc:$r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
placeholderSrc:$r('app.media.loading')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,366 +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 {
|
||||
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(300).width('100%').backgroundColor(Color.Pink)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,98 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2022 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import router from '@system.router';
|
||||
import {
|
||||
ImageKnifeComponent,
|
||||
ImageKnifeOption,
|
||||
ImageKnifeDrawFactory,
|
||||
ScaleType
|
||||
} from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct DrawFactoryTestPage {
|
||||
|
||||
types:Array<ScaleType> = [ScaleType.FIT_START,ScaleType.FIT_END,ScaleType.FIT_CENTER,ScaleType.CENTER,ScaleType.CENTER_CROP,ScaleType.FIT_XY,ScaleType.CENTER_INSIDE,ScaleType.NONE]
|
||||
|
||||
|
||||
@State msg:string = `当前ScaleType${this.types[0]}`
|
||||
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc:"https://xximg1.meitudata.com/2LqS1vmqv0.png!thumb-w321-webp75",
|
||||
mainScaleType: this.types[0],
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
drawLifeCycle:ImageKnifeDrawFactory.createOvalLifeCycle(15,'#ff000000')
|
||||
}
|
||||
@State imageKnifeOption2: ImageKnifeOption =
|
||||
{
|
||||
loadSrc:"https://xximg1.meitudata.com/2LqS1vmqv0.png!thumb-w321-webp75",
|
||||
mainScaleType: this.types[0],
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
drawLifeCycle:ImageKnifeDrawFactory.createRoundLifeCycle(10,'#ff000000',30)
|
||||
}
|
||||
|
||||
count:number = 0;
|
||||
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
|
||||
|
||||
Text("用例看护DrawFactory").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button(this.msg)
|
||||
.onClick(() => {
|
||||
this.count++;
|
||||
let index= this.count % this.types.length;
|
||||
this.msg = `当前ScaleType${this.types[index]}`
|
||||
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc:"https://xximg1.meitudata.com/2LqS1vmqv0.png!thumb-w321-webp75",
|
||||
mainScaleType: this.types[index],
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
drawLifeCycle:ImageKnifeDrawFactory.createOvalLifeCycle(15,'#ff000000')
|
||||
}
|
||||
|
||||
this.imageKnifeOption2 = {
|
||||
loadSrc:"https://xximg1.meitudata.com/2LqS1vmqv0.png!thumb-w321-webp75",
|
||||
mainScaleType: this.types[index],
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
drawLifeCycle:ImageKnifeDrawFactory.createRoundLifeCycle(10,'#ff000000',30)
|
||||
}
|
||||
}).margin({ top: 15, bottom:15 })
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width('100%').height(300).backgroundColor(Color.Orange)
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }).width('100%').height(300).backgroundColor(Color.Orange)
|
||||
.margin({ top: 15, bottom:15 })
|
||||
}
|
||||
.width('100%').height('100%').backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}.width('100%')
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeComponent} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeOption} from '@ohos/libraryimageknife'
|
||||
import {RotateImageTransformation} from '@ohos/libraryimageknife'
|
||||
import {RoundedCornersTransformation} from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct FrescoImageTestCasePage {
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
retryholderSrc: $r('app.media.icon_retry'),
|
||||
displayProgress: true,
|
||||
canRetryClick:true
|
||||
};
|
||||
@State ImageKnifeOption: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/0ef60041445edcfd6b38d20e19024b2cd9281dcc3525a4-Vy8fYO_fw658/format/webp",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
retryholderSrc: $r('app.media.icon_retry'),
|
||||
displayProgress: true,
|
||||
canRetryClick:true
|
||||
};
|
||||
@State imageKnifeOption3: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
retryholderSrc: $r('app.media.icon_retry'),
|
||||
displayProgress: true,
|
||||
canRetryClick:true
|
||||
};
|
||||
@State imageKnifeOption4: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/testRetryxxxx",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
retryholderSrc: $r('app.media.icon_retry'),
|
||||
displayProgress: true,
|
||||
canRetryClick:true
|
||||
};
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
// ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
|
||||
// ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
|
||||
// ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 })
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 })
|
||||
.width(300)
|
||||
.height(300)
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2023 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { ImageKnifeComponent, ImageKnifeOption, FileUtils,ImageKnifeGlobal } from '@ohos/libraryimageknife'
|
||||
import common from '@ohos.app.ability.common'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct Index {
|
||||
|
||||
|
||||
@State imageOption1:ImageKnifeOption = {
|
||||
loadSrc: $r('app.media.icon'),
|
||||
|
||||
}
|
||||
@State imageOption2:ImageKnifeOption = {
|
||||
loadSrc: $r('app.media.icon'),
|
||||
|
||||
}
|
||||
@State imageOption3:ImageKnifeOption = {
|
||||
loadSrc: $r('app.media.icon'),
|
||||
|
||||
}
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Column() {
|
||||
Button('点击加载网络图片').onClick(()=>{
|
||||
this.imageOption2 = {
|
||||
loadSrc: 'https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB',
|
||||
}
|
||||
})
|
||||
ImageKnifeComponent({imageKnifeOption:this.imageOption2}).width(300).height(300).backgroundColor(Color.Pink)
|
||||
|
||||
Button('点击加载本地文件').onClick(()=>{
|
||||
let ctx:Object|undefined = ImageKnifeGlobal.getInstance().getHapContext();
|
||||
if(ctx != undefined){
|
||||
let path = (ctx as common.UIAbilityContext).filesDir+"/set.jpeg";
|
||||
FileUtils.getInstance().readFilePicAsync(path).then(buffer=>{
|
||||
this.imageOption3 = {
|
||||
loadSrc: path
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
ImageKnifeComponent({imageKnifeOption:this.imageOption3}).width(300).height(300).backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
|
||||
}.width('100%')
|
||||
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -1,461 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2022 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import router from '@ohos.router';
|
||||
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct IndexFunctionDemo {
|
||||
@State hint1: string = '启用网络模拟加载替换网络加载'
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Text("OHOS基础接口测试列表").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("测试元能力")
|
||||
.onClick(() => {
|
||||
console.log("测试List列表")
|
||||
router.pushUrl({ url: "pages/basicTestFeatureAbilityPage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
Button("测试文件")
|
||||
.onClick(() => {
|
||||
console.log("测试文件子系统")
|
||||
router.pushUrl({ url: "pages/basicTestFileIOPage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
Button("优先级加载")
|
||||
.onClick(() => {
|
||||
console.log("优先级加载")
|
||||
router.pushUrl({ url: "pages/testPriorityComponent" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
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() {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,102 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2022 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import router from '@ohos.router';
|
||||
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() {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeComponent, ScaleType} 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)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2023 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
export class BasicDataSource<T> implements IDataSource {
|
||||
private listeners: DataChangeListener[] = [];
|
||||
|
||||
public totalCount(): number {
|
||||
return 0;
|
||||
}
|
||||
|
||||
public getData(index: number):T | undefined {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
registerDataChangeListener(listener: DataChangeListener): void {
|
||||
if (this.listeners.indexOf(listener) < 0) {
|
||||
console.info('add listener');
|
||||
this.listeners.push(listener);
|
||||
}
|
||||
}
|
||||
|
||||
unregisterDataChangeListener(listener: DataChangeListener): void {
|
||||
const pos = this.listeners.indexOf(listener);
|
||||
if (pos >= 0) {
|
||||
console.info('remove listener');
|
||||
this.listeners.splice(pos, 1);
|
||||
}
|
||||
}
|
||||
|
||||
notifyDataReload(): void {
|
||||
this.listeners.forEach(listener => {
|
||||
listener.onDataReloaded();
|
||||
})
|
||||
}
|
||||
|
||||
notifyDataAdd(index: number): void {
|
||||
this.listeners.forEach(listener => {
|
||||
listener.onDataAdd(index);
|
||||
})
|
||||
}
|
||||
|
||||
notifyDataChange(index: number): void {
|
||||
this.listeners.forEach(listener => {
|
||||
listener.onDataChange(index);
|
||||
})
|
||||
}
|
||||
|
||||
notifyDataDelete(index: number): void {
|
||||
this.listeners.forEach(listener => {
|
||||
listener.onDataDelete(index);
|
||||
})
|
||||
}
|
||||
|
||||
notifyDataMove(from: number, to: number): void {
|
||||
this.listeners.forEach(listener => {
|
||||
listener.onDataMove(from, to);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -1,590 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2023 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {BasicDataSource} from './BasicDataSource'
|
||||
import { Material } from './Material';
|
||||
export class TestDataSource extends BasicDataSource<Material> {
|
||||
private dataArray: Material[] = [
|
||||
{name:"测试CBC",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/R9aT7lpEEVxawo4.jpeg!thumb-w321-webp75",material_id:"5060118818"},
|
||||
{name:"通用天空1像素测试",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/1V6c63lKLGPlKVo.png!thumb-w321-webp75",material_id:"506009997"},
|
||||
{name:"像素测试+bin",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/2NxCo49xAB1L96K.jpeg!thumb-w321-webp75",material_id:"506009998"},
|
||||
{name:"像素测试",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/P6gH3pWBGw7L6dD.jpeg!thumb-w321-webp75",material_id:"506009999"},
|
||||
{name:"名称一",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/MKosgAWo5VKpo9Z.jpeg!thumb-w321-webp75",material_id:"50600999"},
|
||||
{name:"质感",thumbnail:"https://xximg1.meitudata.com/XepUPNP4WP.png!thumb-w321-webp75",material_id:"20076061608"},
|
||||
{name:"抠图批量拼图",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/pA2S9lvNpMY4X3N.jpeg!thumb-w321-webp75",material_id:"506002368"},
|
||||
{name:"修改测试",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/69MiA9VxKdkzjWR.png!thumb-w321-webp75",material_id:"50600229"},
|
||||
{name:"兰桂坊-艺术",thumbnail:"https://material-center-pre.meitudata.com/material/image/6228901fd8ddd6350.jpeg!thumb-w321-webp75",material_id:"50639415"},
|
||||
{name:"有门槛的我",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/P98i3gdgDw3Rmx5.png!thumb-w321-webp75",material_id:"506093422"},
|
||||
{name:"222嗯嗯1",thumbnail:"https://stage.meitudata.com/public/creator/ed70a3c696c8e7b.jpg!thumb-w321-webp75",material_id:"50693244"},
|
||||
{name:"滤镜流程11",thumbnail:"https://material-center-pre.meitudata.com/material/image/6194a57b5b9ef7678.jpg!thumb-w321-webp75",material_id:"506017292"},
|
||||
{name:"hsxTest11.8",thumbnail:"https://material-center-pre.meitudata.com/material/image/6189f29b48f165954.jpg!thumb-w321-webp75",material_id:"506530963"},
|
||||
{name:"旧-美食手绘1",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/0lZCW9BrDgMroLL.jpeg!thumb-w321-webp75",material_id:"5060002001"},
|
||||
{name:"Forest",thumbnail:"https://xximg1.meitudata.com/V2jTkoYa96.jpeg!thumb-w321-webp75",material_id:"20106191835"},
|
||||
{name:"春樱",thumbnail:"https://xximg1.meitudata.com/k5DIOxgJpN.jpeg!thumb-w321-webp75",material_id:"20076291634"},
|
||||
{name:"GT G",thumbnail:"http://xximg2.meitudata.com/Z9DCJpkB2l.jpeg!thumb-w321-webp75",material_id:"20085081215"},
|
||||
{name:"测",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/zwdte8R2e5KMMmm.jpeg!thumb-w321-webp75",material_id:"506000000"},
|
||||
{name:"五一鱼块",thumbnail:"https://xximg1.meitudata.com/mlahyxNxjN.jpeg!thumb-w321-webp75",material_id:"20076292056"},
|
||||
{name:"青空",thumbnail:"https://xximg1.meitudata.com/8OkUwBympV.jpeg!thumb-w321-webp75",material_id:"20106311844"},
|
||||
{name:"质感",thumbnail:"https://xximg1.meitudata.com/9nzUydyWeB.png!thumb-w321-webp75",material_id:"20076061589"},
|
||||
{name:"测试CBC",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/R9aT7lpEEVxawo4.jpeg!thumb-w321-webp75",material_id:"5060118818"},
|
||||
{name:"像素天空抠图测试",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/Ymju0r3deAl7xoJ.jpeg!thumb-w321-webp75",material_id:"506005680"},
|
||||
{name:"像素滤镜测试",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/8zPcB0y4vdreG1d.jpeg!thumb-w321-webp75",material_id:"506019998"},
|
||||
{name:"通用天空1像素测试",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/1V6c63lKLGPlKVo.png!thumb-w321-webp75",material_id:"506009997"},
|
||||
{name:"人像风格化",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/VYwIWp0E52v5vaE.jpeg!thumb-w321-webp75",material_id:"50600288888"},
|
||||
{name:"像素+边框测试",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/Z9dtor442OY76KV.jpeg!thumb-w321-webp75",material_id:"506005678"},
|
||||
{name:"像素测试+bin",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/2NxCo49xAB1L96K.jpeg!thumb-w321-webp75",material_id:"506009998"},
|
||||
{name:"像素测试",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/P6gH3pWBGw7L6dD.jpeg!thumb-w321-webp75",material_id:"506009999"},
|
||||
{name:"兰桂坊-艺术",thumbnail:"https://material-center-pre.meitudata.com/material/image/6228901fd8ddd6350.jpeg!thumb-w321-webp75",material_id:"50639415"},
|
||||
{name:"藤黄",thumbnail:"https://xximg1.meitudata.com/KnJSa8X496.jpeg!thumb-w321-webp75",material_id:"20076281728"},
|
||||
{name:"梅幸茶",thumbnail:"https://xximg1.meitudata.com/GYGcPokEQ3.jpeg!thumb-w321-webp75",material_id:"20076281771"},
|
||||
{name:"五一鱼块",thumbnail:"https://xximg1.meitudata.com/mlahyxNxjN.jpeg!thumb-w321-webp75",material_id:"20076292056"},
|
||||
{name:"12.妆容滤镜层级控制",thumbnail:"https://xxtool-release.zone1.meitudata.com/deRP83dkdlR4.png!thumb-w321-webp75",material_id:"200720002017"},
|
||||
{name:"12.妆容滤镜层级控制1",thumbnail:"https://xxtool-release.zone1.meitudata.com/rPJ1vKjJY6jz.png!thumb-w321-webp75",material_id:"200720002018"},
|
||||
{name:"13.3D打光",thumbnail:"https://xxtool-release.zone1.meitudata.com/z8K3P249ZmVW.png!thumb-w321-webp75",material_id:"200720002020"},
|
||||
{name:"14.新bling效果",thumbnail:"https://xxtool-release.zone1.meitudata.com/e4xlVkl0BzMy.png!thumb-w321-webp75",material_id:"200720003001"},
|
||||
{name:"美食手绘效果2",thumbnail:"https://xxtool-release.zone1.meitudata.com/B6MleZrWeMvj.jpg!thumb-w321-webp75",material_id:"200720002002"},
|
||||
{name:"16.美食手绘效果",thumbnail:"https://xxtool-release.zone1.meitudata.com/xEke61aRK6dg.jpg!thumb-w321-webp75",material_id:"200720002003"},
|
||||
{name:"17.素材无人脸规则",thumbnail:"https://xxtool-release.zone1.meitudata.com/B6MleZ1ae5Ry.jpg!thumb-w321-webp75",material_id:"200720002010"},
|
||||
{name:"18.径向色散效果",thumbnail:"https://xxtool-release.zone1.meitudata.com/EyvzkoPgakDL.jpg!thumb-w321-webp75",material_id:"200720002012"},
|
||||
{name:"胶片滤镜2",thumbnail:"https://xxtool-release.zone1.meitudata.com/3zVRo1E16vZG.png!thumb-w321-webp75",material_id:"200720002008"},
|
||||
{name:"20.胶片滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/3zVRo1EdvZ0W.jpg!thumb-w321-webp75",material_id:"200720002009"},
|
||||
{name:"21.虚化滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/1mLMv1kd2BLZ.jpg!thumb-w321-webp75",material_id:"200720002011"},
|
||||
{name:"22.天空分割滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/8NXRMzE019aB.jpg!thumb-w321-webp75",material_id:"200720002006"},
|
||||
{name:"23.妆容滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/0XDRo7xdPkVx.jpg!thumb-w321-webp75",material_id:"200720002007"},
|
||||
{name:"1.随机滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/V06dg1RJ8pDr.jpg!thumb-w321-webp75",material_id:"200720001004"},
|
||||
{name:"15.实时取色效果",thumbnail:"https://xxtool-release.zone1.meitudata.com/2p5Ro1VDZvxR.png!thumb-w321-webp75",material_id:"200720001001"},
|
||||
{name:"10.不带妆容",thumbnail:"https://xxtool-release.zone1.meitudata.com/8NXRMz5oypN7.jpeg!thumb-w321-webp75",material_id:"200720002030"},
|
||||
{name:"16.美食手绘效果1",thumbnail:"https://xxtool-release.zone1.meitudata.com/1mLMWyxNVMAe.jpg!thumb-w321-webp75",material_id:"506088836"},
|
||||
{name:"素材多比例滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/7d8RoA7DXYB9.jpg!thumb-w321-webp75",material_id:"200720002013"},
|
||||
{name:"安德森粉",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/OXOHRLBqVppoxEY.png!thumb-w321-webp75",material_id:"20079982224"},
|
||||
{name:"安德森黄",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/bBZcY8dnYDqZE5v.png!thumb-w321-webp75",material_id:"20079982225"},
|
||||
{name:"安德森冷",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/x5NF1JLYvqGENkj.png!thumb-w321-webp75",material_id:"20079982226"},
|
||||
{name:"安德森暖青",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/KeVUpByXzRp0oPK.png!thumb-w321-webp75",material_id:"20079982227"},
|
||||
{name:"高光+100",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/PB2cdnDGN0nqb8q.png!thumb-w321-webp75",material_id:"20079981113"},
|
||||
{name:"高光-100",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/XepU5b6OZKW90Yv.png!thumb-w321-webp75",material_id:"20079981114"},
|
||||
{name:"阴影+100",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/KeVUp1oQD6W8xg5.png!thumb-w321-webp75",material_id:"20079981115"},
|
||||
{name:"阴影-100",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/GPWcJeyweKZR69d.png!thumb-w321-webp75",material_id:"20079981116"},
|
||||
{name:"cg无素材",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/LEasj5wg0o10JzO.png!thumb-w321-webp75",material_id:"20079981112"},
|
||||
{name:"会员电影胶片",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8QzFJLZVqLlvj8v.png!thumb-w321-webp75",material_id:"20079982254"},
|
||||
{name:"秋1",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/KeVUpByPLRGkgYj.jpeg!thumb-w321-webp75",material_id:"20079982230"},
|
||||
{name:"秋2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/6kQUqeG39YJlEo1.jpeg!thumb-w321-webp75",material_id:"20079982231"},
|
||||
{name:"秋3",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/KeVUpByPvxBLldg.jpeg!thumb-w321-webp75",material_id:"20079982232"},
|
||||
{name:"秋4",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/3YDh1Dl6xY30nqD.jpeg!thumb-w321-webp75",material_id:"20079982233"},
|
||||
{name:"秋5",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/9nzUG9DeeGmn94G.jpeg!thumb-w321-webp75",material_id:"20079982234"},
|
||||
{name:"秋6",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/YkpUjYwlPanLVNg.jpeg!thumb-w321-webp75",material_id:"20079982235"},
|
||||
{name:"秋7",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/OXOHRLB3YBPbD0o.jpeg!thumb-w321-webp75",material_id:"20079982236"},
|
||||
{name:"秋8",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/dWZS0X3P2LjqJ5x.jpeg!thumb-w321-webp75",material_id:"20079982240"},
|
||||
{name:"自然灰2",thumbnail:"https://xximg1.meitudata.com/OXOH0zayv2.png!thumb-w321-webp75",material_id:"20079981854"},
|
||||
{name:"自然灰1",thumbnail:"https://xximg1.meitudata.com/mbeUyRpobN.png!thumb-w321-webp75",material_id:"20079981853"},
|
||||
{name:"色散",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/3YDhOe5eO9.png!thumb-w321-webp75",material_id:"20079981726"},
|
||||
{name:"毕业季",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/4VQt9N8Pjo.png!thumb-w321-webp75",material_id:"20079981254"},
|
||||
{name:"一键美颜质感",thumbnail:"https://xximg1.meitudata.com/x5NFQPRBWG.png!thumb-w321-webp75",material_id:"20079982147"},
|
||||
{name:"相框吸色",thumbnail:"https://xximg1.meitudata.com/2zmU1vvaPD.png!thumb-w321-webp75",material_id:"20079982037"},
|
||||
{name:"美化吸色灰度限制",thumbnail:"https://xximg1.meitudata.com/EPBcLQoodX.png!thumb-w321-webp75",material_id:"20079980037"},
|
||||
{name:"相机吸色测试",thumbnail:"https://xximg1.meitudata.com/p0LTZqZ2Wm.jpeg!thumb-w321-webp75",material_id:"20079981873"},
|
||||
{name:"吸色测试2",thumbnail:"https://xximg1.meitudata.com/9nzUyoDvEQ.png!thumb-w321-webp75",material_id:"20079981874"},
|
||||
{name:"吸色灰度限制0.5",thumbnail:"https://xximg1.meitudata.com/9nzUyYZ5LZ.png!thumb-w321-webp75",material_id:"20079981029"},
|
||||
{name:"foodie锐化",thumbnail:"https://xximg1.meitudata.com/oJWHn2klo6.png!thumb-w321-webp75",material_id:"20079982000"},
|
||||
{name:"自然风光",thumbnail:"https://xximg1.meitudata.com/N8eUq1aDk1.jpeg!thumb-w321-webp75",material_id:"20079982003"},
|
||||
{name:"室内",thumbnail:"https://xximg1.meitudata.com/LEasJPl8mE.jpeg!thumb-w321-webp75",material_id:"20079982004"},
|
||||
{name:"室外",thumbnail:"https://xximg1.meitudata.com/g5eFOyEePx.jpeg!thumb-w321-webp75",material_id:"20079982005"},
|
||||
{name:"老人",thumbnail:"https://xximg1.meitudata.com/vgzUl2EGV5.jpeg!thumb-w321-webp75",material_id:"20079982006"},
|
||||
{name:"街道复用",thumbnail:"https://xximg1.meitudata.com/QEasmNjL8x.jpeg!thumb-w321-webp75",material_id:"20079981781"},
|
||||
{name:"大师1",thumbnail:"https://xximg1.meitudata.com/wgNU30boQ4.png!thumb-w321-webp75",material_id:"20079981962"},
|
||||
{name:"大师2",thumbnail:"https://xximg1.meitudata.com/YkpU1yPmPa.png!thumb-w321-webp75",material_id:"20079981963"},
|
||||
{name:"大师3",thumbnail:"https://xximg1.meitudata.com/qRdTJOZYn8.png!thumb-w321-webp75",material_id:"20079981964"},
|
||||
{name:"大师4",thumbnail:"https://xximg1.meitudata.com/LEasJoKld4.png!thumb-w321-webp75",material_id:"20079981965"},
|
||||
{name:"大师5",thumbnail:"https://xximg1.meitudata.com/KeVUaQnzez.png!thumb-w321-webp75",material_id:"20079981966"},
|
||||
{name:"大师6",thumbnail:"https://xximg1.meitudata.com/BNGiP6vklD.png!thumb-w321-webp75",material_id:"20079981967"},
|
||||
{name:"大师7",thumbnail:"https://xximg1.meitudata.com/wgNU30boLG.png!thumb-w321-webp75",material_id:"20079981968"},
|
||||
{name:"大师8",thumbnail:"https://xximg1.meitudata.com/j4Gce54yGg.png!thumb-w321-webp75",material_id:"20079981969"},
|
||||
{name:"大师9",thumbnail:"https://xximg1.meitudata.com/g5eFO8dEYO.png!thumb-w321-webp75",material_id:"20079981970"},
|
||||
{name:"模糊相机测试",thumbnail:"https://xximg1.meitudata.com/wgNU3GgL0p.png!thumb-w321-webp75",material_id:"20079982016"},
|
||||
{name:"",thumbnail:"https://xximg1.meitudata.com/g5eFOoOWnK.png!thumb-w321-webp75",material_id:"20079981872"},
|
||||
{name:"复古",thumbnail:"https://xximg1.meitudata.com/x5NFQGlPeD.png!thumb-w321-webp75",material_id:"20079982026"},
|
||||
{name:"夜景抠图",thumbnail:"https://xximg1.meitudata.com/qRdTJOxoK4.png!thumb-w321-webp75",material_id:"20079981936"},
|
||||
{name:"我爱中国",thumbnail:"https://xximg1.meitudata.com/3YDhOJgLgp.png!thumb-w321-webp75",material_id:"20079981422"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/oJQiW3WX68vDyaW.jpeg!thumb-w321-webp75",material_id:"20079992271"},
|
||||
{name:"桃子奶油",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/lk0HjR5ealbk2Ze.jpeg!thumb-w321-webp75",material_id:"20079992275"},
|
||||
{name:"橘粉奶油",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/5JOi8ZVNnqE8w8g.jpeg!thumb-w321-webp75",material_id:"20079990090"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/DyOHJnqNb5o8LQg.jpeg!thumb-w321-webp75",material_id:"20079992277"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/y59IlX8wQXoNGEK.jpeg!thumb-w321-webp75",material_id:"20079992276"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/dWku02V3BpYDylY.jpeg!thumb-w321-webp75",material_id:"20079990081"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/p0GcOvOamLXoD3Z.jpeg!thumb-w321-webp75",material_id:"20079992273"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/6kOHqmQ3qjPoYQa.jpeg!thumb-w321-webp75",material_id:"20079992266"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/RwXHJpZKvlQK2GJ.jpeg!thumb-w321-webp75",material_id:"20079992267"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/2zVHE2XGb3d0xgv.jpeg!thumb-w321-webp75",material_id:"20079990045"},
|
||||
{name:"炫光",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/dWku0XJZxGgDLO9.jpeg!thumb-w321-webp75",material_id:"20079992229"},
|
||||
{name:"CG3",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/JdXHB6LLY8agV8O.jpeg!thumb-w321-webp75",material_id:"20079992238"},
|
||||
{name:"CG测试2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/j4QUVv66nq0P55z.jpeg!thumb-w321-webp75",material_id:"20079991111"},
|
||||
{name:"国庆挂历2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/YkVHj0oP36pmOL1.jpeg!thumb-w321-webp75",material_id:"20079999999"},
|
||||
{name:"美化国庆挂历",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/g5yIKQJdqK1aBlQ.jpeg!thumb-w321-webp75",material_id:"20079998888"},
|
||||
{name:"在逃公主",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/N8RHzY8o4oKQqEJ.jpeg!thumb-w321-webp75",material_id:"20079992200"},
|
||||
{name:"2020美颜默认",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/qR1tRvwgl5mmZDp.jpeg!thumb-w321-webp75",material_id:"20079990088"},
|
||||
{name:"复古画册",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/zq9HXROgvWQpXJp.jpeg!thumb-w321-webp75",material_id:"20079990080"},
|
||||
{name:"美食1",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/PBXUkeGKl4.jpeg!thumb-w321-webp75",material_id:"20079990060"},
|
||||
{name:"美食改",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8QYIwP5P0x.jpeg!thumb-w321-webp75",material_id:"20079990059"},
|
||||
{name:"细细闪",thumbnail:"https://xximg1.meitudata.com/XeVHPQGmWg.jpeg!thumb-w321-webp75",material_id:"20079991001"},
|
||||
{name:"细细闪2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/qR1tRvRVBLmGaQK.jpeg!thumb-w321-webp75",material_id:"20079990069"},
|
||||
{name:"新闪闪1",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/aOWsGzGNdEOkngB.jpeg!thumb-w321-webp75",material_id:"20079990068"},
|
||||
{name:"新闪闪3-2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/qR1tRvbq9BkKZZv.jpeg!thumb-w321-webp75",material_id:"20079990078"},
|
||||
{name:"新闪闪5",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/j4QUVwNX4q6LV80.jpeg!thumb-w321-webp75",material_id:"20079990077"},
|
||||
{name:"天空闪-橙",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/wgRHvqkwVNgzaQO.jpeg!thumb-w321-webp75",material_id:"20079990073"},
|
||||
{name:"新说3",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/6kOHRdweoL.jpeg!thumb-w321-webp75",material_id:"20079990057"},
|
||||
{name:"新说2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/QEXSmQ3JNP.jpeg!thumb-w321-webp75",material_id:"20079990056"},
|
||||
{name:"新说",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/nBqUo2nYVw.jpeg!thumb-w321-webp75",material_id:"20079990055"},
|
||||
{name:"少女胶片颗粒",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/EPdUL929P1.jpeg!thumb-w321-webp75",material_id:"20079990053"},
|
||||
{name:"折纸3",thumbnail:"https://xximg1.meitudata.com/j4QUeqxb8N.jpeg!thumb-w321-webp75",material_id:"20079990021"},
|
||||
{name:"折纸滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/dWkuagV42R.jpeg!thumb-w321-webp75",material_id:"20079990050"},
|
||||
{name:"温柔纹理2",thumbnail:"https://xximg1.meitudata.com/5JOiDgbOjz.jpeg!thumb-w321-webp75",material_id:"20079990003"},
|
||||
{name:"温柔纹理",thumbnail:"https://xximg1.meitudata.com/mbZHy9Kyd4.jpeg!thumb-w321-webp75",material_id:"20079990024"},
|
||||
{name:"油画新说1",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/dWkuaga464.jpeg!thumb-w321-webp75",material_id:"20079990054"},
|
||||
{name:"油画新说2",thumbnail:"https://xximg1.meitudata.com/V2jTkpeb8e.jpeg!thumb-w321-webp75",material_id:"20079990001"},
|
||||
{name:"油画新说3",thumbnail:"https://xximg1.meitudata.com/8QYIw15O85.jpeg!thumb-w321-webp75",material_id:"20079991994"},
|
||||
{name:"珍珠2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/zq9H5VqpGo.jpeg!thumb-w321-webp75",material_id:"20079990043"},
|
||||
{name:"珍珠",thumbnail:"https://xximg1.meitudata.com/dWkua4m2NL.jpeg!thumb-w321-webp75",material_id:"20079991002"},
|
||||
{name:"爱心月亮",thumbnail:"https://xximg1.meitudata.com/LEKSJEmG9L.png!thumb-w321-webp75",material_id:"20079990041"},
|
||||
{name:"星星月亮",thumbnail:"https://xximg1.meitudata.com/3YVfOV8JWX.jpeg!thumb-w321-webp75",material_id:"20079990040"},
|
||||
{name:"钢笔淡彩",thumbnail:"https://xximg1.meitudata.com/6kOHRlg2E8.jpeg!thumb-w321-webp75",material_id:"20079990039"},
|
||||
{name:"拯救废片2",thumbnail:"https://xximg1.meitudata.com/KeEHax9bao.jpeg!thumb-w321-webp75",material_id:"20079990038"},
|
||||
{name:"书本感",thumbnail:"https://xximg1.meitudata.com/WYBfmxXLVz.jpeg!thumb-w321-webp75",material_id:"20079990036"},
|
||||
{name:"拯救废片1",thumbnail:"https://xximg1.meitudata.com/dWkuaGDnaG.jpeg!thumb-w321-webp75",material_id:"20079990037"},
|
||||
{name:"夏日4",thumbnail:"https://xximg1.meitudata.com/j4QUeglDGW.jpeg!thumb-w321-webp75",material_id:"20079990035"},
|
||||
{name:"夏日2",thumbnail:"https://xximg1.meitudata.com/zq9H5obmPq.jpeg!thumb-w321-webp75",material_id:"20079990034"},
|
||||
{name:"夏日3",thumbnail:"https://xximg1.meitudata.com/lk0Hk4z4JE.jpeg!thumb-w321-webp75",material_id:"20079990033"},
|
||||
{name:"春日柔光",thumbnail:"https://xximg1.meitudata.com/oJQinkgLpN.jpeg!thumb-w321-webp75",material_id:"20079992020"},
|
||||
{name:"春日日系",thumbnail:"https://xximg1.meitudata.com/JdXHWgQ588.jpeg!thumb-w321-webp75",material_id:"20079990022"},
|
||||
{name:"2020情人节2",thumbnail:"https://xximg1.meitudata.com/p0GcZg6o2m.jpeg!thumb-w321-webp75",material_id:"20079990017"},
|
||||
{name:"11",thumbnail:"https://xximg1.meitudata.com/j4QUeR0ylz.jpeg!thumb-w321-webp75",material_id:"20079990014"},
|
||||
{name:"锐化+颗粒",thumbnail:"https://xximg1.meitudata.com/nBqUoWm5Eq.jpeg!thumb-w321-webp75",material_id:"20079990015"},
|
||||
{name:"22",thumbnail:"https://xximg1.meitudata.com/EPdULoXbK8.jpeg!thumb-w321-webp75",material_id:"20079990004"},
|
||||
{name:"2019圣诞2",thumbnail:"https://xximg1.meitudata.com/aOWsL0gy9L.jpeg!thumb-w321-webp75",material_id:"20079990008"},
|
||||
{name:"bling裸妆",thumbnail:"https://xximg1.meitudata.com/Z3Vspe2qwl.jpeg!thumb-w321-webp75",material_id:"20079991976"},
|
||||
{name:"水雾",thumbnail:"https://xximg1.meitudata.com/eqOHv8b9Jy.jpeg!thumb-w321-webp75",material_id:"20079990009"},
|
||||
{name:"泫雅柔光2",thumbnail:"https://xximg1.meitudata.com/1zVH1X80BW.jpeg!thumb-w321-webp75",material_id:"20079990000"},
|
||||
{name:"无辜妆",thumbnail:"https://xximg1.meitudata.com/8QYIw5OwzQ.jpeg!thumb-w321-webp75",material_id:"20079990020"},
|
||||
{name:"2023",thumbnail:"https://xximg1.meitudata.com/WYBfmyJ4jO.jpeg!thumb-w321-webp75",material_id:"20079992023"},
|
||||
{name:"风格妆22",thumbnail:"https://xximg1.meitudata.com/y59IbNv8ek.jpeg!thumb-w321-webp75",material_id:"20079990013"},
|
||||
{name:"吸色测试",thumbnail:"https://xximg1.meitudata.com/g5yIOn36zo.jpeg!thumb-w321-webp75",material_id:"20079991234"},
|
||||
{name:"爱国",thumbnail:"https://xximg1.meitudata.com/nBqUonb8dG.jpeg!thumb-w321-webp75",material_id:"20079991919"},
|
||||
{name:"春樱改良",thumbnail:"https://xximg1.meitudata.com/2zVH1mYp8m.jpeg!thumb-w321-webp75",material_id:"20079991858"},
|
||||
{name:"爱心阴影",thumbnail:"https://xximg1.meitudata.com/8QYIw59nPj.jpeg!thumb-w321-webp75",material_id:"20079991935"},
|
||||
{name:"无辜妆2",thumbnail:"https://xximg1.meitudata.com/LEKSJPXj2E.jpeg!thumb-w321-webp75",material_id:"20079990006"},
|
||||
{name:"1993",thumbnail:"https://xximg1.meitudata.com/vgyHlz3kOv.jpeg!thumb-w321-webp75",material_id:"20079991993"},
|
||||
{name:"皮肤质感3",thumbnail:"https://xximg1.meitudata.com/LEKSJooQb8.jpeg!thumb-w321-webp75",material_id:"20079991113"},
|
||||
{name:"皮肤质感2",thumbnail:"https://xximg1.meitudata.com/p0GcZPPXNW.jpeg!thumb-w321-webp75",material_id:"20079991112"},
|
||||
{name:"皮肤质感",thumbnail:"https://xximg1.meitudata.com/WYBfmDvxQK.jpeg!thumb-w321-webp75",material_id:"20079991884"},
|
||||
{name:"万圣2",thumbnail:"https://xximg1.meitudata.com/dWkuap6DpQ.jpeg!thumb-w321-webp75",material_id:"20079991866"},
|
||||
{name:"闪闪压缩2",thumbnail:"https://xximg1.meitudata.com/BNPTP2XB6X.jpeg!thumb-w321-webp75",material_id:"20079990030"},
|
||||
{name:"闪闪压缩",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/oJQiWKQQE3VWLKR.jpeg!thumb-w321-webp75",material_id:"20079990076"},
|
||||
{name:"复古画册加纸纹",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/QEXSyJENWDbBkna.jpeg!thumb-w321-webp75",material_id:"20079990079"},
|
||||
{name:"新闪闪2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/KeEHpDpzvPgVOqY.jpeg!thumb-w321-webp75",material_id:"20079990067"},
|
||||
{name:"新闪闪4",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/mbZHO5dyaXPe91g.jpeg!thumb-w321-webp75",material_id:"20079990072"},
|
||||
{name:"天空闪",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/bBLUYpzJY518dqa.jpeg!thumb-w321-webp75",material_id:"20079990070"},
|
||||
{name:"美食3改",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/RwXHmlPzDO.jpeg!thumb-w321-webp75",material_id:"20079990058"},
|
||||
{name:"质感胶片颗粒",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/1zVH1pkp0o.jpeg!thumb-w321-webp75",material_id:"20079990052"},
|
||||
{name:"雀斑",thumbnail:"https://xximg1.meitudata.com/bBLUvke8mb.jpeg!thumb-w321-webp75",material_id:"20079991000"},
|
||||
{name:"春日柔光1",thumbnail:"https://xximg1.meitudata.com/KeEHa9ZGYO.jpeg!thumb-w321-webp75",material_id:"20079990031"},
|
||||
{name:"灰调2",thumbnail:"https://xximg1.meitudata.com/JdXHW51qgp.jpeg!thumb-w321-webp75",material_id:"20079990002"},
|
||||
{name:"移轴虚化2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/WYBf3WkazQXvlwl.jpeg!thumb-w321-webp75",material_id:"506000008"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/6kOHqmdRWjl4BEm.jpeg!thumb-w321-webp75",material_id:"50600006"},
|
||||
{name:"微光",thumbnail:"https://xximg1.meitudata.com/KeEHa4wl8p.jpeg!thumb-w321-webp75",material_id:"20076251574"},
|
||||
{name:"微光",thumbnail:"https://xximg1.meitudata.com/eqZUvNY3YL.png!thumb-w321-webp75",material_id:"20076251567"},
|
||||
{name:"微光",thumbnail:"https://xximg1.meitudata.com/BNPTPoVbeV.jpeg!thumb-w321-webp75",material_id:"20076251575"},
|
||||
{name:"微光",thumbnail:"https://xximg1.meitudata.com/bBZcvmqk8z.png!thumb-w321-webp75",material_id:"20076251568"},
|
||||
{name:"微光",thumbnail:"https://xximg1.meitudata.com/g5yIOPJmZn.jpeg!thumb-w321-webp75",material_id:"20076251573"},
|
||||
{name:"微光",thumbnail:"https://xximg1.meitudata.com/5JeHDVNROj.png!thumb-w321-webp75",material_id:"20076251569"},
|
||||
{name:"微光",thumbnail:"https://xximg1.meitudata.com/wgNU3PJVzR.png!thumb-w321-webp75",material_id:"20076251577"},
|
||||
{name:"17.素材无人脸规则",thumbnail:"https://xxtool-release.zone1.meitudata.com/owv1PzKKkaEz.jpg!thumb-w321-webp75",material_id:"506088832"},
|
||||
{name:"22.天空分割滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/laM7B2WRZRve.jpg!thumb-w321-webp75",material_id:"506088818"},
|
||||
{name:"11.柔发效果支持",thumbnail:"https://xxtool-release.zone1.meitudata.com/L24ZJRgYjyw5.png!thumb-w321-webp75",material_id:"506088812"},
|
||||
{name:"13.3D打光",thumbnail:"https://xxtool-release.zone1.meitudata.com/owv1PzXYWoxL.png!thumb-w321-webp75",material_id:"506088810"},
|
||||
{name:"（仅日本）10.不带妆容",thumbnail:"https://xxtool-release.zone1.meitudata.com/y1B45rOXGkBW.jpeg!thumb-w321-webp75",material_id:"506088811"},
|
||||
{name:"12.妆容滤镜层级控制1",thumbnail:"https://xxtool-release.zone1.meitudata.com/e4xlJA94A6Mp.png!thumb-w321-webp75",material_id:"506088831"},
|
||||
{name:"6.强制曝光滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/kOo1k0DW9drL.jpg!thumb-w321-webp75",material_id:"506088835"},
|
||||
{name:"5.男生、女生滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/OmB4J1oagj0M.jpg!thumb-w321-webp75",material_id:"506088815"},
|
||||
{name:"4.带有动效滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/V06dJl3051WA.jpg!thumb-w321-webp75",material_id:"506088823"},
|
||||
{name:"12.妆容滤镜层级控制",thumbnail:"https://xxtool-release.zone1.meitudata.com/kOo1k0Nva6LL.png!thumb-w321-webp75",material_id:"506088816"},
|
||||
{name:"3.妆容滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/OmB4J13jO5Dg.jpg!thumb-w321-webp75",material_id:"506088822"},
|
||||
{name:"2.bling滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/e4xlJA9WZJoy.jpg!thumb-w321-webp75",material_id:"506088834"},
|
||||
{name:"1.随机滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/GYZza015D1LE.jpg!thumb-w321-webp75",material_id:"506088824"},
|
||||
{name:"19.素材多比例滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/B6MlzDxYm10N.jpg!thumb-w321-webp75",material_id:"506088821"},
|
||||
{name:"16.美食手绘效果",thumbnail:"https://xxtool-release.zone1.meitudata.com/4JpRm4Em6Y7J.jpg!thumb-w321-webp75",material_id:"506088833"},
|
||||
{name:"16.美食手绘效果2",thumbnail:"https://xxtool-release.zone1.meitudata.com/3zVRNe69zMKM.jpg!thumb-w321-webp75",material_id:"506088829"},
|
||||
{name:"23.妆容滤镜",thumbnail:"https://xxtool-release.zone1.meitudata.com/L24ZJRgjNYWe.jpg!thumb-w321-webp75",material_id:"506088814"},
|
||||
{name:"18.径向色散效果",thumbnail:"https://xxtool-release.zone1.meitudata.com/y1B45rOEZeMP.jpg!thumb-w321-webp75",material_id:"506088813"},
|
||||
{name:"14.新bling效果",thumbnail:"https://xxtool-release.zone1.meitudata.com/y1B45rp8Ky7z.png!thumb-w321-webp75",material_id:"506088837"},
|
||||
{name:"绵绵",thumbnail:"https://xximg1.meitudata.com/EPdUL42bLj.jpeg!thumb-w321-webp75",material_id:"20076412020"},
|
||||
{name:"清澈",thumbnail:"https://xximg1.meitudata.com/nBqUo6pveO.jpeg!thumb-w321-webp75",material_id:"20076412057"},
|
||||
{name:"阴雨",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/N3OFzPJbwBgXG6z.jpeg!thumb-w321-webp75",material_id:"506002342"},
|
||||
{name:"ar胶片",thumbnail:"https://xximg1.meitudata.com/lkjUk85p5G.png!thumb-w321-webp75",material_id:"20108891781"},
|
||||
{name:"INS",thumbnail:"https://xximg1.meitudata.com/bBLUv93q2O.jpeg!thumb-w321-webp75",material_id:"20108890012"},
|
||||
{name:"高级灰",thumbnail:"https://xximg1.meitudata.com/jzOIeJz1mK.png!thumb-w321-webp75",material_id:"20108891777"},
|
||||
{name:"夜景2",thumbnail:"https://xximg1.meitudata.com/1zVH1nl3nL.jpeg!thumb-w321-webp75",material_id:"20108890014"},
|
||||
{name:"藕色颗粒",thumbnail:"https://xximg1.meitudata.com/V2jTkoQgO6.jpeg!thumb-w321-webp75",material_id:"20108890015"},
|
||||
{name:"胶片1",thumbnail:"https://xximg1.meitudata.com/KnJSa8gWE4.png!thumb-w321-webp75",material_id:"20108891783"},
|
||||
{name:"fuji",thumbnail:"https://xximg1.meitudata.com/qR1tJbvd5d.jpeg!thumb-w321-webp75",material_id:"20108890010"},
|
||||
{name:"咸咸测试",thumbnail:"https://xximg1.meitudata.com/EPdULqxXOR.jpeg!thumb-w321-webp75",material_id:"20108899999"},
|
||||
{name:"古风藕色",thumbnail:"https://xximg1.meitudata.com/JdXHWjK4o9.jpeg!thumb-w321-webp75",material_id:"20108891775"},
|
||||
{name:"natural1",thumbnail:"https://xximg1.meitudata.com/zq9H5ekDQv.jpeg!thumb-w321-webp75",material_id:"20108891682"},
|
||||
{name:"受伤妆",thumbnail:"https://xximg1.meitudata.com/nBqUoEKnoD.jpeg!thumb-w321-webp75",material_id:"20108891787"},
|
||||
{name:"natural2",thumbnail:"https://xximg1.meitudata.com/j4QUedKlNv.jpeg!thumb-w321-webp75",material_id:"20108891848"},
|
||||
{name:"描边2",thumbnail:"https://xximg1.meitudata.com/4VOC9QOZRd.jpeg!thumb-w321-webp75",material_id:"20108891835"},
|
||||
{name:"natural3",thumbnail:"https://xximg1.meitudata.com/9nOHy6gJOb.jpeg!thumb-w321-webp75",material_id:"20108890019"},
|
||||
{name:"宝丽来1",thumbnail:"https://xximg1.meitudata.com/JdXHW5qp88.jpeg!thumb-w321-webp75",material_id:"20108891840"},
|
||||
{name:"日系复古",thumbnail:"https://xximg1.meitudata.com/6zZIRWym8L.png!thumb-w321-webp75",material_id:"20108891846"},
|
||||
{name:"暗调测试",thumbnail:"https://xximg1.meitudata.com/YkVH1pNvLW.jpeg!thumb-w321-webp75",material_id:"20108897777"},
|
||||
{name:"宝丽来2",thumbnail:"https://xximg1.meitudata.com/6kOHRWaqeJ.jpeg!thumb-w321-webp75",material_id:"20108891841"},
|
||||
{name:"海外柔光",thumbnail:"https://xximg1.meitudata.com/p0GcZyqa5z.jpeg!thumb-w321-webp75",material_id:"20108891801"},
|
||||
{name:"绯红",thumbnail:"https://xximg1.meitudata.com/wgNU340lGP.png!thumb-w321-webp75",material_id:"20108891770"},
|
||||
{name:"霜色",thumbnail:"https://xximg1.meitudata.com/lkjUkL6GXp.png!thumb-w321-webp75",material_id:"20108891769"},
|
||||
{name:"梅幸茶",thumbnail:"https://xximg1.meitudata.com/GPWcPEw1Wj.png!thumb-w321-webp75",material_id:"20108891771"},
|
||||
{name:"水墨",thumbnail:"https://xximg1.meitudata.com/9nzUyjane8.png!thumb-w321-webp75",material_id:"20108891772"},
|
||||
{name:"1780",thumbnail:"https://xximg1.meitudata.com/vgyHlJoLg3.jpeg!thumb-w321-webp75",material_id:"20108891780"},
|
||||
{name:"描边3",thumbnail:"https://xximg1.meitudata.com/nBqUoz0g3y.jpeg!thumb-w321-webp75",material_id:"20108891837"},
|
||||
{name:"描边4",thumbnail:"https://xximg1.meitudata.com/1zVH1XvE4z.jpeg!thumb-w321-webp75",material_id:"20108891838"},
|
||||
{name:"描边1",thumbnail:"https://xximg1.meitudata.com/WYBfmdWOoQ.jpeg!thumb-w321-webp75",material_id:"20108891834"},
|
||||
{name:"青空",thumbnail:"https://xximg1.meitudata.com/8OkUwBympV.jpeg!thumb-w321-webp75",material_id:"20106311844"},
|
||||
{name:"暮霭",thumbnail:"https://xximg1.meitudata.com/9QktyzB0nW.jpeg!thumb-w321-webp75",material_id:"20106311843"},
|
||||
{name:"糖果",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/qp4IReJkzbEZD41.jpeg!thumb-w321-webp75",material_id:"506002348"},
|
||||
{name:"苏打",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/nplIo2XOm6.jpeg!thumb-w321-webp75",material_id:"20096442168"},
|
||||
{name:"淡奶油",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/PVQIkeOx5L.jpeg!thumb-w321-webp75",material_id:"20096442169"},
|
||||
{name:"温柔",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/N8RHqBW392.jpeg!thumb-w321-webp75",material_id:"20096442166"},
|
||||
{name:"珠光",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/nBqUo2X8lP.jpeg!thumb-w321-webp75",material_id:"20096442165"},
|
||||
{name:"丝绸",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/BNPTPWpNRL.jpeg!thumb-w321-webp75",material_id:"20096442167"},
|
||||
{name:"黑白",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/OXOHRJnJ5vOXBpY.jpeg!thumb-w321-webp75",material_id:"20096081095"},
|
||||
{name:"暗房",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/eqZU6dBdw3EY3d1.jpeg!thumb-w321-webp75",material_id:"506002307"},
|
||||
{name:"低反差",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/4VQtnwmwpBL5wDN.jpeg!thumb-w321-webp75",material_id:"506002309"},
|
||||
{name:"森山",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/1zXUmEWE4DWbQW2.jpeg!thumb-w321-webp75",material_id:"506002313"},
|
||||
{name:"Instant",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/qRdTR9w9ygLqdeb.jpeg!thumb-w321-webp75",material_id:"506002310"},
|
||||
{name:"范戴克",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/BNGiqXNXZkljKlb.jpeg!thumb-w321-webp75",material_id:"506002312"},
|
||||
{name:"圣诞",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/PVQIdno4bnlEEOq.jpeg!thumb-w321-webp75",material_id:"20076452266"},
|
||||
{name:"小梦境",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/2zVHEkJKPj3q5nz.jpeg!thumb-w321-webp75",material_id:"20076452193"},
|
||||
{name:"在逃公主",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/lk0HjoJRKlq9E0Z.jpeg!thumb-w321-webp75",material_id:"20076452200"},
|
||||
{name:"璀璨",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/DyOHJWjXJGk6Ojl.jpeg!thumb-w321-webp75",material_id:"20076452189"},
|
||||
{name:"星河",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/LEKSjB8pREZExxZ.jpeg!thumb-w321-webp75",material_id:"20076452180"},
|
||||
{name:"星河II",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/g5yIKQq99XvKZQP.jpeg!thumb-w321-webp75",material_id:"20076452181"},
|
||||
{name:"星河III",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/oJQiWKVVJNXe3PB.jpeg!thumb-w321-webp75",material_id:"20076452184"},
|
||||
{name:"年味",thumbnail:"https://xximg1.meitudata.com/EVvILvqjRQ.jpeg!thumb-w321-webp75",material_id:"20076352017"},
|
||||
{name:"白日梦 ",thumbnail:"https://xximg1.meitudata.com/vgyHlzq34j.jpeg!thumb-w321-webp75",material_id:"20076351989"},
|
||||
{name:"白桃",thumbnail:"https://xximg1.meitudata.com/g5eFOnEgJj.png!thumb-w321-webp75",material_id:"20076351888"},
|
||||
{name:"Norge",thumbnail:"https://xximg1.meitudata.com/9nOHylkdjn.jpeg!thumb-w321-webp75",material_id:"2007635584"},
|
||||
{name:"冬至",thumbnail:"https://xximg1.meitudata.com/zqOU5K9Q5m.png!thumb-w321-webp75",material_id:"20076351887"},
|
||||
{name:"红杉",thumbnail:"https://xximg1.meitudata.com/QEasmkjv09.png!thumb-w321-webp75",material_id:"20076351981"},
|
||||
{name:"暖暖 ",thumbnail:"https://xximg1.meitudata.com/y59Ib9kQZw.jpeg!thumb-w321-webp75",material_id:"20076351988"},
|
||||
{name:"神仙奶油光",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/XRLI50zwLEBpQ19.jpeg!thumb-w321-webp75",material_id:"20096472176"},
|
||||
{name:"神仙奶油光Ⅱ",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/PVQIdB3VbL63GQN.jpeg!thumb-w321-webp75",material_id:"20096472177"},
|
||||
{name:"法式油画",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/99ETGwRbEnKn9qd.jpeg!thumb-w321-webp75",material_id:"20096472178"},
|
||||
{name:"法式油画Ⅱ",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/wkQsvqJNVn9GaaP.jpeg!thumb-w321-webp75",material_id:"20096472179"},
|
||||
{name:"曼哈顿大桥",thumbnail:"https://xximg1.meitudata.com/bBLUvjadBB.jpeg!thumb-w321-webp75",material_id:"20106301861"},
|
||||
{name:"维多利亚港",thumbnail:"https://xximg1.meitudata.com/wgRH3jVEDg.jpeg!thumb-w321-webp75",material_id:"20106301862"},
|
||||
{name:"新宿",thumbnail:"https://xximg1.meitudata.com/x5eIQyn1bp.jpeg!thumb-w321-webp75",material_id:"20106301935"},
|
||||
{name:"那不勒斯",thumbnail:"https://xximg1.meitudata.com/zqOU5LPDwe.png!thumb-w321-webp75",material_id:"20106301936"},
|
||||
{name:"赛博朋克",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/ykGslXOBVOZ1wZm.jpeg!thumb-w321-webp75",material_id:"20106302217"},
|
||||
{name:"盐系",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/29gtLmJEWLAadDk.jpeg!thumb-w321-webp75",material_id:"20096522258"},
|
||||
{name:"29",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/wOXiNM4O8Jxyv7E.jpeg!thumb-w321-webp75",material_id:"506030029"},
|
||||
{name:"28",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/jkEIPyplzRPYXmP.jpeg!thumb-w321-webp75",material_id:"506030028"},
|
||||
{name:"27",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/JgpCWo3NL2G81JZ.jpeg!thumb-w321-webp75",material_id:"506030027"},
|
||||
{name:"26",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/DpWhZ42RzkXpDgW.jpeg!thumb-w321-webp75",material_id:"5060230026"},
|
||||
{name:"25",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/Ng9CWAVaM342ERY.jpeg!thumb-w321-webp75",material_id:"506030025"},
|
||||
{name:"24",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/3MLhOxa9x2m49Rp.jpeg!thumb-w321-webp75",material_id:"506030024"},
|
||||
{name:"23",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/Ng9CWAVy999Ea27.jpeg!thumb-w321-webp75",material_id:"506030023"},
|
||||
{name:"22",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/mjkuw39egW2Lv9V.jpeg!thumb-w321-webp75",material_id:"506030022"},
|
||||
{name:"21",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/9L1IrA1E6l7799X.jpeg!thumb-w321-webp75",material_id:"506030021"},
|
||||
{name:"20",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/rOwi0AkzJo210E5.jpeg!thumb-w321-webp75",material_id:"506030020"},
|
||||
{name:"19",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/ed7IAoW6mr4OVwl.jpeg!thumb-w321-webp75",material_id:"506030019"},
|
||||
{name:"18",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/3MLhOx2A2R5GJom.jpeg!thumb-w321-webp75",material_id:"506030018"},
|
||||
{name:"17",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/DpWhZ4mE9OZYEv2.jpeg!thumb-w321-webp75",material_id:"506030017"},
|
||||
{name:"16",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/lK4H8LpVG7o8ZWo.jpeg!thumb-w321-webp75",material_id:"506030016"},
|
||||
{name:"15",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/JgpCWoverVMGlGE.jpeg!thumb-w321-webp75",material_id:"506030015"},
|
||||
{name:"14",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/rOwi0Akmj2Wrg8e.jpeg!thumb-w321-webp75",material_id:"506030014"},
|
||||
{name:"13",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/ZWdUX61ERRREYx7.jpeg!thumb-w321-webp75",material_id:"506030013"},
|
||||
{name:"12",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/Ng9CWAdDvZDZWN0.jpeg!thumb-w321-webp75",material_id:"506030012"},
|
||||
{name:"10",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/5O0iJdZB9VKpZYK.jpeg!thumb-w321-webp75",material_id:"506030006"},
|
||||
{name:"9",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/AY4T4jpeo29dAJY.jpeg!thumb-w321-webp75",material_id:"506030005"},
|
||||
{name:"8",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/EZNHdk171m9Z1Zp.jpeg!thumb-w321-webp75",material_id:"506030004"},
|
||||
{name:"7",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/ed7IAorRPGr2DV1.jpeg!thumb-w321-webp75",material_id:"506030003"},
|
||||
{name:"测试红点6",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/wOXiNMwZDXGyaOW.jpeg!thumb-w321-webp75",material_id:"506030002"},
|
||||
{name:"测试红点5",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/9L1IrAz4yYjKLOp.jpeg!thumb-w321-webp75",material_id:"506030001"},
|
||||
{name:"测试红点4",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/EZNHdk1owgyDp9Z.jpeg!thumb-w321-webp75",material_id:"5060238998"},
|
||||
{name:"测试红点3",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/3MLhOxDGxyVLwmV.jpeg!thumb-w321-webp75",material_id:"5060238997"},
|
||||
{name:"测试红点2",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/jkEIPyVeNwvW4X8.jpeg!thumb-w321-webp75",material_id:"5060238996"},
|
||||
{name:"测试红点",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/3MLhOxDGZNlxerJ.jpeg!thumb-w321-webp75",material_id:"5060238995"},
|
||||
{name:"123",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/8LxIzOLaGM06Ekx.jpeg!thumb-w321-webp75",material_id:"5060238991"},
|
||||
{name:"小草3",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/09mIW9BGz4DdNPK.jpeg!thumb-w321-webp75",material_id:"5060238990"},
|
||||
{name:"小草2",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/wOXiNMPBxwoymBv.jpeg!thumb-w321-webp75",material_id:"5060238989"},
|
||||
{name:"小草",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/rOwi0AO9BdZzzkv.jpeg!thumb-w321-webp75",material_id:"5060238988"},
|
||||
{name:"星星1",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/71zSrY2veyMDEaE.jpeg!thumb-w321-webp75",material_id:"506010255"},
|
||||
{name:"小树1",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/4AVSv70z5YzveBy.jpeg!thumb-w321-webp75",material_id:"506010256"},
|
||||
{name:"小花4",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/G5wUz1B4zNpRE0P.jpeg!thumb-w321-webp75",material_id:"506010254"},
|
||||
{name:"31",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/Kg2CJr4d5PKRP4p.jpeg!thumb-w321-webp75",material_id:"506030031"},
|
||||
{name:"西西里",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/yNmTl3VBD1Nz5yE.jpeg!thumb-w321-webp75",material_id:"506002337"},
|
||||
{name:"尼斯",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/5JeH8E3e6Vvq8YY.jpeg!thumb-w321-webp75",material_id:"506002331"},
|
||||
{name:"布达佩斯",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/lkjUjRxbeV2moG0.jpeg!thumb-w321-webp75",material_id:"20096082224"},
|
||||
{name:"月升",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/qRdTRadQlQanwQa.jpeg!thumb-w321-webp75",material_id:"20096082225"},
|
||||
{name:"聚会",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/5JeH8ZOg14O3Jq6.jpeg!thumb-w321-webp75",material_id:"20096082226"},
|
||||
{name:"法兰西",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8QzFJz90eZ3lExp.jpeg!thumb-w321-webp75",material_id:"20096082227"},
|
||||
{name:"油画",thumbnail:"https://xximg1.meitudata.com/BNPTPRjbyl.jpeg!thumb-w321-webp75",material_id:"20096082032"},
|
||||
{name:"油画Ⅱ",thumbnail:"https://xximg1.meitudata.com/8QYIw41QVq.jpeg!thumb-w321-webp75",material_id:"20096082033"},
|
||||
{name:"安东尼亚",thumbnail:"https://xximg1.meitudata.com/2LqS1vmqv0.png!thumb-w321-webp75",material_id:"20096082038"},
|
||||
{name:"情人节限定",thumbnail:"https://xximg1.meitudata.com/8QYIwbzm81.jpeg!thumb-w321-webp75",material_id:"20096082019"},
|
||||
{name:"勒芒",thumbnail:"https://xximg1.meitudata.com/ndzuolR3v9.jpeg!thumb-w321-webp75",material_id:"20096081869"},
|
||||
{name:"电影",thumbnail:"https://xximg1.meitudata.com/PBXUkm2yq5.jpeg!thumb-w321-webp75",material_id:"20096081274"},
|
||||
{name:"1980",thumbnail:"http://xximg2.meitudata.com/LEKSJx0N8y.jpeg!thumb-w321-webp75",material_id:"20096081108"},
|
||||
{name:"电影",thumbnail:"http://xximg2.meitudata.com/6kOHRa1OpD.jpeg!thumb-w321-webp75",material_id:"20096081253"},
|
||||
{name:"中环码头",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/496TnZaRxddxonY.jpeg!thumb-w321-webp75",material_id:"2009608530"},
|
||||
{name:"显影",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8QYIJLL6NE94K2l.jpeg!thumb-w321-webp75",material_id:"20086391964"},
|
||||
{name:"焦点",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8QYIJLL6o5PVGyv.jpeg!thumb-w321-webp75",material_id:"20086391965"},
|
||||
{name:"扫街",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/5JOi8ooNJ25wpg2.jpeg!thumb-w321-webp75",material_id:"20086391963"},
|
||||
{name:"Photog",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/OX8iREk4LJ3qgad.jpeg!thumb-w321-webp75",material_id:"20086391968"},
|
||||
{name:"超焦距",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/5JOi8ZQeZkvzQQD.jpeg!thumb-w321-webp75",material_id:"20086391970"},
|
||||
{name:"影调",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/XeVH5bx1bz4NVdk.jpeg!thumb-w321-webp75",material_id:"20086391967"},
|
||||
{name:"名称一",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/MKosgAWo5VKpo9Z.jpeg!thumb-w321-webp75",material_id:"50600999"},
|
||||
{name:"修改测试",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/69MiA9VxKdkzjWR.png!thumb-w321-webp75",material_id:"50600229"},
|
||||
{name:"有门槛的我",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/P98i3gdgDw3Rmx5.png!thumb-w321-webp75",material_id:"506093422"},
|
||||
{name:"222嗯嗯1",thumbnail:"https://stage.meitudata.com/public/creator/ed70a3c696c8e7b.jpg!thumb-w321-webp75",material_id:"50693244"},
|
||||
{name:"抠图批量拼图",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/pA2S9lvNpMY4X3N.jpeg!thumb-w321-webp75",material_id:"506002368"},
|
||||
{name:"滤镜流程11",thumbnail:"https://material-center-pre.meitudata.com/material/image/6194a57b5b9ef7678.jpg!thumb-w321-webp75",material_id:"506017292"},
|
||||
{name:"月辉",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/wOXiBYpWgxA7ej5.jpeg!thumb-w321-webp75",material_id:"5060112313"},
|
||||
{name:"旧-美食手绘1",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/0lZCW9BrDgMroLL.jpeg!thumb-w321-webp75",material_id:"5060002001"},
|
||||
{name:"hsxTest11.8",thumbnail:"https://material-center-pre.meitudata.com/material/image/6189f29b48f165954.jpg!thumb-w321-webp75",material_id:"506530963"},
|
||||
{name:"GT G",thumbnail:"http://xximg2.meitudata.com/Z9DCJpkB2l.jpeg!thumb-w321-webp75",material_id:"20085081215"},
|
||||
{name:"自然",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/j4QUVvP9GPkJ4n3.jpeg!thumb-w321-webp75",material_id:"20076051317"},
|
||||
{name:"自然",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/5JOi8o1nKlqXmb2.jpeg!thumb-w321-webp75",material_id:"20076051233"},
|
||||
{name:"Room",thumbnail:"https://xximg1.meitudata.com/WYphm4QnOx.jpeg!thumb-w321-webp75",material_id:"20076052148"},
|
||||
{name:"模糊",thumbnail:"https://xximg1.meitudata.com/qR1tJmaVZg.jpeg!thumb-w321-webp75",material_id:"20076052016"},
|
||||
{name:"追光",thumbnail:"https://xximg1.meitudata.com/mbZHyl6E8Y.jpeg!thumb-w321-webp75",material_id:"20076051714"},
|
||||
{name:"春樱",thumbnail:"https://xximg1.meitudata.com/OX8i0kV1vG.jpeg!thumb-w321-webp75",material_id:"20076051634"},
|
||||
{name:"夏橙",thumbnail:"https://xximg1.meitudata.com/YkVH1doZzv.jpeg!thumb-w321-webp75",material_id:"20076051635"},
|
||||
{name:"梨花白",thumbnail:"https://xximg1.meitudata.com/bBLUvgJmoK.jpeg!thumb-w321-webp75",material_id:"20076051633"},
|
||||
{name:"青柠",thumbnail:"https://xximg1.meitudata.com/gn9SOPYgQ6.jpeg!thumb-w321-webp75",material_id:"20076051733"},
|
||||
{name:"西柚",thumbnail:"https://xximg1.meitudata.com/WXgfmKYZJv.jpeg!thumb-w321-webp75",material_id:"20076051628"},
|
||||
{name:"恋人未满",thumbnail:"https://xximg1.meitudata.com/3YVfO0zBXJ.jpeg!thumb-w321-webp75",material_id:"20076051075"},
|
||||
{name:"春樱",thumbnail:"https://xximg1.meitudata.com/k5DIOxgJpN.jpeg!thumb-w321-webp75",material_id:"20076291634"},
|
||||
{name:"自然",thumbnail:"https://xximg1.meitudata.com/nBqUoGPX5Q.jpeg!thumb-w321-webp75",material_id:"20076051907"},
|
||||
{name:"Forest",thumbnail:"https://xximg1.meitudata.com/V2jTkoYa96.jpeg!thumb-w321-webp75",material_id:"20106191835"},
|
||||
{name:"高级灰Ⅱ",thumbnail:"https://xximg1.meitudata.com/LEKSJO5x8V.jpeg!thumb-w321-webp75",material_id:"20076051853"},
|
||||
{name:"晴空",thumbnail:"https://xximg1.meitudata.com/LEKSJO5VaL.jpeg!thumb-w321-webp75",material_id:"20076052027"},
|
||||
{name:"白兔糖",thumbnail:"https://xximg1.meitudata.com/k5DIOjzV9d.jpeg!thumb-w321-webp75",material_id:"2007605675"},
|
||||
{name:"测",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/zwdte8R2e5KMMmm.jpeg!thumb-w321-webp75",material_id:"506000000"},
|
||||
{name:"素颜",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/DyOHJNKyxWGbpeg.jpeg!thumb-w321-webp75",material_id:"20076052222"},
|
||||
{name:"奶杏",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/3YVf1DOlq5jVlLe.jpeg!thumb-w321-webp75",material_id:"20076052221"},
|
||||
{name:"蜜桃",thumbnail:"https://xximg1.meitudata.com/9QktygQgDn.jpeg!thumb-w321-webp75",material_id:"20076291732"},
|
||||
{name:"青柠",thumbnail:"https://xximg1.meitudata.com/edzuvqDqwJ.jpeg!thumb-w321-webp75",material_id:"20076291733"},
|
||||
{name:"西柚",thumbnail:"https://xximg1.meitudata.com/kGVuOxgxm5.jpeg!thumb-w321-webp75",material_id:"20076291628"},
|
||||
{name:"牛油果",thumbnail:"https://xximg1.meitudata.com/1zXU1zyp3V.jpeg!thumb-w321-webp75",material_id:"20076292053"},
|
||||
{name:"胶片字体1",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/wkQsv9BqOlk01j6.jpeg!thumb-w321-webp75",material_id:"506001241"},
|
||||
{name:"503cw",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/YadfjNxP2ng3b0v.jpeg!thumb-w321-webp75",material_id:"506001236"},
|
||||
{name:"爱心",thumbnail:"https://xximg1.meitudata.com/8D5Fwm9VLE.jpeg!thumb-w321-webp75",material_id:"20079971111"},
|
||||
{name:"",thumbnail:"https://xximg1.meitudata.com/xkbsQOl9bX.jpeg!thumb-w321-webp75",material_id:"20079971995"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/YadfjWvZDeK8Pjb.jpeg!thumb-w321-webp75",material_id:"200799700078"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/54Kf8ZNP6YkBdnZ.jpeg!thumb-w321-webp75",material_id:"200799700077"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/20dfEzWa33vvbEJ.jpeg!thumb-w321-webp75",material_id:"200799700076"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/L3xFj5Y1l5qyO8k.jpeg!thumb-w321-webp75",material_id:"200799700075"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/qp4IRaqOvg208Vx.jpeg!thumb-w321-webp75",material_id:"200799700074"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/opkIW3BY6gJ6DP8.jpeg!thumb-w321-webp75",material_id:"200799700073"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/39nT1zN9v2p5BBy.jpeg!thumb-w321-webp75",material_id:"200799700072"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/Kz3fp1lekbGJY52.jpeg!thumb-w321-webp75",material_id:"200799700071"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/20dfEz9V3L935WD.jpeg!thumb-w321-webp75",material_id:"200799700070"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/R3GFJpZEd0pD5xY.jpeg!thumb-w321-webp75",material_id:"200799700069"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/54Kf8o3GlPJgW3Q.jpeg!thumb-w321-webp75",material_id:"200799700067"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/DaofJN9Gzxd8O5a.jpeg!thumb-w321-webp75",material_id:"200799700063"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/qp4IRN9PaZ1Penl.jpeg!thumb-w321-webp75",material_id:"200799700055"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/vkRsK6OxQ60gkJR.jpeg!thumb-w321-webp75",material_id:"200799700045"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/1ZLIm5ExEmVpobj.jpeg!thumb-w321-webp75",material_id:"200799700053"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/wkQsvL9y9XX1ZL8.jpeg!thumb-w321-webp75",material_id:"200799700054"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/BmDFqnXBXod6LKx.jpeg!thumb-w321-webp75",material_id:"200799700061"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/39nT1DmnGNQp8Gy.jpeg!thumb-w321-webp75",material_id:"200799700060"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/k2ou2a6aPWDR5nX.jpeg!thumb-w321-webp75",material_id:"200799700058"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/Q3bFyBOB1DxY6Dx.jpeg!thumb-w321-webp75",material_id:"200799700059"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/O3RFRL3v0Jpd0Wk.jpeg!thumb-w321-webp75",material_id:"200799700057"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/BmDFqnWadYGzXxP.jpeg!thumb-w321-webp75",material_id:"20079970049"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/Q3bFyBQ8JLx2Wvb.jpeg!thumb-w321-webp75",material_id:"20079970051"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/vkRsK6eLxeGj9w8.jpeg!thumb-w321-webp75",material_id:"200799700041"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/gkmsKBGp36w8wEO.jpeg!thumb-w321-webp75",material_id:"200799700056"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/ee9h6Qk4Y1wJpoY.jpeg!thumb-w321-webp75",material_id:"200799700047"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/jeyhVvLBDqo64yy.jpeg!thumb-w321-webp75",material_id:"20079970050"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/DaofJNY4pKnpQxa.jpeg!thumb-w321-webp75",material_id:"20079970053"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/99ETG9z6NzjmBwQ.jpeg!thumb-w321-webp75",material_id:"200799700046"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/ee9h6QD4PGmGBGa.jpeg!thumb-w321-webp75",material_id:"200799700042"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/BmDFqnwGbGvXPq3.png!thumb-w321-webp75",material_id:"200799700038"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/VwJigjRRPoRz8Xl.png!thumb-w321-webp75",material_id:"200799700039"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/54Kf8BmB9dyqY2k.jpeg!thumb-w321-webp75",material_id:"200799700027"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/ze1hXRywlnq18zj.jpeg!thumb-w321-webp75",material_id:"200799700025"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/xkbs1eVvOEB46wE.jpeg!thumb-w321-webp75",material_id:"200799700032"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/bxgsY85V4j5W3PY.jpeg!thumb-w321-webp75",material_id:"200799700034"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/54Kf8oxaX5kVpN6.jpeg!thumb-w321-webp75",material_id:"200799700033"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/EVvIj5VjGJyBNLO.png!thumb-w321-webp75",material_id:"200799700031"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/Q3bFyJ2yqXlmJJz.png!thumb-w321-webp75",material_id:"200799700030"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/1ZLImgemPooxWqv.jpeg!thumb-w321-webp75",material_id:"200799700024"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8D5FJjdJmO4VRbg.jpeg!thumb-w321-webp75",material_id:"200799700029"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/EVvIj595ekZpN3X.jpeg!thumb-w321-webp75",material_id:"200799700023"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/vkRsKg3OONyzZLb.png!thumb-w321-webp75",material_id:"200799700021"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/496TndEvWqJynwo.png!thumb-w321-webp75",material_id:"200799700019"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8D5FJjkBmkNlpkd.png!thumb-w321-webp75",material_id:"200799700020"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/WPWF3ODzRYPzo3K.jpeg!thumb-w321-webp75",material_id:"200799700018"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/PVQIdBDb3b998XB.jpeg!thumb-w321-webp75",material_id:"200799700017"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/99ETGwpo0Lv8dEZ.jpeg!thumb-w321-webp75",material_id:"200799700008"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/gkmsKQKGPVm3j8E.jpeg!thumb-w321-webp75",material_id:"200799700012"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8D5FJjJJ310zYBQ.jpeg!thumb-w321-webp75",material_id:"200799700010"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/lpvIjojjEYRbwWL.jpeg!thumb-w321-webp75",material_id:"200799700011"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/xkbs1e1ee83wlP0.jpeg!thumb-w321-webp75",material_id:"200799700014"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/DaofJWJnxRe3W09.jpeg!thumb-w321-webp75",material_id:"200799700015"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/XRLI50Bdlg9joZ2.png!thumb-w321-webp75",material_id:"200799700009"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/99ETGwkej4aqVjo.png!thumb-w321-webp75",material_id:"200799700016"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/VwJikyzE29.png!thumb-w321-webp75",material_id:"200799700000"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/ze1h5O9oKb.jpeg!thumb-w321-webp75",material_id:"200799700002"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/a3wFLXLnx2.jpeg!thumb-w321-webp75",material_id:"200799700001"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/6DqFRdykvn.png!thumb-w321-webp75",material_id:"200799700004"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/1ZLI1pjZgP.jpeg!thumb-w321-webp75",material_id:"200799700003"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/opkIn0ZXgW.jpeg!thumb-w321-webp75",material_id:"200799700006"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/ze1h5VwNLD.jpeg!thumb-w321-webp75",material_id:"20079976666"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/mlahykPGYd.jpeg!thumb-w321-webp75",material_id:"2007997666"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/XRLIPQX4qj.jpeg!thumb-w321-webp75",material_id:"20079972"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/k2ouOWwP2b.jpeg!thumb-w321-webp75",material_id:"20079971"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/xkbsQP2W5z.jpeg!thumb-w321-webp75",material_id:"20079971234"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/EVvIjl5B2q1P3Ld.jpeg!thumb-w321-webp75",material_id:"200799700062"},
|
||||
{name:"新年静物",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8D5FJzenN2v99KG.jpeg!thumb-w321-webp75",material_id:"200799700079"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/20dfEzd1lndjOwg.jpeg!thumb-w321-webp75",material_id:"20079972282"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/nplIyLnnEm9o41W.png!thumb-w321-webp75",material_id:"200799700022"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/ze1h5ONoeg.png!thumb-w321-webp75",material_id:"200799700007"},
|
||||
{name:"原生",thumbnail:"https://xximg1.meitudata.com/XeVHPQpbgR.jpeg!thumb-w321-webp75",material_id:"20079930000"},
|
||||
{name:"减龄2",thumbnail:"https://xximg1.meitudata.com/GPoUPW5m8n.jpeg!thumb-w321-webp75",material_id:"20079930003"},
|
||||
{name:"质感",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/nBJcyLgw0QZmvB2.png!thumb-w321-webp75",material_id:"20079932147"},
|
||||
{name:"眼睑下至",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/1zVH1xKebW.jpeg!thumb-w321-webp75",material_id:"20079930007"},
|
||||
{name:"原生2",thumbnail:"https://xximg1.meitudata.com/aOWsLZ14vp.jpeg!thumb-w321-webp75",material_id:"20079930001"},
|
||||
{name:"减龄2优化",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/5JOiDRnL9l.jpeg!thumb-w321-webp75",material_id:"20079930070"},
|
||||
{name:"DIOR",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/5JOi8BVv09mRyGK.jpeg!thumb-w321-webp75",material_id:"20079930075"},
|
||||
{name:"",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/N3OFqdNzda.jpeg!thumb-w321-webp75",material_id:"20079932157"},
|
||||
{name:"bling",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/9nzUy0eQGq.png!thumb-w321-webp75",material_id:"20079932158"},
|
||||
{name:"色散光",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/JdaUWkbq92.png!thumb-w321-webp75",material_id:"20079932154"},
|
||||
{name:"闪光夏日",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/bBLUvkadVZ.jpeg!thumb-w321-webp75",material_id:"20079932153"},
|
||||
{name:"闪光女团",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/qR1tJPGR0j.jpeg!thumb-w321-webp75",material_id:"20079930053"},
|
||||
{name:"闪光少女",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/eqOHv3wnlD.jpeg!thumb-w321-webp75",material_id:"20079932152"},
|
||||
{name:"bling01",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/EPdULXNn66.jpeg!thumb-w321-webp75",material_id:"20079930010"},
|
||||
{name:"bling02",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/6kOHR9OGvP.jpeg!thumb-w321-webp75",material_id:"20079930011"},
|
||||
{name:"bling03",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/eqOHv38nPz.jpeg!thumb-w321-webp75",material_id:"20079930012"},
|
||||
{name:"Disco6",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/RwXHmzP9Y0.jpeg!thumb-w321-webp75",material_id:"20079930009"},
|
||||
{name:"Dream1",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/XeVHPQWGGZ.jpeg!thumb-w321-webp75",material_id:"20079930013"},
|
||||
{name:"Hypno1",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/j4QUeORQE4.jpeg!thumb-w321-webp75",material_id:"20079930014"},
|
||||
{name:"Stellar2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/5JOiDpKNRz.jpeg!thumb-w321-webp75",material_id:"20079930008"},
|
||||
{name:"光1",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/OX8i06ZB9D.jpeg!thumb-w321-webp75",material_id:"20079930004"},
|
||||
{name:"Prisma1",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/JdXHWkgq5D.jpeg!thumb-w321-webp75",material_id:"20079930017"},
|
||||
{name:"Plastic1",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/V2jTkWZbP6.jpeg!thumb-w321-webp75",material_id:"20079930016"},
|
||||
{name:"莫奈",thumbnail:"https://xximg1.meitudata.com/9nzUy0bwDV.png!thumb-w321-webp75",material_id:"20079932086"},
|
||||
{name:"雾柔水光",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/JdaUWkEplJ.png!thumb-w321-webp75",material_id:"20079932146"},
|
||||
{name:"muji",thumbnail:"https://xximg1.meitudata.com/LEasJNJplP.png!thumb-w321-webp75",material_id:"20079932148"},
|
||||
{name:"相机打光测试",thumbnail:"https://xximg1.meitudata.com/j4QUexO3K5.jpeg!thumb-w321-webp75",material_id:"20079932054"},
|
||||
{name:"1222",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/3XwSOKRJjx.jpeg!thumb-w321-webp75",material_id:"20079931222"},
|
||||
{name:"1333",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/EQYuL9LqvV.jpeg!thumb-w321-webp75",material_id:"20079931333"},
|
||||
{name:"1999",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/VqVfkykO5y.jpeg!thumb-w321-webp75",material_id:"20079931999"},
|
||||
{name:"1666",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/1pgI1plVVv.jpeg!thumb-w321-webp75",material_id:"20079931666"},
|
||||
{name:"1888",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/OJbF06VvmK.jpeg!thumb-w321-webp75",material_id:"20079931888"},
|
||||
{name:"1888",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/ke8UOWwVz6.jpeg!thumb-w321-webp75",material_id:"20079931777"},
|
||||
{name:"2057",thumbnail:"https://xximg1.meitudata.com/3YVfOVKVmm.jpeg!thumb-w321-webp75",material_id:"20079932057"},
|
||||
{name:"五一鱼块",thumbnail:"https://xximg1.meitudata.com/39nTOVegOn.jpeg!thumb-w321-webp75",material_id:"20079932056"},
|
||||
{name:"五一",thumbnail:"https://xximg1.meitudata.com/bBZcvykbxP.png!thumb-w321-webp75",material_id:"20079932053"},
|
||||
{name:"bling04",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/OX8i06XB3L.jpeg!thumb-w321-webp75",material_id:"20079930015"},
|
||||
{name:"元旦",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/mbZHO6bOgR5YgdB.jpeg!thumb-w321-webp75",material_id:"20106401993"},
|
||||
{name:"瞬间",thumbnail:"https://xximg1.meitudata.com/y59Ib9JKjm.jpeg!thumb-w321-webp75",material_id:"20106401997"},
|
||||
{name:"新专辑轰顶",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/BR7fMkae0elL9DK.png!thumb-w321-webp75",material_id:"506093294"},
|
||||
{name:"新素材",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/LL8SozrWaMVRP5L.png!thumb-w321-webp75",material_id:"506093299"},
|
||||
{name:"素材不在功能页",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/69MiA9JxOErJvvP.png!thumb-w321-webp75",material_id:"506093238"},
|
||||
{name:"我被禁用了😄我被禁用了😄",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/D18Iz3ZaAPm0za3.png!thumb-w321-webp75",material_id:"506093239"},
|
||||
{name:"低版本不可见",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/757SWMrAkzKAorX.png!thumb-w321-webp75",material_id:"506093243"},
|
||||
{name:"3d立体弹窗",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/k4gtA430gyk3Wx9.png!thumb-w321-webp75",material_id:"506093241"},
|
||||
{name:"加州",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/RKgUJnKn126zbGG.jpeg!thumb-w321-webp75",material_id:"50602339"},
|
||||
{name:"爱心光",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/j4GcVXWgv200k0D.jpeg!thumb-w321-webp75",material_id:"506002288"},
|
||||
{name:"2053太空漫游",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/wgNUven5XxgKmG4.jpeg!thumb-w321-webp75",material_id:"20096492276"},
|
||||
{name:"CCD",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/XepU5b3WG3BDJNp.jpeg!thumb-w321-webp75",material_id:"20096492265"},
|
||||
{name:"IMAX胶片",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/bBZcYlQVDNVde5Y.jpeg!thumb-w321-webp75",material_id:"20096492254"},
|
||||
{name:"皮囊之下",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/p0LTO938OKJLV2k.jpeg!thumb-w321-webp75",material_id:"506002350"},
|
||||
{name:"号手就位",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/J34FBw2bEwzGbWp.jpeg!thumb-w321-webp75",material_id:"506002317"},
|
||||
{name:"海绵3",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/26guLmK1p0M13Zr.jpeg!thumb-w321-webp75",material_id:"506010277"},
|
||||
{name:"海绵4",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/KgaiJr4o77waN4d.jpeg!thumb-w321-webp75",material_id:"506010276"},
|
||||
{name:"海绵1",thumbnail:"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/71MfrYOoEDyKLJA.jpeg!thumb-w321-webp75",material_id:"506010279"},
|
||||
{name:"TR2",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/k51F2wNOkqQgBjX.jpeg!thumb-w321-webp75",material_id:"506002345"},
|
||||
{name:"TR3",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/JdaUB94WJJqQlwK.jpeg!thumb-w321-webp75",material_id:"506002344"},
|
||||
{name:"TR4",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/5JeH8WzDLm1NmPy.jpeg!thumb-w321-webp75",material_id:"506002347"},
|
||||
{name:"TR5",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/lkjUjGvk4VORqlR.jpeg!thumb-w321-webp75",material_id:"506002343"},
|
||||
{name:"TR6",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/k51F2wNOLjj94dK.jpeg!thumb-w321-webp75",material_id:"506002346"},
|
||||
{name:"乌布",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/V2xig11N0vQLpxm.jpeg!thumb-w321-webp75",material_id:"506002333"},
|
||||
{name:"微缩世界",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/oJQiWgqo5kodE1B.jpeg!thumb-w321-webp75",material_id:"506002298"},
|
||||
{name:"微缩世界Ⅱ",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/N8RHzP6aP44Xex6.jpeg!thumb-w321-webp75",material_id:"506002299"},
|
||||
{name:"旅程",thumbnail:"https://xximg1.meitudata.com/V2jTkEY8Y9.jpeg!thumb-w321-webp75",material_id:"20086101254"},
|
||||
{name:"旅程",thumbnail:"https://xximg1.meitudata.com/GPoUPwOj1b.jpeg!thumb-w321-webp75",material_id:"20086101315"},
|
||||
{name:"且听风吟",thumbnail:"https://xximg1.meitudata.com/Z3VspeGOy3.jpeg!thumb-w321-webp75",material_id:"2008610635"},
|
||||
{name:"Sky",thumbnail:"https://xximg1.meitudata.com/p0GcZPbnV0.jpeg!thumb-w321-webp75",material_id:"20086101612"},
|
||||
{name:"清新蓝",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/BbWiqXBp8X869e9.jpeg!thumb-w321-webp75",material_id:"20086162162"},
|
||||
{name:"男友力",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/6PocqE9aB8nZgOl.jpeg!thumb-w321-webp75",material_id:"20086161259"},
|
||||
{name:"男友力",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8boiJnm9e69J3GB.jpeg!thumb-w321-webp75",material_id:"20086161256"},
|
||||
{name:"男友力",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/oeGiWgmVL06ppzo.jpeg!thumb-w321-webp75",material_id:"20086161469"},
|
||||
{name:"chiffon",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/JdXHB6PXY9dzmjl.jpeg!thumb-w321-webp75",material_id:"2008607975"},
|
||||
{name:"新年限定",thumbnail:"https://xximg1.meitudata.com/mlahymLEBk.jpeg!thumb-w321-webp75",material_id:"20086072015"},
|
||||
{name:"新春食堂",thumbnail:"https://xximg1.meitudata.com/dDpFaD19J9.jpeg!thumb-w321-webp75",material_id:"20086071687"},
|
||||
{name:"围炉",thumbnail:"https://xximg1.meitudata.com/jo2UegGjqj.jpeg!thumb-w321-webp75",material_id:"20086071688"},
|
||||
{name:"橘子汽水",thumbnail:"https://xximg1.meitudata.com/voWUlvO8Dd.jpeg!thumb-w321-webp75",material_id:"2008607571"},
|
||||
{name:"舒芙蕾",thumbnail:"https://xximg1.meitudata.com/xmdFQwl5J0.jpeg!thumb-w321-webp75",material_id:"2008607569"},
|
||||
{name:"野Ⅰ",thumbnail:"https://xximg1.meitudata.com/6KwCRlbG6g.jpeg!thumb-w321-webp75",material_id:"20086070001"},
|
||||
{name:"野餐Ⅱ",thumbnail:"https://xximg1.meitudata.com/Nzjuq2XDGQ.jpeg!thumb-w321-webp75",material_id:"20086070002"},
|
||||
{name:"食欲",thumbnail:"https://xximg1.meitudata.com/jo2UegGzVl.jpeg!thumb-w321-webp75",material_id:"20086071585"},
|
||||
{name:"食欲",thumbnail:"https://xximg1.meitudata.com/0J6fWJbYW8.jpeg!thumb-w321-webp75",material_id:"20086071587"},
|
||||
{name:"橘子汽水",thumbnail:"https://xximg1.meitudata.com/bz0uvoO5Po.jpeg!thumb-w321-webp75",material_id:"20086071908"},
|
||||
{name:"",thumbnail:"https://xximg1.meitudata.com/xmdFQwgNGx.png!thumb-w321-webp75",material_id:"2008607014"},
|
||||
{name:"粉花面包",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/gkmsKBakKNO6ynd.jpeg!thumb-w321-webp75",material_id:"2008607973"},
|
||||
{name:"",thumbnail:"https://xximg1.meitudata.com/RzLumonEvG.png!thumb-w321-webp75",material_id:"2008607015"},
|
||||
{name:"Brunch",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/V2jTgxyR4xG9k4d.jpeg!thumb-w321-webp75",material_id:"20086072197"},
|
||||
{name:"vista200",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/LJwUjvN4awZDWOw.jpeg!thumb-w321-webp75",material_id:"506002301"},
|
||||
{name:"胶片时光",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/kBwi28Wm6y698oy.jpeg!thumb-w321-webp75",material_id:"20086171381"},
|
||||
{name:"胶片时光",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/8boiJnmYZ8NbvJ6.jpeg!thumb-w321-webp75",material_id:"20086171339"},
|
||||
{name:"胶片时光",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/vEdtKOx0n2gEyBg.jpeg!thumb-w321-webp75",material_id:"20086171336"},
|
||||
{name:"菲林日记",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/OdpiRJVedvxlR4m.jpeg!thumb-w321-webp75",material_id:"20096221571"},
|
||||
{name:"菲林日记",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/kBwi28w05RB11de.jpeg!thumb-w321-webp75",material_id:"20096221570"},
|
||||
{name:"菲林日记",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/KBPipZwDElPR1bl.jpeg!thumb-w321-webp75",material_id:"20096221783"},
|
||||
{name:"菲林日记",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/2bkiEXqkWmBZzjL.jpeg!thumb-w321-webp75",material_id:"20096221781"},
|
||||
{name:"菲林日记",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/PnkTd0zBvKKRYb0.jpeg!thumb-w321-webp75",material_id:"20096221780"},
|
||||
{name:"Outdoors",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/NL9HzPdl9WLnlq9.jpeg!thumb-w321-webp75",material_id:"20086172023"},
|
||||
{name:"蒸汽波",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/DyjUJpgEgyP8nDL.jpeg!thumb-w321-webp75",material_id:"506002182"},
|
||||
{name:"落日",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/V2jTgj1akYWmEvP.jpeg!thumb-w321-webp75",material_id:"20106112264"},
|
||||
{name:"音浪",thumbnail:"http://xximg2.meitudata.com/VXgfk8zEJ3.jpeg!thumb-w321-webp75",material_id:"20106111100"},
|
||||
{name:"毕业季",thumbnail:"https://xxtool-release.zone1.meitudata.com/material/y56Fb5qaXq.jpeg!thumb-w321-webp75",material_id:"20076121254"},
|
||||
{name:"游乐园",thumbnail:"https://xximg1.meitudata.com/N8eUq2XE0E.jpeg!thumb-w321-webp75",material_id:"20076091595"},
|
||||
{name:"粉黛",thumbnail:"https://xximg1.meitudata.com/wgNU3GlNRj.jpeg!thumb-w321-webp75",material_id:"20076091618"},
|
||||
{name:"游乐园",thumbnail:"https://xximg1.meitudata.com/Z3GfpjWOKV.jpeg!thumb-w321-webp75",material_id:"20076091596"},
|
||||
{name:"水彩画",thumbnail:"https://xximg1.meitudata.com/eqOHvqo0ej.jpeg!thumb-w321-webp75",material_id:"20106041764"},
|
||||
{name:"钢笔淡彩",thumbnail:"https://xximg1.meitudata.com/V2jTkopPGQ.jpeg!thumb-w321-webp75",material_id:"20106041765"},
|
||||
{name:"质感",thumbnail:"https://xximg1.meitudata.com/XepUPNP4WP.png!thumb-w321-webp75",material_id:"20076061608"},
|
||||
{name:"质感",thumbnail:"https://xximg1.meitudata.com/9nzUydyWeB.png!thumb-w321-webp75",material_id:"20076061589"},
|
||||
{name:"质感",thumbnail:"http://xximg2.meitudata.com/yObUbokjlb.jpeg!thumb-w321-webp75",material_id:"20076061609"},
|
||||
{name:"荼白",thumbnail:"https://xximg1.meitudata.com/6kOHRW8WGD.jpeg!thumb-w321-webp75",material_id:"20076061859"}
|
||||
]
|
||||
|
||||
public totalCount(): number {
|
||||
return this.dataArray.length;
|
||||
}
|
||||
|
||||
public getData(index: number): Material | undefined {
|
||||
return this.dataArray[index];
|
||||
}
|
||||
|
||||
public addData(index: number, data: Material): void {
|
||||
this.dataArray.splice(index, 0, data);
|
||||
this.notifyDataAdd(index);
|
||||
}
|
||||
|
||||
public pushData(data: Material): void {
|
||||
this.dataArray.push(data);
|
||||
this.notifyDataAdd(this.dataArray.length - 1);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2023 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { ImageKnifeComponent, ImageKnifeOption, FileUtils, ImageKnifeGlobal, GetRes1 } from '@ohos/libraryimageknife'
|
||||
import common from '@ohos.app.ability.common'
|
||||
import { GetRes2 } from '@ohos/sharedlibrary2'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct Index {
|
||||
@State imageOption1: ImageKnifeOption = {
|
||||
loadSrc: $r('app.media.icon'),
|
||||
}
|
||||
@State imageOption2: ImageKnifeOption = {
|
||||
loadSrc: $r('app.media.icon'),
|
||||
}
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Column() {
|
||||
Button('点击HSP1主图，HSP2占位,无context').onClick(() => {
|
||||
let mainRes = GetRes1.getSample1();
|
||||
let placeholderRes = GetRes2.getSample2();
|
||||
this.imageOption1 = {
|
||||
loadSrc:mainRes,
|
||||
placeholderSrc:placeholderRes
|
||||
}
|
||||
})
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageOption1 }).width(300).height(300).backgroundColor(Color.Pink)
|
||||
Button('点击HSP1主图，HSP2占位,有context ').onClick(() => {
|
||||
let mainRes = GetRes1.getSample1();
|
||||
let placeholderRes = GetRes2.getSample2();
|
||||
this.imageOption2 = {
|
||||
loadSrc:mainRes,
|
||||
placeholderSrc:placeholderRes,
|
||||
context:getContext(this) as common.UIAbilityContext
|
||||
}
|
||||
})
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageOption2 }).width(300).height(300).backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
}.width('100%')
|
||||
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeComponent, ScaleType,ImageKnife} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeOption} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeGlobal} from '@ohos/libraryimageknife'
|
||||
import {RotateImageTransformation} from '@ohos/libraryimageknife'
|
||||
import {Material} from './model/Material'
|
||||
import {TestDataSource} from './model/TestDataSource'
|
||||
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct photosPausedResumedPage {
|
||||
private data: TestDataSource = new TestDataSource();
|
||||
|
||||
private elementScroller: Scroller = new Scroller()
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
|
||||
Button('点击暂停加载')
|
||||
.margin({top:10,bottom:5})
|
||||
.onClick(()=>{
|
||||
let imageKnife:ImageKnife|undefined = ImageKnifeGlobal.getInstance().getImageKnife();
|
||||
if(imageKnife!= undefined){
|
||||
imageKnife.pauseRequests()
|
||||
}
|
||||
})
|
||||
|
||||
Button('点击重新加载')
|
||||
.margin({top:10,bottom:5})
|
||||
.onClick(()=>{
|
||||
let imageKnife:ImageKnife|undefined = ImageKnifeGlobal.getInstance().getImageKnife();
|
||||
if(imageKnife!= undefined){
|
||||
imageKnife.resumeRequests()
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
List({ space: 20, scroller: this.elementScroller }) {
|
||||
LazyForEach(this.data, (item: Material, index) => {
|
||||
ListItem() {
|
||||
Column() {
|
||||
Stack({ alignContent: Alignment.BottomEnd }) {
|
||||
// 滤镜图片
|
||||
ImageKnifeComponent({ imageKnifeOption: {
|
||||
loadSrc: item.thumbnail,
|
||||
mainScaleType: ScaleType.FIT_XY,
|
||||
} })
|
||||
}
|
||||
.width(56).height(56)
|
||||
//滤镜标题
|
||||
Text(item.name)
|
||||
.fontSize(10)
|
||||
.maxLines(1)
|
||||
.fontColor(Color.White)
|
||||
.textAlign(TextAlign.Center)
|
||||
.layoutWeight(1)
|
||||
.width('100%')
|
||||
.backgroundColor(Color.Orange)
|
||||
}
|
||||
.width(56)
|
||||
.height(72)
|
||||
.clip(true)
|
||||
.borderRadius(4)
|
||||
}
|
||||
}, (item: Material) => item.material_id)
|
||||
}
|
||||
.listDirection(Axis.Horizontal)
|
||||
.width('100%')
|
||||
.height(72)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeComponent, ScaleType,ImageKnife} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeOption} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeGlobal} from '@ohos/libraryimageknife'
|
||||
import {RotateImageTransformation} from '@ohos/libraryimageknife'
|
||||
import {Material} from './model/Material'
|
||||
import {TestDataSource} from './model/TestDataSource'
|
||||
import {DiskLruCache} from '@ohos/disklrucache'
|
||||
import ArkWorker from '@ohos.worker'
|
||||
import Prompt from '@system.prompt'
|
||||
@Entry
|
||||
@Component
|
||||
struct photosPausedResumedPage {
|
||||
private data: TestDataSource = new TestDataSource();
|
||||
|
||||
private elementScroller: Scroller = new Scroller()
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
|
||||
Button('这个List通过监听： 开始滑动,停止加载图片;滑动结束,恢复加载图片')
|
||||
.margin({top:10,bottom:5})
|
||||
.onClick(()=>{
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
List({ space: 20, scroller: this.elementScroller }) {
|
||||
LazyForEach(this.data, (item: Material, index) => {
|
||||
ListItem() {
|
||||
Column() {
|
||||
Stack({ alignContent: Alignment.BottomEnd }) {
|
||||
// 滤镜图片
|
||||
ImageKnifeComponent({ imageKnifeOption: {
|
||||
loadSrc: item.thumbnail,
|
||||
mainScaleType: ScaleType.FIT_XY,
|
||||
} })
|
||||
}
|
||||
.width(56).height(56)
|
||||
//滤镜标题
|
||||
Text(item.name)
|
||||
.fontSize(10)
|
||||
.maxLines(1)
|
||||
.fontColor(Color.White)
|
||||
.textAlign(TextAlign.Center)
|
||||
.layoutWeight(1)
|
||||
.width('100%')
|
||||
.backgroundColor(Color.Orange)
|
||||
}
|
||||
.width(56)
|
||||
.height(72)
|
||||
.clip(true)
|
||||
.borderRadius(4)
|
||||
}
|
||||
}, (item: Material) => item.material_id)
|
||||
}
|
||||
.onScrollStart(()=>{
|
||||
let imageKnife:ImageKnife|undefined = ImageKnifeGlobal.getInstance().getImageKnife();
|
||||
if(imageKnife!= undefined){
|
||||
imageKnife.pauseRequests()
|
||||
}
|
||||
})
|
||||
.onScrollStop(()=>{
|
||||
let imageKnife:ImageKnife|undefined = ImageKnifeGlobal.getInstance().getImageKnife();
|
||||
if(imageKnife!= undefined){
|
||||
imageKnife.resumeRequests()
|
||||
}
|
||||
})
|
||||
.listDirection(Axis.Horizontal)
|
||||
.width('100%')
|
||||
.height(72)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
aboutToDisappear(){
|
||||
// 如果用户滑动过程中就退出了页面我们需要恢复图片加载能力
|
||||
let imageKnife:ImageKnife|undefined = ImageKnifeGlobal.getInstance().getImageKnife();
|
||||
if(imageKnife!= undefined){
|
||||
imageKnife.resumeRequests()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,257 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { Pngj } from '@ohos/libraryimageknife'
|
||||
import resourceManager from '@ohos.resourceManager';
|
||||
import { FileUtils,ImageKnifeGlobal } from '@ohos/libraryimageknife'
|
||||
import { BusinessError } from '@ohos.base'
|
||||
import common from '@ohos.app.ability.common';
|
||||
interface WorkerType {
|
||||
type: string
|
||||
name: string
|
||||
}
|
||||
@Entry
|
||||
@Component
|
||||
struct PngjTestCasePage {
|
||||
pngSource1?: ArrayBuffer = undefined;
|
||||
pngSource2?: ArrayBuffer = undefined;
|
||||
pngSource3?: ArrayBuffer = undefined;
|
||||
pngSource4?: ArrayBuffer = undefined;
|
||||
pngdecodeRun1: boolean = false;
|
||||
pngdecodeRun2: boolean = false;
|
||||
pngdecodeRun3: boolean = false;
|
||||
pngdecodeRun4: boolean = false;
|
||||
rootFolder: string = '';
|
||||
@State hint1: string = 'readPngImageInfo内容展示'
|
||||
@State hint2: string = 'readPngImage内容展示'
|
||||
@State hint3: string = 'writePngWithString内容展示'
|
||||
@State hint4: string = 'writePngWithString内容展示'
|
||||
@State hint5: string = '测试readMetadata'
|
||||
@State hint6: string = '测试writeMetadata'
|
||||
@State hint7: string = '首先点击获取PNG图片buffer'
|
||||
@State hint8: string = '首先点击获取PNG图片buffer'
|
||||
@State hint9: string = '首先点击获取PNG图片buffer'
|
||||
@State hint10: string = '首先点击获取PNG图片buffer'
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Text('pngj接口测试列表').fontSize(20)
|
||||
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
|
||||
Button(this.hint7).fontSize(30)
|
||||
.onClick(() => {
|
||||
this.rootFolder = (ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).filesDir as string;
|
||||
((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext)
|
||||
.resourceManager as resourceManager.ResourceManager)
|
||||
.getMediaContent($r('app.media.pngSample').id)
|
||||
.then(data => {
|
||||
this.pngSource1 = FileUtils.getInstance().uint8ArrayToBuffer(data);
|
||||
this.hint7 = '获取buffer成功，可以测试'
|
||||
})
|
||||
.catch( (err:BusinessError) => {
|
||||
console.log('点击获取Png图片buffer err=' + err)
|
||||
})
|
||||
})
|
||||
Button('测试readPng')
|
||||
.onClick(() => {
|
||||
|
||||
if (this.pngSource1!=undefined) {
|
||||
if (!this.pngdecodeRun1) {
|
||||
this.pngdecodeRun1 = true;
|
||||
let pngj = new Pngj();
|
||||
pngj.readPngImageInfo(this.pngSource1,{pngCallback: (sender, value) => {
|
||||
this.hint1 = JSON.stringify(value);
|
||||
this.pngdecodeRun1 = false;
|
||||
}})
|
||||
|
||||
} else {
|
||||
this.hint7 = '已经在执行了,请稍等'
|
||||
}
|
||||
} else {
|
||||
this.hint7 = '请先点击此处获取buffer'
|
||||
}
|
||||
}).margin({ top: 5, left: 10 })
|
||||
|
||||
|
||||
}.width('100%')
|
||||
.height(60).backgroundColor(Color.Pink)
|
||||
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button(this.hint8).fontSize(30)
|
||||
.onClick(() => {
|
||||
|
||||
|
||||
|
||||
this.rootFolder = (ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).filesDir as string;
|
||||
((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext)
|
||||
.resourceManager as resourceManager.ResourceManager)
|
||||
.getMediaContent($r('app.media.pngSample').id)
|
||||
|
||||
.then(data => {
|
||||
this.pngSource2 = FileUtils.getInstance().uint8ArrayToBuffer(data);
|
||||
this.hint8 = '获取buffer成功，可以测试'
|
||||
})
|
||||
.catch((err:BusinessError) => {
|
||||
console.log('点击获取Png图片buffer err=' + err)
|
||||
})
|
||||
})
|
||||
Button('readPngAsync')
|
||||
.onClick(() => {
|
||||
|
||||
if (this.pngSource2!=undefined) {
|
||||
if (!this.pngdecodeRun2) {
|
||||
this.pngdecodeRun2 = true;
|
||||
let pngj = new Pngj();
|
||||
let png_worker: WorkerType = {
|
||||
type: 'classic',
|
||||
name: 'readPngImageAsync'
|
||||
}
|
||||
pngj.readPngImageAsync(png_worker, this.pngSource2!, (value:ESObject) => {
|
||||
this.hint8 = '重新获取buffer才能测试'
|
||||
this.hint2 = 'img with=' + value.width + ' img height=' + value.height
|
||||
+ ' img depth=' + value.depth + ' img ctype=' + value.ctype
|
||||
this.pngdecodeRun2 = false;
|
||||
})
|
||||
|
||||
} else {
|
||||
this.hint8 = '已经在执行了,请稍等'
|
||||
}
|
||||
} else {
|
||||
this.hint8 = '请先点击此处获取buffer'
|
||||
}
|
||||
|
||||
}).margin({ top: 5, left: 10 })
|
||||
|
||||
}.width('100%')
|
||||
.height(60).backgroundColor(Color.Pink)
|
||||
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button(this.hint9).fontSize(30)
|
||||
.onClick(() => {
|
||||
this.rootFolder = (ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).filesDir as string;
|
||||
((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext)
|
||||
.resourceManager as resourceManager.ResourceManager)
|
||||
.getMediaContent($r('app.media.pngSample').id)
|
||||
.then(data => {
|
||||
this.pngSource3 = FileUtils.getInstance().uint8ArrayToBuffer(data);
|
||||
this.hint9 = '获取buffer成功，可以测试'
|
||||
})
|
||||
.catch((err:BusinessError) => {
|
||||
console.log('点击获取Png图片buffer err=' + err)
|
||||
})
|
||||
})
|
||||
Button('测试writePngWithString')
|
||||
.onClick(() => {
|
||||
|
||||
if (this.pngSource3 != undefined) {
|
||||
if (!this.pngdecodeRun3) {
|
||||
this.pngdecodeRun3 = true;
|
||||
let pngj = new Pngj();
|
||||
let png_worker: WorkerType = {
|
||||
type: 'classic',
|
||||
name: 'writePngWithStringAsync'
|
||||
}
|
||||
pngj.writePngWithStringAsync(png_worker, this.pngSource3, ( value:ESObject) => {
|
||||
FileUtils.getInstance().createFileProcess(
|
||||
this.rootFolder + '/pngj',
|
||||
this.rootFolder + '/pngj/newPng.png',
|
||||
value)
|
||||
let png1 = new Uint8Array(value)
|
||||
this.hint3 = 'png写入后长度' + png1.byteLength + '目录文件：' + this.rootFolder + '/pngj/newPng.png' + '保存后使用2进制查看数据是否新增'
|
||||
this.pngdecodeRun3 = false;
|
||||
},'hello world')
|
||||
} else {
|
||||
this.hint9 = '已经在执行了,请稍等'
|
||||
}
|
||||
} else {
|
||||
this.hint9 = '请先点击此处获取buffer'
|
||||
}
|
||||
|
||||
}).margin({ top: 5, left: 10 })
|
||||
|
||||
}.width('100%')
|
||||
.height(60).backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
|
||||
Button(this.hint10).fontSize(30)
|
||||
.onClick(() => {
|
||||
this.rootFolder = (ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext).filesDir as string;
|
||||
((ImageKnifeGlobal.getInstance().getHapContext() as common.UIAbilityContext)
|
||||
.resourceManager as resourceManager.ResourceManager)
|
||||
.getMediaContent($r('app.media.pngSample').id)
|
||||
.then(data => {
|
||||
this.pngSource4 = FileUtils.getInstance().uint8ArrayToBuffer(data);
|
||||
this.hint10 = '获取buffer成功，可以测试'
|
||||
})
|
||||
.catch((err:BusinessError) => {
|
||||
console.log('点击获取Png图片buffer err=' + err)
|
||||
})
|
||||
})
|
||||
Button('writePng')
|
||||
.onClick(()=>{
|
||||
if (this.pngSource4 != undefined) {
|
||||
if (!this.pngdecodeRun4) {
|
||||
this.pngdecodeRun4 = true;
|
||||
let pngj = new Pngj();
|
||||
let png_worker: WorkerType = {
|
||||
type: 'classic',
|
||||
name: 'writePngAsync'
|
||||
}
|
||||
pngj.writePngAsync(png_worker, this.pngSource4, ( value:ESObject) => {
|
||||
FileUtils.getInstance().createFileProcess(
|
||||
this.rootFolder + '/pngj',
|
||||
this.rootFolder + '/pngj/newPng2.png',
|
||||
value)
|
||||
let png2 = new Uint8Array(value)
|
||||
this.hint4 = 'png2未写入长度' + png2.byteLength + '目录文件：' + this.rootFolder + '/pngj/newPng2.png' + '保存后使用2进制查看数据是否新增'
|
||||
this.pngdecodeRun4 = false;
|
||||
})
|
||||
} else {
|
||||
this.hint10 = '已经在执行了,请稍等'
|
||||
}
|
||||
} else {
|
||||
this.hint10 = '请先点击此处获取buffer'
|
||||
}
|
||||
})
|
||||
.margin({ top: 5, left: 10 })
|
||||
}.width('100%')
|
||||
.height(60).backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
Text(this.hint1)
|
||||
.width('100%')
|
||||
.height(120)
|
||||
Text(this.hint2)
|
||||
.width('100%')
|
||||
.height(120)
|
||||
Text(this.hint3)
|
||||
.width('100%')
|
||||
.height(120)
|
||||
Text(this.hint4)
|
||||
.width('100%')
|
||||
.height(120)
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
||||
typedArrayToBuffer(array: Uint8Array): ArrayBuffer {
|
||||
return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeComponent} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeOption} from '@ohos/libraryimageknife'
|
||||
import {RotateImageTransformation} from '@ohos/libraryimageknife'
|
||||
import {RoundedCornersTransformation} from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct ShowErrorholderTestCasePage {
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://thirdwx.qlogo.cn/mmopen/xxxxx",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
@State imageKnifeOption: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/xxxxx",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
@State imageKnifeOption3: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/xxxxx",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
@State imageKnifeOption4: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/xxxxx",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(300).height(300)
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 }).width(300).height(300)
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 }).width(300).height(300)
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import {LruCache} from '@ohos/libraryimageknife'
|
||||
|
||||
function getRandomInt(min:number, max:number):number {
|
||||
min = Math.ceil(min);
|
||||
max = Math.floor(max);
|
||||
return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
|
||||
}
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct StorageTestLruCache {
|
||||
@State logText:string = "打印日志结果";
|
||||
@State nowNumText:string = "显示输入的数据";
|
||||
mLruCache:LruCache<string,string> = new LruCache(5);
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Text("默认创建一个容量为5的LruCache")
|
||||
.backgroundColor(Color.Blue)
|
||||
Button("随机存入一个数字0-9")
|
||||
.onClick(()=>{
|
||||
let randomNum = getRandomInt(0,10);
|
||||
this.nowNumText = ''+randomNum;
|
||||
this.mLruCache.put(randomNum+"",randomNum+"")
|
||||
this.logText = "日志结果:"+this.mLruCache.print();
|
||||
}) .margin({top:20})
|
||||
|
||||
Button(this.nowNumText)
|
||||
.margin({top:20})
|
||||
|
||||
Scroll() {
|
||||
Text(this.logText).fontSize(15)
|
||||
}.width(300).height(200).margin({top:20}).backgroundColor(Color.Pink)
|
||||
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2022 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {SVGParseImpl} from '@ohos/libraryimageknife'
|
||||
import { ImageKnifeComponent } from '@ohos/libraryimageknife'
|
||||
import resourceManager from '@ohos.resourceManager';
|
||||
import {BusinessError} from '@ohos.base'
|
||||
import common from '@ohos.app.ability.common';
|
||||
@Entry
|
||||
@Component
|
||||
struct svgTestCasePage {
|
||||
|
||||
@State svgSamplePixelMap?: Resource = undefined
|
||||
@State svgIconPixelMap?: Resource = undefined
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Flex({direction:FlexDirection.Row}){
|
||||
Button("加载SVG图片")
|
||||
.onClick(()=>{
|
||||
this.svgSamplePixelMap = $r('app.media.svgSample')
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
|
||||
}
|
||||
.margin({top:15})
|
||||
|
||||
Text("下面为展示图片区域").margin({top:5})
|
||||
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
|
||||
ImageKnifeComponent({imageKnifeOption:{
|
||||
loadSrc:this.svgSamplePixelMap as Resource
|
||||
}})
|
||||
.width(400)
|
||||
.height(400)
|
||||
.backgroundColor(Color.Pink)
|
||||
}.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)
|
||||
|
||||
Flex({direction:FlexDirection.Row}){
|
||||
Button("加载SVG图片")
|
||||
.onClick(()=>{
|
||||
this.svgIconPixelMap = $r('app.media.iconsvg')
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
|
||||
}
|
||||
.margin({top:15})
|
||||
|
||||
Text("下面为展示图片区域").margin({top:5})
|
||||
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
|
||||
ImageKnifeComponent({imageKnifeOption:{
|
||||
loadSrc:this.svgIconPixelMap as Resource
|
||||
}})
|
||||
.width(400)
|
||||
.height(400)
|
||||
.backgroundColor(Color.Pink)
|
||||
}.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
console.log("aboutToAppear()")
|
||||
}
|
||||
typedArrayToBuffer(array: Uint8Array): ArrayBuffer {
|
||||
return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,98 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2022 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import {
|
||||
ImageKnifeComponent,
|
||||
ImageKnifeOption,
|
||||
ImageKnifeGlobal,
|
||||
ImageKnife,
|
||||
ImageKnifeDrawFactory,
|
||||
ScaleType
|
||||
} from '@ohos/libraryimageknife'
|
||||
import worker from '@ohos.worker';
|
||||
@Entry
|
||||
@Component
|
||||
struct tempUrlTestPage {
|
||||
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.icon'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
|
||||
@State imageKnifeOption2: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.icon'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Text("简单示例1：加载一张本地png图片").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("加载PNG")
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption1 = {
|
||||
// loadSrc:"https://res.vmallres.com/cmscdn/CN/2023-03/a11790b9335a4d598d59f14795368e14.png.75.webp",
|
||||
loadSrc:"https://xximg1.meitudata.com/2LqS1vmqv0.png!thumb-w321-webp75",
|
||||
mainScaleType: ScaleType.FIT_XY,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
drawLifeCycle:ImageKnifeDrawFactory.createRoundLifeCycle(0,'#00000000',30)
|
||||
}
|
||||
}).margin({ top: 5, left: 3 })
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width('100%').height(300).backgroundColor(Color.Orange)
|
||||
}
|
||||
.width('100%').height(400).backgroundColor(Color.Pink)
|
||||
|
||||
Text("简单示例2：加载一张网络gif图片").fontSize(15)
|
||||
Text("gif解析在子线程,请在页面构建后创建worker,注入imageknife").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("加载GIF")
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption2 = {
|
||||
loadSrc: 'https://res.vmallres.com/cmscdn/CN/2023-03/7052a601ac3e428c84c9415ad9734735.gif',
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress:true,
|
||||
}
|
||||
}).margin({ top: 5, left: 3 })
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }).width(300).height(300)
|
||||
}.width('100%').backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
}.width('100%')
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
|
||||
}
|
||||
aboutToDisappear(){
|
||||
|
||||
}
|
||||
|
||||
onBackPress() {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,209 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {RequestOption} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeData} from '@ohos/libraryimageknife'
|
||||
import {AllCacheInfo,IAllCacheInfoCallback} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeComponent} from '@ohos/libraryimageknife'
|
||||
import {TransformType} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeOption} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeGlobal} from '@ohos/libraryimageknife'
|
||||
import {RotateImageTransformation} from '@ohos/libraryimageknife'
|
||||
import {BusinessError} from '@ohos.base'
|
||||
@Entry
|
||||
@Component
|
||||
struct TestAllCacheInfoPage {
|
||||
@State nativePixelMap?: PixelMap = undefined;
|
||||
@State networkPixelMap?: PixelMap = undefined;
|
||||
allCacheInfoCallback1:IAllCacheInfoCallback ={callback:(allCacheInfo:AllCacheInfo)=>{
|
||||
let info = allCacheInfo as AllCacheInfo;
|
||||
console.log("AllCacheInfoCallback imageknifecomponent1 memory ="+JSON.stringify(info.memoryCacheInfo))
|
||||
console.log("AllCacheInfoCallback imageknifecomponent1 resource ="+JSON.stringify(info.resourceCacheInfo))
|
||||
console.log("AllCacheInfoCallback imageknifecomponent1 data ="+JSON.stringify(info.dataCacheInfo))
|
||||
this.cacheinfo3 = "memory="+JSON.stringify(info.memoryCacheInfo)+
|
||||
"\n resource ="+JSON.stringify(info.resourceCacheInfo)+
|
||||
"\n data ="+JSON.stringify(info.dataCacheInfo)
|
||||
}}
|
||||
allCacheInfoCallback2:IAllCacheInfoCallback ={callback:(allCacheInfo:AllCacheInfo)=>{
|
||||
let info = allCacheInfo as AllCacheInfo;
|
||||
console.log("AllCacheInfoCallback ImageKnifeComponent memory ="+JSON.stringify(info.memoryCacheInfo))
|
||||
console.log("AllCacheInfoCallback ImageKnifeComponent resource ="+JSON.stringify(info.resourceCacheInfo))
|
||||
console.log("AllCacheInfoCallback ImageKnifeComponent data ="+JSON.stringify(info.dataCacheInfo))
|
||||
this.cacheinfo4 = "memory="+JSON.stringify(info.memoryCacheInfo)+
|
||||
"\n resource ="+JSON.stringify(info.resourceCacheInfo)+
|
||||
"\n data ="+JSON.stringify(info.dataCacheInfo)
|
||||
}}
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
transform: {
|
||||
transformType:TransformType.RotateImageTransformation,
|
||||
rotateImage:180
|
||||
},
|
||||
allCacheInfoCallback:this.allCacheInfoCallback1
|
||||
};
|
||||
@State imageKnifeOption: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
transform: {
|
||||
transformType:TransformType.RotateImageTransformation,
|
||||
rotateImage:180
|
||||
},
|
||||
allCacheInfoCallback:this.allCacheInfoCallback2
|
||||
};
|
||||
imageKnifeComponentAngle:number = 90;
|
||||
|
||||
@State cacheinfo1:string = "观察本地资源获取缓存信息输出"
|
||||
@State cacheinfo2:string = "观察网络资源获取缓存信息输出"
|
||||
@State cacheinfo3:string = "观察ImageKnifeComponent本地缓存输出"
|
||||
@State cacheinfo4:string = "观察ImageKnifeComponent网络缓存输出"
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("加载本地资源获取缓存信息")
|
||||
.width(300).height(25)
|
||||
.onClick(() => {
|
||||
this.testAllCacheInfoNative();
|
||||
}).margin({ top: 15 })
|
||||
Scroll() {
|
||||
Text(this.cacheinfo1).fontSize(15)
|
||||
}.width(300).height(200)
|
||||
Image(this.nativePixelMap == undefined ? '':this.nativePixelMap!)
|
||||
.width(300)
|
||||
.height(300)
|
||||
.objectFit(ImageFit.Contain)
|
||||
.backgroundColor(Color.Green)
|
||||
.margin({ top: 15 })
|
||||
Button("加载网络资源获取缓存信息").width(300).height(25)
|
||||
.onClick(() => {
|
||||
this.testAllCacheInfoNetwork();
|
||||
}).margin({ top: 15 })
|
||||
Scroll() {
|
||||
Text(this.cacheinfo2).fontSize(15)
|
||||
}.width(300).height(200)
|
||||
Image(this.networkPixelMap==undefined?'':this.networkPixelMap! )
|
||||
.width(300)
|
||||
.height(300)
|
||||
.objectFit(ImageFit.Contain)
|
||||
.backgroundColor(Color.Green)
|
||||
.margin({ top: 15 })
|
||||
|
||||
Button("ImageKnifeComponent加载本地资源获取缓存信息").width(300).height(25)
|
||||
.onClick(() => {
|
||||
this.imageKnifeComponentAngle = this.imageKnifeComponentAngle + 45;
|
||||
this.imageKnifeOption1 =
|
||||
{
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
transform: {
|
||||
transformType:TransformType.RotateImageTransformation,
|
||||
rotateImage:this.imageKnifeComponentAngle
|
||||
},
|
||||
allCacheInfoCallback:this.allCacheInfoCallback1
|
||||
};
|
||||
}).margin({ top: 15 })
|
||||
Scroll() {
|
||||
Text(this.cacheinfo3).fontSize(15)
|
||||
}.width(300).height(200)
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
|
||||
|
||||
Button("ImageKnifeComponent加载网络资源获取缓存信息").width(300).height(25)
|
||||
.onClick(() => {
|
||||
this.imageKnifeComponentAngle = this.imageKnifeComponentAngle + 45;
|
||||
this.imageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
transform: {
|
||||
transformType:TransformType.RotateImageTransformation,
|
||||
rotateImage:this.imageKnifeComponentAngle
|
||||
},
|
||||
allCacheInfoCallback:this.allCacheInfoCallback2
|
||||
};
|
||||
})
|
||||
Scroll() {
|
||||
Text(this.cacheinfo4).fontSize(15)
|
||||
}.width(300).height(200)
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(300).height(300)
|
||||
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
|
||||
}
|
||||
|
||||
private testAllCacheInfoNative() {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
imageKnifeOption.load($r('app.media.pngSample'))
|
||||
.setImageViewSize({width:300,height:300})
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
let pack = data.drawPixelMap?.imagePixelMap as PixelMap;;
|
||||
this.nativePixelMap = pack;
|
||||
return false;
|
||||
}}).addAllCacheInfoCallback({callback:(allCacheInfo:AllCacheInfo)=>{
|
||||
let info = allCacheInfo as AllCacheInfo;
|
||||
console.log("AllCacheInfoCallback memory ="+JSON.stringify(info.memoryCacheInfo))
|
||||
console.log("AllCacheInfoCallback resource ="+JSON.stringify(info.resourceCacheInfo))
|
||||
console.log("AllCacheInfoCallback data ="+JSON.stringify(info.dataCacheInfo))
|
||||
this.cacheinfo1 = "memory="+JSON.stringify(info.memoryCacheInfo)+
|
||||
"\n resource ="+JSON.stringify(info.resourceCacheInfo)+
|
||||
"\n data ="+JSON.stringify(info.dataCacheInfo)
|
||||
}})
|
||||
ImageKnife?.call(imageKnifeOption);
|
||||
}
|
||||
|
||||
private testAllCacheInfoNetwork() {
|
||||
let ImageKnifeOption = new RequestOption();
|
||||
ImageKnifeOption.load("https://hbimg.huabanimg.com/0ef60041445edcfd6b38d20e19024b2cd9281dcc3525a4-Vy8fYO_fw658/format/webp")
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
let pack = data.drawPixelMap?.imagePixelMap as PixelMap;
|
||||
this.networkPixelMap = pack;
|
||||
console.log("imageknife2 图片2 赋值！")
|
||||
return false;
|
||||
}}).addAllCacheInfoCallback({callback:(allCacheInfo:AllCacheInfo)=>{
|
||||
let info = allCacheInfo as AllCacheInfo;
|
||||
console.log("AllCacheInfoCallback memory ="+JSON.stringify(info.memoryCacheInfo))
|
||||
console.log("AllCacheInfoCallback resource ="+JSON.stringify(info.resourceCacheInfo))
|
||||
console.log("AllCacheInfoCallback data ="+JSON.stringify(info.dataCacheInfo))
|
||||
this.cacheinfo2 = "memory="+JSON.stringify(info.memoryCacheInfo)+
|
||||
"\n resource ="+JSON.stringify(info.resourceCacheInfo)+
|
||||
"\n data ="+JSON.stringify(info.dataCacheInfo)
|
||||
}})
|
||||
.setImageViewSize({width:300,height:300})
|
||||
.rotateImage(180)
|
||||
ImageKnife?.call(ImageKnifeOption);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let ImageKnife = (ImageKnifeGlobal.getInstance().getImageKnife())
|
||||
|
|
@ -1,243 +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 {
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2022 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { ImageKnife,ImageKnifeGlobal,ImageKnifeOption,ImageKnifeComponent} from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct DiskPreLoadPage {
|
||||
|
||||
@State imageKnifeOption2: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.icon'),
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
|
||||
build() {
|
||||
Row() {
|
||||
Column() {
|
||||
Button("预加载图片").onClick(()=>{
|
||||
let imageKnife: ImageKnife | undefined = ImageKnifeGlobal.getInstance().getImageKnife();
|
||||
if(imageKnife != undefined){
|
||||
imageKnife.prefetchToDiskCache("https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658")
|
||||
.then((resolve)=>{
|
||||
console.log("成功回调 ： " + resolve)
|
||||
})
|
||||
.catch((reject: ESObject) => {
|
||||
console.log("失败回调 ： " + reject)
|
||||
})
|
||||
}
|
||||
})
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("加载GIF")
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption2 = {
|
||||
loadSrc: 'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658',
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress:true,
|
||||
}
|
||||
}).margin({ top: 5, left: 3 })
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }).width(300).height(300)
|
||||
}.width('100%').backgroundColor(Color.Pink)
|
||||
}
|
||||
.width('100%')
|
||||
}
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -1,64 +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
|
||||
@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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnifeComponent,AntiAliasing } from '@ohos/libraryimageknife'
|
||||
import { ImageKnifeOption } from '@ohos/libraryimageknife'
|
||||
import { RotateImageTransformation } from '@ohos/libraryimageknife'
|
||||
import { RoundedCornersTransformation } from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestImageAntiAliasingWithPage {
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Text("ImageKnife开启抗锯齿").fontSize(15)
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1,imageSmoothingQuality: AntiAliasing.FIT_HIGH }).width(600).height(600)
|
||||
Text("Image开启抗锯齿").fontSize(15)
|
||||
Image($r('app.media.icon_failed'))
|
||||
.width(600)
|
||||
.height(600)
|
||||
.margin(15)
|
||||
.overlay('png', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
|
||||
.interpolation(ImageInterpolation.High)
|
||||
Text("ImageKnife开启抗锯齿且设置为中等").fontSize(15)
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1,imageSmoothingQuality: AntiAliasing.FIT_MEDIUM }).width(600).height(600)
|
||||
Text("Image开启抗锯齿且设置为中等").fontSize(15)
|
||||
Image($r('app.media.icon_failed'))
|
||||
.width(600)
|
||||
.height(600)
|
||||
.margin(15)
|
||||
.overlay('png', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
|
||||
.interpolation(ImageInterpolation.Medium)
|
||||
Text("ImageKnife未开启抗锯齿").fontSize(15)
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1,imageSmoothingEnabled: false }).width(600).height(600)
|
||||
Text("Image未开启抗锯齿").fontSize(15)
|
||||
Image($r('app.media.icon_failed'))
|
||||
.width(600)
|
||||
.height(600)
|
||||
.margin(15)
|
||||
.overlay('png', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { ComponentUtils } from '@ohos.arkui.UIContext'
|
||||
import display from '@ohos.display';
|
||||
import { ImageKnifeComponent,
|
||||
ScaleType } from '@ohos/libraryimageknife'
|
||||
import componentUtils from '@ohos.arkui.componentUtils';
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
|
||||
struct testImageKnifeAutoHeightPage {
|
||||
|
||||
|
||||
private currentWidth: number =0
|
||||
private currentHeight: number =0
|
||||
|
||||
@State value : componentUtils.ComponentInfo = componentUtils.getRectangleById("ImageKnifeCanvas");
|
||||
|
||||
aboutToAppear(){
|
||||
let displayClas : ESObject =null
|
||||
try {
|
||||
displayClas = display.getDefaultDisplaySync()
|
||||
console.info('........width'+ displayClas.width)
|
||||
console.info('........height'+ displayClas.height)
|
||||
|
||||
}catch (e){
|
||||
|
||||
console.error('error' + e)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
build(){
|
||||
Scroll(){
|
||||
Column(){
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption:{
|
||||
loadSrc :$r('app.media.pngSample'),
|
||||
mainScaleType:ScaleType.AUTO_HEIGHT,
|
||||
}
|
||||
})
|
||||
.width("100%")
|
||||
Button(){
|
||||
Text('getRectangleById').fontSize(40).fontWeight(FontWeight.Bold);
|
||||
}
|
||||
.onClick(()=> {
|
||||
this.value = componentUtils.getRectangleById("ImageKnifeCanvas")
|
||||
this.currentWidth = px2vp(this.value.size.width)
|
||||
this.currentHeight = px2vp(this.value.size.height)
|
||||
console.log('currentWidth'+this.currentWidth)
|
||||
console.log('currentHeight'+this.currentHeight)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { ComponentUtils } from '@ohos.arkui.UIContext'
|
||||
import display from '@ohos.display';
|
||||
import { ImageKnifeComponent,
|
||||
ScaleType } from '@ohos/libraryimageknife'
|
||||
import componentUtils from '@ohos.arkui.componentUtils';
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
|
||||
struct testImageKnifeAutoPage {
|
||||
|
||||
|
||||
private currentWidth: number =0
|
||||
private currentHeight: number =0
|
||||
|
||||
@State value : componentUtils.ComponentInfo = componentUtils.getRectangleById("ImageKnifeCanvas");
|
||||
|
||||
aboutToAppear(){
|
||||
let displayClas : ESObject =null
|
||||
try {
|
||||
displayClas = display.getDefaultDisplaySync()
|
||||
console.info('........width'+ displayClas.width)
|
||||
console.info('........height'+ displayClas.height)
|
||||
|
||||
}catch (e){
|
||||
|
||||
console.error('error' + e)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
build(){
|
||||
Scroll(){
|
||||
Column(){
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption:{
|
||||
loadSrc :$r('app.media.pngSample'),
|
||||
mainScaleType:ScaleType.AUTO,
|
||||
}
|
||||
})
|
||||
|
||||
Button(){
|
||||
Text('getRectangleById').fontSize(40).fontWeight(FontWeight.Bold);
|
||||
}
|
||||
.onClick(()=> {
|
||||
this.value = componentUtils.getRectangleById("ImageKnifeCanvas")
|
||||
this.currentWidth = px2vp(this.value.size.width)
|
||||
this.currentHeight = px2vp(this.value.size.height)
|
||||
console.log('currentWidth'+this.currentWidth)
|
||||
console.log('currentHeight'+this.currentHeight)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { ComponentUtils } from '@ohos.arkui.UIContext'
|
||||
import display from '@ohos.display';
|
||||
import { ImageKnifeComponent,
|
||||
ScaleType } from '@ohos/libraryimageknife'
|
||||
import componentUtils from '@ohos.arkui.componentUtils';
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
|
||||
struct testImageKnifeAutoWidthPage {
|
||||
|
||||
|
||||
private currentWidth: number =0
|
||||
private currentHeight: number =0
|
||||
|
||||
@State value : componentUtils.ComponentInfo = componentUtils.getRectangleById("ImageKnifeCanvas");
|
||||
|
||||
aboutToAppear(){
|
||||
let displayClas : ESObject =null
|
||||
try {
|
||||
displayClas = display.getDefaultDisplaySync()
|
||||
console.info('........width'+ displayClas.width)
|
||||
console.info('........height'+ displayClas.height)
|
||||
|
||||
}catch (e){
|
||||
|
||||
console.error('error' + e)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
build(){
|
||||
Scroll(){
|
||||
Column(){
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption:{
|
||||
loadSrc :$r('app.media.pngSample'),
|
||||
mainScaleType:ScaleType.AUTO_WIDTH,
|
||||
}
|
||||
})
|
||||
.height(400)
|
||||
|
||||
Button(){
|
||||
Text('getRectangleById').fontSize(40).fontWeight(FontWeight.Bold);
|
||||
}
|
||||
.onClick(()=> {
|
||||
this.value = componentUtils.getRectangleById("ImageKnifeCanvas")
|
||||
this.currentWidth = px2vp(this.value.size.width)
|
||||
this.currentHeight = px2vp(this.value.size.height)
|
||||
console.log('currentWidth'+this.currentWidth)
|
||||
console.log('currentHeight'+this.currentHeight)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,239 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2022 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import {
|
||||
ImageKnifeComponent,
|
||||
ImageKnifeOption,
|
||||
ImageKnifeGlobal,
|
||||
ImageKnife,
|
||||
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() {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2023 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2022 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { ImageKnifeComponent, ImageKnifeOption } 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)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,261 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import {
|
||||
HeaderOptions,ImageKnife,ImageKnifeComponent,ImageKnifeData,ImageKnifeGlobal,RequestOption,ImageKnifeOption,ObjectKey
|
||||
} from '@ohos/libraryimageknife'
|
||||
import image from '@ohos.multimedia.image'
|
||||
import { BusinessError } from '@ohos.base'
|
||||
|
||||
const TAG = "TEST-"
|
||||
let timeId = -1
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct testImageKnifeHttpRequestHeader {
|
||||
@State pixelMap: PixelMap | undefined = undefined;
|
||||
@State pixelMap1: PixelMap | undefined = undefined;
|
||||
@State pixelMap2: PixelMap | undefined = undefined;
|
||||
@State pixelMap3: PixelMap | undefined = undefined;
|
||||
@State domeType1: boolean = false;
|
||||
@State domeType2: boolean = false;
|
||||
@State domeType3: boolean = false;
|
||||
@State domeType4: boolean = false;
|
||||
@State domeType5: boolean = false;
|
||||
@State domeType6: boolean = false;
|
||||
@State successHeader: string = "requestOption调用成功";
|
||||
@State errorHeader: string = "requestOption调用失败";
|
||||
@State successHeader1: string = "全局调用imageKnife成功";
|
||||
@State errorHeader1: string = "全局调用imageKnife失败";
|
||||
@State successHeader2: string = "单个imageKnife组件调用成功";
|
||||
@State errorHeader2: string = "单个imageKnife组件调用失败";
|
||||
|
||||
@State message: string = "图片header属性测试";
|
||||
@State headerOptions1: HeaderOptions = {
|
||||
key: "refer",
|
||||
value: "http://1.94.37.200:7070/AntiTheftChain/downloadImage"
|
||||
};
|
||||
@State headerOptions2: HeaderOptions = {
|
||||
key: "xx",
|
||||
value: "http://1.94.37.200:7070/AntiTheftChain/downloadImage"
|
||||
};
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: 'http://1.94.37.200:7070/AntiTheftChain/downloadImage',
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,172 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2022 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,76 +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
|
||||
@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() {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,133 +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
|
||||
@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() {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,214 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeComponent} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeOption} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeGlobal} from '@ohos/libraryimageknife'
|
||||
import {ImageKnife} from '@ohos/libraryimageknife'
|
||||
import {RotateImageTransformation} from '@ohos/libraryimageknife'
|
||||
import ArkWorker from '@ohos.worker'
|
||||
import worker from '@ohos.worker'
|
||||
@Entry
|
||||
@Component
|
||||
struct TestImageKnifeOptionChangedPage {
|
||||
|
||||
svgUrl:string = ''
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Flex({direction:FlexDirection.Row}){
|
||||
Button('本地jpg')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button('png')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button('bmp')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.bmpSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button('webp')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button('svg')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.svgSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button('gif')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.gifSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
}
|
||||
.margin({top:15})
|
||||
Flex({direction:FlexDirection.Row}){
|
||||
Button('网络jpg')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB',
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button('png')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://img-blog.csdnimg.cn/20191215043500229.png',
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button('bmp')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://img-blog.csdn.net/20140514114029140',
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button('webp')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
|
||||
Text("请先设置SVG图片的url地址")
|
||||
TextArea({ placeholder: '请输入SVG图片的url地址' })
|
||||
.placeholderColor("rgb(0,0,35)")
|
||||
.placeholderFont({ size: 20, weight: 100, family: 'cursive', style: FontStyle.Italic })
|
||||
.textAlign(TextAlign.Center)
|
||||
.caretColor(Color.Blue)
|
||||
.height(40)
|
||||
.width(400)
|
||||
.fontSize(20)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
.fontFamily("sans-serif")
|
||||
.fontStyle(FontStyle.Normal)
|
||||
.fontColor(Color.Red)
|
||||
.onChange((value: string) => {
|
||||
this.svgUrl = value
|
||||
})
|
||||
|
||||
Button('svg')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: this.svgUrl,
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button('gif')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658',
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
|
||||
Button("dpg")
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://img13.360buyimg.com/n1/jfs/t1/220646/38/10395/30916/61d6e061E1a6d91c8/c0a9a67e726dd7a4.jpg.dpg",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
}
|
||||
.margin({top:15})
|
||||
|
||||
Text('下面为展示图片区域').margin({top:5})
|
||||
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
|
||||
.width(300)
|
||||
.height(300)
|
||||
}.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
|
||||
}
|
||||
aboutToDisappear(){
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,110 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeComponent} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeOption} from '@ohos/libraryimageknife'
|
||||
import {BaseTransform} from '@ohos/libraryimageknife'
|
||||
import {RotateImageTransformation} from '@ohos/libraryimageknife'
|
||||
import {GrayscaleTransformation} from '@ohos/libraryimageknife'
|
||||
import {SketchFilterTransformation} from '@ohos/libraryimageknife'
|
||||
import image from '@ohos.multimedia.image'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestImageKnifeOptionChangedPage2 {
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
thumbSizeMultiplier:0.1
|
||||
};
|
||||
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Flex({direction:FlexDirection.Row}){
|
||||
Button("网络jpg")
|
||||
.onClick(()=>{
|
||||
let rotateTrans:BaseTransform<image.PixelMap> = new RotateImageTransformation(180)
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
thumbSizeMultiplier:0.1,
|
||||
transformation:rotateTrans
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button("png")
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
thumbSizeMultiplier:0.1,
|
||||
transformations:[new RotateImageTransformation(180)]
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button("bmp")
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://img-blog.csdn.net/20140514114029140",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
thumbSizeMultiplier:0.1,
|
||||
transformations:[new GrayscaleTransformation()]
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button("webp")
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
thumbSizeMultiplier:0.1,
|
||||
transformations:[new SketchFilterTransformation()]
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
}
|
||||
.margin({top:15})
|
||||
|
||||
Text("下面为展示图片区域").margin({top:5})
|
||||
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
|
||||
}.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
console.log("aboutToAppear()")
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,167 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeComponent} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeOption} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeGlobal} from '@ohos/libraryimageknife'
|
||||
import {ImageKnife} from '@ohos/libraryimageknife'
|
||||
import {ScaleType} from '@ohos/libraryimageknife'
|
||||
import {RotateImageTransformation} from '@ohos/libraryimageknife'
|
||||
import {GrayscaleTransformation} from '@ohos/libraryimageknife'
|
||||
import {SketchFilterTransformation} from '@ohos/libraryimageknife'
|
||||
import ArkWorker from '@ohos.worker'
|
||||
import worker from '@ohos.worker'
|
||||
import {BaseTransform} from '@ohos/libraryimageknife'
|
||||
import image from '@ohos.multimedia.image'
|
||||
@Entry
|
||||
@Component
|
||||
struct TestImageKnifeOptionChangedPage3 {
|
||||
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
mainScaleType: ScaleType.FIT_CENTER,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
@State compWidht:number = 300
|
||||
@State compHeight:number = 300
|
||||
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Flex({direction:FlexDirection.Row}){
|
||||
Button("本地jpg")
|
||||
.onClick(()=>{
|
||||
let rotateTrans:BaseTransform<image.PixelMap> = new RotateImageTransformation(180)
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
mainScaleType: ScaleType.FIT_CENTER,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
thumbSizeMultiplier:0.1,
|
||||
transformation:rotateTrans,
|
||||
};
|
||||
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button("本地png")
|
||||
.onClick(()=>{
|
||||
|
||||
let rotateTrans:BaseTransform<image.PixelMap> = new RotateImageTransformation(180)
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
mainScaleType: ScaleType.FIT_CENTER,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
thumbSizeMultiplier:0.1,
|
||||
transformation:rotateTrans,
|
||||
};
|
||||
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
}.margin({top:15})
|
||||
Flex({direction:FlexDirection.Row}){
|
||||
Button("本地bmp")
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.bmpSample'),
|
||||
mainScaleType: ScaleType.FIT_CENTER,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
thumbSizeMultiplier:0.1,
|
||||
transformations:[new GrayscaleTransformation()],
|
||||
};
|
||||
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button("本地webp")
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.webpSample'),
|
||||
mainScaleType: ScaleType.FIT_CENTER,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
thumbSizeMultiplier:0.1,
|
||||
transformations:[new SketchFilterTransformation()],
|
||||
};
|
||||
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
}.margin({top:15})
|
||||
Flex({direction:FlexDirection.Row}){
|
||||
Button("网络jpg")
|
||||
.onClick(()=>{
|
||||
let rotateTrans:BaseTransform<image.PixelMap> = new RotateImageTransformation(180)
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress:true,
|
||||
thumbSizeMultiplier:0.1,
|
||||
transformation:rotateTrans
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button("网络png")
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png",
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress:true,
|
||||
thumbSizeMultiplier:0.1,
|
||||
transformations:[new RotateImageTransformation(180)]
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
}.margin({top:15})
|
||||
Flex({direction:FlexDirection.Row}){
|
||||
Button("网络bmp")
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://img-blog.csdn.net/20140514114029140",
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress:true,
|
||||
thumbSizeMultiplier:0.1,
|
||||
transformations:[new GrayscaleTransformation()]
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button("网络webp")
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress:true,
|
||||
thumbSizeMultiplier:0.1,
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
}.margin({top:15})
|
||||
|
||||
Text("下面为展示图片区域").margin({top:5})
|
||||
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(this.compWidht).height(this.compHeight)
|
||||
}.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
aboutToAppear() {
|
||||
|
||||
}
|
||||
aboutToDisappear(){
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,277 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {
|
||||
GrayscaleTransformation,
|
||||
ImageKnifeComponent,
|
||||
ImageKnifeData,
|
||||
ImageKnifeOption,
|
||||
RotateImageTransformation,
|
||||
SketchFilterTransformation,
|
||||
ScaleTypeHelper,
|
||||
IDrawLifeCycle,
|
||||
ScaleType,
|
||||
ImageKnifeGlobal,
|
||||
BaseTransform
|
||||
} from '@ohos/libraryimageknife'
|
||||
import ArkWorker from '@ohos.worker'
|
||||
import worker from '@ohos.worker';
|
||||
import image from '@ohos.multimedia.image';
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestImageKnifeOptionChangedPage4 {
|
||||
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
thumbSizeMultiplier: 0.1,
|
||||
drawLifeCycle: this.createViewLifeCycle()
|
||||
};
|
||||
private mTimerId: number = 0
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Button("网络jpg")
|
||||
.onClick(() => {
|
||||
let rotateTrans: BaseTransform<image.PixelMap> = new RotateImageTransformation(180)
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
thumbSizeMultiplier: 0.1,
|
||||
transformation: rotateTrans,
|
||||
drawLifeCycle: this.createViewLifeCycle()
|
||||
};
|
||||
}).margin({ left: 5 }).backgroundColor(Color.Blue)
|
||||
Button("网络png")
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
thumbSizeMultiplier: 0.1,
|
||||
transformations: [new RotateImageTransformation(180)],
|
||||
drawLifeCycle: this.createViewLifeCycle()
|
||||
};
|
||||
}).margin({ left: 5 }).backgroundColor(Color.Blue)
|
||||
}.margin({ top: 15 })
|
||||
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Button("网络bmp")
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://img-blog.csdn.net/20140514114029140",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
thumbSizeMultiplier: 0.1,
|
||||
transformations: [new GrayscaleTransformation()],
|
||||
drawLifeCycle: this.createViewLifeCycle()
|
||||
};
|
||||
}).margin({ left: 5 }).backgroundColor(Color.Blue)
|
||||
Button("网络webp")
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
thumbSizeMultiplier: 0.1,
|
||||
transformations: [new SketchFilterTransformation()],
|
||||
drawLifeCycle: this.createViewLifeCycle()
|
||||
};
|
||||
}).margin({ left: 5 }).backgroundColor(Color.Blue)
|
||||
}.margin({ top: 15 })
|
||||
|
||||
Text("下面为展示图片区域").margin({ top: 5 })
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
|
||||
}.width(400).height(400).margin({ top: 10 }).backgroundColor(Color.Pink)
|
||||
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
|
||||
}
|
||||
|
||||
aboutToDisappear() {
|
||||
|
||||
}
|
||||
|
||||
drawMainAnimate_index: number = 0;
|
||||
drawMainAnimate_context?: CanvasRenderingContext2D = undefined;
|
||||
drawMainAnimate_scaleType: ScaleType = ScaleType.FIT_CENTER;
|
||||
drawMainAnimate_imagePixelMap?: PixelMap = undefined;
|
||||
drawMainAnimate_widthPixel: number = 0;
|
||||
drawMainAnimate_heightPixel: number = 0;
|
||||
drawMainAnimate_compWidth: number = 0;
|
||||
drawMainAnimate_compHeight: number = 0;
|
||||
drawMainAnimate = () => {
|
||||
console.log('drawMainAnimate index = ' + this.drawMainAnimate_index)
|
||||
|
||||
let clipScale = (this.drawMainAnimate_index / 30.0)
|
||||
this.drawMainAnimate_context?.save()
|
||||
this.drawMainAnimate_context?.beginPath();
|
||||
let path2d = new Path2D()
|
||||
let maxRadius = Math.sqrt(this.drawMainAnimate_compWidth / 2 * this.drawMainAnimate_compWidth / 2 + this.drawMainAnimate_compHeight / 2 * this.drawMainAnimate_compHeight / 2)
|
||||
path2d.arc(this.drawMainAnimate_compWidth / 2, this.drawMainAnimate_compHeight / 2, maxRadius * clipScale, 0, Math.PI * 2)
|
||||
this.drawMainAnimate_context?.clip(path2d)
|
||||
this.drawMainAnimate_context?.save()
|
||||
ScaleTypeHelper.drawImageWithScaleType(this.drawMainAnimate_context!, this.drawMainAnimate_scaleType, this.drawMainAnimate_imagePixelMap, px2vp(this.drawMainAnimate_widthPixel), px2vp(this.drawMainAnimate_heightPixel), this.drawMainAnimate_compWidth, this.drawMainAnimate_compHeight, 0, 0)
|
||||
this.drawMainAnimate_context?.restore();
|
||||
this.drawMainAnimate_context?.restore();
|
||||
if (this.drawMainAnimate_index < 30) {
|
||||
this.drawMainAnimate_index++
|
||||
let nextFunc = this.drawMainAnimate
|
||||
|
||||
this.mTimerId = setTimeout(nextFunc, 1000 / 30.0)
|
||||
} else {
|
||||
// 不做处理
|
||||
}
|
||||
}
|
||||
|
||||
private stopAnimate() {
|
||||
if (this.mTimerId > 0) {
|
||||
clearTimeout(this.mTimerId)
|
||||
this.mTimerId = 0
|
||||
} else {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
private createViewLifeCycle(): IDrawLifeCycle {
|
||||
let viewLifeCycle: IDrawLifeCycle = {
|
||||
// 展示占位图
|
||||
displayPlaceholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
|
||||
|
||||
this.stopAnimate()
|
||||
return false;
|
||||
},
|
||||
// 展示加载进度
|
||||
displayProgress: (context: CanvasRenderingContext2D, progress: number, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
|
||||
|
||||
this.stopAnimate()
|
||||
context.save();
|
||||
context.clearRect(0, 0, compWidth, compHeight)
|
||||
let pi = Math.PI * 2 / 100; //pi 讲圆的周长划分为100份
|
||||
let rate = progress - 25;
|
||||
let diameter = compWidth > compHeight ? compHeight : compWidth
|
||||
context.lineWidth = Math.floor(diameter * 0.03)
|
||||
context.lineCap = "round"
|
||||
context.fillStyle = "white"
|
||||
context.font = Math.floor(diameter * 0.5) + 'px'
|
||||
let x0 = (compWidth - diameter) / 2.0 + Math.floor(diameter * 0.5)
|
||||
let y0 = (compHeight - diameter) / 2.0 + Math.floor(diameter * 0.1)
|
||||
let x1 = (compWidth - diameter) / 2.0 + Math.floor(diameter * 0.5)
|
||||
let y1 = (compHeight - diameter) / 2.0 + Math.floor(diameter * 0.8)
|
||||
let gradient = context.createLinearGradient(x0, y0, x1, y1)
|
||||
gradient.addColorStop(0, "#11ffe4")
|
||||
gradient.addColorStop(0.5, "#03c6fd")
|
||||
gradient.addColorStop(1, "#10a5ff")
|
||||
context.clearRect(0, 0, compWidth, compHeight)
|
||||
context.shadowBlur = 0
|
||||
context.beginPath()
|
||||
context.strokeStyle = "#15222d"
|
||||
let radius = Math.floor(diameter * 0.3)
|
||||
let arcX = compWidth / 2.0
|
||||
let arcY = compHeight / 2.0
|
||||
context.arc(arcX, arcY, radius, 0, Math.PI * 2, true)
|
||||
context.stroke()
|
||||
context.beginPath()
|
||||
let showText = rate + 25 + '%'
|
||||
let metrics = context.measureText(showText)
|
||||
let textX = (compWidth / 2.0) - metrics.width / 2.0
|
||||
let textY = (compHeight / 2.0) + metrics.height * 0.3
|
||||
context.fillText(showText, textX, textY)
|
||||
context.stroke()
|
||||
context.beginPath()
|
||||
context.strokeStyle = gradient
|
||||
context.arc(arcX, arcY, radius, pi * -25, pi * rate)
|
||||
context.stroke();
|
||||
context.restore();
|
||||
return true;
|
||||
},
|
||||
// 展示缩略图
|
||||
displayThumbSizeMultiplier: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
|
||||
|
||||
this.stopAnimate()
|
||||
return false;
|
||||
},
|
||||
|
||||
// 展示主图
|
||||
displayMainSource: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
|
||||
this.stopAnimate()
|
||||
if (data.isPixelMap()) {
|
||||
|
||||
data.drawPixelMap?.imagePixelMap?.getImageInfo().then((imageInfo) => {
|
||||
let scaleType = (typeof imageKnifeOption.mainScaleType == 'number') ? imageKnifeOption.mainScaleType : ScaleType.FIT_CENTER
|
||||
console.log('imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height + 'scaleType=' + scaleType)
|
||||
|
||||
|
||||
this.drawMainAnimate_index = 0;
|
||||
this.drawMainAnimate_context = context;
|
||||
this.drawMainAnimate_scaleType = scaleType
|
||||
this.drawMainAnimate_imagePixelMap = data.drawPixelMap?.imagePixelMap
|
||||
this.drawMainAnimate_widthPixel = imageInfo.size.width
|
||||
this.drawMainAnimate_heightPixel = imageInfo.size.height
|
||||
this.drawMainAnimate_compWidth = compWidth
|
||||
this.drawMainAnimate_compHeight = compHeight
|
||||
|
||||
let func = this.drawMainAnimate
|
||||
|
||||
this.mTimerId = setTimeout(func, 1000 / 30.0)
|
||||
|
||||
console.log('TestImageKnifeOptionChangedPage4 drawMainSource end!')
|
||||
})
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
// 展示重试图层
|
||||
displayRetryholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
|
||||
|
||||
this.stopAnimate()
|
||||
return false;
|
||||
},
|
||||
|
||||
// 展示失败占位图
|
||||
displayErrorholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
|
||||
|
||||
this.stopAnimate()
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return viewLifeCycle;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,238 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {
|
||||
GrayscaleTransformation,
|
||||
ImageKnifeComponent,
|
||||
ImageKnifeData,
|
||||
ImageKnifeGlobal,
|
||||
ImageKnifeOption,
|
||||
ImageKnife,
|
||||
RotateImageTransformation,
|
||||
SketchFilterTransformation,
|
||||
ScaleTypeHelper,
|
||||
IDrawLifeCycle,
|
||||
ScaleType,
|
||||
ImageKnifeDrawFactory
|
||||
} from '@ohos/libraryimageknife'
|
||||
import worker from '@ohos.worker';
|
||||
|
||||
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
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -1,269 +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,
|
||||
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() {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2023 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnifeComponent } from '@ohos/libraryimageknife'
|
||||
import router from '@ohos.router'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestImageKnifeRouter {
|
||||
@State array: Array<string> = [
|
||||
"https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
|
||||
'https://img-blog.csdnimg.cn/20191215043500229.png',
|
||||
'https://img-blog.csdn.net/20140514114029140',
|
||||
'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp'
|
||||
]
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
Grid() {
|
||||
ForEach(this.array, (item: string, index: number) => {
|
||||
GridItem() {
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: {
|
||||
loadSrc: item,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
onClick: () => {
|
||||
router.pushUrl({ url: "pages/testImageKnifeRouter2", params: { url: this.array[index] } })
|
||||
}
|
||||
}
|
||||
}).width(150).height(150)
|
||||
.sharedTransition(this.array[index], {
|
||||
duration: 500,
|
||||
curve: Curve.Linear,
|
||||
type: SharedTransitionEffectType.Exchange
|
||||
})
|
||||
}
|
||||
})
|
||||
}.columnsTemplate('1fr 1fr')
|
||||
.rowsTemplate('1fr 1fr')
|
||||
}.width("100%").height("100%")
|
||||
}
|
||||
|
||||
pageTransition() {
|
||||
PageTransitionEnter({ duration: 0 })
|
||||
PageTransitionExit({ duration: 0 })
|
||||
}
|
||||
}
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2023 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnifeComponent } from '@ohos/libraryimageknife'
|
||||
import router from '@ohos.router'
|
||||
|
||||
interface ParamsType {
|
||||
url: string
|
||||
}
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestImageKnifeRouter {
|
||||
@State url: string = ""
|
||||
|
||||
aboutToAppear() {
|
||||
this.url = (router.getParams() as ParamsType).url
|
||||
}
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: {
|
||||
loadSrc: this.url,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
onClick: () => {
|
||||
router.back()
|
||||
}
|
||||
}
|
||||
}).width("100%").height(600)
|
||||
.sharedTransition(this.url, {
|
||||
duration: 500,
|
||||
curve: Curve.Linear,
|
||||
type: SharedTransitionEffectType.Exchange
|
||||
})
|
||||
}.width("100%").height("100%")
|
||||
}
|
||||
|
||||
pageTransition() {
|
||||
PageTransitionEnter({ duration: 0 })
|
||||
PageTransitionExit({ duration: 0 })
|
||||
}
|
||||
}
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2023 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnife, ImageKnifeComponent, ImageKnifeGlobal, ImageKnifeOption } from "@ohos/libraryimageknife"
|
||||
import worker from '@ohos.worker';
|
||||
|
||||
let gifUrl = "https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658"
|
||||
|
||||
let data: string[] = [
|
||||
'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658',
|
||||
'https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB',
|
||||
'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700',
|
||||
'https://img-blog.csdnimg.cn/20191215043500229.png',
|
||||
'https://res.vmallres.com/cmscdn/CN/2023-03/7052a601ac3e428c84c9415ad9734735.gif',
|
||||
'https://img-blog.csdn.net/20140514114029140'
|
||||
]
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestManyGifLoadWithPage {
|
||||
|
||||
@State p1: PixelMap | undefined = undefined
|
||||
@State p2: PixelMap | undefined = undefined
|
||||
@State workerOption: ImageKnifeOption = {
|
||||
loadSrc: $r('app.media.icon'),
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
Text('gif Demo').align(Alignment.Center).fontSize(25).margin(10).fontWeight(FontWeight.Bolder)
|
||||
Row() {
|
||||
Column() {
|
||||
Button('use Origin Image').align(Alignment.Center).fontSize(10).margin(2)
|
||||
Image(gifUrl).width('100%').height(100).backgroundColor(Color.Blue).objectFit(ImageFit.Contain)
|
||||
}.width('50%').backgroundColor(Color.Orange)
|
||||
|
||||
Column() {
|
||||
Button('use ImageKnifeComponent').align(Alignment.Center).fontSize(10).margin(2)
|
||||
ImageKnifeComponent({ imageKnifeOption: { loadSrc: gifUrl } })
|
||||
.width('100%')
|
||||
.height(100)
|
||||
.backgroundColor(Color.Orange)
|
||||
}.width('50%').backgroundColor(Color.Blue)
|
||||
}
|
||||
|
||||
Grid() {
|
||||
ForEach(data, (url: string) => {
|
||||
GridItem(){
|
||||
ImageKnifeComponent({imageKnifeOption:{
|
||||
loadSrc:url
|
||||
}}).backgroundColor(0x38393D).width(150).height(100)
|
||||
}
|
||||
})
|
||||
}.rowsGap(2)
|
||||
.columnsGap(2)
|
||||
}.width('100%').height('100%').backgroundColor(0xF1F3F5)
|
||||
}
|
||||
aboutToAppear(){
|
||||
|
||||
}
|
||||
aboutToDisappear(){
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2023 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ScaleType, ImageKnifeComponent, NONE, DiskStrategy } from "@ohos/libraryimageknife"
|
||||
import { Material } from './model/Material';
|
||||
import { TestDataSource } from './model/TestDataSource';
|
||||
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestManyNetImageLoadWithPage2 {
|
||||
private data: TestDataSource = new TestDataSource();
|
||||
private setting: DiskStrategy = new NONE();
|
||||
private scroller: Scroller = new Scroller()
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Column() {
|
||||
Grid(this.scroller) {
|
||||
LazyForEach(this.data, (item: Material, index) => {
|
||||
GridItem() {
|
||||
Stack({ alignContent: Alignment.BottomEnd }) {
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: {
|
||||
loadSrc: item.thumbnail,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
mainScaleType: ScaleType.CENTER_CROP,
|
||||
placeholderScaleType: ScaleType.CENTER_CROP,
|
||||
isCacheable: false,
|
||||
strategy: this.setting
|
||||
}
|
||||
}).width('100%').height('100%')
|
||||
Text(index + "." + item.name)
|
||||
.fontSize(10)
|
||||
.maxLines(1)
|
||||
.fontColor(Color.White)
|
||||
.textAlign(TextAlign.Center)
|
||||
.layoutWeight(1)
|
||||
.width('100%')
|
||||
.backgroundColor(Color.Orange)
|
||||
}
|
||||
}.width('45%').height(200)
|
||||
}, (item: Material,index:number) => item.material_id + index.toString())
|
||||
}
|
||||
.columnsTemplate('1fr 1fr')
|
||||
.columnsGap(8)
|
||||
.rowsGap(10)
|
||||
.width('100%')
|
||||
.cachedCount(3)
|
||||
.height('100%')
|
||||
}.margin({ top: 5 })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,642 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeComponent} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeData} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeOption} from '@ohos/libraryimageknife'
|
||||
import {RequestOption} from '@ohos/libraryimageknife'
|
||||
import {ImageKnifeGlobal } from '@ohos/libraryimageknife'
|
||||
import worker from '@ohos.worker'
|
||||
import { BusinessError } from '@ohos.base'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestPreloadPage {
|
||||
svgUrl:string = ''
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
@State imageKnifeOption: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
@State imageKnifeOption3: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
|
||||
@State imageKnifeOption4: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
@State imageKnifeOption5: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
@State imageKnifeOption6: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Column() {
|
||||
Column() {
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Button('预加载本地资源gif')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load($r('app.media.gifSample'))
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
if (err) {
|
||||
console.log('预加载本地资源gif 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载本地资源gif成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
}})
|
||||
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
Button('本地资源gif')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.gifSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
Button('预加载本地资源gif静态')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load($r('app.media.gifSample'))
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.dontAnimate()
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
if (err ) {
|
||||
console.log('预加载本地资源gif静态 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载本地资源gif静态成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
}})
|
||||
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
Button('本地资源gif静态')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.gifSample'),
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
dontAnimateFlag: true
|
||||
}
|
||||
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
|
||||
Button('预加载网络资源gif')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load('https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658')
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
if (err) {
|
||||
console.log('预加载网络资源gif 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载网络资源gif成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
}})
|
||||
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
Button('网络资源gif')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658',
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
Button('预加载网络资源gif静态')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load('https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658')
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.dontAnimate()
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
if (err) {
|
||||
console.log('预加载网络资源gif静态 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载网络资源gif静态成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
}})
|
||||
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
Button('网络资源gif静态')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658',
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
dontAnimateFlag: true
|
||||
};
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(200).height(200)
|
||||
|
||||
}
|
||||
|
||||
Column() {
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Button('预加载本地资源svg')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load($r('app.media.svgSample'))
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
if (err ) {
|
||||
console.log('预加载本地资源svg 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载本地资源svg成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
}})
|
||||
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
Button('本地资源svg')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption = {
|
||||
loadSrc: $r('app.media.svgSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
Text("请先设置SVG图片的url地址")
|
||||
TextArea({ placeholder: '请输入SVG图片的url地址' })
|
||||
.placeholderColor("rgb(0,0,35)")
|
||||
.placeholderFont({ size: 20, weight: 100, family: 'cursive', style: FontStyle.Italic })
|
||||
.textAlign(TextAlign.Center)
|
||||
.caretColor(Color.Blue)
|
||||
.height(40)
|
||||
.width(400)
|
||||
.fontSize(20)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
.fontFamily("sans-serif")
|
||||
.fontStyle(FontStyle.Normal)
|
||||
.fontColor(Color.Red)
|
||||
.onChange((value: string) => {
|
||||
this.svgUrl = value
|
||||
})
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
|
||||
Button('预加载网络资源svg')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load(this.svgUrl)
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
if (err) {
|
||||
console.log('预加载网络资源gif 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载网络资源gif成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
}})
|
||||
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
Button('网络资源svg')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption = {
|
||||
loadSrc: this.svgUrl,
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(200).height(200)
|
||||
|
||||
}
|
||||
|
||||
Column() {
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Button('预加载本地资源webp')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load($r('app.media.jpgSample'))
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
if (err) {
|
||||
console.log('预加载本地资源webp 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载本地资源webp成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
}})
|
||||
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
Button('本地资源webp')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption3 = {
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
|
||||
Button('预加载网络资源webp')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load('https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp')
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
if (err) {
|
||||
console.log('预加载网络资源webp 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载网络资源webp成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
}})
|
||||
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
Button('网络资源webp')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption3 = {
|
||||
loadSrc: 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 }).width(200).height(200)
|
||||
|
||||
}
|
||||
|
||||
Column() {
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Button('预加载本地资源bmp')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load($r('app.media.bmpSample'))
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
if (err) {
|
||||
console.log('预加载本地资源bmp 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载本地资源bmp成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
}})
|
||||
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
Button('本地资源bmp')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption4 = {
|
||||
loadSrc: $r('app.media.bmpSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
|
||||
Button('预加载网络资源bmp')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load('https://img-blog.csdn.net/20140514114029140')
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
if (err) {
|
||||
console.log('预加载网络资源bmp 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载网络资源bmp成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
}})
|
||||
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
Button('网络资源bmp')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption4 = {
|
||||
loadSrc: 'https://img-blog.csdn.net/20140514114029140',
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 }).width(200).height(200)
|
||||
|
||||
}
|
||||
|
||||
Column() {
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Button('预加载本地资源png')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load($r('app.media.pngSample'))
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
if (err) {
|
||||
console.log('预加载本地资源png 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载本地资源png成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
}})
|
||||
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
Button('本地资源png')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption5 = {
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
|
||||
Button('预加载网络资源png')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load('https://img-blog.csdnimg.cn/20191215043500229.png')
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
if (err) {
|
||||
console.log('预加载网络资源bmp 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载网络资源bmp成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
}})
|
||||
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
Button('网络资源png')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption5 = {
|
||||
loadSrc: 'https://img-blog.csdnimg.cn/20191215043500229.png',
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption5 }).width(200).height(200)
|
||||
|
||||
}
|
||||
|
||||
Column() {
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Button('预加载本地资源jpg')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load($r('app.media.jpgSample'))
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
if (err) {
|
||||
console.log('预加载本地资源jpg 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载本地资源jpg成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
}})
|
||||
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
Button('本地资源jpg')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption6 = {
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
|
||||
Button('预加载网络资源jpg')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load('https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB')
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
if (err) {
|
||||
console.log('预加载网络资源jpg 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载网络资源jpg成功! imageknifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
}})
|
||||
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
Button('网络资源jpg')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption6 = {
|
||||
loadSrc: 'https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB',
|
||||
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
||||
};
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption6 }).width(200).height(200)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
|
||||
}
|
||||
aboutToDisappear(){
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,188 +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, Priority, NONE, ImageKnifeGlobal } from '@ohos/libraryimageknife';
|
||||
const dataBak: ImageKnifeOption[] = [
|
||||
{
|
||||
loadSrc: "http://b.hiphotos.baidu.com/image/pic/item/9d82d158ccbf6c81b94575cfb93eb13533fa40a2.jpg",
|
||||
priority: Priority.HIGH
|
||||
},
|
||||
{
|
||||
loadSrc: "http://e.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31c1badd5a685d6277f9e2ff81e.jpg",
|
||||
priority: Priority.HIGH
|
||||
},
|
||||
{
|
||||
loadSrc: "http://g.hiphotos.baidu.com/image/pic/item/0d338744ebf81a4c87a3add4d52a6059252da61e.jpg",
|
||||
priority: Priority.HIGH
|
||||
},
|
||||
{
|
||||
loadSrc: "http://a.hiphotos.baidu.com/image/pic/item/f2deb48f8c5494ee5080c8142ff5e0fe99257e19.jpg",
|
||||
priority: Priority.HIGH
|
||||
},
|
||||
{
|
||||
loadSrc: "http://f.hiphotos.baidu.com/image/pic/item/4034970a304e251f503521f5a586c9177e3e53f9.jpg",
|
||||
priority: Priority.HIGH
|
||||
},
|
||||
{
|
||||
loadSrc: "https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
|
||||
priority: Priority.MEDIUM
|
||||
},
|
||||
{
|
||||
loadSrc: "http://h.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5f2c2a9e953da81cb39db3d1d.jpg",
|
||||
priority: Priority.MEDIUM
|
||||
},
|
||||
{
|
||||
loadSrc: "http://a.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a292d2472199d25bc315d607c7c.jpg",
|
||||
priority: Priority.MEDIUM
|
||||
},
|
||||
{
|
||||
loadSrc: "https://img-blog.csdn.net/20140514114029140",
|
||||
priority: Priority.MEDIUM
|
||||
},
|
||||
{
|
||||
loadSrc: "http://g.hiphotos.baidu.com/image/pic/item/6d81800a19d8bc3e770bd00d868ba61ea9d345f2.jpg",
|
||||
priority: Priority.MEDIUM
|
||||
},
|
||||
{
|
||||
loadSrc: "http://b.hiphotos.baidu.com/image/pic/item/e824b899a9014c08878b2c4c0e7b02087af4f4a3.jpg",
|
||||
priority: Priority.LOW
|
||||
},
|
||||
{
|
||||
loadSrc: "http://b.hiphotos.baidu.com/image/pic/item/359b033b5bb5c9ea5c0e3c23d139b6003bf3b374.jpg",
|
||||
priority: Priority.LOW
|
||||
},
|
||||
{
|
||||
loadSrc: "http://h.hiphotos.baidu.com/image/pic/item/902397dda144ad340668b847d4a20cf430ad851e.jpg",
|
||||
priority: Priority.LOW
|
||||
},
|
||||
{
|
||||
loadSrc: "http://d.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f119945cbe2fe9925bc317d2a.jpg",
|
||||
priority: Priority.LOW
|
||||
},
|
||||
{
|
||||
loadSrc:"http://img2.xkhouse.com/bbs/hfhouse/data/attachment/forum/corebbs/2009-11/2009113011534566298.jpg",
|
||||
priority: Priority.LOW
|
||||
}
|
||||
];
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestPriorityComponent {
|
||||
@State data: ImageKnifeOption[] = [
|
||||
{
|
||||
loadSrc: "https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
|
||||
priority: Priority.HIGH
|
||||
},
|
||||
{
|
||||
loadSrc: "http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg",
|
||||
priority: Priority.HIGH
|
||||
},
|
||||
{
|
||||
loadSrc: "http://h.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5f2c2a9e953da81cb39db3d1d.jpg",
|
||||
priority: Priority.HIGH
|
||||
},
|
||||
{
|
||||
loadSrc: "http://g.hiphotos.baidu.com/image/pic/item/55e736d12f2eb938d5277fd5d0628535e5dd6f4a.jpg",
|
||||
priority: Priority.HIGH
|
||||
},
|
||||
{
|
||||
loadSrc: "http://e.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f7e41f5cfe760e0cf3d6cad6ee.jpg",
|
||||
priority: Priority.HIGH
|
||||
},
|
||||
{
|
||||
loadSrc: "http://b.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fbb3586c0168224f4a20a4dd7e.jpg",
|
||||
priority: Priority.MEDIUM
|
||||
},
|
||||
{
|
||||
loadSrc: "http://img2.xkhouse.com/bbs/hfhouse/data/attachment/forum/corebbs/2009-11/2009113011534566298.jpg",
|
||||
priority: Priority.MEDIUM
|
||||
},
|
||||
{
|
||||
loadSrc: "http://a.hiphotos.baidu.com/image/pic/item/e824b899a9014c087eb617650e7b02087af4f464.jpg",
|
||||
priority: Priority.MEDIUM
|
||||
},
|
||||
{
|
||||
loadSrc: "http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg",
|
||||
priority: Priority.MEDIUM
|
||||
},
|
||||
{
|
||||
loadSrc: "http://d.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f119945cbe2fe9925bc317d2a.jpg",
|
||||
priority: Priority.MEDIUM
|
||||
},
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
|
||||
priority: Priority.LOW
|
||||
},
|
||||
{
|
||||
loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png",
|
||||
priority: Priority.LOW
|
||||
},
|
||||
{
|
||||
loadSrc: "https://img-blog.csdn.net/20140514114029140",
|
||||
priority: Priority.LOW
|
||||
},
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
|
||||
priority: Priority.LOW
|
||||
},
|
||||
{
|
||||
loadSrc: "http://g.hiphotos.baidu.com/image/pic/item/6d81800a19d8bc3e770bd00d868ba61ea9d345f2.jpg",
|
||||
priority: 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 })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,204 +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 } from '@ohos/libraryimageknife'
|
||||
|
||||
class BasicDataSource implements IDataSource {
|
||||
private listeners: DataChangeListener[] = [];
|
||||
private originDataArray: StringData[] = [];
|
||||
|
||||
public totalCount(): number {
|
||||
return 0;
|
||||
}
|
||||
|
||||
public getData(index: number): StringData {
|
||||
return this.originDataArray[index];
|
||||
}
|
||||
|
||||
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);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
class MyDataSource extends BasicDataSource {
|
||||
private dataArray: StringData[] = [];
|
||||
|
||||
public totalCount(): number {
|
||||
return this.dataArray.length;
|
||||
}
|
||||
|
||||
public getData(index: number): StringData {
|
||||
return this.dataArray[index];
|
||||
}
|
||||
|
||||
public addData(index: number, data: StringData): void {
|
||||
this.dataArray.splice(index, 0, data);
|
||||
this.notifyDataAdd(index);
|
||||
}
|
||||
|
||||
public pushData(data: StringData): void {
|
||||
this.dataArray.push(data);
|
||||
this.notifyDataAdd(this.dataArray.length - 1);
|
||||
}
|
||||
|
||||
public reloadData(): void {
|
||||
this.notifyDataReload();
|
||||
}
|
||||
}
|
||||
|
||||
class StringData {
|
||||
message: string;
|
||||
imgSrc: string;
|
||||
|
||||
constructor(message: string, imgSrc: string) {
|
||||
this.message = message;
|
||||
this.imgSrc = imgSrc;
|
||||
}
|
||||
}
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestReuseAbleComponent {
|
||||
@State dataArray: Array<string> = [
|
||||
"http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
|
||||
"http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg",
|
||||
"http://h.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5f2c2a9e953da81cb39db3d1d.jpg",
|
||||
"http://g.hiphotos.baidu.com/image/pic/item/55e736d12f2eb938d5277fd5d0628535e5dd6f4a.jpg",
|
||||
"http://e.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f7e41f5cfe760e0cf3d6cad6ee.jpg",
|
||||
"http://b.hiphotos.baidu.com/image/pic/item/9d82d158ccbf6c81b94575cfb93eb13533fa40a2.jpg",
|
||||
"http://e.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31c1badd5a685d6277f9e2ff81e.jpg",
|
||||
"http://g.hiphotos.baidu.com/image/pic/item/0d338744ebf81a4c87a3add4d52a6059252da61e.jpg",
|
||||
"http://a.hiphotos.baidu.com/image/pic/item/f2deb48f8c5494ee5080c8142ff5e0fe99257e19.jpg",
|
||||
"http://f.hiphotos.baidu.com/image/pic/item/4034970a304e251f503521f5a586c9177e3e53f9.jpg",
|
||||
"http://b.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fbb3586c0168224f4a20a4dd7e.jpg",
|
||||
"http://img2.xkhouse.com/bbs/hfhouse/data/attachment/forum/corebbs/2009-11/2009113011534566298.jpg",
|
||||
"http://a.hiphotos.baidu.com/image/pic/item/e824b899a9014c087eb617650e7b02087af4f464.jpg",
|
||||
"http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg",
|
||||
"http://d.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f119945cbe2fe9925bc317d2a.jpg",
|
||||
"http://h.hiphotos.baidu.com/image/pic/item/902397dda144ad340668b847d4a20cf430ad851e.jpg",
|
||||
"http://b.hiphotos.baidu.com/image/pic/item/359b033b5bb5c9ea5c0e3c23d139b6003bf3b374.jpg",
|
||||
"http://a.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a292d2472199d25bc315d607c7c.jpg",
|
||||
"http://b.hiphotos.baidu.com/image/pic/item/e824b899a9014c08878b2c4c0e7b02087af4f4a3.jpg",
|
||||
"http://g.hiphotos.baidu.com/image/pic/item/6d81800a19d8bc3e770bd00d868ba61ea9d345f2.jpg",
|
||||
"https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
|
||||
'https://img-blog.csdnimg.cn/20191215043500229.png',
|
||||
'https://img-blog.csdn.net/20140514114029140',
|
||||
'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp'
|
||||
]
|
||||
private data: MyDataSource = new MyDataSource();
|
||||
private index: number = 0
|
||||
private timeId: number = -1
|
||||
|
||||
aboutToAppear() {
|
||||
for (let i = 0; i <= 4; i++) {
|
||||
this.data.pushData(new StringData(`Hello ${i}`, this.dataArray[i]));
|
||||
}
|
||||
}
|
||||
|
||||
build() {
|
||||
List({ space: 3 }) {
|
||||
LazyForEach(this.data, (item: StringData, index: number) => {
|
||||
ListItem() {
|
||||
Column() {
|
||||
Text(item.message).fontSize(50)
|
||||
.onAppear(() => {
|
||||
console.info("appear:" + item.message)
|
||||
})
|
||||
ReusableComponent({ url: item.imgSrc })
|
||||
.width(500)
|
||||
.height(200)
|
||||
}.margin({ left: 10, right: 10 })
|
||||
}
|
||||
.onClick(() => {
|
||||
item.message += '00';
|
||||
this.data.reloadData();
|
||||
})
|
||||
}, (item: StringData, index: number) => JSON.stringify(item))
|
||||
}.cachedCount(5)
|
||||
.onReachEnd(()=>{
|
||||
clearTimeout(this.timeId)
|
||||
this.timeId = setTimeout(()=>{
|
||||
this.data.reloadData()
|
||||
if(this.data.totalCount() <= this.dataArray.length) {
|
||||
this.index = this.data.totalCount()
|
||||
for (let index = this.index; index <= this.index + 4; index++) {
|
||||
this.data.addData(index,new StringData(`Hello ${index}`, this.dataArray[index]));
|
||||
}
|
||||
}
|
||||
},1500)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@Reusable
|
||||
@Component
|
||||
struct ReusableComponent {
|
||||
@State url: string = ""
|
||||
|
||||
aboutToReuse(params: Record<string, string>) {
|
||||
this.url = params.url
|
||||
}
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: {
|
||||
loadSrc: this.url,
|
||||
placeholderSrc: $r('app.media.icon_loading')
|
||||
}
|
||||
})
|
||||
}.width("100%").height("100%")
|
||||
}
|
||||
}
|
||||
|
|
@ -1,203 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnifeComponent, ImageKnifeOption, ScaleType } from '@ohos/libraryimageknife'
|
||||
|
||||
class CommonDataSource <T> implements IDataSource {
|
||||
private dataArray: T[] = []
|
||||
private listeners: DataChangeListener[] = []
|
||||
|
||||
constructor(element: []) {
|
||||
this.dataArray = element
|
||||
}
|
||||
|
||||
public getData(index: number) {
|
||||
return this.dataArray[index]
|
||||
}
|
||||
|
||||
public totalCount(): number {
|
||||
return this.dataArray.length
|
||||
}
|
||||
|
||||
public addData(index: number, data: T[]): void {
|
||||
this.dataArray = this.dataArray.concat(data)
|
||||
this.notifyDataAdd(index)
|
||||
}
|
||||
|
||||
unregisterDataChangeListener(listener: DataChangeListener): void {
|
||||
const pos = this.listeners.indexOf(listener);
|
||||
if (pos >= 0) {
|
||||
this.listeners.splice(pos, 1);
|
||||
}
|
||||
}
|
||||
|
||||
registerDataChangeListener(listener: DataChangeListener): void {
|
||||
if (this.listeners.indexOf(listener) < 0) {
|
||||
this.listeners.push(listener)
|
||||
}
|
||||
}
|
||||
|
||||
notifyDataAdd(index: number): void {
|
||||
this.listeners.forEach((listener: DataChangeListener) => {
|
||||
listener.onDataAdd(index)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestReusePhotoPage {
|
||||
@State hotCommendList: CommonDataSource<string> = new CommonDataSource<string>([])
|
||||
private data: Array<string> = [
|
||||
"http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
|
||||
"http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg",
|
||||
"http://h.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5f2c2a9e953da81cb39db3d1d.jpg",
|
||||
"http://g.hiphotos.baidu.com/image/pic/item/55e736d12f2eb938d5277fd5d0628535e5dd6f4a.jpg",
|
||||
"http://e.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f7e41f5cfe760e0cf3d6cad6ee.jpg",
|
||||
"http://b.hiphotos.baidu.com/image/pic/item/9d82d158ccbf6c81b94575cfb93eb13533fa40a2.jpg",
|
||||
"http://e.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31c1badd5a685d6277f9e2ff81e.jpg",
|
||||
"http://g.hiphotos.baidu.com/image/pic/item/0d338744ebf81a4c87a3add4d52a6059252da61e.jpg",
|
||||
"http://a.hiphotos.baidu.com/image/pic/item/f2deb48f8c5494ee5080c8142ff5e0fe99257e19.jpg",
|
||||
"http://f.hiphotos.baidu.com/image/pic/item/4034970a304e251f503521f5a586c9177e3e53f9.jpg",
|
||||
"http://b.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fbb3586c0168224f4a20a4dd7e.jpg",
|
||||
"http://img2.xkhouse.com/bbs/hfhouse/data/attachment/forum/corebbs/2009-11/2009113011534566298.jpg",
|
||||
"http://a.hiphotos.baidu.com/image/pic/item/e824b899a9014c087eb617650e7b02087af4f464.jpg",
|
||||
"http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg",
|
||||
"http://d.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f119945cbe2fe9925bc317d2a.jpg",
|
||||
"http://h.hiphotos.baidu.com/image/pic/item/902397dda144ad340668b847d4a20cf430ad851e.jpg",
|
||||
"http://b.hiphotos.baidu.com/image/pic/item/359b033b5bb5c9ea5c0e3c23d139b6003bf3b374.jpg",
|
||||
"http://a.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a292d2472199d25bc315d607c7c.jpg",
|
||||
"http://b.hiphotos.baidu.com/image/pic/item/e824b899a9014c08878b2c4c0e7b02087af4f4a3.jpg",
|
||||
"http://g.hiphotos.baidu.com/image/pic/item/6d81800a19d8bc3e770bd00d868ba61ea9d345f2.jpg",
|
||||
"https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
|
||||
'https://img-blog.csdnimg.cn/20191215043500229.png',
|
||||
'https://img-blog.csdn.net/20140514114029140',
|
||||
'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp'
|
||||
]
|
||||
|
||||
aboutToAppear() {
|
||||
this.hotCommendList.addData(this.hotCommendList.totalCount(), this.data)
|
||||
AppStorage.set("image_size",1)
|
||||
}
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
Button("up").onClick(()=>{
|
||||
AppStorage.set("image_size",1.6)
|
||||
})
|
||||
Button("down").onClick(()=>{
|
||||
AppStorage.set("image_size",0.9)
|
||||
})
|
||||
List() {
|
||||
LazyForEach(this.hotCommendList, (item: string) => {
|
||||
ListItem() {
|
||||
ReuseComponent({ url: item }).width("100%").height("100%")
|
||||
}.width(200).height(200).backgroundColor(Color.Orange)
|
||||
})
|
||||
}
|
||||
.width("100%")
|
||||
.height("100%")
|
||||
.backgroundColor(0xFAEEE0)
|
||||
}.width("100%").height("100%")
|
||||
}
|
||||
}
|
||||
|
||||
@Reusable
|
||||
@Component
|
||||
struct ReuseComponent {
|
||||
@Prop url: string = ""
|
||||
imgSize: number = 100
|
||||
@StorageProp("image_size") @Watch("updateImageSize") image_size: number = 0
|
||||
scaleAble: boolean = true
|
||||
@State calcImgSize: number = 100
|
||||
aboutToReuse(params: Record<string, string>) {
|
||||
this.url = params.url
|
||||
}
|
||||
aboutToAppear(){
|
||||
this.setImageSize()
|
||||
}
|
||||
updateImageSize() {
|
||||
this.setImageSize()
|
||||
}
|
||||
|
||||
setImageSize() {
|
||||
if (!this.scaleAble) {
|
||||
this.calcImgSize = this.imgSize
|
||||
} else if (this.image_size < 0.9) {
|
||||
this.calcImgSize = this.imgSize * 0.9
|
||||
} else if (this.image_size > 1.6) {
|
||||
this.calcImgSize = this.imgSize * 1.6
|
||||
} else {
|
||||
this.calcImgSize = this.imgSize * this.image_size
|
||||
}
|
||||
}
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption:{
|
||||
loadSrc: this.url,
|
||||
mainScaleType: ScaleType.FIT_XY,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
placeholderScaleType: ScaleType.FIT_XY,
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
errorholderSrcScaleType: ScaleType.FIT_XY
|
||||
}
|
||||
}).width(this.calcImgSize).height(this.calcImgSize)
|
||||
}.width("100%").height("100%")
|
||||
}
|
||||
}
|
||||
|
||||
@Component
|
||||
struct PhotoComponent {
|
||||
@Watch("updateTheUrl") @Prop url: string = ""
|
||||
imgSize: number = 100
|
||||
@State imageKnifeOption: ImageKnifeOption = new ImageKnifeOption()
|
||||
@StorageProp("image_size") @Watch("updateImageSize") image_size: number = 0
|
||||
scaleAble: boolean = true
|
||||
@State calcImgSize: number = 100
|
||||
|
||||
updateImageSize() {
|
||||
this.setImageSize()
|
||||
}
|
||||
|
||||
setImageSize() {
|
||||
if (!this.scaleAble) {
|
||||
this.calcImgSize = this.imgSize
|
||||
} else if (this.image_size < 0.9) {
|
||||
this.calcImgSize = this.imgSize * 0.9
|
||||
} else if (this.image_size > 1.6) {
|
||||
this.calcImgSize = this.imgSize * 1.6
|
||||
} else {
|
||||
this.calcImgSize = this.imgSize * this.image_size
|
||||
}
|
||||
}
|
||||
|
||||
updateTheUrl() {
|
||||
this.imageKnifeOption = {
|
||||
loadSrc: this.url,
|
||||
mainScaleType: ScaleType.FIT_XY,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
placeholderScaleType: ScaleType.FIT_XY,
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
errorholderSrcScaleType: ScaleType.FIT_XY
|
||||
}
|
||||
}
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
|
||||
}.width(this.calcImgSize).height(this.calcImgSize)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnifeComponent } from '@ohos/libraryimageknife'
|
||||
import { ImageKnifeOption } from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestSingleFrameGifPage {
|
||||
@State message: string = '单帧gif测试'
|
||||
@State options: ImageKnifeOption = {
|
||||
loadSrc: $r('app.media.app_icon')
|
||||
}
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
Column() {
|
||||
Text(`${this.message}`)
|
||||
.width("300vp")
|
||||
.height("60vp")
|
||||
.textAlign(TextAlign.Center)
|
||||
.fontSize("50fp")
|
||||
.fontWeight(FontWeight.Bold)
|
||||
Button("加载单帧gif")
|
||||
.margin(16)
|
||||
.onClick(() => {
|
||||
console.log("加载单帧gif")
|
||||
this.options = {
|
||||
loadSrc: $r('app.media.gifSample_single_frame'),
|
||||
placeholderSrc:$r('app.media.icon_loading')
|
||||
}
|
||||
})
|
||||
Button("加载多帧gif")
|
||||
.margin(16)
|
||||
.onClick(() => {
|
||||
console.log("加载多帧gif")
|
||||
this.options = {
|
||||
loadSrc: $r('app.media.gifSample'),
|
||||
placeholderSrc:$r('app.media.icon_loading')
|
||||
}
|
||||
})
|
||||
ImageKnifeComponent({ imageKnifeOption: this.options })
|
||||
.margin(16)
|
||||
.width(200)
|
||||
.height(200)
|
||||
}
|
||||
.width("100%")
|
||||
.height("100%")
|
||||
.justifyContent(FlexAlign.Center)
|
||||
}
|
||||
.width("100%")
|
||||
.height("100%")
|
||||
}
|
||||
}
|
||||
|
|
@ -1,75 +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 } from '@ohos/libraryimageknife'
|
||||
import { ImageKnifeOption } from '@ohos/libraryimageknife'
|
||||
import display from '@ohos.display';
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestStopPlayingGifPage {
|
||||
@State message: string = 'gif暂停播放测试'
|
||||
@State eventType: string = '';
|
||||
@State options: ImageKnifeOption = {
|
||||
loadSrc: $r('app.media.app_icon'),
|
||||
}
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
Column() {
|
||||
Text(`${this.message}`)
|
||||
.width("300vp")
|
||||
.height("60vp")
|
||||
.textAlign(TextAlign.Center)
|
||||
.fontSize("30fp")
|
||||
.fontWeight(FontWeight.Bold)
|
||||
Button("加载gif图")
|
||||
.margin(16)
|
||||
.onClick(() => {
|
||||
console.log("加载多帧gif")
|
||||
this.options = {
|
||||
loadSrc: $r('app.media.gifSample'),
|
||||
placeholderSrc:$r('app.media.icon_loading'),
|
||||
}
|
||||
})
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Text("控制")
|
||||
Button("开启")
|
||||
.onClick(() => {
|
||||
this.options.autoPlay = true;
|
||||
}).margin({ left: 3 })
|
||||
|
||||
Button("暂停")
|
||||
.onClick(() => {
|
||||
this.options.autoPlay = false;
|
||||
}).margin({ left: 3 })
|
||||
}.width('100%')
|
||||
.height(40).backgroundColor(Color.Pink).margin({bottom:5})
|
||||
ImageKnifeComponent({ imageKnifeOption: this.options })
|
||||
.margin(16)
|
||||
.width(300)
|
||||
.height(300)
|
||||
}
|
||||
.width("100%")
|
||||
.height("100%")
|
||||
.justifyContent(FlexAlign.Center)
|
||||
}
|
||||
.width("100%")
|
||||
.height("100%")
|
||||
}
|
||||
aboutToAppear() {
|
||||
console.log('CTT：TestManyNetImageLoadWithPage display Height: '+ display.getDefaultDisplaySync().height)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,263 +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 } 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 TestVisiblePage {
|
||||
@State currentScene: string = 'LazyForEach';
|
||||
@State hotCommendList: CommonDataSource<string> = new CommonDataSource<string>([]);
|
||||
@State 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://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",
|
||||
"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',
|
||||
"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/R9aT7lpEEVxawo4.jpeg!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/1V6c63lKLGPlKVo.png!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/2NxCo49xAB1L96K.jpeg!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/P6gH3pWBGw7L6dD.jpeg!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/MKosgAWo5VKpo9Z.jpeg!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/pA2S9lvNpMY4X3N.jpeg!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/69MiA9VxKdkzjWR.png!thumb-w321-webp75",
|
||||
"https://material-center-pre.meitudata.com/material/image/6228901fd8ddd6350.jpeg!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/P98i3gdgDw3Rmx5.png!thumb-w321-webp75",
|
||||
"https://stage.meitudata.com/public/creator/ed70a3c696c8e7b.jpg!thumb-w321-webp75",
|
||||
"https://material-center-pre.meitudata.com/material/image/6194a57b5b9ef7678.jpg!thumb-w321-webp75",
|
||||
"https://material-center-pre.meitudata.com/material/image/6189f29b48f165954.jpg!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/0lZCW9BrDgMroLL.jpeg!thumb-w321-webp75",
|
||||
"https://xximg1.meitudata.com/V2jTkoYa96.jpeg!thumb-w321-webp75",
|
||||
"http://xximg2.meitudata.com/Z9DCJpkB2l.jpeg!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/zwdte8R2e5KMMmm.jpeg!thumb-w321-webp75",
|
||||
"https://xximg1.meitudata.com/mlahyxNxjN.jpeg!thumb-w321-webp75",
|
||||
"https://xximg1.meitudata.com/8OkUwBympV.jpeg!thumb-w321-webp75",
|
||||
"https://xximg1.meitudata.com/9nzUydyWeB.png!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/R9aT7lpEEVxawo4.jpeg!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/Ymju0r3deAl7xoJ.jpeg!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/8zPcB0y4vdreG1d.jpeg!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/1V6c63lKLGPlKVo.png!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/Z9dtor442OY76KV.jpeg!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/2NxCo49xAB1L96K.jpeg!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/xxtool-pre/material/P6gH3pWBGw7L6dD.jpeg!thumb-w321-webp75",
|
||||
"https://material-center-pre.meitudata.com/material/image/6228901fd8ddd6350.jpeg!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/deRP83dkdlR4.png!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/rPJ1vKjJY6jz.png!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/z8K3P249ZmVW.png!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/e4xlVkl0BzMy.png!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/B6MleZrWeMvj.jpg!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/B6MleZ1ae5Ry.jpg!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/EyvzkoPgakDL.jpg!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/3zVRo1E16vZG.png!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/3zVRo1EdvZ0W.jpg!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/1mLMv1kd2BLZ.jpg!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/8NXRMzE019aB.jpg!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/0XDRo7xdPkVx.jpg!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/V06dg1RJ8pDr.jpg!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/2p5Ro1VDZvxR.png!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/1mLMWyxNVMAe.jpg!thumb-w321-webp75",
|
||||
"https://xxtool-release.zone1.meitudata.com/7d8RoA7DXYB9.jpg!thumb-w321-webp75",
|
||||
"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://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",
|
||||
]
|
||||
private listScroller: Scroller = new Scroller();
|
||||
|
||||
|
||||
aboutToAppear() {
|
||||
this.hotCommendList.addData(this.hotCommendList.totalCount(), this.data)
|
||||
}
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
Flex(){
|
||||
Button('懒加载场景').flexGrow(1).height(40).onClick(() => {
|
||||
this.currentScene = 'LazyForEach';
|
||||
this.listScroller.scrollToIndex(0);
|
||||
})
|
||||
Button('懒加载+复用场景').flexGrow(1).height(40).onClick(() => {
|
||||
this.currentScene = 'ReuseAndLazyForEach';
|
||||
this.listScroller.scrollToIndex(0);
|
||||
})
|
||||
Button('其他场景').flexGrow(1).height(40).onClick(() => {
|
||||
this.currentScene = 'ForEach';
|
||||
this.listScroller.scrollToIndex(0);
|
||||
})
|
||||
}.padding({top: 10, bottom: 10})
|
||||
List({ space: 20, scroller: this.listScroller }) {
|
||||
if(this.currentScene == 'LazyForEach') {
|
||||
this.renderLazyForEachComponent();
|
||||
} else if (this.currentScene == 'ReuseAndLazyForEach') {
|
||||
this.renderReuseComponent();
|
||||
} else {
|
||||
this.renderForEachComponent();
|
||||
}
|
||||
}
|
||||
|
||||
.width("100%")
|
||||
.height("100%")
|
||||
.backgroundColor(0xFAEEE0)
|
||||
}.width("100%").height("100%")
|
||||
}
|
||||
|
||||
@Builder
|
||||
renderLazyForEachComponent () {
|
||||
LazyForEach(this.hotCommendList, (item: string, index: number) => {
|
||||
ListItem() {
|
||||
MyComponent({ url: item, index: index + '' }).width("100%").height("100%")
|
||||
}.width(200).height(200).backgroundColor(Color.Orange)
|
||||
})
|
||||
}
|
||||
|
||||
@Builder
|
||||
renderReuseComponent () {
|
||||
LazyForEach(this.hotCommendList, (item: string, index: number) => {
|
||||
ListItem() {
|
||||
ReuseComponent({ url: item, index: index + '' }).width("100%").height("100%")
|
||||
}.width(200).height(200).backgroundColor(Color.Orange)
|
||||
})
|
||||
}
|
||||
|
||||
@Builder
|
||||
renderForEachComponent () {
|
||||
ForEach(this.data, (item: string, index: number) => {
|
||||
ListItem() {
|
||||
MyComponent({ url: item, index: index + '' }).width("100%").height("100%")
|
||||
}.width(200).height(200).backgroundColor(Color.Orange)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 没有复用的组件
|
||||
@Component
|
||||
struct MyComponent {
|
||||
@Prop url: string = "";
|
||||
@Prop index: string = '0';
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
Flex({ direction: FlexDirection.Column}) {
|
||||
Text(this.index).fontSize(18).fontColor(Color.White)
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption:{
|
||||
loadSrc: this.url,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
}
|
||||
}).height(150)
|
||||
}
|
||||
}.width("100%").height("100%")
|
||||
}
|
||||
}
|
||||
|
||||
// 复用组件
|
||||
@Reusable
|
||||
@Component
|
||||
struct ReuseComponent {
|
||||
@Prop url: string = "";
|
||||
@Prop index: string = '0';
|
||||
|
||||
aboutToReuse(params: Record<string, string>) {
|
||||
this.url = params.url;
|
||||
this.index = params.index;
|
||||
}
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
Flex({ direction: FlexDirection.Column}) {
|
||||
Text(this.index).fontSize(18).fontColor(Color.White)
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption:{
|
||||
loadSrc: this.url,
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
}
|
||||
}).height(150)
|
||||
}
|
||||
}.width("100%").height("100%")
|
||||
}
|
||||
}
|
||||
|
|
@ -1,995 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { RequestOption,ImageKnifeGlobal} from '@ohos/libraryimageknife'
|
||||
import { CropCircleTransformation } from '@ohos/libraryimageknife'
|
||||
import { RoundedCornersTransformation } from '@ohos/libraryimageknife'
|
||||
import {
|
||||
rgbColor,CropCircleWithBorderTransformation
|
||||
} from '@ohos/libraryimageknife'
|
||||
import { RotateImageTransformation } from '@ohos/libraryimageknife'
|
||||
import { CropSquareTransformation } from '@ohos/libraryimageknife'
|
||||
import { CropTransformation } from '@ohos/libraryimageknife'
|
||||
import { CropType } from '@ohos/libraryimageknife'
|
||||
import { GrayscaleTransformation } from '@ohos/libraryimageknife'
|
||||
import { BrightnessFilterTransformation } from '@ohos/libraryimageknife'
|
||||
import { ContrastFilterTransformation } from '@ohos/libraryimageknife'
|
||||
import { InvertFilterTransformation } from '@ohos/libraryimageknife'
|
||||
import { SepiaFilterTransformation } from '@ohos/libraryimageknife'
|
||||
import { SketchFilterTransformation } from '@ohos/libraryimageknife'
|
||||
import { BlurTransformation } from '@ohos/libraryimageknife'
|
||||
import { PixelationFilterTransformation } from '@ohos/libraryimageknife'
|
||||
import { MaskTransformation } from '@ohos/libraryimageknife'
|
||||
import { SwirlFilterTransformation } from '@ohos/libraryimageknife'
|
||||
import { BusinessError } from '@ohos.base'
|
||||
import {ImageKnifeData} from '@ohos/libraryimageknife'
|
||||
/**
|
||||
* PixelMap transform 示例
|
||||
*/
|
||||
let mRotate: number = 0;
|
||||
//let mUrl = "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB"
|
||||
let mUrl = $r('app.media.pngSample');
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TransformPixelMapPage {
|
||||
@State url: string = "";
|
||||
@State mCropPixelMap?: PixelMap = undefined;
|
||||
@State mRoundPixelMap?: PixelMap = undefined;
|
||||
@State mCirclePixelMap?: PixelMap = undefined;
|
||||
@State mCircleBorderPixelMap?: PixelMap = undefined;
|
||||
@State mRotatePixelMap?: PixelMap = undefined;
|
||||
@State mSquarePixelMap?: PixelMap = undefined;
|
||||
@State mClipTopPixelMap?: PixelMap = undefined;
|
||||
@State mClipCenterPixelMap?: PixelMap = undefined;
|
||||
@State mClipBottomPixelMap?: PixelMap = undefined;
|
||||
@State mGrayscalePixelMap?: PixelMap = undefined;
|
||||
@State mBrightnessPixelMap?: PixelMap = undefined;
|
||||
@State mContrastPixelMap?: PixelMap = undefined;
|
||||
@State mInvertPixelMap?: PixelMap = undefined;
|
||||
@State mSepiaPixelMap?: PixelMap = undefined;
|
||||
@State mSketchPixelMap?: PixelMap = undefined;
|
||||
@State mBlurPixelMap?: PixelMap = undefined;
|
||||
@State mPixelPixelMap?: PixelMap = undefined;
|
||||
@State mSwirlPixelMap?: PixelMap = undefined;
|
||||
@State mMaskPixelMap?: PixelMap = undefined;
|
||||
@State mKuwaharaPixelMap?: PixelMap = undefined;
|
||||
@State mToonPixelMap?: PixelMap = undefined;
|
||||
@State mVignettePixelMap?: PixelMap = undefined;
|
||||
|
||||
build() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
|
||||
Scroll() {
|
||||
Column() {
|
||||
Column() {
|
||||
Text("基础变换").fontColor(Color.Gray).fontSize(16);
|
||||
Row({ space: 1 }) {
|
||||
Button() {
|
||||
Text("CenterCrop").fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(100)
|
||||
.onClick(() => {
|
||||
this.centerCrop();
|
||||
});
|
||||
Button() {
|
||||
Text("CenterInside").fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(100)
|
||||
.onClick(() => {
|
||||
this.centerInside();
|
||||
});
|
||||
Button() {
|
||||
Text("fitCenter").fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(100)
|
||||
.onClick(() => {
|
||||
this.fitCenter();
|
||||
});
|
||||
}.margin({ top: 10 })
|
||||
|
||||
Image(this.mCropPixelMap == undefined ? '':this.mCropPixelMap!)
|
||||
.objectFit(ImageFit.None)
|
||||
.width(100)
|
||||
.height(100)
|
||||
.backgroundColor("#23d1de")
|
||||
.margin({ top: 10 })
|
||||
|
||||
}.margin({ top: 10 });
|
||||
|
||||
Column() {
|
||||
Text("RoundedCornersTransformation").fontColor(Color.Gray).fontSize(16);
|
||||
Row({ space: 1 }) {
|
||||
Button() {
|
||||
Text($r("app.string.left_top_corner")).fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(72)
|
||||
.onClick(() => {
|
||||
this.roundedCornersTransformation(10, 0, 0, 0);
|
||||
});
|
||||
Button() {
|
||||
Text($r("app.string.r_top_corner")).fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(72)
|
||||
.onClick(() => {
|
||||
this.roundedCornersTransformation(0, 0, 10, 0);
|
||||
});
|
||||
Button() {
|
||||
Text($r("app.string.left_bottom_corner")).fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(72)
|
||||
.onClick(() => {
|
||||
this.roundedCornersTransformation(0, 10, 0, 0);
|
||||
});
|
||||
Button() {
|
||||
Text($r("app.string.r_bottom_corner")).fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(72)
|
||||
.onClick(() => {
|
||||
this.roundedCornersTransformation(0, 0, 0, 10);
|
||||
});
|
||||
Button("All")
|
||||
.fontSize(13)
|
||||
.height(35)
|
||||
.width(72)
|
||||
.onClick(() => {
|
||||
this.roundedCornersTransformation(10, 10, 10, 10);
|
||||
});
|
||||
}.margin({ top: 10 })
|
||||
|
||||
Image(this.mRoundPixelMap == undefined ? '': this.mRoundPixelMap!)
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(100)
|
||||
.height(100)
|
||||
.margin({ top: 10 })
|
||||
|
||||
}.margin({ top: 10 });
|
||||
|
||||
Column() {
|
||||
Text("CropCircleTransformation").fontColor(Color.Gray).fontSize(16);
|
||||
Button() {
|
||||
Text($r("app.string.trans_circle")).fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(120)
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
this.circleTransformation();
|
||||
});
|
||||
Image(this.mCirclePixelMap == undefined ? '':this.mCirclePixelMap!)
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 })
|
||||
|
||||
}.margin({ top: 10 });
|
||||
|
||||
Column() {
|
||||
Text("CropCircleWithBorderTransformation").fontColor(Color.Gray).fontSize(16);
|
||||
Button() {
|
||||
Text($r("app.string.trans_circle_border")).fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(120)
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
this.circleBorderTransformation(5);
|
||||
});
|
||||
Image(this.mCircleBorderPixelMap == undefined ? '':this.mCircleBorderPixelMap!)
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 })
|
||||
|
||||
}.margin({ top: 10 });
|
||||
|
||||
Column() {
|
||||
Text("RotateImageTransformation").fontColor(Color.Gray).fontSize(16);
|
||||
Button() {
|
||||
Text($r("app.string.trans_rotate")).fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(120)
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
mRotate += 45;
|
||||
if (mRotate > 360) {
|
||||
mRotate = 0;
|
||||
}
|
||||
this.transformRotate(mRotate);
|
||||
});
|
||||
Image(this.mRotatePixelMap == undefined ? '':this.mRotatePixelMap!)
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 })
|
||||
|
||||
}.margin({ top: 10 });
|
||||
|
||||
Column() {
|
||||
Text("CropSquareTransformation").fontColor(Color.Gray).fontSize(16);
|
||||
Button() {
|
||||
Text($r("app.string.trans_square")).fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(120)
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
this.transformSquare();
|
||||
});
|
||||
Image(this.mSquarePixelMap == undefined ? '' : this.mSquarePixelMap!)
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 })
|
||||
|
||||
}.margin({ top: 10 });
|
||||
|
||||
Column() {
|
||||
Text("CropTransformation").fontColor(Color.Gray).fontSize(16);
|
||||
Row({ space: 1 }) {
|
||||
Button() {
|
||||
Text($r("app.string.trans_clip_top")).fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(72)
|
||||
.onClick(() => {
|
||||
this.clipPixelMap(25, 25, CropType.TOP);
|
||||
});
|
||||
Button() {
|
||||
Text($r("app.string.trans_clip_center")).fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(72)
|
||||
.onClick(() => {
|
||||
this.clipPixelMap(25, 25, CropType.CENTER);
|
||||
});
|
||||
Button() {
|
||||
Text($r("app.string.trans_clip_bottom")).fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(72)
|
||||
.onClick(() => {
|
||||
this.clipPixelMap(25, 25, CropType.BOTTOM);
|
||||
});
|
||||
}.margin({ top: 10 })
|
||||
|
||||
Row({ space: 1 }) {
|
||||
Image(this.mClipTopPixelMap == undefined ? '':this.mClipTopPixelMap!)
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(100)
|
||||
.height(100)
|
||||
.margin({ top: 10 })
|
||||
Image(this.mClipCenterPixelMap == undefined ? '':this.mClipCenterPixelMap!)
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(100)
|
||||
.height(100)
|
||||
.margin({ top: 10 })
|
||||
Image(this.mClipBottomPixelMap == undefined ? '':this.mClipBottomPixelMap!)
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(100)
|
||||
.height(100)
|
||||
.margin({ top: 10 })
|
||||
}
|
||||
}.margin({ top: 10 });
|
||||
|
||||
Column() {
|
||||
Text("GrayscaleTransformation").fontColor(Color.Gray).fontSize(16);
|
||||
Button() {
|
||||
Text($r("app.string.image_grayscale")).fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(120)
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
this.grayscalePixelMap();
|
||||
});
|
||||
Image(this.mGrayscalePixelMap == undefined ? '': this.mGrayscalePixelMap!)
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 })
|
||||
|
||||
}.margin({ top: 10 });
|
||||
Column() {
|
||||
Text("BrightnessFilterTransformation").fontColor(Color.Gray).fontSize(16);
|
||||
Button() {
|
||||
Text($r("app.string.image_Brightness")).fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(120)
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
this.brightnessPixelMap(0.8);
|
||||
});
|
||||
Image(this.mBrightnessPixelMap == undefined?'':this.mBrightnessPixelMap!)
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 })
|
||||
|
||||
}.margin({ top: 10 });
|
||||
Column() {
|
||||
Text("ContrastFilterTransformation").fontColor(Color.Gray).fontSize(16);
|
||||
Button() {
|
||||
Text($r("app.string.image_Contrast")).fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(120)
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
this.contrastPixelMap(4);
|
||||
});
|
||||
Image(this.mContrastPixelMap == undefined?'':this.mContrastPixelMap!)
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 })
|
||||
|
||||
}.margin({ top: 10 });
|
||||
Column() {
|
||||
Text("InvertFilterTransformation").fontColor(Color.Gray).fontSize(16);
|
||||
Button() {
|
||||
Text($r("app.string.image_Invert")).fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(120)
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
this.invertPixelMap();
|
||||
});
|
||||
Image(this.mInvertPixelMap == undefined ? '':this.mInvertPixelMap!)
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 })
|
||||
|
||||
}.margin({ top: 10 });
|
||||
|
||||
Column() {
|
||||
Text("SepiaFilterTransformation").fontColor(Color.Gray).fontSize(16);
|
||||
Button() {
|
||||
Text($r("app.string.image_Sepia")).fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(120)
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
this.sepiaPixelMap();
|
||||
});
|
||||
Image(this.mSepiaPixelMap == undefined ? '':this.mSepiaPixelMap!)
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 })
|
||||
|
||||
}.margin({ top: 10 });
|
||||
Column() {
|
||||
Text("SketchFilterTransformation").fontColor(Color.Gray).fontSize(16);
|
||||
Button() {
|
||||
Text($r("app.string.image_Sketch")).fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(120)
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
this.sketchPixelMap();
|
||||
});
|
||||
Image(this.mSketchPixelMap == undefined ? '':this.mSketchPixelMap!)
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 })
|
||||
|
||||
}.margin({ top: 10 });
|
||||
|
||||
Column() {
|
||||
Text("BlurTransformation").fontColor(Color.Gray).fontSize(16);
|
||||
Button() {
|
||||
Text($r("app.string.image_blur")).fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(120)
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
this.blurHandlePixelMap(20,3);
|
||||
});
|
||||
Image(this.mBlurPixelMap==undefined?'':this.mBlurPixelMap!)
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 })
|
||||
|
||||
}.margin({ top: 10 });
|
||||
|
||||
|
||||
Column() {
|
||||
Text("PixelationFilterTransformation").fontColor(Color.Gray).fontSize(16);
|
||||
Button() {
|
||||
Text($r("app.string.image_pixel")).fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(120)
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
this.pixelHandlePixelMap(20);
|
||||
});
|
||||
Image(this.mPixelPixelMap == undefined ? '':this.mPixelPixelMap!)
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 })
|
||||
|
||||
}.margin({ top: 10 });
|
||||
|
||||
Column() {
|
||||
Text("SwirlFilterTransformation").fontColor(Color.Gray).fontSize(16);
|
||||
Button() {
|
||||
Text("图片Swirl").fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(120)
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
this.swirlHandlePixelMap();
|
||||
});
|
||||
Image(this.mSwirlPixelMap == undefined ? '':this.mSwirlPixelMap!)
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 })
|
||||
|
||||
}.margin({ top: 10 });
|
||||
|
||||
Column() {
|
||||
Text("MaskTransformation").fontColor(Color.Gray).fontSize(16);
|
||||
Button() {
|
||||
Text("图片mask").fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(120)
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
this.maskHandlePixelMap($r('app.media.mask_starfish'));
|
||||
});
|
||||
Image(this.mMaskPixelMap == undefined ? '':this.mMaskPixelMap!)
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 })
|
||||
|
||||
}.margin({ top: 10 });
|
||||
|
||||
Column() {
|
||||
Text("KuwaharaFilterTransform").fontColor(Color.Gray).fontSize(16);
|
||||
Button() {
|
||||
Text("图片kuwahara").fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(120)
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
this.kuwaharaHandlePixelMap();
|
||||
});
|
||||
Image(this.mKuwaharaPixelMap == undefined? '':this.mKuwaharaPixelMap!)
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 })
|
||||
|
||||
}.margin({ top: 10 });
|
||||
|
||||
Column() {
|
||||
Text("ToonFilterTransform").fontColor(Color.Gray).fontSize(16);
|
||||
Button() {
|
||||
Text("图片toon").fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(120)
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
this.toonHandlePixelMap();
|
||||
});
|
||||
Image(this.mToonPixelMap == undefined?'':this.mToonPixelMap!)
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 })
|
||||
|
||||
}.margin({ top: 10 });
|
||||
|
||||
Column() {
|
||||
Text("VignetteFilterTransform").fontColor(Color.Gray).fontSize(16);
|
||||
Button() {
|
||||
Text("图片vignette").fontSize(13).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(120)
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
this.vignetteHandlePixelMap();
|
||||
});
|
||||
Image(this.mVignettePixelMap == undefined ? '':this.mVignettePixelMap)
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 })
|
||||
|
||||
}.margin({ top: 10 });
|
||||
|
||||
}.margin({ bottom: 30 });
|
||||
|
||||
}
|
||||
}.width('100%').height('100%');
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* centerCrop
|
||||
*/
|
||||
centerCrop() {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
imageKnifeOption.load($r('app.media.jpgSample'))
|
||||
// imageKnifeOption.load(mUrl)
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
this.mCropPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
|
||||
return false;
|
||||
}})
|
||||
.setImageViewSize({ width: vp2px(100), height: vp2px(100) })
|
||||
.skipMemoryCache(true)
|
||||
.centerCrop();
|
||||
ImageKnife?.call(imageKnifeOption);
|
||||
}
|
||||
|
||||
/**
|
||||
* centerInside
|
||||
*/
|
||||
centerInside() {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
imageKnifeOption.load($r('app.media.Back'))
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
this.mCropPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
|
||||
return false;
|
||||
}})
|
||||
.setImageViewSize({ width: vp2px(100), height: vp2px(100) })
|
||||
.skipMemoryCache(true)
|
||||
.centerInside();
|
||||
ImageKnife?.call(imageKnifeOption);
|
||||
}
|
||||
|
||||
/**
|
||||
* centerInside
|
||||
*/
|
||||
fitCenter() {
|
||||
let imageKnifeOption = new RequestOption()
|
||||
imageKnifeOption.load($r('app.media.Back'))
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
this.mCropPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
|
||||
return false;
|
||||
}})
|
||||
.setImageViewSize({ width: vp2px(100), height: vp2px(100) })
|
||||
.skipMemoryCache(true)
|
||||
.fitCenter();
|
||||
ImageKnife?.call(imageKnifeOption);
|
||||
}
|
||||
/**
|
||||
* 圆角设置
|
||||
*/
|
||||
roundedCornersTransformation(top_left: number,
|
||||
bottom_left: number, top_right: number, bottom_right: number) {
|
||||
|
||||
let imageKnifeOption = new RequestOption();
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
this.mRoundPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
|
||||
return false;
|
||||
}})
|
||||
.setImageViewSize({ width: vp2px(100), height: vp2px(100) })
|
||||
.skipMemoryCache(true)
|
||||
.roundedCorners({
|
||||
top_left: top_left,
|
||||
top_right: top_right,
|
||||
bottom_left: bottom_left,
|
||||
bottom_right: bottom_right
|
||||
})
|
||||
ImageKnife?.call(imageKnifeOption);
|
||||
}
|
||||
|
||||
/**
|
||||
* 裁剪圆
|
||||
*/
|
||||
circleTransformation() {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
|
||||
this.mCirclePixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
|
||||
|
||||
return false;
|
||||
}})
|
||||
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
||||
.skipMemoryCache(true)
|
||||
.cropCircle()
|
||||
ImageKnife?.call(imageKnifeOption);
|
||||
}
|
||||
|
||||
/**
|
||||
* 圆环裁剪
|
||||
*/
|
||||
circleBorderTransformation(border: number) {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
let color:rgbColor = { r_color: 255, g_color: 204, b_color: 204 }
|
||||
let circleTransformation = new CropCircleWithBorderTransformation(border,
|
||||
color);
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
|
||||
this.mCircleBorderPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
|
||||
|
||||
return false;
|
||||
}})
|
||||
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
||||
.skipMemoryCache(true)
|
||||
.cropCircleWithBorder(border,
|
||||
{ r_color: 255, g_color: 204, b_color: 204 })
|
||||
ImageKnife?.call(imageKnifeOption);
|
||||
}
|
||||
|
||||
/**
|
||||
* 旋转
|
||||
*/
|
||||
transformRotate(angled: number) {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
let transformation = new RotateImageTransformation(angled);
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
|
||||
this.mRotatePixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
|
||||
|
||||
return false;
|
||||
}})
|
||||
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
||||
.skipMemoryCache(true)
|
||||
.rotateImage(angled)
|
||||
ImageKnife?.call(imageKnifeOption);
|
||||
}
|
||||
|
||||
/**
|
||||
* 正方形裁剪
|
||||
*/
|
||||
transformSquare() {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
let transformation = new CropSquareTransformation();
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
|
||||
this.mSquarePixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
|
||||
|
||||
return false;
|
||||
}})
|
||||
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
||||
.skipMemoryCache(true)
|
||||
.cropSquare()
|
||||
ImageKnife?.call(imageKnifeOption);
|
||||
}
|
||||
|
||||
/**
|
||||
* 区域裁剪
|
||||
*/
|
||||
clipPixelMap(width: number, height: number, cropType: CropType) {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
let transformation = new CropTransformation(width, height, cropType);
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
let result:PixelMap|undefined = undefined;
|
||||
if (cropType == CropType.TOP) {
|
||||
result = data.drawPixelMap?.imagePixelMap as PixelMap;
|
||||
this.mClipTopPixelMap = result;
|
||||
} else if (cropType == CropType.CENTER) {
|
||||
result = data.drawPixelMap?.imagePixelMap as PixelMap;
|
||||
this.mClipCenterPixelMap = result;
|
||||
} else if (cropType == CropType.BOTTOM) {
|
||||
result = data.drawPixelMap?.imagePixelMap as PixelMap;
|
||||
this.mClipBottomPixelMap = result;
|
||||
}
|
||||
return false;
|
||||
}})
|
||||
.setImageViewSize({ width: width, height: height })
|
||||
.skipMemoryCache(true)
|
||||
.crop(width, height, cropType)
|
||||
ImageKnife?.call(imageKnifeOption);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 灰度
|
||||
*/
|
||||
grayscalePixelMap() {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
let transformation = new GrayscaleTransformation();
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
|
||||
this.mGrayscalePixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
|
||||
|
||||
return false;
|
||||
}})
|
||||
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
||||
.skipMemoryCache(true)
|
||||
.enableGPU()
|
||||
.grayscale()
|
||||
ImageKnife?.call(imageKnifeOption);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
*亮度b
|
||||
*/
|
||||
brightnessPixelMap(brightness: number) {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
let transformation = new BrightnessFilterTransformation(brightness);
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
|
||||
this.mBrightnessPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
|
||||
|
||||
return false;
|
||||
}})
|
||||
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
||||
.skipMemoryCache(true)
|
||||
.enableGPU()
|
||||
.brightnessFilter(brightness)
|
||||
ImageKnife?.call(imageKnifeOption);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
*对比度
|
||||
*/
|
||||
contrastPixelMap(contrast: number) {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
let transformation = new ContrastFilterTransformation(contrast);
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
|
||||
this.mContrastPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
|
||||
|
||||
return false;
|
||||
}})
|
||||
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
||||
.skipMemoryCache(true)
|
||||
.enableGPU()
|
||||
.contrastFilter(contrast)
|
||||
ImageKnife?.call(imageKnifeOption);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
*反转处理
|
||||
*/
|
||||
invertPixelMap() {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
let transformation = new InvertFilterTransformation();
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
|
||||
this.mInvertPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
|
||||
|
||||
return false;
|
||||
}})
|
||||
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
||||
.skipMemoryCache(true)
|
||||
.enableGPU()
|
||||
.invertFilter()
|
||||
ImageKnife?.call(imageKnifeOption);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
*照片老旧出来（黑褐色）
|
||||
*/
|
||||
sepiaPixelMap() {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
let transformation = new SepiaFilterTransformation();
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
|
||||
this.mSepiaPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
|
||||
|
||||
return false;
|
||||
}})
|
||||
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
||||
.skipMemoryCache(true)
|
||||
.enableGPU()
|
||||
.sepiaFilter()
|
||||
ImageKnife?.call(imageKnifeOption);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
*素描
|
||||
*/
|
||||
sketchPixelMap() {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
let transformation = new SketchFilterTransformation();
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
|
||||
this.mSketchPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
|
||||
|
||||
return false;
|
||||
}})
|
||||
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
||||
.skipMemoryCache(true)
|
||||
.enableGPU()
|
||||
.sketchFilter()
|
||||
ImageKnife?.call(imageKnifeOption);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
*模糊
|
||||
*/
|
||||
blurHandlePixelMap(radius: number,sampling: number) {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
let transformation = new BlurTransformation(radius,sampling);
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
|
||||
this.mBlurPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
|
||||
|
||||
return false;
|
||||
}})
|
||||
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
||||
.skipMemoryCache(true)
|
||||
.enableGPU()
|
||||
.blur(radius,sampling)
|
||||
ImageKnife?.call(imageKnifeOption);
|
||||
|
||||
}
|
||||
/**
|
||||
*马赛克
|
||||
*/
|
||||
pixelHandlePixelMap(pixel: number) {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
let transformation = new PixelationFilterTransformation(pixel);
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
|
||||
this.mPixelPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
|
||||
|
||||
return false;
|
||||
}})
|
||||
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
||||
.skipMemoryCache(true)
|
||||
.enableGPU()
|
||||
.pixelationFilter(pixel)
|
||||
ImageKnife?.call(imageKnifeOption);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
*扭曲
|
||||
*/
|
||||
swirlHandlePixelMap() {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
let transformation = new SwirlFilterTransformation(80);
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
|
||||
this.mSwirlPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
|
||||
|
||||
return false;
|
||||
}})
|
||||
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
||||
.skipMemoryCache(true)
|
||||
.enableGPU()
|
||||
.swirlFilter(80)
|
||||
// .diskCacheStrategy(new NONE())
|
||||
ImageKnife?.call(imageKnifeOption);
|
||||
|
||||
}
|
||||
/**
|
||||
*遮罩
|
||||
*/
|
||||
maskHandlePixelMap(maskResource: Resource) {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
let transformation = new MaskTransformation(maskResource);
|
||||
// imageKnifeOption.load($r('app.media.photo6'))
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
|
||||
this.mMaskPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
|
||||
|
||||
return false;
|
||||
}})
|
||||
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
||||
.skipMemoryCache(true)
|
||||
.mask(maskResource)
|
||||
// .diskCacheStrategy(new NONE())
|
||||
ImageKnife?.call(imageKnifeOption);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
*kuwahara
|
||||
*/
|
||||
kuwaharaHandlePixelMap() {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
|
||||
this.mKuwaharaPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
|
||||
|
||||
return false;
|
||||
}})
|
||||
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
||||
.skipMemoryCache(true)
|
||||
.enableGPU()
|
||||
.kuwaharaFilter(20.0)
|
||||
// .diskCacheStrategy(new NONE())
|
||||
ImageKnife?.call(imageKnifeOption);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
*toon
|
||||
*/
|
||||
toonHandlePixelMap() {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
|
||||
this.mToonPixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
|
||||
|
||||
return false;
|
||||
}})
|
||||
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
||||
.skipMemoryCache(true)
|
||||
.enableGPU()
|
||||
.toonFilter(0.2, 50.0);
|
||||
// .diskCacheStrategy(new NONE())
|
||||
ImageKnife?.call(imageKnifeOption);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
*vignette
|
||||
*/
|
||||
vignetteHandlePixelMap() {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener({callback:(err:BusinessError|string, data:ImageKnifeData) => {
|
||||
|
||||
this.mVignettePixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
|
||||
|
||||
return false;
|
||||
}})
|
||||
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
||||
.skipMemoryCache(true)
|
||||
.enableGPU()
|
||||
.vignetteFilter([0.5, 0.5], [0.0, 0.0, 0.0], [0.3, 0.5])
|
||||
// .diskCacheStrategy(new NONE())
|
||||
ImageKnife?.call(imageKnifeOption);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
let ImageKnife = ImageKnifeGlobal.getInstance().getImageKnife();
|
||||
|
|
@ -1,494 +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 {
|
||||
GrayscaleTransformation,
|
||||
ImageKnifeComponent,
|
||||
ImageKnifeOption,
|
||||
RotateImageTransformation,
|
||||
SketchFilterTransformation,
|
||||
CropCircleTransformation,
|
||||
ToonFilterTransform,
|
||||
VignetteFilterTransform,
|
||||
BaseTransform,
|
||||
BlurTransformation,
|
||||
BrightnessFilterTransformation,
|
||||
InvertFilterTransformation,
|
||||
CropCircleWithBorderTransformation,
|
||||
CropSquareTransformation,
|
||||
CropTransformation,
|
||||
CropType,
|
||||
ContrastFilterTransformation,
|
||||
PixelationFilterTransformation,
|
||||
RoundedCornersTransformation,
|
||||
SepiaFilterTransformation,
|
||||
MaskTransformation,
|
||||
SwirlFilterTransformation,
|
||||
KuwaharaFilterTransform
|
||||
} from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct transformsPage {
|
||||
@State imageKnifeOption: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
@State option1: ImageKnifeOption = {
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
}
|
||||
@State option2: ImageKnifeOption = {
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
}
|
||||
private transformations: Array<BaseTransform<PixelMap>> = new Array();
|
||||
private blurTransformation: BlurTransformation = new BlurTransformation(15, 3);
|
||||
private brightnessFilterTransformation: BrightnessFilterTransformation = new BrightnessFilterTransformation(0.5);
|
||||
private contrastFilterTransformation: ContrastFilterTransformation = new ContrastFilterTransformation(2.0);
|
||||
private cropCircleTransformation: CropCircleTransformation = new CropCircleTransformation();
|
||||
private cropCircleWithBorderTransformation: CropCircleWithBorderTransformation =
|
||||
new CropCircleWithBorderTransformation(16, { r_color: 100, g_color: 100, b_color: 100 });
|
||||
private cropSquareTransformation: CropSquareTransformation = new CropSquareTransformation();
|
||||
private cropTransformation: CropTransformation = new CropTransformation(100, 100, CropType.CENTER);
|
||||
private grayscaleTransformation: GrayscaleTransformation = new GrayscaleTransformation();
|
||||
private invertFilterTransformation: InvertFilterTransformation = new InvertFilterTransformation();
|
||||
private pixelationFilterTransformation: PixelationFilterTransformation = new PixelationFilterTransformation(5.0);
|
||||
private rotateImageTransformation: RotateImageTransformation = new RotateImageTransformation(90);
|
||||
private roundedCornersTransformation: RoundedCornersTransformation = new RoundedCornersTransformation({
|
||||
top_left: 5,
|
||||
bottom_left: 5,
|
||||
top_right: 5,
|
||||
bottom_right: 5
|
||||
});
|
||||
private sepiaFilterTransformation: SepiaFilterTransformation = new SepiaFilterTransformation();
|
||||
private sketchFilterTransformation: SketchFilterTransformation = new SketchFilterTransformation();
|
||||
private maskTransformation: MaskTransformation = new MaskTransformation($r('app.media.mask_starfish'));
|
||||
private swirlFilterTransformation: SwirlFilterTransformation = new SwirlFilterTransformation(80);
|
||||
private kuwaharaFilterTransform: KuwaharaFilterTransform = new KuwaharaFilterTransform(10);
|
||||
private toonFilterTransform: ToonFilterTransform = new ToonFilterTransform(0.3, 10.0);
|
||||
private vignetteFilterTransform: VignetteFilterTransform = new VignetteFilterTransform([0.5, 0.5], [0.0, 0.0, 0.0], [0.3, 0.75]);
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Row() {
|
||||
Checkbox({ name: '模糊' })
|
||||
.width(32)
|
||||
.height(32)
|
||||
.onChange((value: boolean) => {
|
||||
if (value) {
|
||||
this.transformations.push(this.blurTransformation);
|
||||
} else {
|
||||
for (let index = 0; index < this.transformations.length; index++) {
|
||||
if (this.transformations[index].getClassName() == this.blurTransformation.getClassName()) {
|
||||
this.transformations.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Text('模糊变换').margin({ left: 16 })
|
||||
}.margin({ left: 16 })
|
||||
|
||||
Row() {
|
||||
Checkbox({ name: '亮度滤波' })
|
||||
.width(32)
|
||||
.height(32)
|
||||
.onChange((value: boolean) => {
|
||||
if (value) {
|
||||
this.transformations.push(this.brightnessFilterTransformation);
|
||||
} else {
|
||||
for (let index = 0; index < this.transformations.length; index++) {
|
||||
if (this.transformations[index].getClassName() == this.brightnessFilterTransformation.getClassName()) {
|
||||
this.transformations.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Text('亮度滤波').margin({ left: 16 })
|
||||
}.margin({ left: 16 })
|
||||
}.margin({ top: 32, left: 16 })
|
||||
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Row() {
|
||||
Checkbox({ name: '对比度' })
|
||||
.width(32)
|
||||
.height(32)
|
||||
.onChange((value: boolean) => {
|
||||
if (value) {
|
||||
this.transformations.push(this.contrastFilterTransformation);
|
||||
} else {
|
||||
for (let index = 0; index < this.transformations.length; index++) {
|
||||
if (this.transformations[index].getClassName() == this.contrastFilterTransformation.getClassName()) {
|
||||
this.transformations.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Text('对比度').margin({ left: 16 })
|
||||
}.margin({ left: 16 })
|
||||
|
||||
Row() {
|
||||
Checkbox({ name: '圆形裁剪' })
|
||||
.width(32)
|
||||
.height(32)
|
||||
.onChange((value: boolean) => {
|
||||
if (value) {
|
||||
this.transformations.push(this.cropCircleTransformation);
|
||||
} else {
|
||||
for (let index = 0; index < this.transformations.length; index++) {
|
||||
if (this.transformations[index].getClassName() == this.cropCircleTransformation.getClassName()) {
|
||||
this.transformations.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Text('圆形裁剪').margin({ left: 16 })
|
||||
}.margin({ left: 16 })
|
||||
}.margin({ top: 32, left: 16 })
|
||||
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Row() {
|
||||
Checkbox({ name: '圆环' })
|
||||
.width(32)
|
||||
.height(32)
|
||||
.onChange((value: boolean) => {
|
||||
if (value) {
|
||||
this.transformations.push(this.cropCircleWithBorderTransformation);
|
||||
} else {
|
||||
for (let index = 0; index < this.transformations.length; index++) {
|
||||
if (this.transformations[index].getClassName() == this.cropCircleWithBorderTransformation.getClassName()) {
|
||||
this.transformations.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Text('圆环').margin({ left: 16 })
|
||||
}.margin({ left: 16 })
|
||||
|
||||
Row() {
|
||||
Checkbox({ name: '正方形裁剪' })
|
||||
.width(32)
|
||||
.height(32)
|
||||
.onChange((value: boolean) => {
|
||||
if (value) {
|
||||
this.transformations.push(this.cropSquareTransformation);
|
||||
} else {
|
||||
for (let index = 0; index < this.transformations.length; index++) {
|
||||
if (this.transformations[index].getClassName() == this.cropSquareTransformation.getClassName()) {
|
||||
this.transformations.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Text('正方形裁剪').margin({ left: 16 })
|
||||
}.margin({ left: 16 })
|
||||
}.margin({ top: 32, left: 16 })
|
||||
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Row() {
|
||||
Checkbox({ name: '自定义矩形' })
|
||||
.width(32)
|
||||
.height(32)
|
||||
.onChange((value: boolean) => {
|
||||
if (value) {
|
||||
this.transformations.push(this.cropTransformation);
|
||||
} else {
|
||||
for (let index = 0; index < this.transformations.length; index++) {
|
||||
if (this.transformations[index].getClassName() == this.cropTransformation.getClassName()) {
|
||||
this.transformations.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Text('自定义矩形').margin({ left: 16 })
|
||||
}.margin({ left: 16 })
|
||||
|
||||
Row() {
|
||||
Checkbox({ name: '灰度' })
|
||||
.width(32)
|
||||
.height(32)
|
||||
.onChange((value: boolean) => {
|
||||
if (value) {
|
||||
this.transformations.push(this.grayscaleTransformation);
|
||||
} else {
|
||||
for (let index = 0; index < this.transformations.length; index++) {
|
||||
if (this.transformations[index].getClassName() == this.grayscaleTransformation.getClassName()) {
|
||||
this.transformations.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Text('灰度').margin({ left: 16 })
|
||||
}.margin({ left: 16 })
|
||||
}.margin({ top: 32, left: 16 })
|
||||
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Row() {
|
||||
Checkbox({ name: '反转' })
|
||||
.width(32)
|
||||
.height(32)
|
||||
.onChange((value: boolean) => {
|
||||
if (value) {
|
||||
this.transformations.push(this.invertFilterTransformation);
|
||||
} else {
|
||||
for (let index = 0; index < this.transformations.length; index++) {
|
||||
if (this.transformations[index].getClassName() == this.invertFilterTransformation.getClassName()) {
|
||||
this.transformations.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Text('反转').margin({ left: 16 })
|
||||
}.margin({ left: 16 })
|
||||
|
||||
Row() {
|
||||
Checkbox({ name: '像素化' })
|
||||
.width(32)
|
||||
.height(32)
|
||||
.onChange((value: boolean) => {
|
||||
if (value) {
|
||||
this.transformations.push(this.pixelationFilterTransformation);
|
||||
} else {
|
||||
for (let index = 0; index < this.transformations.length; index++) {
|
||||
if (this.transformations[index].getClassName() == this.pixelationFilterTransformation.getClassName()) {
|
||||
this.transformations.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Text('像素化').margin({ left: 16 })
|
||||
}.margin({ left: 16 })
|
||||
}.margin({ top: 32, left: 16 })
|
||||
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Row() {
|
||||
Checkbox({ name: '旋转' })
|
||||
.width(32)
|
||||
.height(32)
|
||||
.onChange((value: boolean) => {
|
||||
if (value) {
|
||||
this.transformations.push(this.rotateImageTransformation);
|
||||
} else {
|
||||
for (let index = 0; index < this.transformations.length; index++) {
|
||||
if (this.transformations[index].getClassName() == this.rotateImageTransformation.getClassName()) {
|
||||
this.transformations.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Text('旋转').margin({ left: 16 })
|
||||
}.margin({ left: 16 })
|
||||
|
||||
Row() {
|
||||
Checkbox({ name: '圆角' })
|
||||
.width(32)
|
||||
.height(32)
|
||||
.onChange((value: boolean) => {
|
||||
if (value) {
|
||||
this.transformations.push(this.roundedCornersTransformation);
|
||||
} else {
|
||||
for (let index = 0; index < this.transformations.length; index++) {
|
||||
if (this.transformations[index].getClassName() == this.roundedCornersTransformation.getClassName()) {
|
||||
this.transformations.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Text('圆角').margin({ left: 16 })
|
||||
}.margin({ left: 16 })
|
||||
}.margin({ top: 32, left: 16 })
|
||||
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Row() {
|
||||
Checkbox({ name: '乌墨色滤波' })
|
||||
.width(32)
|
||||
.height(32)
|
||||
.onChange((value: boolean) => {
|
||||
if (value) {
|
||||
this.transformations.push(this.sepiaFilterTransformation);
|
||||
} else {
|
||||
for (let index = 0; index < this.transformations.length; index++) {
|
||||
if (this.transformations[index].getClassName() == this.sepiaFilterTransformation.getClassName()) {
|
||||
this.transformations.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Text('乌墨色滤波').margin({ left: 16 })
|
||||
}.margin({ left: 16 })
|
||||
|
||||
Row() {
|
||||
Checkbox({ name: '素描' })
|
||||
.width(32)
|
||||
.height(32)
|
||||
.onChange((value: boolean) => {
|
||||
if (value) {
|
||||
this.transformations.push(this.sketchFilterTransformation);
|
||||
} else {
|
||||
for (let index = 0; index < this.transformations.length; index++) {
|
||||
if (this.transformations[index].getClassName() == this.sketchFilterTransformation.getClassName()) {
|
||||
this.transformations.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Text('素描').margin({ left: 16 })
|
||||
}.margin({ left: 16 })
|
||||
}.margin({ top: 32, left: 16 })
|
||||
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Row() {
|
||||
Checkbox({ name: '遮罩' })
|
||||
.width(32)
|
||||
.height(32)
|
||||
.onChange((value: boolean) => {
|
||||
if (value) {
|
||||
this.transformations.push(this.maskTransformation);
|
||||
} else {
|
||||
for (let index = 0; index < this.transformations.length; index++) {
|
||||
if (this.transformations[index].getClassName() == this.maskTransformation.getClassName()) {
|
||||
this.transformations.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Text('遮罩').margin({ left: 16 })
|
||||
}.margin({ left: 16 })
|
||||
|
||||
Row() {
|
||||
Checkbox({ name: '扭曲滤波' })
|
||||
.width(32)
|
||||
.height(32)
|
||||
.onChange((value: boolean) => {
|
||||
if (value) {
|
||||
this.transformations.push(this.swirlFilterTransformation);
|
||||
} else {
|
||||
for (let index = 0; index < this.transformations.length; index++) {
|
||||
if (this.transformations[index].getClassName() == this.swirlFilterTransformation.getClassName()) {
|
||||
this.transformations.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Text('扭曲滤波').margin({ left: 16 })
|
||||
}.margin({ left: 16 })
|
||||
}.margin({ top: 32, left: 16 })
|
||||
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Row() {
|
||||
Checkbox({ name: '桑原滤波' })
|
||||
.width(32)
|
||||
.height(32)
|
||||
.onChange((value: boolean) => {
|
||||
if (value) {
|
||||
this.transformations.push(this.kuwaharaFilterTransform);
|
||||
} else {
|
||||
for (let index = 0; index < this.transformations.length; index++) {
|
||||
if (this.transformations[index].getClassName() == this.kuwaharaFilterTransform.getClassName()) {
|
||||
this.transformations.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Text('桑原滤波').margin({ left: 16 })
|
||||
}.margin({ left: 16 })
|
||||
|
||||
Row() {
|
||||
Checkbox({ name: '动画滤波' })
|
||||
.width(32)
|
||||
.height(32)
|
||||
.onChange((value: boolean) => {
|
||||
if (value) {
|
||||
this.transformations.push(this.toonFilterTransform);
|
||||
} else {
|
||||
for (let index = 0; index < this.transformations.length; index++) {
|
||||
if (this.transformations[index].getClassName() == this.toonFilterTransform.getClassName()) {
|
||||
this.transformations.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Text('动画滤波').margin({ left: 16 })
|
||||
}.margin({ left: 16 })
|
||||
}.margin({ top: 32, left: 16 })
|
||||
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Row() {
|
||||
Checkbox({ name: '装饰滤波' })
|
||||
.width(32)
|
||||
.height(32)
|
||||
.onChange((value: boolean) => {
|
||||
if (value) {
|
||||
this.transformations.push(this.vignetteFilterTransform);
|
||||
} else {
|
||||
for (let index = 0; index < this.transformations.length; index++) {
|
||||
if (this.transformations[index].getClassName() == this.vignetteFilterTransform.getClassName()) {
|
||||
this.transformations.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Text('装饰滤波').margin({ left: 16 })
|
||||
}.margin({ left: 16 })
|
||||
}.margin({ top: 32, left: 16 })
|
||||
|
||||
Button("显示效果").onClick(() => {
|
||||
this.imageKnifeOption = {
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
enableGpu: true,
|
||||
transformations: this.transformations
|
||||
};
|
||||
}).margin({ left: 5 }).backgroundColor(Color.Blue)
|
||||
Text("下面为展示图片区域").margin({ top: 5 })
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(300).height(300)
|
||||
}.width(400).height(400).margin({ top: 10 }).backgroundColor(Color.Pink)
|
||||
|
||||
Button("同资源不同转换效果").onClick(() => {
|
||||
this.option1 = {
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
transformation: new CropCircleTransformation()
|
||||
}
|
||||
this.option2 = {
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
transformations: [new RotateImageTransformation(45), new InvertFilterTransformation()]
|
||||
}
|
||||
}).margin(10).backgroundColor(Color.Blue)
|
||||
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center}) {
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: this.option1
|
||||
}).width(300)
|
||||
.height(300)
|
||||
.margin(10)
|
||||
.borderWidth(3)
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: this.option2
|
||||
}).width(300)
|
||||
.height(300)
|
||||
.margin(10)
|
||||
.borderWidth(3)
|
||||
}
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue