forked from floraachy/ImageKnife
1.hvigor submit the construction project for the first version
Signed-off-by: zhoulisheng <635547767@qq.com>
This commit is contained in:
zhoulisheng
parent
2615ce1d33
commit
b5b7aa97f3
|
|
@ -0,0 +1,4 @@
|
|||
/node_modules
|
||||
/local.properties
|
||||
/.idea
|
||||
**/build
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
[
|
||||
{
|
||||
"Name": "glide",
|
||||
"License": "under one or more license",
|
||||
"License File": "https://github.com/bumptech/imageknife/blob/master/LICENSE",
|
||||
"Version Number": "4.13.1",
|
||||
"Owner" : "bumptech"
|
||||
"Upstream URL": "https://github.com/bumptech/imageknife",
|
||||
"Description": "An image loading and caching library focused on smooth scrolling"
|
||||
},
|
||||
|
||||
{
|
||||
"Name": "glide-transformations",
|
||||
"License": "Apache License 2.0",
|
||||
"License File": "https://github.com/wasabeef/imageknife-transformations/blob/main/LICENSE",
|
||||
"Version Number": "4.3.0",
|
||||
"Owner" : "wasabeef"
|
||||
"Upstream URL": "https://github.com/wasabeef/imageknife-transformations",
|
||||
"Description": " An transformation library providing a variety of image transformations for Glide. "
|
||||
},
|
||||
|
||||
{
|
||||
"Name": "fresco",
|
||||
"License": "MIT License",
|
||||
"License File": "https://github.com/facebook/fresco/blob/main/LICENSE",
|
||||
"Version Number": "2.6.0",
|
||||
"Owner" : "facebook"
|
||||
"Upstream URL": "https://github.com/facebook/fresco",
|
||||
"Description": " An library for managing images and the memory they use. "
|
||||
},
|
||||
|
||||
{
|
||||
"Name": "UPNG.js",
|
||||
"License": "MIT License",
|
||||
"License File": "https://github.com/photopea/UPNG.js/blob/master/LICENSE",
|
||||
"Version Number": "1.0.0",
|
||||
"Owner" : "photopea"
|
||||
"Upstream URL": "https://github.com/photopea/UPNG.js",
|
||||
"Description": " Fast and advanced PNG (APNG) decoder and encoder (lossy / lossless) "
|
||||
},
|
||||
|
||||
{
|
||||
"Name": "Luban",
|
||||
"License": "Apache License 2.0",
|
||||
"License File": "https://github.com/Curzibn/Luban/blob/master/LICENSE",
|
||||
"Version Number": "1.1.8",
|
||||
"Owner" : " Curzibn"
|
||||
"Upstream URL": "https://github.com/Curzibn/Luban",
|
||||
"Description": " Luban(鲁班)—Image compression with efficiency very close to WeChat Moments/可能是最接近微信朋友圈的图片压缩算法 "
|
||||
},
|
||||
|
||||
{
|
||||
"Name": "uCrop",
|
||||
"License": "Apache License 2.0",
|
||||
"License File": "https://github.com/Yalantis/uCrop/blob/develop/README.md",
|
||||
"Version Number": "2.2.8",
|
||||
"Owner" : " Yalantis"
|
||||
"Upstream URL": "https://github.com/Yalantis/uCrop",
|
||||
"Description": " Image Cropping Library "
|
||||
}
|
||||
|
||||
]
|
||||
|
|
@ -0,0 +1,339 @@
|
|||
# ImageKnife
|
||||
|
||||
**专门为OpenHarmony打造的一款图像加载缓存库，致力于更高效、更轻便、更简单**
|
||||
|
||||
## 简介
|
||||
|
||||
本项目基于开源库 [Glide](https://github.com/bumptech/glide) 进行OpenHarmony的自研版本
|
||||
|
||||
- 支持内存缓存，使用LRUCache算法，对图片数据进行内存缓存
|
||||
- 支持磁盘缓存，对于下载图片会保存一份至磁盘当中
|
||||
- 支持进行图片变换
|
||||
- 支持用户配置参数使用:(例如：配置是否开启第一级内存缓存，配置磁盘缓存策略，配置仅使用缓存加载数据，配置图片变换效果，配置占位图，配置加载失败占位图等)
|
||||
- 推荐使用ImageKnifeComponent组件配合ImageKnifeOption参数来实现功能
|
||||
- 支持用户自定义配置实现能力参考ImageKnifeComponent组件中对于入参ImageKnifeOption的处理
|
||||
|
||||
## 下载安装
|
||||
|
||||
1.参考安装教程 [如何安装OpenHarmony npm包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_npm_usage.md)
|
||||
|
||||
2.安装命令如下:
|
||||
|
||||
```
|
||||
npm install @ohos/imageknife --save
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 使用说明
|
||||
|
||||
[跳转至代码示例](##'代码示例')
|
||||
|
||||
## 目录
|
||||
|
||||
```
|
||||
/imageknife/src/
|
||||
- main/ets/components
|
||||
- cache # 缓存相关内容
|
||||
- diskstrategy # 缓存策略
|
||||
- key # 缓存key生成策略
|
||||
- Base64.ets # Base64算法
|
||||
- CustomMap.ets # 自定义Map封装
|
||||
- DiskCacheEntry.ets# 磁盘缓存entry
|
||||
- DiskLruCache.ets # 磁盘LRU缓存策略
|
||||
- FileReader.ets # 文件读取相关
|
||||
- FileUtils.ets # 文件工具类
|
||||
- LruCache.ets # 内存LRU缓存策略
|
||||
- Md5.ets # MD5算法
|
||||
|
||||
- imageknife # imageknife主要内容
|
||||
- compress # 压缩相关
|
||||
- constants # 常量相关
|
||||
- entry # 部分数据结构
|
||||
- holder # 占位图相关解析
|
||||
- interface # 接口相关
|
||||
- networkmanage # 网络相关
|
||||
- pngj # pngj相关
|
||||
- requestmanage # imageknife请求相关
|
||||
- resourcemanage # 本地资源解析相关
|
||||
- transform # 图片变换相关
|
||||
- utils # 工具类相关
|
||||
- ImageKnife.ets # imageknife门面，app持久化类
|
||||
- ImageKnifeData.ets # 数据封装
|
||||
- ImageKnifeComponent.ets # 自定义控件封装
|
||||
- ImageKnifeOption.ets # 用户传参数封装
|
||||
- PixelMapPack.ets # PixelMap封装
|
||||
- RequestOption.ets # 用户设置参数封装
|
||||
|
||||
/entry/src/
|
||||
- main/ets/MainAbility
|
||||
- pages # 测试page页面列表
|
||||
- basicTestFeatureAbilityPage.ets # 测试元能力
|
||||
- basicTestFileIOPage.ets # 测试fileio
|
||||
- basicTestMediaImage.ets # 测试媒体image
|
||||
- basicTestResourceManagerPage.ets # 测试本地资源解析
|
||||
- compressPage.ets # 压缩页面
|
||||
- frescoImageTestCasePage.ets # 测试属性动画组件切换
|
||||
- frescoLayerTestCasePage.ets # 测试ImageKnifeComponent组件切换配合属性动画
|
||||
- frescoRetryTestCasePage.ets # 测试ImageKnifeComponent加载失败重试
|
||||
- index.ets # 测试页面入口
|
||||
- indexFresco.ets # 二级测试页面入口
|
||||
- loadNetworkTestCasePage.ets # 网络加载测试
|
||||
- loadResourceTestCasePage.ets # 本地加载测试
|
||||
- showErrorholderTestCasePage.ets # 加载失败占位图测试
|
||||
- storageTestDiskLruCache.ets # 磁盘缓存测试
|
||||
- storageTestLruCache.ets # 内存缓存测试
|
||||
- testAllCacheInfoPage.ets # 所有缓存信息获取测试
|
||||
- testAllTypeImageKnifeComponentPage.ets # 所有类型图片加载测试
|
||||
- testAllTypeNativeImagePage.ets # 所有类型本地图片加载测试
|
||||
- testGifDontAnimatePage.ets # gif加载静态图片测试
|
||||
- testImageKnifeOptionChangedPage.ets # ImageKnifeOption数据切换测试
|
||||
- testImageKnifeOptionChangedPage2.ets # ImageKnifeOption数据切换测试
|
||||
- testMultiThreadWorkerPage2.ets # 多线程测试
|
||||
- testPlaceholderPage.ets # 加载占位图测试
|
||||
- testPreloadPage.ets # 预加载测试
|
||||
- testResourceManagerPage.ets # 解析本地资源测试
|
||||
- transformPixelMapPage.ets # 所有类型变换测试
|
||||
- transformTestCasePage.ets # 所有类型变换配合ImageKnifeComponent测试
|
||||
|
||||
- workers # 测试worker多线程
|
||||
- worker1.js # worker多线程测试
|
||||
```
|
||||
|
||||
## 接口说明
|
||||
|
||||
### RequestOpton 用户配置参数
|
||||
|
||||
| 方法名 | 入参 | 接口描述 |
|
||||
| ------------------------------------------------------------ | ---------------------------------------------------------- | -------------------------------------------------------- |
|
||||
| load(src: string \| PixelMap \| Resource) | string \| PixelMap \| Resource | 待加载图片的资源 |
|
||||
| setImageViewSize(imageSize: { width: number, height: number }) | { width: number, height: number } | 传入显示图片组件的大小，变换的时候需要作为参考 |
|
||||
| diskCacheStrategy(strategy: DiskStrategy) | DiskStrategy | 配置磁盘缓存策略 NONE SOURCE RESULT ALL AUTOMATIC |
|
||||
| placeholder(src: PixelMap \| Resource, func?: AsyncSuccess<PixelMap>) | src: PixelMap \| Resource, func?: AsyncSuccess<PixelMap> | 配置占位图，其中func为数据回调函数 |
|
||||
| errorholder(src: PixelMap \| Resource, func?: AsyncSuccess<PixelMap>) | src: PixelMap \| Resource, func?: AsyncSuccess<PixelMap> | 配置加载失败占位图，其中func为数据回调函数 |
|
||||
| addListener(func: AsyncCallback<PixelMap>) | func: AsyncCallback<PixelMap> | 配置整个监听回调，数据正常加载返回，加载失败返回错误信息 |
|
||||
| thumbnail(sizeMultiplier:number, func?: AsyncSuccess<ImageKnifeData>) | sizeMultiplier:number, func?: AsyncSuccess<ImageKnifeData> | 设置缩略图比例，缩略图返回后，加载并展示缩略图 |
|
||||
| addProgressListener(func?: AsyncSuccess<string>){ this.progressFunc = func; return this; } | func?: AsyncSuccess<string> | 设置网络下载百分比监听，返回数据加载百分比数值 |
|
||||
| addRetryListener(func?: AsyncSuccess<any>){ this.retryFunc = func; return this; } | func?: AsyncSuccess<any> | 设置重试监听 |
|
||||
| addAllCacheInfoCallback(func: IAllCacheInfoCallback) | func: IAllCacheInfoCallback | 设置获取所有缓存信息监听 |
|
||||
| skipMemoryCache(skip: boolean) | skip: boolean | 配置是否跳过内存缓存 |
|
||||
| retrieveDataFromCache(flag: boolean) | flag: boolean | 配置仅从缓存中加载数据 |
|
||||
|
||||
同时支持[图片变换相关](##'图片变换相关')接口
|
||||
|
||||
### ImageKnife 启动器/门面类
|
||||
|
||||
| 方法名 | 入参 | 接口描述 |
|
||||
| ------------------------------- | ---------------------- | ---------------------------------- |
|
||||
| call(request: RequestOption) | request: RequestOption | 根据用户配置参数具体执行加载流程 |
|
||||
| preload(request: RequestOption) | request: RequestOption | 根据用户配置参数具体执行预加载流程 |
|
||||
|
||||
### 缓存策略相关
|
||||
|
||||
| 使用方法 | 类型 | 策略描述 |
|
||||
| ------------------------------------------ | --------- | ---------------------------------------- |
|
||||
| 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 | 表示只缓存转换过后的图片 |
|
||||
|
||||
### 图片变换相关
|
||||
|
||||
| 使用方法 | 类型 | 相关描述 |
|
||||
| ------------------------------ | ---------------------------------- | ---------------------------------------------------- |
|
||||
| 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 | 素描滤波器 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 代码示例
|
||||
|
||||
1.首先初始化全局ImageKnife实例，在app.ets中调用ImageKnife.with()进行初始化
|
||||
|
||||
```
|
||||
import {ImageKnife} from '@ohos/imageknife'
|
||||
export default {
|
||||
data: {
|
||||
imageKnife: {} // ImageKnife全局占位符
|
||||
},
|
||||
onCreate() {
|
||||
this.data.imageKnife = ImageKnife.with();// ImageKnife占位符全局初始化赋值
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
2.在页面index.ets中使用ImageKnife
|
||||
|
||||
```
|
||||
@Entry
|
||||
@Component
|
||||
struct Index {
|
||||
build() {
|
||||
|
||||
}
|
||||
|
||||
// 页面初始化完成，生命周期回调函数中 进行调用ImageKnife
|
||||
aboutToAppear() {
|
||||
let requestOption = new RequestOption();
|
||||
requestOptin.load($r('app.media.IceCream'))
|
||||
.addListener((err,data) => {
|
||||
//加载成功/失败回调监听
|
||||
})
|
||||
...
|
||||
ImageKnife.call(requestOption)
|
||||
}
|
||||
}
|
||||
|
||||
var ImageKnife;
|
||||
var defaultTemp = globalThis.exports.default
|
||||
if (defaultTemp != undefined) {
|
||||
ImageKnife = defaultTemp.data.imageKnife;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
#### 推荐使用：
|
||||
|
||||
使用ImageKnifeOption作为入参，配合自定义组件ImageKnifeComponent使用。
|
||||
|
||||
```typescript
|
||||
@Entry
|
||||
@Component
|
||||
struct Index {
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
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: $imageKnifeOption1 })
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 自定义实现：
|
||||
|
||||
使用原生Image组件，配合用户配置参数实现。
|
||||
|
||||
##### 步骤1：
|
||||
|
||||
定义自定义类
|
||||
|
||||
```
|
||||
export default class PixelMapPack{
|
||||
pixelMap:PixelMap;
|
||||
}
|
||||
```
|
||||
|
||||
使用@State关联PixelMapPack
|
||||
```typescript
|
||||
@State imageKnifePixelMapPack:PixelMapPack = new PixelMapPack();
|
||||
width:number = 200;
|
||||
height:number = 200;
|
||||
```
|
||||
|
||||
##### 步骤2：
|
||||
|
||||
在你的component组件中，写下一个Image组件，将基础参数（入参PixelMap，组件的宽、高）配置好
|
||||
|
||||
```
|
||||
Image(this.imageKnifePixelMapPack.pixelMap)
|
||||
.backgroundColor(Color.Grey)
|
||||
.objectFit(ImageFit.Contain)
|
||||
.width(this.width)
|
||||
.height(this.height)
|
||||
```
|
||||
|
||||
##### 步骤3：
|
||||
|
||||
在aboutToAppear() 函数中调用加载流程
|
||||
|
||||
```typescript
|
||||
//配置参数
|
||||
let requestOptin = new RequestOption();
|
||||
//加载本地图片
|
||||
requestOptin.load($r('app.media.jpgSample'))
|
||||
.addListener((err,data) => {
|
||||
//加载成功/失败回调监听
|
||||
})
|
||||
.placeholder( $r('app.media.icon_loading'), (data)=>{
|
||||
// 占位图回调监听
|
||||
})
|
||||
.errorholder( $r('app.media.icon_failed'), (data)=>{
|
||||
// 失败占位图回调监听
|
||||
})
|
||||
.thumbnail(0.3, (data) => {
|
||||
// 缩略图加载成功回调
|
||||
})
|
||||
// 一定要把控件大小传给RequestOption,图片变换必须
|
||||
.setImageViewSize({width:200, height:200})
|
||||
// 设置缓存策略
|
||||
.diskCacheStrategy(new AUTOMATIC())
|
||||
.addProgressListener((percentValue: string) => {
|
||||
// 图片网络加载进度条百分比回调
|
||||
})
|
||||
.addRetryListener((error: any) => {
|
||||
// 加载失败重试监听 图片加载失败时优先展示重试图层，点击重试图层，会重新进行一次加载流程
|
||||
})
|
||||
// 左上圆角10pixel像素点
|
||||
.roundedCorners({top:10})
|
||||
// 启动加载流程，执行结果将会返回到上面的回调接口中
|
||||
ImageKnife.call(requestOptin);
|
||||
```
|
||||
|
||||
##### 步骤4：
|
||||
|
||||
更多细节设置请参考自定义Component的ImageKnifeComponent实现
|
||||
|
||||
## 演示
|
||||
|
||||
<img src="screenshot/g3.gif" width="50%"/>
|
||||
|
||||
<img src="screenshot/g1.gif" width="50%"/><img src="screenshot/g2.gif" width="50%"/>
|
||||
|
||||
## 兼容性
|
||||
|
||||
支持OpenHarmony API version 8 及以上版本
|
||||
|
||||
## 开源协议
|
||||
|
||||
[协议详见](https://gitee.com/openharmony-tpc/ImageKnife/blob/master/LICENSE)
|
||||
|
||||
## 贡献代码
|
||||
|
||||
使用过程中发现任何问题都可以提[issue](https://gitee.com/openharmony-tpc/ImageKnife/issues)给我们，当然，我们也非常欢迎你给我们发[PR](https://gitee.com/openharmony-tpc/ImageKnife/issues)
|
||||
|
||||
## 遗留问题
|
||||
|
||||
1.图片变换缓慢(待优化)
|
||||
|
||||
2.目前只支持一种图片变换效果
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
{
|
||||
"app": {
|
||||
"signingConfigs": [
|
||||
{
|
||||
"name": "default",
|
||||
"material": {
|
||||
"certpath": "C:\\Users\\zwx1045834\\.ohos\\config\\openharmony\\auto_ohos.cer",
|
||||
"storePassword": "000000184CD86AF7B78D3E3B6C36B9221705137AC28BD8A341A757477E5DC27D95E6A0DFD5EB51AE",
|
||||
"keyAlias": "debugKey",
|
||||
"keyPassword": "00000018DAB1AB9C9DF6E7C4D35BE8EAF4323EFA49131AB39C65BA5C44DE6D3879C6B31AA70D1E14",
|
||||
"profile": "C:\\Users\\zwx1045834\\.ohos\\config\\openharmony\\auto_ohos_default_com.example.imageknifegiteepro.p7b",
|
||||
"signAlg": "SHA256withECDSA",
|
||||
"storeFile": "C:\\Users\\zwx1045834\\.ohos\\config\\openharmony\\auto_ohos.p12"
|
||||
}
|
||||
}
|
||||
],
|
||||
"compileSdkVersion": 8,
|
||||
"compatibleSdkVersion": 8,
|
||||
"products": [
|
||||
{
|
||||
"name": "default",
|
||||
"signingConfig": "default",
|
||||
}
|
||||
]
|
||||
},
|
||||
"modules": [
|
||||
{
|
||||
"name": "entry",
|
||||
"srcPath": "./entry",
|
||||
"targets": [
|
||||
{
|
||||
"name": "default",
|
||||
"applyToProducts": [
|
||||
"default"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "imageknife",
|
||||
"srcPath": "./imageknife"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
/node_modules
|
||||
/.preview
|
||||
/build
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"apiType": 'faMode',
|
||||
"buildOption": {
|
||||
},
|
||||
"targets": [
|
||||
{
|
||||
"name": "default",
|
||||
},
|
||||
{
|
||||
"name": "ohosTest",
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
// Script for compiling build behavior. It is built in the build plug-in and cannot be modified currently.
|
||||
module.exports = require('@ohos/hvigor-ohos-plugin').legacyHapTasks
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"name": "entry",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
"@ohos/imageknife": {
|
||||
"version": "file:../imageknife",
|
||||
"requires": {
|
||||
"pako": "^1.0.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"pako": {
|
||||
"version": "1.0.11",
|
||||
"resolved": "http://mirrors.tools.huawei.com/npm/pako/-/pako-1.0.11.tgz",
|
||||
"integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"license": "Apache License 2.0",
|
||||
"devDependencies": {},
|
||||
"name": "entry",
|
||||
"ohos": {
|
||||
"org": "huawei",
|
||||
"directoryLevel": "module",
|
||||
"buildTool": "hvigor"
|
||||
},
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"@ohos/imageknife": "file:../imageknife"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,140 @@
|
|||
{
|
||||
"app": {
|
||||
"vendor": "example",
|
||||
"bundleName": "com.example.imageknifegiteepro",
|
||||
"version": {
|
||||
"code": 1000000,
|
||||
"name": "1.0.0"
|
||||
}
|
||||
},
|
||||
"deviceConfig": {
|
||||
"default": {
|
||||
"network": {
|
||||
"cleartextTraffic": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"module": {
|
||||
"mainAbility": ".MainAbility",
|
||||
"deviceType": [
|
||||
"phone",
|
||||
"tablet"
|
||||
],
|
||||
"abilities": [
|
||||
{
|
||||
"skills": [
|
||||
{
|
||||
"entities": [
|
||||
"entity.system.home"
|
||||
],
|
||||
"actions": [
|
||||
"action.system.home"
|
||||
]
|
||||
}
|
||||
],
|
||||
"orientation": "unspecified",
|
||||
"visible": true,
|
||||
"srcPath": "MainAbility",
|
||||
"name": ".MainAbility",
|
||||
"srcLanguage": "ets",
|
||||
"icon": "$media:icon",
|
||||
"description": "$string:ImageKnife_OHOS",
|
||||
"formsEnabled": false,
|
||||
"label": "$string:ImageKnife_OHOS",
|
||||
"type": "page",
|
||||
"launchType": "standard"
|
||||
}
|
||||
],
|
||||
"distro": {
|
||||
"moduleType": "entry",
|
||||
"installationFree": false,
|
||||
"deliveryWithInstall": true,
|
||||
"moduleName": "entry"
|
||||
},
|
||||
"package": "com.example.entry",
|
||||
"srcPath": "",
|
||||
"name": ".entry",
|
||||
"reqPermissions": [
|
||||
{
|
||||
"name": "ohos.permission.READ_USER_STORAGE"
|
||||
},
|
||||
{
|
||||
"name": "ohos.permission.INTERNET",
|
||||
"reason": "Api call",
|
||||
"usedScene": {
|
||||
"ability": [
|
||||
"com.example.imageknifegiteepro.MainAbility"
|
||||
],
|
||||
"when": "always"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "ohos.permission.KEEP_BACKGROUND_RUNNING"
|
||||
},
|
||||
{
|
||||
"name": "ohos.permission.READ_MEDIA",
|
||||
"reason": "location background",
|
||||
"usedScene": {
|
||||
"when": "always",
|
||||
"ability": [
|
||||
"com.example.imageknifegiteepro.MainAbility"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "ohos.permission.WRITE_MEDIA",
|
||||
"reason": "location background",
|
||||
"usedScene": {
|
||||
"when": "always",
|
||||
"ability": [
|
||||
"com.example.imageknifegiteepro.MainAbility"
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
"js": [
|
||||
{
|
||||
"mode": {
|
||||
"syntax": "ets",
|
||||
"type": "pageAbility"
|
||||
},
|
||||
"pages": [
|
||||
"pages/index",
|
||||
"pages/indexFresco",
|
||||
"pages/frescoLayerTestCasePage",
|
||||
"pages/frescoImageTestCasePage",
|
||||
"pages/frescoRetryTestCasePage",
|
||||
"pages/basicTestFeatureAbilityPage",
|
||||
"pages/basicTestFileIOPage",
|
||||
"pages/basicTestMediaImage",
|
||||
"pages/basicTestResourceManagerPage",
|
||||
"pages/storageTestLruCache",
|
||||
"pages/storageTestDiskLruCache",
|
||||
"pages/transformTestCasePage",
|
||||
"pages/pngjTestCasePage",
|
||||
"pages/testAllTypeImageKnifeComponentPage",
|
||||
"pages/testAllTypeNativeImagePage",
|
||||
"pages/loadResourceTestCasePage",
|
||||
"pages/loadNetworkTestCasePage",
|
||||
"pages/showErrorholderTestCasePage",
|
||||
"pages/transformPixelMapPage",
|
||||
"pages/testGifDontAnimatePage",
|
||||
"pages/testPreloadPage",
|
||||
"pages/testImageKnifeOptionChangedPage",
|
||||
"pages/testImageKnifeOptionChangedPage2",
|
||||
"pages/compressPage",
|
||||
"pages/testAllCacheInfoPage",
|
||||
"pages/testResourceManagerPage",
|
||||
"pages/testMultiThreadWorkerPage2",
|
||||
"pages/testImageKnifeOptionChangedPage",
|
||||
"pages/cropImagePage"
|
||||
],
|
||||
"name": ".MainAbility",
|
||||
"window": {
|
||||
"designWidth": 720,
|
||||
"autoDesignWidth": false
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
/*
|
||||
* 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 app from '@system.app';
|
||||
|
||||
import {ImageKnife} from '@ohos/imageknife'
|
||||
|
||||
export default {
|
||||
data: {
|
||||
imageKnife: {} // ImageKnife
|
||||
},
|
||||
onCreate() {
|
||||
this.data.imageKnife = ImageKnife.with();
|
||||
},
|
||||
onDestroy() {
|
||||
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
/*
|
||||
* 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';
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct BasicTestFeatureAbilityPage {
|
||||
@Watch("watchPathChange") @State filePath:string= "查看featureAbility路径";
|
||||
|
||||
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:20})
|
||||
.onClick(()=>{
|
||||
featureAbility.getContext()
|
||||
.getFilesDir()
|
||||
.then((data) => {
|
||||
console.log("ImageKnife filesPath = " + data)
|
||||
this.filePath = data
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('ImageKnife Failed to obtain the filesPath directory. Cause:' + error.message);
|
||||
})
|
||||
})
|
||||
Button("featureAbility.getContext().getCacheDir()")
|
||||
.margin({top:20})
|
||||
.onClick(()=>{
|
||||
featureAbility.getContext().getCacheDir()
|
||||
.then((data) => {
|
||||
console.log("ImageKnife cachesPath = " + data)
|
||||
this.filePath = data
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('ImageKnife Failed to obtain the cachesPath directory. Cause:' + error.message);
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
/*
|
||||
* 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/imageknife'
|
||||
import resourceManager from '@ohos.resourceManager';
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct BasicTestFileIOPage {
|
||||
@Watch('watchPathChange') @State filePath: string= '查看featureAbility路径';
|
||||
appFilePath = '';
|
||||
appCachePath = '';
|
||||
@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(() => {
|
||||
featureAbility.getContext()
|
||||
.getFilesDir()
|
||||
.then((data) => {
|
||||
console.log('ImageKnife filesPath = ' + data)
|
||||
this.filePath = data
|
||||
this.appFilePath = data;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('ImageKnife Failed to obtain the filesPath directory. Cause:' + error.message);
|
||||
})
|
||||
})
|
||||
Button('featureAbility.getContext().getCacheDir()')
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
featureAbility.getContext()
|
||||
.getCacheDir()
|
||||
.then((data) => {
|
||||
console.log('ImageKnife cachesPath = ' + data)
|
||||
this.filePath = data
|
||||
this.appCachePath = data
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('ImageKnife Failed to obtain the cachesPath directory. Cause:' + error.message);
|
||||
})
|
||||
})
|
||||
Button('files目录创建Folder1和Folder2 验证statSync mkdirSync')
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
FileUtils.getInstance()
|
||||
.createFolder(this.appFilePath + '/Folder1');
|
||||
FileUtils.getInstance()
|
||||
.createFolder(this.appFilePath + '/Folder2');
|
||||
})
|
||||
Button('将media资源存入Folder1 验证writeSync mkdirSync createStreamSync')
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
resourceManager.getResourceManager()
|
||||
.then(result => {
|
||||
result.getMedia($r('app.media.gifSample').id,)
|
||||
.then(data => {
|
||||
console.log('basicTestFileIOPage - 本地加载资源 解析后数据data = ' + data)
|
||||
let arrayBuffer = this.typedArrayToBuffer(data);
|
||||
FileUtils.getInstance().writeFile(this.appFilePath + '/Folder1/jpgSample.gif', arrayBuffer)
|
||||
this.imageFile = 'file://' + this.appFilePath + '/Folder1/jpgSample.gif'
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('basicTestFileIOPage - 本地加载资源err' + JSON.stringify(err));
|
||||
})
|
||||
})
|
||||
})
|
||||
Button('copy:Folder1至Folder2， 验证copyFileSync')
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
let filePath1 = this.appFilePath + '/Folder1/jpgSample.gif';
|
||||
let filePath2 = this.appFilePath + '/Folder2/jpgSample.gif';
|
||||
FileUtils.getInstance().createFolder(this.appFilePath + '/Folder2')
|
||||
FileUtils.getInstance().copyFile(filePath1, filePath2);
|
||||
this.imageFile = 'file://' + this.appFilePath + '/Folder2/jpgSample.gif'
|
||||
})
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button('显示空PixelMap')
|
||||
.margin({ left: 10 })
|
||||
.onClick(() => {
|
||||
this.normalPixelMap=true;
|
||||
this.normalResource = false;
|
||||
})
|
||||
Button('显示RES')
|
||||
.margin({ left: 10 })
|
||||
.onClick(() => {
|
||||
this.normalPixelMap=false;
|
||||
this.normalResource = true;
|
||||
})
|
||||
Button('显示String')
|
||||
.margin({ left: 10 })
|
||||
.onClick(() => {
|
||||
this.normalPixelMap=false;
|
||||
this.normalResource = false;
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
Image(this.normalPixelMap?this.imagePixelMap:(this.normalResource? this.imageRes:this.imageFile))
|
||||
.width(200)
|
||||
.height(200)
|
||||
.backgroundColor(Color.Pink)
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
typedArrayToBuffer(array: Uint8Array): ArrayBuffer {
|
||||
return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
/*
|
||||
* 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/imageknife'
|
||||
import {FileTypeUtil} from '@ohos/imageknife'
|
||||
import resourceManager from '@ohos.resourceManager';
|
||||
import {Base64} from '@ohos/imageknife'
|
||||
import {PixelMapPack} from '@ohos/imageknife'
|
||||
import {ParseImageUtil} from '@ohos/imageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct BasicTestMediaImage {
|
||||
@State pixelMapPack:PixelMapPack= new PixelMapPack();
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Flex({direction:FlexDirection.Row}){
|
||||
Button('本地资源jpg')
|
||||
.onClick(()=>{
|
||||
resourceManager.getResourceManager()
|
||||
.then(result => {
|
||||
result.getMedia($r('app.media.jpgSample').id)
|
||||
.then(data => {
|
||||
let arrayBuffer = this.typedArrayToBuffer(data);
|
||||
let parseImageUtil = new ParseImageUtil();
|
||||
parseImageUtil.parseImage(arrayBuffer,(pxielmap)=>{
|
||||
let jpgPack = new PixelMapPack();
|
||||
jpgPack.pixelMap = pxielmap;
|
||||
this.pixelMapPack = jpgPack;
|
||||
},(err)=>{})
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('basicTestMediaImage - 本地加载资源err' + JSON.stringify(err));
|
||||
})
|
||||
})
|
||||
|
||||
}).margin({left:15}).backgroundColor(Color.Blue)
|
||||
Button('本地资源png')
|
||||
.onClick(()=>{
|
||||
resourceManager.getResourceManager()
|
||||
.then(result => {
|
||||
result.getMedia($r('app.media.pngSample').id)
|
||||
.then(data => {
|
||||
let arrayBuffer = this.typedArrayToBuffer(data);
|
||||
let parseImageUtil = new ParseImageUtil();
|
||||
parseImageUtil.parseImage(arrayBuffer,(pxielmap)=>{
|
||||
let pngPack = new PixelMapPack();
|
||||
pngPack.pixelMap = pxielmap;
|
||||
this.pixelMapPack = pngPack;
|
||||
},(err)=>{})
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('basicTestMediaImage - 本地加载资源err' + JSON.stringify(err));
|
||||
})
|
||||
})
|
||||
|
||||
}).margin({left:15}).backgroundColor(Color.Blue)
|
||||
Button('本地资源bmp')
|
||||
.onClick(()=>{
|
||||
resourceManager.getResourceManager()
|
||||
.then(result => {
|
||||
result.getMedia($r('app.media.bmpSample').id)
|
||||
.then(data => {
|
||||
let arrayBuffer = this.typedArrayToBuffer(data);
|
||||
let parseImageUtil = new ParseImageUtil();
|
||||
parseImageUtil.parseImage(arrayBuffer,(pxielmap)=>{
|
||||
let bmpPack = new PixelMapPack();
|
||||
bmpPack.pixelMap = pxielmap;
|
||||
this.pixelMapPack = bmpPack;
|
||||
},(err)=>{})
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('basicTestMediaImage - 本地加载资源err' + JSON.stringify(err));
|
||||
})
|
||||
})
|
||||
|
||||
}).margin({left:15}).backgroundColor(Color.Blue)
|
||||
Button('本地资源webp')
|
||||
.onClick(()=>{
|
||||
resourceManager.getResourceManager()
|
||||
.then(result => {
|
||||
result.getMedia($r('app.media.webpSample').id)
|
||||
.then(data => {
|
||||
let arrayBuffer = this.typedArrayToBuffer(data);
|
||||
let parseImageUtil = new ParseImageUtil();
|
||||
parseImageUtil.parseImage(arrayBuffer,(pxielmap)=>{
|
||||
let webpPack = new PixelMapPack();
|
||||
webpPack.pixelMap = pxielmap;
|
||||
this.pixelMapPack = webpPack;
|
||||
},(err)=>{})
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('basicTestMediaImage - 本地加载资源err' + JSON.stringify(err));
|
||||
})
|
||||
})
|
||||
|
||||
}).margin({left:15}).backgroundColor(Color.Blue)
|
||||
Button('本地资源gif')
|
||||
.onClick(()=>{
|
||||
resourceManager.getResourceManager()
|
||||
.then(result => {
|
||||
result.getMedia($r('app.media.gifSample').id)
|
||||
.then(data => {
|
||||
let arrayBuffer = this.typedArrayToBuffer(data);
|
||||
let parseImageUtil = new ParseImageUtil();
|
||||
parseImageUtil.parseImage(arrayBuffer,(pxielmap)=>{
|
||||
let gifPack = new PixelMapPack();
|
||||
gifPack.pixelMap = pxielmap;
|
||||
this.pixelMapPack = gifPack;
|
||||
},(err)=>{})
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('basicTestMediaImage - 本地加载资源err' + JSON.stringify(err));
|
||||
})
|
||||
})
|
||||
|
||||
}).margin({left:15}).backgroundColor(Color.Blue)
|
||||
}
|
||||
.margin({top:15})
|
||||
Image(this.pixelMapPack.pixelMap)
|
||||
.width(300)
|
||||
.height(300)
|
||||
.backgroundColor(Color.Pink)
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
typedArrayToBuffer(array: Uint8Array): ArrayBuffer {
|
||||
return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
/*
|
||||
* 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/imageknife'
|
||||
import {FileTypeUtil} from '@ohos/imageknife'
|
||||
import resourceManager from '@ohos.resourceManager';
|
||||
import {Base64} from '@ohos/imageknife'
|
||||
|
||||
@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(() => {
|
||||
resourceManager.getResourceManager()
|
||||
.then(result => {
|
||||
result.getMedia($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);
|
||||
this.fileTypeStr = fileType;
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('basicTestFileIOPage - 本地加载资源err' + JSON.stringify(err));
|
||||
})
|
||||
})
|
||||
})
|
||||
Button('getMediaBase64解析一张png图片')
|
||||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
resourceManager.getResourceManager()
|
||||
.then(result => {
|
||||
result.getMediaBase64($r('app.media.pngSample')
|
||||
.id)
|
||||
.then(data => {
|
||||
console.log('ParseResClientBase64 - 本地加载资源 解析后数据data = ' + data)
|
||||
let matchReg = ';base64,';
|
||||
var 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);
|
||||
this.fileTypeStr = fileType;
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('basicTestFileIOPage - 本地加载资源err' + JSON.stringify(err));
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
typedArrayToBuffer(array: Uint8Array): ArrayBuffer {
|
||||
return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
/*
|
||||
* 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/imageknife'
|
||||
import {PixelMapPack} from '@ohos/imageknife'
|
||||
import {OnRenameListener} from '@ohos/imageknife'
|
||||
import {OnCompressListener} from '@ohos/imageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct CompressPage {
|
||||
@State mRPixelMap: PixelMapPack = new PixelMapPack();
|
||||
@State mFPixelMap: PixelMapPack = new PixelMapPack();
|
||||
@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.pixelMap)
|
||||
.objectFit(ImageFit.None)
|
||||
.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.pixelMap)
|
||||
.objectFit(ImageFit.None)
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 });
|
||||
}.margin({ top: 10 }).visibility(Visibility.Hidden);
|
||||
}.margin({ bottom: 30 });
|
||||
}.width('100%').height('100%');
|
||||
}
|
||||
private compressAsyncRecource() {
|
||||
var data = new Array<Resource>();
|
||||
data.push($r('app.media.jpgSample'))
|
||||
|
||||
console.info("asasd start compress")
|
||||
ImageKnife.with()
|
||||
.compressBuilder()
|
||||
.load(data)
|
||||
.ignoreBy(100)
|
||||
.get()
|
||||
.then((path)=>{
|
||||
this.mAsyncPathHint = path;
|
||||
this.mAsyncPath='file://' + path;
|
||||
})
|
||||
;
|
||||
console.info("asasd start compress end")
|
||||
}
|
||||
private cropressRecource() {
|
||||
var data = new Array<Resource>();
|
||||
data.push($r('app.media.photo5'))
|
||||
var rename: OnRenameListener = {
|
||||
reName() {
|
||||
return "test_1.jpg";
|
||||
}
|
||||
}
|
||||
var that = this;
|
||||
var listener: OnCompressListener = {
|
||||
start() {
|
||||
that.mResultText = "start"
|
||||
console.info("asasd start")
|
||||
},
|
||||
onScuccess(p: PixelMap, path: string) {
|
||||
let pack = new PixelMapPack();
|
||||
pack.pixelMap = p;
|
||||
that.mRPixelMap = pack;
|
||||
console.info("asasd success path:" + this.mRPixelMap)
|
||||
that.mResultText = "success";
|
||||
that.mResultPath = path;
|
||||
},
|
||||
onError(s: string) {
|
||||
console.info("asasd onError:" + s)
|
||||
that.mResultText = "fail";
|
||||
}
|
||||
}
|
||||
console.info("asasd start compress")
|
||||
ImageKnife.with()
|
||||
.compressBuilder()
|
||||
.load(data)
|
||||
.ignoreBy(100)
|
||||
.setRenameListener(rename)
|
||||
.setCompressListener(listener)
|
||||
.launch();
|
||||
console.info("asasd start compress end")
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
/*
|
||||
* 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/imageknife'
|
||||
import {CropOptions} from '@ohos/imageknife'
|
||||
import {Crop} from '@ohos/imageknife'
|
||||
import {RecourseProvider} from '@ohos/imageknife'
|
||||
import {PixelMapPack} from '@ohos/imageknife'
|
||||
|
||||
|
||||
@Component
|
||||
@Entry
|
||||
export struct CropImagePage {
|
||||
private _resource: Resource= $r('app.media.demo_org');
|
||||
@State x: number = 0;
|
||||
@State y: number = 0;
|
||||
@State crop_size: number = 100;
|
||||
@State colorRotate: number = 100;
|
||||
@State _mCropPixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State _mCropOptions: CropOptions= {
|
||||
src: this._mCropPixelMap.pixelMap,
|
||||
size: {
|
||||
width: 200,
|
||||
height: 200
|
||||
}
|
||||
}
|
||||
|
||||
build() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Text('原图').fontSize(20)
|
||||
Image(this._resource).width(300).height(300).margin(10).objectFit(ImageFit.Contain);
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
TextInput({ text: '', placeholder: '裁X坐标' })
|
||||
.type(InputType.Number)
|
||||
.placeholderColor(Color.Gray)
|
||||
.placeholderFont({ size: 20 })
|
||||
.onChange((value: string) => {
|
||||
this.x = parseInt(value);
|
||||
})
|
||||
.height(60)
|
||||
.width(130)
|
||||
.margin(2)
|
||||
TextInput({ text: '', placeholder: '裁Y坐标' })
|
||||
.type(InputType.Number)
|
||||
.placeholderColor(Color.Gray)
|
||||
.placeholderFont({ size: 20 })
|
||||
.onChange((value: string) => {
|
||||
this.y = parseInt(value);
|
||||
})
|
||||
.height(60)
|
||||
.width(130)
|
||||
.margin(2)
|
||||
|
||||
TextInput({ text: '', placeholder: '裁剪长度' })
|
||||
.type(InputType.Number)
|
||||
.placeholderColor(Color.Gray)
|
||||
.placeholderFont({ size: 20 })
|
||||
.onChange((value: string) => {
|
||||
this.crop_size = parseInt(value);
|
||||
})
|
||||
.height(60)
|
||||
.width(130)
|
||||
.margin(2)
|
||||
|
||||
TextInput({ text: '', placeholder: '颜色比<1' })
|
||||
.type(InputType.Number)
|
||||
.placeholderColor(Color.Gray)
|
||||
.placeholderFont({ size: 20 })
|
||||
.onChange((value: string) => {
|
||||
this.colorRotate = parseFloat(value);
|
||||
})
|
||||
.height(60)
|
||||
.width(130)
|
||||
.margin(2)
|
||||
|
||||
}.width('100%')
|
||||
.height(60).backgroundColor(Color.Pink)
|
||||
|
||||
Button() {
|
||||
Text('Crop').fontSize(15).fontColor(Color.White)
|
||||
}
|
||||
.height(35)
|
||||
.width(150)
|
||||
.onClick(() => {
|
||||
var provider = new RecourseProvider(this._resource);
|
||||
provider.openInternal((buffer) => {
|
||||
Crop.crop(buffer, this.x, this.y, this.crop_size, this.crop_size, (error, data) => {
|
||||
let result = new CropOptions();
|
||||
result.src=null;
|
||||
this._mCropOptions=result;
|
||||
setTimeout(() => {
|
||||
this._mCropOptions = {
|
||||
src: data,
|
||||
size: {
|
||||
width: 200,
|
||||
height: 200
|
||||
}
|
||||
}
|
||||
},100)
|
||||
|
||||
}, this.colorRotate);
|
||||
})
|
||||
}).margin(10);
|
||||
CropImage({ _mOptions: $_mCropOptions })
|
||||
}.width('100%').height('100%');
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeComponent} from '@ohos/imageknife'
|
||||
import {ImageKnifeOption} from '@ohos/imageknife'
|
||||
import {RotateImageTransformation} from '@ohos/imageknife'
|
||||
import {RoundedCornersTransformation} from '@ohos/imageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct FrescoImageTestCasePage {
|
||||
|
||||
@State progresshint:string = "输出加载百分比回调信息"
|
||||
|
||||
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress: true
|
||||
};
|
||||
@State imageKnifeOption2: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/0ef60041445edcfd6b38d20e19024b2cd9281dcc3525a4-Vy8fYO_fw658/format/webp",
|
||||
size: { width: 300, height: 300 },
|
||||
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",
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress: true
|
||||
};
|
||||
@State imageKnifeOption4: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress: true,
|
||||
displayProgressListener:(value)=>{
|
||||
console.log("百分比value:"+value)
|
||||
this.progresshint+="\n"+value;
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
|
||||
// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption2 })
|
||||
// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 })
|
||||
Scroll() {
|
||||
Text(this.progresshint).fontSize(15)
|
||||
}.width(300).height(200)
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
/*
|
||||
* 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 router from '@system.router';
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct FrescoLayerTestCasePage {
|
||||
|
||||
@Watch("watchV1") @State v1:Visibility = Visibility.Visible
|
||||
@Watch("watchV2") @State v2:Visibility = Visibility.Visible
|
||||
@Watch("watchV3") @State v3:Visibility = Visibility.Visible
|
||||
|
||||
@State v1Width:string = "100%";
|
||||
@State v1Height:string = "100%";
|
||||
@State v2Width:string = "100%";
|
||||
@State v2Height:string = "100%";
|
||||
@State v3Width:string = "100%";
|
||||
@State v3Height:string = "100%";
|
||||
|
||||
|
||||
|
||||
|
||||
watchV1(){
|
||||
console.log("watchV1")
|
||||
}
|
||||
watchV2(){
|
||||
console.log("watchV2")
|
||||
}
|
||||
watchV3(){
|
||||
console.log("watchV3")
|
||||
}
|
||||
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Stack() {
|
||||
Text('1%')
|
||||
.fontSize(100)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
.visibility(this.v1)
|
||||
.width(this.v1Width)
|
||||
.height(this.v1Height)
|
||||
Image($r('app.media.icon_failed'))
|
||||
.visibility(this.v2)
|
||||
.width(this.v2Width)
|
||||
.height(this.v2Height)
|
||||
Image($r('app.media.jpgSample'))
|
||||
.visibility(this.v3)
|
||||
.width(this.v3Width)
|
||||
.height(this.v3Height)
|
||||
}
|
||||
.width(200)
|
||||
.height(200)
|
||||
|
||||
Button("显示第一个组件")
|
||||
.onClick(()=>{
|
||||
this.v1 = Visibility.Visible;
|
||||
this.v2 = Visibility.Hidden;
|
||||
this.v3 = Visibility.Hidden;
|
||||
|
||||
animateTo({duration:500,curve:Curve.Linear},()=>{
|
||||
this.v1Width = "100%";
|
||||
this.v1Height = "100%";
|
||||
|
||||
this.v2Width = "0%";
|
||||
this.v2Height = "0%";
|
||||
|
||||
this.v3Width = "0%";
|
||||
this.v3Height = "0%";
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
Button("显示第二个组件")
|
||||
.onClick(()=>{
|
||||
this.v2 = Visibility.Visible;
|
||||
this.v1 = Visibility.Hidden;
|
||||
this.v3 = Visibility.Hidden;
|
||||
|
||||
animateTo({duration:500,curve:Curve.Linear},()=>{
|
||||
this.v2Width = "100%";
|
||||
this.v2Height = "100%";
|
||||
|
||||
this.v1Width = "0%";
|
||||
this.v1Height = "0%";
|
||||
|
||||
this.v3Width = "0%";
|
||||
this.v3Height = "0%";
|
||||
})
|
||||
})
|
||||
Button("显示第三个组件")
|
||||
.onClick(()=>{
|
||||
this.v3 = Visibility.Visible;
|
||||
this.v2 = Visibility.Hidden;
|
||||
this.v1 = Visibility.Hidden;
|
||||
|
||||
animateTo({duration:500,curve:Curve.Linear},()=>{
|
||||
this.v3Width = "100%";
|
||||
this.v3Height = "100%";
|
||||
|
||||
this.v2Width = "0%";
|
||||
this.v2Height = "0%";
|
||||
|
||||
this.v1Width = "0%";
|
||||
this.v1Height = "0%";
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
/*
|
||||
* 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/imageknife'
|
||||
import {ImageKnifeOption} from '@ohos/imageknife'
|
||||
import {RotateImageTransformation} from '@ohos/imageknife'
|
||||
import {RoundedCornersTransformation} from '@ohos/imageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct FrescoImageTestCasePage {
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress: true,
|
||||
animateDuration: 300,
|
||||
retryLoad:true
|
||||
};
|
||||
@State imageKnifeOption2: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/0ef60041445edcfd6b38d20e19024b2cd9281dcc3525a4-Vy8fYO_fw658/format/webp",
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress: true,
|
||||
animateDuration: 300,
|
||||
retryLoad:true
|
||||
};
|
||||
@State imageKnifeOption3: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress: true,
|
||||
animateDuration: 300,
|
||||
retryLoad:true
|
||||
};
|
||||
@State imageKnifeOption4: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/testRetryxxxx",
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress: true,
|
||||
animateDuration: 300,
|
||||
retryLoad:true
|
||||
};
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
|
||||
// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption2 })
|
||||
// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 })
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
/*
|
||||
* Copyright (C) 1521 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES 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 {Pngj} from '@ohos/imageknife'
|
||||
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct Index {
|
||||
@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("测试元能力子系统")
|
||||
router.push({ uri: "pages/basicTestFeatureAbilityPage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
Button("测试文件")
|
||||
.onClick(() => {
|
||||
console.log("测试文件子系统")
|
||||
router.push({ uri: "pages/basicTestFileIOPage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
Button("测试全球化")
|
||||
.onClick(() => {
|
||||
console.log("测试全球化子系统")
|
||||
router.push({ uri: "pages/basicTestResourceManagerPage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
Button("测试媒体")
|
||||
.onClick(() => {
|
||||
console.log("测试媒体子系统")
|
||||
router.push({ uri: "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("测试bmp,webp,jpg,png本地加载 页面跳转")
|
||||
router.push({ uri: "pages/loadResourceTestCasePage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
Button("测试图片切换")
|
||||
.onClick(() => {
|
||||
console.log("测试ImageKnifeComponent所有图片切换")
|
||||
router.push({ uri: "pages/testImageKnifeOptionChangedPage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
Button("测试thumbnail")
|
||||
.onClick(() => {
|
||||
console.log("测试ImageKnifeComponent thumbnail")
|
||||
router.push({ uri: "pages/testImageKnifeOptionChangedPage2" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
|
||||
}.width('100%')
|
||||
.height(60).backgroundColor(Color.Pink)
|
||||
|
||||
Text("测试存储(1级 2级缓存)功能点").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("测试一级内存缓存")
|
||||
.onClick(() => {
|
||||
console.log("测试一级内存缓存")
|
||||
router.push({ uri: "pages/storageTestLruCache" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
Button("测试二级内存缓存")
|
||||
.onClick(() => {
|
||||
console.log("测试二级内存缓存")
|
||||
router.push({ uri: "pages/storageTestDiskLruCache" });
|
||||
}).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.push({ uri: "pages/loadNetworkTestCasePage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
Button("测试失败占位图")
|
||||
.onClick(() => {
|
||||
console.log("测试失败占位图")
|
||||
router.push({ uri: "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.push({ uri: "pages/testPreloadPage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
Button("测试gif静态动态切换")
|
||||
.onClick(() => {
|
||||
console.log("测试gif静态动态切换")
|
||||
router.push({ uri: "pages/testGifDontAnimatePage" });
|
||||
}).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.push({ uri: "pages/transformPixelMapPage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
Button("测试图片压缩")
|
||||
.onClick(() => {
|
||||
console.log("测试图片压缩")
|
||||
router.push({ uri: "pages/compressPage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
}.width('100%')
|
||||
.height(60).backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
Button("测试所有缓存信息输出")
|
||||
.onClick(() => {
|
||||
console.log("pages/testAllCacheInfoPage 页面跳转")
|
||||
router.push({ uri: "pages/testAllCacheInfoPage" });
|
||||
}).margin({ top: 15 })
|
||||
|
||||
Button("测试fresco部分AR")
|
||||
.onClick(() => {
|
||||
console.log("pages/indexFresco 页面跳转")
|
||||
router.push({ uri: "pages/indexFresco" });
|
||||
}).margin({ top: 15 })
|
||||
Button("测试pngj")
|
||||
.onClick(() => {
|
||||
console.log("pages/pngjTestCasePage 页面跳转")
|
||||
router.push({ uri: "pages/pngjTestCasePage" });
|
||||
}).margin({ top: 15 })
|
||||
Button("测试图片的裁剪")
|
||||
.onClick(() => {
|
||||
console.log("pages/cropImagePage 页面跳转")
|
||||
router.push({ uri: "pages/cropImagePage" });
|
||||
}).margin({ top: 15 })
|
||||
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
}
|
||||
|
||||
onBackPress() {
|
||||
let cache = ImageKnife.getMemoryCache();
|
||||
cache.print()
|
||||
}
|
||||
}
|
||||
var ImageKnife;
|
||||
var defaultTemp = globalThis.exports.default
|
||||
if (defaultTemp != undefined) {
|
||||
ImageKnife = defaultTemp.data.imageKnife;
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
/*
|
||||
* 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 router from '@system.router';
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct IndexFresco {
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("测试控件隐藏与展示和动画")
|
||||
.onClick(() => {
|
||||
router.push({ uri: "pages/frescoLayerTestCasePage" });
|
||||
}).margin({ top: 15 })
|
||||
Button("测试自定义控件FrescoImage的加载百分比")
|
||||
.onClick(() => {
|
||||
router.push({ uri: "pages/frescoImageTestCasePage" });
|
||||
}).margin({ top: 15 })
|
||||
Button("测试自定义控件FrescoImage重试Retry")
|
||||
.onClick(() => {
|
||||
router.push({ uri: "pages/frescoRetryTestCasePage" });
|
||||
}).margin({ top: 15 })
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeComponent} from '@ohos/imageknife'
|
||||
import {ImageKnifeOption} from '@ohos/imageknife'
|
||||
import {RotateImageTransformation} from '@ohos/imageknife'
|
||||
import {RoundedCornersTransformation} from '@ohos/imageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct LoadNetworkTestCasePage {
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
@State imageKnifeOption2: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/0ef60041445edcfd6b38d20e19024b2cd9281dcc3525a4-Vy8fYO_fw658/format/webp",
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
@State imageKnifeOption3: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
@State imageKnifeOption4: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
|
||||
size: { width: 300, height: 300 },
|
||||
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: $imageKnifeOption1 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption2 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 })
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeComponent} from '@ohos/imageknife'
|
||||
import {ImageKnifeOption} from '@ohos/imageknife'
|
||||
import {RotateImageTransformation} from '@ohos/imageknife'
|
||||
import {RoundedCornersTransformation} from '@ohos/imageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct LoadResourceTestCasePage {
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.gifSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
@State imageKnifeOption2: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.bmpSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
// placeholderSrc: $r('app.media.icon_loading'),
|
||||
// errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
@State imageKnifeOption3: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
// placeholderSrc: $r('app.media.icon_loading'),
|
||||
// errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
@State imageKnifeOption4: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
// 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: $imageKnifeOption1 })
|
||||
// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption2 })
|
||||
// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 })
|
||||
// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 })
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,176 @@
|
|||
/*
|
||||
* 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 router from '@system.router';
|
||||
import {Pngj} from '@ohos/imageknife'
|
||||
import resourceManager from '@ohos.resourceManager';
|
||||
import {FileUtils} from '@ohos/imageknife'
|
||||
import featureability from '@ohos.ability.featureAbility'
|
||||
import ArkWorker from '@ohos.worker'
|
||||
@Entry
|
||||
@Component
|
||||
struct PngjTestCasePage {
|
||||
pngSource: ArrayBuffer = new ArrayBuffer(0);
|
||||
rootFolder: string = '';
|
||||
@State hint1: string = 'readPngImageInfo内容展示'
|
||||
@State hint2: string = 'readPngImage内容展示'
|
||||
@State hint3: string = 'writePngWithString内容展示'
|
||||
@State hint4: string = 'writePngWithString内容展示'
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Text('pngj接口测试列表').fontSize(20)
|
||||
|
||||
Button('点击获取Png图片buffer').fontSize(20)
|
||||
.onClick(() => {
|
||||
|
||||
featureability.getContext()
|
||||
.getFilesDir()
|
||||
.then((data) => {
|
||||
this.rootFolder = data;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('点击获取Png图片buffer 路径获取失败 err:' + err)
|
||||
})
|
||||
|
||||
|
||||
resourceManager.getResourceManager()
|
||||
.then(result => {
|
||||
result.getMedia($r('app.media.Tomato').id)
|
||||
.then(data => {
|
||||
this.pngSource = FileUtils.getInstance().uint8ArrayToBuffer(data);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('点击获取Png图片buffer err=' + err)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button('测试readPngImageInfo')
|
||||
.onClick(() => {
|
||||
let pngj = new Pngj();
|
||||
pngj.readPngImageInfo(this.pngSource, (sender, value) => {
|
||||
this.hint1 = JSON.stringify(value);
|
||||
})
|
||||
}).margin({ top: 5, left: 10 })
|
||||
Button('测试readPngImage')
|
||||
.onClick(() => {
|
||||
let pngj = new Pngj();
|
||||
pngj.readPngImage(this.pngSource, (sender, value) => {
|
||||
this.hint2 = 'img with=' + value.width + ' img height=' + value.height
|
||||
+ ' img depth=' + value.depth + ' img ctype=' + value.ctype
|
||||
console.log('png data =' + value.data);
|
||||
})
|
||||
}).margin({ top: 5, left: 10 })
|
||||
Button('测试writePngWithString')
|
||||
.onClick(() => {
|
||||
let pngj = new Pngj();
|
||||
pngj.writePngWithString('hello world', this.pngSource, (sender, value) => {
|
||||
|
||||
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进制查看数据是否新增'
|
||||
})
|
||||
}).margin({ top: 5, left: 10 })
|
||||
Button('测试writePng')
|
||||
.onClick(() => {
|
||||
let pngj = new Pngj();
|
||||
pngj.writePng(this.pngSource, (sender, value) => {
|
||||
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进制查看数据是否新增'
|
||||
})
|
||||
}).margin({ top: 5, left: 10 })
|
||||
}.width('100%')
|
||||
.height(60).backgroundColor(Color.Pink)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button('测试readPngImageInfo')
|
||||
.onClick(() => {
|
||||
let pngj = new Pngj();
|
||||
pngj.readPngImageInfo(this.pngSource, (sender, value) => {
|
||||
this.hint1 = JSON.stringify(value);
|
||||
})
|
||||
}).margin({ top: 5, left: 10 })
|
||||
Button('测试readPngImageAsync')
|
||||
.onClick(() => {
|
||||
let pngj = new Pngj();
|
||||
let worker = new ArkWorker.Worker('workers/worker1.js', { type: 'classic', name: 'readPngImageAsync'})
|
||||
pngj.readPngImageAsync(worker, this.pngSource, (sender, value) => {
|
||||
this.pngSource = sender
|
||||
this.hint2 = 'img with=' + value.width + ' img height=' + value.height
|
||||
+ ' img depth=' + value.depth + ' img ctype=' + value.ctype
|
||||
})
|
||||
}).margin({ top: 5, left: 10 })
|
||||
Button('测试writePngWithStringAsync')
|
||||
.onClick(() => {
|
||||
let pngj = new Pngj();
|
||||
let worker = new ArkWorker.Worker('workers/worker1.js', { type: 'classic', name: 'writePngWithStringAsync'})
|
||||
pngj.writePngWithStringAsync(worker, 'hello world', this.pngSource, (sender, value) => {
|
||||
this.pngSource = sender
|
||||
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进制查看数据是否新增'
|
||||
})
|
||||
}).margin({ top: 5, left: 10 })
|
||||
Button('测试writePngAsync')
|
||||
.onClick(() => {
|
||||
let pngj = new Pngj();
|
||||
let worker = new ArkWorker.Worker('workers/worker1.js', { type: 'classic', name: 'writePngAsync'})
|
||||
pngj.writePngAsync(worker, this.pngSource, (sender, value) => {
|
||||
this.pngSource = sender
|
||||
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进制查看数据是否新增'
|
||||
})
|
||||
}).margin({ top: 5, left: 10 })
|
||||
}.width('100%')
|
||||
.height(60).backgroundColor(Color.Pink)
|
||||
|
||||
Text(this.hint1)
|
||||
.width('100%')
|
||||
.height(120)
|
||||
Text(this.hint2)
|
||||
.width('100%')
|
||||
.height(120)
|
||||
Text(this.hint3)
|
||||
.width('100%')
|
||||
.height(120)
|
||||
Text(this.hint4)
|
||||
.width('100%')
|
||||
.height(120)
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
typedArrayToBuffer(array: Uint8Array): ArrayBuffer {
|
||||
return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeComponent} from '@ohos/imageknife'
|
||||
import {ImageKnifeOption} from '@ohos/imageknife'
|
||||
import {RotateImageTransformation} from '@ohos/imageknife'
|
||||
import {RoundedCornersTransformation} from '@ohos/imageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct ShowErrorholderTestCasePage {
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://thirdwx.qlogo.cn/mmopen/xxxxx",
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
@State imageKnifeOption2: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/xxxxx",
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
@State imageKnifeOption3: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/xxxxx",
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
@State imageKnifeOption4: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/xxxxx",
|
||||
size: { width: 300, height: 300 },
|
||||
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: $imageKnifeOption1 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption2 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 })
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,324 @@
|
|||
/*
|
||||
* 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} from '@ohos/imageknife'
|
||||
import {RequestOption} from '@ohos/imageknife'
|
||||
import {ImageKnifeData} from '@ohos/imageknife'
|
||||
import {PixelMapPack} from '@ohos/imageknife'
|
||||
|
||||
|
||||
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct StorageTestDiskLruCache {
|
||||
@Watch('watchImageKnifeOption') @State imageKnifeOption: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
@State imageKnifePixelMapPack: PixelMapPack = new PixelMapPack();
|
||||
@State imageKnifeResource: Resource = $r('app.media.icon_loading')
|
||||
@State imageKnifeString: string = ""
|
||||
@State normalPixelMap: boolean = false;
|
||||
@State normalResource: boolean = true;
|
||||
previousData: ImageKnifeData = null;
|
||||
nowData: ImageKnifeData = null;
|
||||
@State logText: string = "打印日志结果";
|
||||
|
||||
|
||||
watchImageKnifeOption() {
|
||||
this.imageKnifeExecute();
|
||||
}
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Text("ImageKnife测试DiskLruCache能力")
|
||||
.backgroundColor(Color.Blue)
|
||||
Button("替换ImageKnife默认DiskLruCache并设置大小1M")
|
||||
.onClick(() => {
|
||||
DiskImageKnife.replaceDiskLruCache(1 * 1024 * 1024)
|
||||
}).margin({top:15, bottom:15})
|
||||
|
||||
Button("替换ImageKnife默认DiskLruCache并设置大小30M")
|
||||
.onClick(() => {
|
||||
DiskImageKnife.replaceDiskLruCache(30 * 1024 * 1024)
|
||||
}).margin({top:15, bottom:15})
|
||||
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("加载jpg网络图")
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption = {
|
||||
loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin:{left:5,top:5,right:5,bottom:5}
|
||||
};
|
||||
|
||||
}).margin({ top: 5, left: 10 })
|
||||
Button("加载png网络图")
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption = {
|
||||
loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png",
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin:{left:5,top:5,right:5,bottom:5}
|
||||
};
|
||||
}).margin({ top: 5, left: 10 })
|
||||
Button("加载webp网络图")
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption = {
|
||||
loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin:{left:5,top:5,right:5,bottom:5}
|
||||
};
|
||||
}).margin({ top: 5, left: 10 })
|
||||
Button("加载bmp网络图")
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption = {
|
||||
loadSrc: "https://img-blog.csdn.net/20140514114029140",
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin:{left:5,top:5,right:5,bottom:5}
|
||||
};
|
||||
}).margin({ top: 5, left: 10 })
|
||||
}.width('100%')
|
||||
.height(60).backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
Image(this.normalPixelMap ? this.imageKnifePixelMapPack.pixelMap : (this.normalResource ? this.imageKnifeResource : this.imageKnifeString))
|
||||
.width(this.imageKnifeOption.size ? this.imageKnifeOption.size.width : '100%')
|
||||
.height(this.imageKnifeOption.size ? this.imageKnifeOption.size.height : '100%')
|
||||
.objectFit(this.imageKnifeOption.imageFit ? this.imageKnifeOption.imageFit : ImageFit.Fill)
|
||||
.backgroundColor(this.imageKnifeOption.backgroundColor ? this.imageKnifeOption.backgroundColor : Color.White)
|
||||
.margin(this.imageKnifeOption.margin ? this.imageKnifeOption.margin : { left: 0, top: 0, right: 0, bottom: 0 })
|
||||
|
||||
|
||||
|
||||
Scroll() {
|
||||
Text(this.logText).fontSize(15)
|
||||
}.width(300).height(300).margin({top:20}).backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
|
||||
// imageKnife 第一次启动和数据刷新后重新发送请求
|
||||
imageKnifeExecute() {
|
||||
let request = new RequestOption();
|
||||
request.load(this.imageKnifeOption.loadSrc)
|
||||
.addListener((err, data) => {
|
||||
this.imageKnifeChangeSource(data)
|
||||
return false;
|
||||
})
|
||||
if (this.imageKnifeOption.placeholderSrc) {
|
||||
request.placeholder(this.imageKnifeOption.placeholderSrc, (data) => {
|
||||
this.imageKnifeChangeSource(data)
|
||||
})
|
||||
}
|
||||
if (this.imageKnifeOption.errorholderSrc) {
|
||||
request.errorholder(this.imageKnifeOption.errorholderSrc, (data) => {
|
||||
this.imageKnifeChangeSource(data)
|
||||
})
|
||||
}
|
||||
if (this.imageKnifeOption.transformations) {
|
||||
request.transforms(this.imageKnifeOption.transformations)
|
||||
}
|
||||
|
||||
if (this.imageKnifeOption.size) {
|
||||
request.setImageViewSize(this.imageKnifeOption.size)
|
||||
}
|
||||
|
||||
if (this.imageKnifeOption.onlyRetrieveFromCache) {
|
||||
request.retrieveDataFromCache(this.imageKnifeOption.onlyRetrieveFromCache)
|
||||
}
|
||||
|
||||
if (this.imageKnifeOption.isCacheable) {
|
||||
request.skipMemoryCache(!this.imageKnifeOption.isCacheable)
|
||||
}
|
||||
|
||||
if (this.imageKnifeOption.strategy) {
|
||||
request.diskCacheStrategy(this.imageKnifeOption.strategy)
|
||||
}
|
||||
|
||||
if (this.imageKnifeOption.dontAnimateFlag) {
|
||||
request.dontAnimate()
|
||||
}
|
||||
if (this.imageKnifeOption.allCacheInfoCallback) {
|
||||
request.addAllCacheInfoCallback(this.imageKnifeOption.allCacheInfoCallback)
|
||||
}
|
||||
|
||||
DiskImageKnife.call(request);
|
||||
}
|
||||
|
||||
imageKnifeChangeSource(data:ImageKnifeData) {
|
||||
this.imageKnifeSpecialFixed(data);
|
||||
|
||||
//查看mImageKnife中的DiskLruCache
|
||||
let disk = DiskImageKnife.getDiskMemoryCache();
|
||||
let showDisk = ''
|
||||
disk.foreachDiskLruCache((value, key, map) => {
|
||||
showDisk += "key=" + key + "&value=" + value;
|
||||
})
|
||||
this.logText = "日志结果:" + showDisk;
|
||||
}
|
||||
|
||||
imageKnifeSpecialFixed(data:ImageKnifeData) {
|
||||
if (this.nowData) {
|
||||
this.previousData = this.nowData;
|
||||
this.nowData = data;
|
||||
if (data.isPixelMap()) {
|
||||
// PixelMap
|
||||
console.log("ImageKnife占位图输出=PixelMap")
|
||||
if (this.previousData.isSvg()) {
|
||||
console.log("ImageKnife占位图输出=PixelMap 上一个是SVG")
|
||||
this.normalPixelMap = true;
|
||||
this.normalResource = true;
|
||||
|
||||
let pixelMapPack1 = new PixelMapPack();
|
||||
|
||||
this.imageKnifePixelMapPack = pixelMapPack1;
|
||||
|
||||
setTimeout(() => {
|
||||
let pixelMapPack2 = new PixelMapPack();
|
||||
pixelMapPack2.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
this.imageKnifePixelMapPack = pixelMapPack2;
|
||||
}, 100)
|
||||
} else {
|
||||
this.normalPixelMap = true;
|
||||
this.normalResource = true;
|
||||
|
||||
let pixelMapPack3 = new PixelMapPack();
|
||||
pixelMapPack3.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
|
||||
this.imageKnifePixelMapPack = pixelMapPack3;
|
||||
}
|
||||
}
|
||||
else if (data.isString()) {
|
||||
// String
|
||||
console.log("imageKnifevalue=" + JSON.stringify(data));
|
||||
console.log("ImageKnife占位图输出=String")
|
||||
if (this.previousData.isSvg()) {
|
||||
|
||||
console.log("data.imageKnifeValue=" + JSON.stringify(data.imageKnifeValue))
|
||||
console.log("ImageKnife占位图输出=String 拥有上一个图片类型 上一个是SVG")
|
||||
this.normalPixelMap = false;
|
||||
this.normalResource = false;
|
||||
let firstIndex = (data.imageKnifeValue as string).indexOf(DiskImageKnife.getSvgAndGifFolder());
|
||||
console.log("firstIndex=" + firstIndex);
|
||||
let suffix = (data.imageKnifeValue as string).substring(firstIndex, (data.imageKnifeValue as string).length)
|
||||
console.log("suffix =" + suffix);
|
||||
let imageKnifeNeedStr = 'internal://app/' + suffix;
|
||||
this.imageKnifeString = imageKnifeNeedStr;
|
||||
} else {
|
||||
console.log("data.imageKnifeValue=" + JSON.stringify(data.imageKnifeValue))
|
||||
console.log("ImageKnife占位图输出=String 拥有上一个图片类型 上一个不是SVG")
|
||||
|
||||
this.normalPixelMap = false;
|
||||
this.normalResource = false;
|
||||
let firstIndex = (data.imageKnifeValue as string).indexOf(DiskImageKnife.getSvgAndGifFolder());
|
||||
console.log("firstIndex=" + firstIndex);
|
||||
let suffix = (data.imageKnifeValue as string).substring(firstIndex, (data.imageKnifeValue as string).length)
|
||||
console.log("suffix =" + suffix);
|
||||
let imageKnifeNeedStr = 'internal://app/' + suffix;
|
||||
this.imageKnifeString = imageKnifeNeedStr;
|
||||
}
|
||||
} else if (data.isResource()) {
|
||||
console.log("ImageKnife占位图输出=Resource")
|
||||
if (this.previousData.isSvg()) {
|
||||
console.log("ImageKnife占位图输出=Resource 上一个是SVG")
|
||||
this.normalPixelMap = false;
|
||||
this.normalResource = true;
|
||||
this.imageKnifeResource = data.imageKnifeValue as Resource;
|
||||
} else {
|
||||
this.normalPixelMap = false;
|
||||
this.normalResource = true;
|
||||
this.imageKnifeResource = data.imageKnifeValue as Resource;
|
||||
}
|
||||
} else {
|
||||
console.log("ImageKnife占位图输出=数据错误")
|
||||
}
|
||||
|
||||
} else {
|
||||
this.nowData = data;
|
||||
if (data.isPixelMap()) {
|
||||
// PixelMap
|
||||
console.log("ImageKnife占位图输出=PixelMap")
|
||||
this.normalPixelMap = true;
|
||||
this.normalResource = true;
|
||||
|
||||
let pixelMapPack4 = new PixelMapPack();
|
||||
pixelMapPack4.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
|
||||
this.imageKnifePixelMapPack = pixelMapPack4;
|
||||
}
|
||||
else if (data.isString()) {
|
||||
// String
|
||||
console.log("data.imageKnifeValue=" + JSON.stringify(data.imageKnifeValue))
|
||||
console.log("ImageKnife占位图输出=String 没有上一个图片类型")
|
||||
this.normalPixelMap = false;
|
||||
this.normalResource = false;
|
||||
let firstIndex = (data.imageKnifeValue as string).indexOf(DiskImageKnife.getSvgAndGifFolder());
|
||||
console.log("firstIndex=" + firstIndex);
|
||||
let suffix = (data.imageKnifeValue as string).substring(firstIndex, (data.imageKnifeValue as string).length)
|
||||
console.log("suffix =" + suffix);
|
||||
let imageKnifeNeedStr = 'internal://app/' + suffix;
|
||||
this.imageKnifeString = imageKnifeNeedStr;
|
||||
} else if (data.isResource()) {
|
||||
console.log("ImageKnife占位图输出=Resource")
|
||||
this.normalPixelMap = false;
|
||||
this.normalResource = true;
|
||||
this.imageKnifeResource = data.imageKnifeValue as Resource;
|
||||
} else {
|
||||
console.log("ImageKnife占位图输出=数据错误")
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
//函数在自定义组件析构消耗之前执行。
|
||||
//不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。
|
||||
aboutToDisappear() {
|
||||
|
||||
}
|
||||
//当此页面显示时触发一次。包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。
|
||||
onPageShow() {
|
||||
}
|
||||
//当此页面消失时触发一次。包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。
|
||||
onPageHide() {
|
||||
}
|
||||
|
||||
// 当用户点击返回按钮时触发，，仅@Entry修饰的自定义组件生效。
|
||||
//返回true表示页面自己处理返回逻辑, 不进行页面路由。
|
||||
//返回false表示使用默认的返回逻辑。
|
||||
//不返回值会作为false处理。
|
||||
onBackPress() {
|
||||
|
||||
}
|
||||
}
|
||||
var DiskImageKnife = globalThis.exports.default.data.imageKnife
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import featureAbility from '@ohos.ability.featureAbility';
|
||||
import {LruCache} from '@ohos/imageknife'
|
||||
|
||||
function getRandomInt(min, max) {
|
||||
min = Math.ceil(min);
|
||||
max = Math.floor(max);
|
||||
return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
|
||||
}
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct StorageTestLruCache {
|
||||
@State logText:string = "打印日志结果";
|
||||
@State nowNumText:string = "显示输入的数据";
|
||||
mLruCache:LruCache<string,string> = new LruCache(5);
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Text("默认创建一个容量为5的LruCache")
|
||||
.backgroundColor(Color.Blue)
|
||||
Button("随机存入一个数字0-9")
|
||||
.onClick(()=>{
|
||||
let randomNum = getRandomInt(0,10);
|
||||
this.nowNumText = ''+randomNum;
|
||||
this.mLruCache.put(randomNum+"",randomNum+"")
|
||||
this.logText = "日志结果:"+this.mLruCache.print();
|
||||
}) .margin({top:20})
|
||||
|
||||
Button(this.nowNumText)
|
||||
.margin({top:20})
|
||||
|
||||
Scroll() {
|
||||
Text(this.logText).fontSize(15)
|
||||
}.width(300).height(200).margin({top:20}).backgroundColor(Color.Pink)
|
||||
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,210 @@
|
|||
/*
|
||||
* 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/imageknife'
|
||||
import {AllCacheInfo,IAllCacheInfoCallback} from '@ohos/imageknife'
|
||||
import {ImageKnifeComponent} from '@ohos/imageknife'
|
||||
import {TransformType} from '@ohos/imageknife'
|
||||
import {PixelMapPack} from '@ohos/imageknife'
|
||||
import {ImageKnifeOption} from '@ohos/imageknife'
|
||||
import {RotateImageTransformation} from '@ohos/imageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestAllCacheInfoPage {
|
||||
@State nativePixelMap: PixelMapPack = new PixelMapPack();
|
||||
@State networkPixelMap: PixelMapPack = new PixelMapPack();
|
||||
allCacheInfoCallback1 =(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 =(allCacheInfo)=>{
|
||||
let info = allCacheInfo as AllCacheInfo;
|
||||
console.log("AllCacheInfoCallback imageknifecomponent2 memory ="+JSON.stringify(info.memoryCacheInfo))
|
||||
console.log("AllCacheInfoCallback imageknifecomponent2 resource ="+JSON.stringify(info.resourceCacheInfo))
|
||||
console.log("AllCacheInfoCallback imageknifecomponent2 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'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin:{top:15},
|
||||
transform: {
|
||||
transformType:TransformType.RotateImageTransformation,
|
||||
rotateImage:180
|
||||
},
|
||||
allCacheInfoCallback:this.allCacheInfoCallback1
|
||||
};
|
||||
@State imageKnifeOption2: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin:{top:15},
|
||||
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.pixelMap)
|
||||
.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.pixelMap)
|
||||
.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'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin: { top: 15 },
|
||||
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: $imageKnifeOption1 })
|
||||
|
||||
Button("ImageKnifeComponent加载网络资源获取缓存信息").width(300).height(25)
|
||||
.onClick(() => {
|
||||
this.imageKnifeComponentAngle = this.imageKnifeComponentAngle + 45;
|
||||
this.imageKnifeOption2 =
|
||||
{
|
||||
loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin: { top: 15 },
|
||||
transform: {
|
||||
transformType:TransformType.RotateImageTransformation,
|
||||
rotateImage:this.imageKnifeComponentAngle
|
||||
},
|
||||
allCacheInfoCallback:this.allCacheInfoCallback2
|
||||
};
|
||||
})
|
||||
Scroll() {
|
||||
Text(this.cacheinfo4).fontSize(15)
|
||||
}.width(300).height(200)
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption2 })
|
||||
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
|
||||
}
|
||||
|
||||
private testAllCacheInfoNative() {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
imageKnifeOption.load($r('app.media.pngSample'))
|
||||
.setImageViewSize({width:300,height:300})
|
||||
.addListener((err, data) => {
|
||||
let pack = new PixelMapPack();
|
||||
pack.pixelMap = data.imageKnifeValue as PixelMap;;
|
||||
this.nativePixelMap = pack;
|
||||
return false;
|
||||
}).addAllCacheInfoCallback((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 imageKnifeOption2 = new RequestOption();
|
||||
imageKnifeOption2.load("https://hbimg.huabanimg.com/0ef60041445edcfd6b38d20e19024b2cd9281dcc3525a4-Vy8fYO_fw658/format/webp")
|
||||
.addListener((err, data) => {
|
||||
let pack = new PixelMapPack();
|
||||
pack.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
this.networkPixelMap = pack;
|
||||
console.log("imageknife2 图片2 赋值！")
|
||||
return false;
|
||||
}).addAllCacheInfoCallback((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(imageKnifeOption2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var ImageKnife = globalThis.exports.default.data.imageKnife
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
/*
|
||||
* 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/imageknife'
|
||||
import {ImageKnifeOption} from '@ohos/imageknife'
|
||||
import {RotateImageTransformation} from '@ohos/imageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestAllTypeImageKnifeComponentPage {
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.Tomato'),
|
||||
errorholderSrc: $r('app.media.picture1'),
|
||||
transform: {
|
||||
transformType:TransformType.RotateImageTransformation,
|
||||
rotateImage:180
|
||||
}
|
||||
};
|
||||
@State imageKnifeOption2: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.Tomato'),
|
||||
errorholderSrc: $r('app.media.picture1'),
|
||||
transform: {
|
||||
transformType:TransformType.RotateImageTransformation,
|
||||
rotateImage:180
|
||||
}
|
||||
};
|
||||
@State imageKnifeOption3: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.webpSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.Tomato'),
|
||||
errorholderSrc: $r('app.media.picture1'),
|
||||
transform: {
|
||||
transformType:TransformType.RotateImageTransformation,
|
||||
rotateImage:180
|
||||
}
|
||||
};
|
||||
@State imageKnifeOption4: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.svgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.Tomato'),
|
||||
errorholderSrc: $r('app.media.picture1'),
|
||||
transform: {
|
||||
transformType:TransformType.RotateImageTransformation,
|
||||
rotateImage:180
|
||||
}
|
||||
};
|
||||
@State imageKnifeOption5: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.bmpSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.Tomato'),
|
||||
errorholderSrc: $r('app.media.picture1'),
|
||||
transform: {
|
||||
transformType:TransformType.RotateImageTransformation,
|
||||
rotateImage:180
|
||||
}
|
||||
};
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption2 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption5 })
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
console.log("aboutToAppear()")
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var ImageKnife = globalThis.exports.default.data.imageKnife
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
/*
|
||||
* 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/imageknife'
|
||||
import {ImageKnifeOption} from '@ohos/imageknife'
|
||||
import {RotateImageTransformation} from '@ohos/imageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestAllTypeNativeImagePage {
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Image($r('app.media.jpgSample'))
|
||||
.width(300)
|
||||
.height(300)
|
||||
Image($r('app.media.pngSample'))
|
||||
.width(300)
|
||||
.height(300)
|
||||
Image($r('app.media.webpSample'))
|
||||
.width(300)
|
||||
.height(300)
|
||||
Image($r('app.media.svgSample'))
|
||||
.width(300)
|
||||
.height(300)
|
||||
Image($r('app.media.bmpSample'))
|
||||
.width(300)
|
||||
.height(300)
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
console.log("aboutToAppear()")
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var ImageKnife = globalThis.exports.default.data.imageKnife
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
/*
|
||||
* 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/imageknife'
|
||||
import {ImageKnifeOption} from '@ohos/imageknife'
|
||||
import {RotateImageTransformation} from '@ohos/imageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestGifDontAnimatePage {
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin:{left:15,top:15,right:15,bottom:15}
|
||||
};
|
||||
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Flex({direction:FlexDirection.Row}){
|
||||
Button('本地资源gif')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.gifSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin:{left:15,top:15,right:15,bottom:15}
|
||||
}
|
||||
|
||||
}).margin({left:15}).backgroundColor(Color.Grey)
|
||||
Button('本地资源gif静态')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.gifSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin:{left:15,top:15,right:15,bottom:15},
|
||||
dontAnimateFlag:true
|
||||
}
|
||||
|
||||
}).margin({left:15}).backgroundColor(Color.Grey)
|
||||
}
|
||||
.margin({top:15})
|
||||
Flex({direction:FlexDirection.Row}){
|
||||
Button('网络资源gif')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700',
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin:{left:15,top:15,right:15,bottom:15}
|
||||
};
|
||||
}).margin({left:15}).backgroundColor(Color.Grey)
|
||||
Button('网络资源gif静态')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700',
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin:{left:15,top:15,right:15,bottom:15},
|
||||
dontAnimateFlag:true
|
||||
};
|
||||
}).margin({left:15}).backgroundColor(Color.Grey)
|
||||
}
|
||||
.margin({top:15})
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
|
||||
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
console.log('aboutToAppear()')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var ImageKnife = globalThis.exports.default.data.imageKnife
|
||||
|
|
@ -0,0 +1,185 @@
|
|||
/*
|
||||
* 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/imageknife'
|
||||
import {ImageKnifeOption} from '@ohos/imageknife'
|
||||
import {RotateImageTransformation} from '@ohos/imageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestImageKnifeOptionChangedPage {
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin:{left:5,top:5,right:5,bottom:5}
|
||||
};
|
||||
|
||||
|
||||
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'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin:{left:5,top:5,right:5,bottom:5}
|
||||
};
|
||||
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button('本地资源png')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin:{left:5,top:5,right:5,bottom:5}
|
||||
};
|
||||
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button('本地资源bmp')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.bmpSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin:{left:5,top:5,right:5,bottom:5}
|
||||
};
|
||||
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button('本地资源webp')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.webpSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin:{left:5,top:5,right:5,bottom:5}
|
||||
};
|
||||
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button('本地资源svg')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.svgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin:{left:5,top:5,right:5,bottom:5}
|
||||
};
|
||||
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button('本地资源gif')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.gifSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin:{left:5,top:5,right:5,bottom:5}
|
||||
};;
|
||||
|
||||
}).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',
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin:{left:5,top:5,right:5,bottom:5}
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button('网络资源png')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://img-blog.csdnimg.cn/20191215043500229.png',
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin:{left:5,top:5,right:5,bottom:5}
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button('网络资源bmp')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://img-blog.csdn.net/20140514114029140',
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin:{left:5,top:5,right:5,bottom:5}
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button('网络资源webp')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin:{left:5,top:5,right:5,bottom:5}
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button('网络资源svg')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'http://design-svc.fat.lunz.cn/StaticFiles/BP9999999772/BV9999999422/SA9999998420/30df266a-485e-411e-b178-b9fb1d8e0748.svg',
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin:{left:5,top:5,right:5,bottom:5}
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button('网络资源gif')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700',
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin:{left:5,top:5,right:5,bottom:5}
|
||||
};
|
||||
}).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: $imageKnifeOption1 })
|
||||
}.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
console.log('aboutToAppear()')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
/*
|
||||
* 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/imageknife'
|
||||
import {ImageKnifeOption} from '@ohos/imageknife'
|
||||
import {RotateImageTransformation} from '@ohos/imageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestImageKnifeOptionChangedPage2 {
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin:{left:5,top:5,right:5,bottom:5},
|
||||
thumbSizeMultiplier:0.1
|
||||
};
|
||||
|
||||
|
||||
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",
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin:{left:5,top:5,right:5,bottom:5},
|
||||
thumbSizeMultiplier:0.1
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button("网络资源png")
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png",
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin:{left:5,top:5,right:5,bottom:5},
|
||||
thumbSizeMultiplier:0.1
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button("网络资源bmp")
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://img-blog.csdn.net/20140514114029140",
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin:{left:5,top:5,right:5,bottom:5},
|
||||
thumbSizeMultiplier:0.1
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button("网络资源webp")
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin:{left:5,top:5,right:5,bottom:5},
|
||||
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: $imageKnifeOption1 })
|
||||
}.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
console.log("aboutToAppear()")
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var ImageKnife = globalThis.exports.default.data.imageKnife
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import ArkWorker from '@ohos.worker'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestMultiThreadWorkerPage2 {
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("创建Worker向子线程发送携带Arraybuffer数据")
|
||||
.margin({ top: 20 })
|
||||
.onClick(() => {
|
||||
let worker = new ArkWorker.Worker("workers/worker1.js", { type: "classic", name: "zhangsan" })
|
||||
worker.onerror = function (data) {
|
||||
console.info("worker:: receive onerror " + data.lineno + ", msg = " + data.message + ", filename = " + data.filename + ", colno = " + data.colno);
|
||||
}
|
||||
|
||||
worker.onmessageerror = function (e) {
|
||||
console.log("worker:: receive onmessageerror ");
|
||||
}
|
||||
|
||||
worker.onexit = function () {
|
||||
console.log("worker:: receive onexit");
|
||||
}
|
||||
|
||||
worker.onmessage = function (e) {
|
||||
var data = e.data;
|
||||
switch (data.type) {
|
||||
case "normal":
|
||||
console.log("worker:: onmessage " + data.data);
|
||||
break;
|
||||
case "buffer":
|
||||
console.log("worker:: receive buffer length is " + data.data.byteLength);
|
||||
break;
|
||||
default:
|
||||
console.log("worker:: worker.js receive unknow type");
|
||||
break
|
||||
}
|
||||
worker.terminate();
|
||||
}
|
||||
|
||||
console.log("worker:: start post buffer");
|
||||
|
||||
let uint8array = new Uint8Array([0, 1, 2, 3, 4, 5, 6, 7])
|
||||
let buffer = uint8array.buffer.slice(uint8array.byteOffset, uint8array.byteLength + uint8array.byteOffset)
|
||||
|
||||
var obj = { type: "buffer", data: buffer };
|
||||
console.log("worker:: before post, buffer length is " + obj.data.byteLength);
|
||||
worker.postMessage(obj, [buffer]);
|
||||
console.log("worker:: after post, buffer length is " + obj.data.byteLength);
|
||||
console.info("end post buffer");
|
||||
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,622 @@
|
|||
/*
|
||||
* 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/imageknife'
|
||||
import {ImageKnifeOption} from '@ohos/imageknife'
|
||||
import {RequestOption} from '@ohos/imageknife'
|
||||
import {RotateImageTransformation} from '@ohos/imageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestPreloadPage {
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin: { left: 15, top: 15, right: 15, bottom: 15 }
|
||||
};
|
||||
@State imageKnifeOption2: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin: { left: 15, top: 15, right: 15, bottom: 15 }
|
||||
};
|
||||
@State imageKnifeOption3: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin: { left: 15, top: 15, right: 15, bottom: 15 }
|
||||
};
|
||||
|
||||
@State imageKnifeOption4: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin: { left: 15, top: 15, right: 15, bottom: 15 }
|
||||
};
|
||||
@State imageKnifeOption5: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin: { left: 15, top: 15, right: 15, bottom: 15 }
|
||||
};
|
||||
@State imageKnifeOption6: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.webpSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin: { left: 15, top: 15, right: 15, bottom: 15 }
|
||||
};
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column }) {
|
||||
Flex({ direction: FlexDirection.Column }) {
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Button('预加载本地资源gif')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load($r('app.media.gifSample'))
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener((err, data) => {
|
||||
if (err && err.length > 0) {
|
||||
console.log('预加载本地资源gif 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载本地资源gif成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
})
|
||||
ImageKnife.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
Button('本地资源gif')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.gifSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin: { left: 15, top: 15, right: 15, bottom: 15 }
|
||||
}
|
||||
|
||||
})
|
||||
.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((err, data) => {
|
||||
if (err && err.length > 0) {
|
||||
console.log('预加载本地资源gif静态 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载本地资源gif静态成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
})
|
||||
ImageKnife.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
Button('本地资源gif静态')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.gifSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin: { left: 15, top: 15, right: 15, bottom: 15 },
|
||||
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://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700')
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener((err, data) => {
|
||||
if (err && err.length > 0) {
|
||||
console.log('预加载网络资源gif 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载网络资源gif成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
})
|
||||
ImageKnife.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
Button('网络资源gif')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700',
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin: { left: 15, top: 15, right: 15, bottom: 15 }
|
||||
};
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
Button('预加载网络资源gif静态')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load('https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700')
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.dontAnimate()
|
||||
.addListener((err, data) => {
|
||||
if (err && err.length > 0) {
|
||||
console.log('预加载网络资源gif静态 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载网络资源gif静态成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
})
|
||||
ImageKnife.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
Button('网络资源gif静态')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700',
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin: { left: 15, top: 15, right: 15, bottom: 15 },
|
||||
dontAnimateFlag: true
|
||||
};
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
|
||||
|
||||
}
|
||||
|
||||
Flex({ direction: FlexDirection.Column }) {
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Button('预加载本地资源svg')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load($r('app.media.svgSample'))
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener((err, data) => {
|
||||
if (err && err.length > 0) {
|
||||
console.log('预加载本地资源svg 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载本地资源svg成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
})
|
||||
ImageKnife.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
Button('本地资源svg')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption2 = {
|
||||
loadSrc: $r('app.media.svgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin: { left: 15, top: 15, right: 15, bottom: 15 }
|
||||
}
|
||||
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
|
||||
Button('预加载网络资源svg')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load('http://design-svc.fat.lunz.cn/StaticFiles/BP9999999772/BV9999999422/SA9999998420/4dc8463e-8ac6-4eb4-862c-783bf486a242.svg')
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener((err, data) => {
|
||||
if (err && err.length > 0) {
|
||||
console.log('预加载网络资源gif 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载网络资源gif成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
})
|
||||
ImageKnife.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
Button('网络资源svg')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption2 = {
|
||||
loadSrc: 'http://design-svc.fat.lunz.cn/StaticFiles/BP9999999772/BV9999999422/SA9999998420/4dc8463e-8ac6-4eb4-862c-783bf486a242.svg',
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin: { left: 15, top: 15, right: 15, bottom: 15 }
|
||||
};
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption2 })
|
||||
|
||||
}
|
||||
|
||||
Flex({ direction: FlexDirection.Column }) {
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Button('预加载本地资源webp')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load($r('app.media.webpSample'))
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener((err, data) => {
|
||||
if (err && err.length > 0) {
|
||||
console.log('预加载本地资源webp 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载本地资源webp成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
})
|
||||
ImageKnife.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
Button('本地资源webp')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption3 = {
|
||||
loadSrc: $r('app.media.webpSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin: { left: 15, top: 15, right: 15, bottom: 15 }
|
||||
}
|
||||
|
||||
})
|
||||
.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((err, data) => {
|
||||
if (err && err.length > 0) {
|
||||
console.log('预加载网络资源webp 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载网络资源webp成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
})
|
||||
ImageKnife.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
Button('网络资源webp')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption3 = {
|
||||
loadSrc: 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin: { left: 15, top: 15, right: 15, bottom: 15 }
|
||||
};
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 })
|
||||
|
||||
}
|
||||
|
||||
Flex({ direction: FlexDirection.Column }) {
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Button('预加载本地资源bmp')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load($r('app.media.bmpSample'))
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener((err, data) => {
|
||||
if (err && err.length > 0) {
|
||||
console.log('预加载本地资源bmp 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载本地资源bmp成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
})
|
||||
ImageKnife.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
Button('本地资源bmp')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption4 = {
|
||||
loadSrc: $r('app.media.bmpSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin: { left: 15, top: 15, right: 15, bottom: 15 }
|
||||
}
|
||||
|
||||
})
|
||||
.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((err, data) => {
|
||||
if (err && err.length > 0) {
|
||||
console.log('预加载网络资源bmp 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载网络资源bmp成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
})
|
||||
ImageKnife.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
Button('网络资源bmp')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption4 = {
|
||||
loadSrc: 'https://img-blog.csdn.net/20140514114029140',
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin: { left: 15, top: 15, right: 15, bottom: 15 }
|
||||
};
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 })
|
||||
|
||||
}
|
||||
|
||||
Flex({ direction: FlexDirection.Column }) {
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Button('预加载本地资源png')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load($r('app.media.pngSample'))
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener((err, data) => {
|
||||
if (err && err.length > 0) {
|
||||
console.log('预加载本地资源png 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载本地资源png成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
})
|
||||
ImageKnife.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
Button('本地资源png')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption5 = {
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin: { left: 15, top: 15, right: 15, bottom: 15 }
|
||||
}
|
||||
|
||||
})
|
||||
.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((err, data) => {
|
||||
if (err && err.length > 0) {
|
||||
console.log('预加载网络资源bmp 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载网络资源bmp成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
})
|
||||
ImageKnife.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
Button('网络资源png')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption5 = {
|
||||
loadSrc: 'https://img-blog.csdnimg.cn/20191215043500229.png',
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin: { left: 15, top: 15, right: 15, bottom: 15 }
|
||||
};
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption5 })
|
||||
|
||||
}
|
||||
|
||||
Flex({ direction: FlexDirection.Column }) {
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Button('预加载本地资源jpg')
|
||||
.onClick(() => {
|
||||
let request = new RequestOption();
|
||||
request.load($r('app.media.jpgSample'))
|
||||
.setImageViewSize({ width: 300, height: 300 })
|
||||
.addListener((err, data) => {
|
||||
if (err && err.length > 0) {
|
||||
console.log('预加载本地资源jpg 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载本地资源jpg成功! imageKnifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
})
|
||||
ImageKnife.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
|
||||
Button('本地资源jpg')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption6 = {
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin: { left: 15, top: 15, right: 15, bottom: 15 }
|
||||
}
|
||||
|
||||
})
|
||||
.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((err, data) => {
|
||||
if (err && err.length > 0) {
|
||||
console.log('预加载网络资源jpg 出现错误! err=' + err)
|
||||
} else {
|
||||
console.log('预加载网络资源jpg成功! imageknifedata=' + JSON.stringify(data))
|
||||
}
|
||||
return false;
|
||||
})
|
||||
ImageKnife.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
Button('网络资源jpg')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption6 = {
|
||||
loadSrc: 'https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB',
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin: { left: 15, top: 15, right: 15, bottom: 15 }
|
||||
};
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption6 })
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
console.log('aboutToAppear()')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var ImageKnife = globalThis.exports.default.data.imageKnife
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
/*
|
||||
* 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/imageknife'
|
||||
import{NONE} from '@ohos/imageknife'
|
||||
import {Base64} from '@ohos/imageknife'
|
||||
import {FileTypeUtil} from '@ohos/imageknife'
|
||||
import {ImageKnifeData} from '@ohos/imageknife'
|
||||
|
||||
import resourceManager from '@ohos.resourceManager';
|
||||
@Entry
|
||||
@Component
|
||||
struct TestResourceManagerPage {
|
||||
|
||||
@State imageKnifeData: ImageKnifeData = new ImageKnifeData();
|
||||
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Text(this.imageKnifeData.imageKnifeType)
|
||||
.fontSize(20)
|
||||
.backgroundColor(Color.Pink)
|
||||
.width(300)
|
||||
.height(300)
|
||||
Button("点击执行ResourceManager的Base64")
|
||||
.onClick(()=>{
|
||||
resourceManager.getResourceManager()
|
||||
.then(result => {
|
||||
result.getMediaBase64($r('app.media.jpgSample').id)
|
||||
.then(data => {
|
||||
console.log("jpgSample data=" + data)
|
||||
let matchUseLess = ";base64,";
|
||||
var matchUseLessIndex = data.indexOf(matchUseLess)
|
||||
data = data.substring(matchUseLessIndex + matchUseLess.length, data.length)
|
||||
console.log("jpgSample prepare save data=" + data)
|
||||
let arrayBuffer = Base64.getInstance().decode(data);
|
||||
console.log("arrayBuffer data=" + arrayBuffer)
|
||||
let fileTypeUtil = new FileTypeUtil();
|
||||
let typeValue = fileTypeUtil.getFileType(arrayBuffer);
|
||||
console.log("typeValue data=" + typeValue)
|
||||
let newImageKnifeData = new ImageKnifeData();
|
||||
newImageKnifeData.imageKnifeType = typeValue
|
||||
|
||||
this.imageKnifeData = newImageKnifeData;
|
||||
})
|
||||
|
||||
})
|
||||
})
|
||||
Button("点击执行ResourceManager的非Base64")
|
||||
.margin({top:25})
|
||||
.onClick(()=>{
|
||||
resourceManager.getResourceManager()
|
||||
.then(result => {
|
||||
result.getMedia($r('app.media.pngSample').id)
|
||||
.then(data => {
|
||||
console.log("arrayBuffer data=" + data)
|
||||
let fileTypeUtil = new FileTypeUtil();
|
||||
let typeValue = fileTypeUtil.getFileType(this.typedArrayToBuffer(data));
|
||||
console.log("typeValue data=" + typeValue)
|
||||
let newImageKnifeData = new ImageKnifeData();
|
||||
newImageKnifeData.imageKnifeType = typeValue
|
||||
this.imageKnifeData = newImageKnifeData;
|
||||
})
|
||||
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
console.log("aboutToAppear()")
|
||||
}
|
||||
|
||||
typedArrayToBuffer(array: Uint8Array): ArrayBuffer {
|
||||
return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var ImageKnife = globalThis.exports.default.data.imageKnife
|
||||
|
|
@ -0,0 +1,879 @@
|
|||
/*
|
||||
* 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/imageknife'
|
||||
import {CropCircleTransformation} from '@ohos/imageknife'
|
||||
import {RoundedCornersTransformation} from '@ohos/imageknife'
|
||||
import {CropCircleWithBorderTransformation} from '@ohos/imageknife/src/main/ets/components/imageknife/transform/CropCircleWithBorderTransformation'
|
||||
import {RotateImageTransformation} from '@ohos/imageknife'
|
||||
import {CropSquareTransformation} from '@ohos/imageknife'
|
||||
import {CropTransformation} from '@ohos/imageknife'
|
||||
import {CropType} from '@ohos/imageknife'
|
||||
import {GrayscaleTransformation} from '@ohos/imageknife'
|
||||
import {BrightnessFilterTransformation} from '@ohos/imageknife'
|
||||
import {ContrastFilterTransformation} from '@ohos/imageknife'
|
||||
import {InvertFilterTransformation} from '@ohos/imageknife'
|
||||
import {SepiaFilterTransformation} from '@ohos/imageknife'
|
||||
import {SketchFilterTransformation} from '@ohos/imageknife'
|
||||
import {BlurTransformation} from '@ohos/imageknife'
|
||||
import {PixelationFilterTransformation} from '@ohos/imageknife'
|
||||
import {MaskTransformation} from '@ohos/imageknife'
|
||||
import {SwirlFilterTransformation} from '@ohos/imageknife'
|
||||
import {PixelMapPack} from '@ohos/imageknife'
|
||||
|
||||
/**
|
||||
* PixelMap transform 示例
|
||||
*/
|
||||
let mRotate: number = 0;
|
||||
//let mUrl = "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB"
|
||||
let mUrl = $r('app.media.check_big');
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TransformPixelMapPage {
|
||||
@State url: string= "";
|
||||
@State mCropPixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mRoundPixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mCirclePixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mCircleBorderPixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mRotatePixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mSquarePixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mClipTopPixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mClipCenterPixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mClipBottomPixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mGrayscalePixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mBrightnessPixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mContrastPixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mInvertPixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mSepiaPixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mSketchPixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mBlurPixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mPixelPixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mSwirlPixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mMaskPixelMap: PixelMapPack= new PixelMapPack();
|
||||
|
||||
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.pixelMap)
|
||||
.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.pixelMap)
|
||||
.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.pixelMap)
|
||||
.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.pixelMap)
|
||||
.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.pixelMap)
|
||||
.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.pixelMap)
|
||||
.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.pixelMap)
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(100)
|
||||
.height(100)
|
||||
.margin({ top: 10 })
|
||||
Image(this.mClipCenterPixelMap.pixelMap)
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(100)
|
||||
.height(100)
|
||||
.margin({ top: 10 })
|
||||
Image(this.mClipBottomPixelMap.pixelMap)
|
||||
.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.pixelMap)
|
||||
.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.pixelMap)
|
||||
.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.pixelMap)
|
||||
.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.pixelMap)
|
||||
.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.pixelMap)
|
||||
.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.pixelMap)
|
||||
.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);
|
||||
});
|
||||
Image(this.mBlurPixelMap.pixelMap)
|
||||
.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.pixelMap)
|
||||
.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.pixelMap)
|
||||
.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.pixelMap)
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 })
|
||||
|
||||
}.margin({ top: 10 });
|
||||
|
||||
}.margin({ bottom: 30 });
|
||||
|
||||
}
|
||||
}.width('100%').height('100%');
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* centerCrop
|
||||
*/
|
||||
centerCrop() {
|
||||
var imageKnifeOption = new RequestOption();
|
||||
imageKnifeOption.load($r('app.media.photo5'))
|
||||
// imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
this.mCropPixelMap = result;
|
||||
setTimeout(() => {
|
||||
let result2 = new PixelMapPack();
|
||||
result2.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
this.mCropPixelMap = result2;
|
||||
}, 100)
|
||||
return false;
|
||||
})
|
||||
.setImageViewSize({ width: vp2px(100), height: vp2px(100) })
|
||||
.skipMemoryCache(true)
|
||||
.centerCrop();
|
||||
ImageKnife.call(imageKnifeOption);
|
||||
}
|
||||
|
||||
/**
|
||||
* centerInside
|
||||
*/
|
||||
centerInside() {
|
||||
var imageKnifeOption = new RequestOption();
|
||||
imageKnifeOption.load($r('app.media.Back'))
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
this.mCropPixelMap = result;
|
||||
setTimeout(() => {
|
||||
let result2 = new PixelMapPack();
|
||||
result2.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
this.mCropPixelMap = result2;
|
||||
}, 100)
|
||||
return false;
|
||||
})
|
||||
.setImageViewSize({ width: vp2px(100), height: vp2px(100) })
|
||||
.skipMemoryCache(true)
|
||||
.centerInside();
|
||||
ImageKnife.call(imageKnifeOption);
|
||||
}
|
||||
|
||||
/**
|
||||
* centerInside
|
||||
*/
|
||||
fitCenter() {
|
||||
var imageKnifeOption = new RequestOption()
|
||||
imageKnifeOption.load($r('app.media.Back'))
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
this.mCropPixelMap = result;
|
||||
setTimeout(() => {
|
||||
let result2 = new PixelMapPack();
|
||||
result2.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
this.mCropPixelMap = result2;
|
||||
}, 100)
|
||||
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) {
|
||||
|
||||
var imageKnifeOption = new RequestOption();
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
this.mRoundPixelMap = result;
|
||||
setTimeout(() => {
|
||||
let result2 = new PixelMapPack();
|
||||
result2.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
this.mRoundPixelMap = result2;
|
||||
}, 100)
|
||||
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((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
this.mCirclePixelMap = result;
|
||||
return false;
|
||||
})
|
||||
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
||||
.skipMemoryCache(true)
|
||||
.cropCircle()
|
||||
ImageKnife.call(imageKnifeOption);
|
||||
}
|
||||
|
||||
/**
|
||||
* 圆环裁剪
|
||||
*/
|
||||
circleBorderTransformation(border: number) {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
var circleTransformation = new CropCircleWithBorderTransformation(border,
|
||||
{ r_color: 255, g_color: 204, b_color: 204 });
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
this.mCircleBorderPixelMap = result;
|
||||
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();
|
||||
var transformation = new RotateImageTransformation(angled);
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
this.mRotatePixelMap = result;
|
||||
return false;
|
||||
})
|
||||
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
||||
.skipMemoryCache(true)
|
||||
.rotateImage(angled)
|
||||
ImageKnife.call(imageKnifeOption);
|
||||
}
|
||||
|
||||
/**
|
||||
* 正方形裁剪
|
||||
*/
|
||||
transformSquare() {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
var transformation = new CropSquareTransformation();
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
this.mSquarePixelMap = result;
|
||||
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();
|
||||
var transformation = new CropTransformation(width, height, cropType);
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
if (cropType == CropType.TOP) {
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
this.mClipTopPixelMap = result;
|
||||
} else if (cropType == CropType.CENTER) {
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
this.mClipCenterPixelMap = result;
|
||||
} else if (cropType == CropType.BOTTOM) {
|
||||
result.pixelMap = data.imageKnifeValue 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();
|
||||
var transformation = new GrayscaleTransformation();
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
this.mGrayscalePixelMap = result;
|
||||
return false;
|
||||
})
|
||||
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
||||
.skipMemoryCache(true)
|
||||
.grayscale()
|
||||
ImageKnife.call(imageKnifeOption);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
*亮度b
|
||||
*/
|
||||
brightnessPixelMap(brightness: number) {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
var transformation = new BrightnessFilterTransformation(brightness);
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
this.mBrightnessPixelMap = result;
|
||||
return false;
|
||||
})
|
||||
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
||||
.skipMemoryCache(true)
|
||||
.brightnessFilter(brightness)
|
||||
ImageKnife.call(imageKnifeOption);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
*对比度
|
||||
*/
|
||||
contrastPixelMap(contrast: number) {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
var transformation = new ContrastFilterTransformation(contrast);
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
this.mContrastPixelMap = result;
|
||||
return false;
|
||||
})
|
||||
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
||||
.skipMemoryCache(true)
|
||||
.contrastFilter(contrast)
|
||||
ImageKnife.call(imageKnifeOption);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
*反转处理
|
||||
*/
|
||||
invertPixelMap() {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
var transformation = new InvertFilterTransformation();
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
this.mInvertPixelMap = result;
|
||||
return false;
|
||||
})
|
||||
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
||||
.skipMemoryCache(true)
|
||||
.invertFilter()
|
||||
ImageKnife.call(imageKnifeOption);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
*照片老旧出来（黑褐色）
|
||||
*/
|
||||
sepiaPixelMap() {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
var transformation = new SepiaFilterTransformation();
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
this.mSepiaPixelMap = result;
|
||||
return false;
|
||||
})
|
||||
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
||||
.skipMemoryCache(true)
|
||||
.sepiaFilter()
|
||||
ImageKnife.call(imageKnifeOption);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
*素描
|
||||
*/
|
||||
sketchPixelMap() {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
var transformation = new SketchFilterTransformation();
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
this.mSketchPixelMap = result;
|
||||
return false;
|
||||
})
|
||||
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
||||
.skipMemoryCache(true)
|
||||
.sketchFilter()
|
||||
ImageKnife.call(imageKnifeOption);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
*模糊
|
||||
*/
|
||||
blurHandlePixelMap(radius: number) {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
var transformation = new BlurTransformation(radius);
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
this.mBlurPixelMap = result;
|
||||
return false;
|
||||
})
|
||||
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
||||
.skipMemoryCache(true)
|
||||
.blur(radius)
|
||||
ImageKnife.call(imageKnifeOption);
|
||||
|
||||
}
|
||||
/**
|
||||
*马赛克
|
||||
*/
|
||||
pixelHandlePixelMap(pixel: number) {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
var transformation = new PixelationFilterTransformation(pixel);
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
this.mPixelPixelMap = result;
|
||||
return false;
|
||||
})
|
||||
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
||||
.skipMemoryCache(true)
|
||||
.pixelationFilter(pixel)
|
||||
ImageKnife.call(imageKnifeOption);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
*扭曲
|
||||
*/
|
||||
swirlHandlePixelMap() {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
var transformation = new SwirlFilterTransformation(80);
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
this.mSwirlPixelMap = result;
|
||||
return false;
|
||||
})
|
||||
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
||||
.skipMemoryCache(true)
|
||||
.swirlFilter(80)
|
||||
// .diskCacheStrategy(new NONE())
|
||||
ImageKnife.call(imageKnifeOption);
|
||||
|
||||
}
|
||||
/**
|
||||
*遮罩
|
||||
*/
|
||||
maskHandlePixelMap(maskResource: Resource) {
|
||||
let imageKnifeOption = new RequestOption();
|
||||
var transformation = new MaskTransformation(maskResource);
|
||||
// imageKnifeOption.load($r('app.media.photo6'))
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
this.mMaskPixelMap = result;
|
||||
return false;
|
||||
})
|
||||
.setImageViewSize({ width: vp2px(200), height: vp2px(200) })
|
||||
.skipMemoryCache(true)
|
||||
.mask(maskResource)
|
||||
// .diskCacheStrategy(new NONE())
|
||||
ImageKnife.call(imageKnifeOption);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
var ImageKnife = globalThis.exports.default.data.imageKnife
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
/*
|
||||
* 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 dibistributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeComponent} from '@ohos/imageknife'
|
||||
import {ImageKnifeOption} from '@ohos/imageknife'
|
||||
import {RotateImageTransformation} from '@ohos/imageknife'
|
||||
import {RoundedCornersTransformation} from '@ohos/imageknife'
|
||||
import {TransformType} from '@ohos/imageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct Index {
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.Tomato'),
|
||||
errorholderSrc: $r('app.media.picture1'),
|
||||
transform: {
|
||||
transformType:TransformType.RotateImageTransformation,
|
||||
rotateImage:180
|
||||
}
|
||||
};
|
||||
@State imageKnifeOption2: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.Tomato'),
|
||||
errorholderSrc: $r('app.media.picture1'),
|
||||
transform: {
|
||||
transformType:TransformType.RoundedCornersTransformation,
|
||||
roundedCorners:{
|
||||
top_left: 30,
|
||||
top_right: 30,
|
||||
bottom_left: 30,
|
||||
bottom_right: 30
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
@State imageKnifeOption3: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.Tomato'),
|
||||
errorholderSrc: $r('app.media.picture1'),
|
||||
transform: {
|
||||
transformType:TransformType.RotateImageTransformation,
|
||||
rotateImage:180
|
||||
}
|
||||
};
|
||||
@State imageKnifeOption4: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.Tomato'),
|
||||
errorholderSrc: $r('app.media.picture1'),
|
||||
transform: {
|
||||
transformType:TransformType.RoundedCornersTransformation,
|
||||
roundedCorners:{
|
||||
top_left: 130,
|
||||
top_right: 130,
|
||||
bottom_left: 130,
|
||||
bottom_right: 130
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
build() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption2 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 })
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
console.log("aboutToAppear()")
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
/*
|
||||
* 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 arkWorker from '@ohos.worker';
|
||||
import {handler} from '@ohos/imageknife/src/main/ets/components/imageknife/pngj/PngWork'
|
||||
|
||||
arkWorker.parentPort.onmessage = handler
|
||||
|
||||
//import arkWorker from '@ohos.worker';
|
||||
//import {UPNG} from '@ohos/imageknife/src/main/ets/components/imageknife/pngj/UPNG'
|
||||
//
|
||||
//arkWorker.parentPort.onmessage = function (e) {
|
||||
// var data = e.data;
|
||||
// switch (data.type) {
|
||||
// case 'readPngImageAsync':
|
||||
// console.log('readPngImageAsync worker start 1')
|
||||
// var png = UPNG.decode(data.data);
|
||||
// let array = png.data;
|
||||
// let arrayData = array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset)
|
||||
// png.data = arrayData;
|
||||
// let dataObj = { type: 'readPngImageAsync', data: png, receiver: data.data}
|
||||
// arkWorker.parentPort.postMessage(dataObj, [png.data, data.data]);
|
||||
// console.log('readPngImageAsync worker to main 1')
|
||||
// break;
|
||||
// case 'writePngWithStringAsync':
|
||||
// console.log('writePngWithStringAsync worker start 1')
|
||||
// let addInfo = data.info;
|
||||
// let pngDecode = UPNG.decode(data.data);
|
||||
// let newPng = UPNG.encodeWithString(addInfo, UPNG.toRGBA8(pngDecode), pngDecode.width, pngDecode.height, 0)
|
||||
// let dataObj2 = { type: 'writePngWithStringAsync', data: newPng, receiver: data.data}
|
||||
// arkWorker.parentPort.postMessage(dataObj2, [newPng, data.data]);
|
||||
// console.log('writePngWithStringAsync worker to main 1')
|
||||
// break;
|
||||
// case 'writePngAsync':
|
||||
// console.log('writePngAsync worker start 1')
|
||||
// let pngDecode3 = UPNG.decode(data.data);
|
||||
// let newPng3 = UPNG.encode(UPNG.toRGBA8(pngDecode3), pngDecode3.width, pngDecode3.height, 0)
|
||||
// let dataObj3 = { type: 'writePngAsync', data: newPng3, receiver: data.data}
|
||||
// arkWorker.parentPort.postMessage(dataObj3, [newPng3, data.data]);
|
||||
// console.log('writePngAsync worker to main 1')
|
||||
// break;
|
||||
// case 'normal':
|
||||
// arkWorker.parentPort.postMessage(data);
|
||||
// break;
|
||||
// case 'error':
|
||||
// throw new Error('123');
|
||||
// break;
|
||||
// case 'buffer':
|
||||
// let uint8Array = new Uint8Array(data.data);
|
||||
// arkWorker.parentPort.postMessage(data, [data.data]);
|
||||
//
|
||||
// break;
|
||||
// default:
|
||||
//
|
||||
// break
|
||||
// }
|
||||
//}
|
||||
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"color": [
|
||||
{
|
||||
"name": "test_color",
|
||||
"value": "#3d2564"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
{
|
||||
"string": [
|
||||
{
|
||||
"name": "ImageKnife_OHOS",
|
||||
"value": "ImageKnife_OHOS"
|
||||
},
|
||||
{
|
||||
"name": "mainability_description",
|
||||
"value": "ETS_Empty Ability"
|
||||
},
|
||||
{
|
||||
"name": "left_top_corner",
|
||||
"value": "左上角"
|
||||
},
|
||||
{
|
||||
"name": "r_top_corner",
|
||||
"value": "右上角"
|
||||
},
|
||||
{
|
||||
"name": "left_bottom_corner",
|
||||
"value": "左下角"
|
||||
},
|
||||
{
|
||||
"name": "r_bottom_corner",
|
||||
"value": "右下角"
|
||||
},
|
||||
{
|
||||
"name": "trans_circle",
|
||||
"value": "裁剪-圆"
|
||||
},
|
||||
{
|
||||
"name": "trans_circle_border",
|
||||
"value": "裁剪-圆环"
|
||||
},
|
||||
{
|
||||
"name": "trans_rotate",
|
||||
"value": "旋转"
|
||||
},
|
||||
{
|
||||
"name": "trans_square",
|
||||
"value": "正方形裁剪"
|
||||
},
|
||||
{
|
||||
"name": "trans_clip_top",
|
||||
"value": "上方裁剪"
|
||||
},
|
||||
{
|
||||
"name": "trans_clip_center",
|
||||
"value": "中间裁剪"
|
||||
},
|
||||
{
|
||||
"name": "trans_clip_bottom",
|
||||
"value": "底下裁剪"
|
||||
},
|
||||
{
|
||||
"name": "resource_image_compress",
|
||||
"value": "资源图片压缩"
|
||||
},
|
||||
{
|
||||
"name": "file_image_compress",
|
||||
"value": "本地文件图片压缩"
|
||||
},
|
||||
{
|
||||
"name": "image_transform",
|
||||
"value": "图片变换"
|
||||
},
|
||||
{
|
||||
"name": "image_compress",
|
||||
"value": "图片压缩"
|
||||
},
|
||||
{
|
||||
"name": "image_grayscale",
|
||||
"value": "灰度处理"
|
||||
},
|
||||
{
|
||||
"name": "image_Brightness",
|
||||
"value": "亮度处理"
|
||||
},
|
||||
{
|
||||
"name": "image_Contrast",
|
||||
"value": "对比度处理"
|
||||
},
|
||||
{
|
||||
"name": "image_Invert",
|
||||
"value": "反转处理"
|
||||
},
|
||||
{
|
||||
"name": "image_Sepia",
|
||||
"value": "黑褐色处理"
|
||||
},
|
||||
{
|
||||
"name": "image_Sketch",
|
||||
"value": "素描处理"
|
||||
},
|
||||
{
|
||||
"name": "image_blur",
|
||||
"value": "模糊处理"
|
||||
},
|
||||
{
|
||||
"name": "image_pixel",
|
||||
"value": "马赛克处理"
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 558 B |
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 212 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 214 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 498 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 540 B |
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 768 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 396 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 462 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 563 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 512 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 423 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
|
|
@ -0,0 +1,17 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="750px" height="551px" viewBox="0 0 750 551" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>蒙版</title>
|
||||
<defs>
|
||||
<linearGradient x1="39.5134336%" y1="125.874399%" x2="39.5134336%" y2="2.34648164%" id="linearGradient-1">
|
||||
<stop stop-color="#FFFFFF" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#00FF28" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="知更问题反馈" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="多层切图问题" transform="translate(-539.000000, -975.000000)" fill="url(#linearGradient-1)">
|
||||
<g id="编组-2备份-3" transform="translate(539.000000, 975.000000)">
|
||||
<rect id="蒙版" x="0" y="0" width="750" height="551"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 932 B |
|
|
@ -0,0 +1,26 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="750px" height="511px" viewBox="0 0 750 511" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>蒙版</title>
|
||||
<defs>
|
||||
<radialGradient cx="73.8756341%" cy="17.4097241%" fx="73.8756341%" fy="17.4097241%" r="74.2004215%" gradientTransform="translate(0.738756,0.174097),scale(0.734667,1.000000),rotate(100.914717),scale(1.000000,1.338067),translate(-0.738756,-0.174097)" id="radialGradient-1">
|
||||
<stop stop-color="#0AA4A8" offset="0%"></stop>
|
||||
<stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
|
||||
</radialGradient>
|
||||
<radialGradient cx="11.7771819%" cy="39.327058%" fx="11.7771819%" fy="39.327058%" r="56.5698989%" gradientTransform="translate(0.117772,0.393271),scale(0.734667,1.000000),rotate(-14.805555),scale(1.000000,0.927992),translate(-0.117772,-0.393271)" id="radialGradient-2">
|
||||
<stop stop-color="#FFC419" offset="0%"></stop>
|
||||
<stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
|
||||
<stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
|
||||
</radialGradient>
|
||||
<polygon id="path-3" points="0 0 750 0 750 551 0 551"></polygon>
|
||||
</defs>
|
||||
<g id="知更问题反馈" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="多层切图问题" transform="translate(-539.000000, -975.000000)">
|
||||
<g id="编组-2备份-3" transform="translate(539.000000, 975.000000)">
|
||||
<g id="蒙版">
|
||||
<use fill="url(#radialGradient-1)" xlink:href="#path-3"></use>
|
||||
<use fill="url(#radialGradient-2)" xlink:href="#path-3"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1,17 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="750px" height="551px" viewBox="0 0 750 551" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>蒙版</title>
|
||||
<defs>
|
||||
<linearGradient x1="39.5134336%" y1="125.874399%" x2="39.5134336%" y2="2.34648164%" id="linearGradient-1">
|
||||
<stop stop-color="#FFFFFF" stop-opacity="0" offset="0%"></stop>
|
||||
<stop stop-color="#00FF28" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="知更问题反馈" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="多层切图问题" transform="translate(-539.000000, -975.000000)" fill="url(#linearGradient-1)">
|
||||
<g id="编组-2备份-3" transform="translate(539.000000, 975.000000)">
|
||||
<rect id="蒙版" x="0" y="0" width="750" height="551"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 932 B |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
|
|
@ -0,0 +1,9 @@
|
|||
syntax = "proto3";
|
||||
package User;
|
||||
|
||||
message UserLoginResponse{
|
||||
string sessionId = 1;
|
||||
string userPrivilege = 2;
|
||||
int64 servTimesTemp = 3;
|
||||
string formatTimestamp = 4;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
|
|
@ -0,0 +1,68 @@
|
|||
{
|
||||
"app": {
|
||||
"bundleName": "com.example.imageknifegiteepro",
|
||||
"vendor": "example",
|
||||
"version": {
|
||||
"code": 1000000,
|
||||
"name": "1.0.0"
|
||||
}
|
||||
},
|
||||
"deviceConfig": {},
|
||||
"module": {
|
||||
"package": "com.example.entry_test",
|
||||
"name": ".entry_test",
|
||||
"mainAbility": ".TestAbility",
|
||||
"srcPath": "",
|
||||
"deviceType": [
|
||||
"phone",
|
||||
"tablet"
|
||||
],
|
||||
"distro": {
|
||||
"deliveryWithInstall": true,
|
||||
"moduleName": "entry_test",
|
||||
"moduleType": "feature",
|
||||
"installationFree": false
|
||||
},
|
||||
"abilities": [
|
||||
{
|
||||
"skills": [
|
||||
{
|
||||
"entities": [
|
||||
"entity.system.home"
|
||||
],
|
||||
"actions": [
|
||||
"action.system.home"
|
||||
]
|
||||
}
|
||||
],
|
||||
"orientation": "unspecified",
|
||||
"visible": true,
|
||||
"srcPath": "TestAbility",
|
||||
"name": ".TestAbility",
|
||||
"srcLanguage": "ets",
|
||||
"icon": "$media:icon",
|
||||
"description": "$string:description_TestAbility",
|
||||
"formsEnabled": false,
|
||||
"label": "$string:entry_TestAbility",
|
||||
"type": "page",
|
||||
"launchType": "standard"
|
||||
}
|
||||
],
|
||||
"js": [
|
||||
{
|
||||
"mode": {
|
||||
"syntax": "ets",
|
||||
"type": "pageAbility"
|
||||
},
|
||||
"pages": [
|
||||
"pages/index"
|
||||
],
|
||||
"name": ".TestAbility",
|
||||
"window": {
|
||||
"designWidth": 720,
|
||||
"autoDesignWidth": false
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import AbilityDelegatorRegistry from '@ohos.application.abilityDelegatorRegistry'
|
||||
import { Hypium } from 'hypium/index'
|
||||
import testsuite from '../test/List.test'
|
||||
|
||||
export default {
|
||||
onCreate() {
|
||||
console.info('Application onCreate')
|
||||
var abilityDelegator: any
|
||||
abilityDelegator = AbilityDelegatorRegistry.getAbilityDelegator()
|
||||
var abilityDelegatorArguments: any
|
||||
abilityDelegatorArguments = AbilityDelegatorRegistry.getArguments()
|
||||
console.info('start run testcase!!!')
|
||||
Hypium.hypiumTest(abilityDelegator, abilityDelegatorArguments, testsuite)
|
||||
},
|
||||
onDestroy() {
|
||||
console.info('Application onDestroy')
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
import router from '@system.router';
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct Index {
|
||||
aboutToAppear() {
|
||||
console.info('TestAbility index aboutToAppear')
|
||||
}
|
||||
|
||||
@State message: string = 'Hello World'
|
||||
build() {
|
||||
Row() {
|
||||
Column() {
|
||||
Text(this.message)
|
||||
.fontSize(50)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
Button() {
|
||||
Text('next page')
|
||||
.fontSize(20)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
}.type(ButtonType.Capsule)
|
||||
.margin({
|
||||
top: 20
|
||||
})
|
||||
.backgroundColor('#0D9FFB')
|
||||
.width('35%')
|
||||
.height('5%')
|
||||
.onClick(()=>{
|
||||
})
|
||||
}
|
||||
.width('100%')
|
||||
}
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
import TestRunner from '@ohos.application.testRunner'
|
||||
import AbilityDelegatorRegistry from '@ohos.application.abilityDelegatorRegistry'
|
||||
|
||||
var abilityDelegator = undefined
|
||||
var abilityDelegatorArguments = undefined
|
||||
|
||||
function translateParamsToString(parameters) {
|
||||
const keySet = new Set([
|
||||
'-s class', '-s notClass', '-s suite', '-s itName',
|
||||
'-s level', '-s testType', '-s size', '-s timeout',
|
||||
'-s package'
|
||||
])
|
||||
let targetParams = '';
|
||||
for (const key in parameters) {
|
||||
if (keySet.has(key)) {
|
||||
targetParams += ' ' + key + ' ' + parameters[key]
|
||||
}
|
||||
}
|
||||
return targetParams.trim()
|
||||
}
|
||||
|
||||
async function onAbilityCreateCallback() {
|
||||
console.log('onAbilityCreateCallback');
|
||||
}
|
||||
|
||||
async function addAbilityMonitorCallback(err: any) {
|
||||
console.info('addAbilityMonitorCallback : ' + JSON.stringify(err))
|
||||
}
|
||||
|
||||
export default class OpenHarmonyTestRunner implements TestRunner {
|
||||
constructor() {
|
||||
}
|
||||
|
||||
onPrepare() {
|
||||
console.info('OpenHarmonyTestRunner OnPrepare')
|
||||
}
|
||||
|
||||
onRun() {
|
||||
console.log('OpenHarmonyTestRunner onRun run')
|
||||
abilityDelegatorArguments = AbilityDelegatorRegistry.getArguments()
|
||||
abilityDelegator = AbilityDelegatorRegistry.getAbilityDelegator()
|
||||
|
||||
let lMonitor = {
|
||||
abilityName: testAbilityName,
|
||||
onAbilityCreate: onAbilityCreateCallback,
|
||||
};
|
||||
var testAbilityName = abilityDelegatorArguments.parameters['-p'] + '.TestAbility'
|
||||
abilityDelegator.addAbilityMonitor(lMonitor, addAbilityMonitorCallback)
|
||||
var cmd = 'aa start -d 0 -a ' + testAbilityName + ' -b ' + abilityDelegatorArguments.bundleName
|
||||
cmd += ' '+translateParamsToString(abilityDelegatorArguments.parameters)
|
||||
console.info('cmd : '+cmd)
|
||||
abilityDelegator.executeShellCommand(cmd,
|
||||
(err: any, d: any) => {
|
||||
console.info('executeShellCommand : err : ' + JSON.stringify(err));
|
||||
console.info('executeShellCommand : data : ' + d.stdResult);
|
||||
console.info('executeShellCommand : data : ' + d.exitCode);
|
||||
})
|
||||
console.info('OpenHarmonyTestRunner onRun call abilityDelegator.getAppContext')
|
||||
var context = abilityDelegator.getAppContext()
|
||||
console.info('getAppContext : ' + JSON.stringify(context))
|
||||
console.info('OpenHarmonyTestRunner onRun end')
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from 'hypium/index'
|
||||
|
||||
export default function abilityTest() {
|
||||
describe('ActsAbilityTest', function () {
|
||||
it('assertContain',0, function () {
|
||||
console.info("it begin")
|
||||
let a = 'abc'
|
||||
let b = 'b'
|
||||
expect(a).assertContain(b)
|
||||
expect(a).assertEqual(a)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import abilityTest from './Ability.test'
|
||||
|
||||
export default function testsuite() {
|
||||
abilityTest()
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"string": [
|
||||
{
|
||||
"name": "description_TestAbility",
|
||||
"value": "eTS_Empty Ability"
|
||||
},
|
||||
{
|
||||
"name": "entry_TestAbility",
|
||||
"value": "entry_TestAbility"
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
|
|
@ -0,0 +1,2 @@
|
|||
// Script for compiling build behavior. It is built in the build plug-in and cannot be modified currently.
|
||||
module.exports = require('@ohos/hvigor-ohos-plugin').legacyAppTasks
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
/node_modules
|
||||
/.preview
|
||||
/build
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue