forked from floraachy/ImageKnife
适配国际化
Signed-off-by: hexagon1337 <liuyaoming3@h-partners.com>
This commit is contained in:
hexagon1337
parent
afde885ae1
commit
f1008e869e
290
README.md
290
README.md
|
|
@ -1,58 +1,58 @@
|
|||
# ImageKnife
|
||||
|
||||
**专门为OpenHarmony打造的一款图像加载缓存库，致力于更高效、更轻便、更简单。**
|
||||
ImageKnife is a specially crafted image loading and caching library for OpenHarmony, optimized for efficiency, lightness, and simplicity.
|
||||
|
||||
## 简介
|
||||
## Introduction
|
||||
|
||||
本项目参考开源库 [Glide](https://github.com/bumptech/glide) 进行OpenHarmony的自研版本：
|
||||
This project is a self-developed version for OpenHarmony, inspired by the open-source [Glide](https://github.com/bumptech/glide) library. It sports the following features:
|
||||
|
||||
- 支持自定义内存缓存策略，支持设置内存缓存的大小(默认LRU策略)。
|
||||
- 支持磁盘二级缓存，对于下载图片会保存一份至磁盘当中。
|
||||
- 支持自定义实现图片获取/网络下载
|
||||
- 支持监听网络下载回调进度
|
||||
- 继承Image的能力，支持option传入border，设置边框，圆角
|
||||
- 继承Image的能力，支持option传入objectFit设置图片缩放，包括objectFit为auto时根据图片自适应高度
|
||||
- 支持通过设置transform缩放图片
|
||||
- 并发请求数量，支持请求排队队列的优先级
|
||||
- 支持生命周期已销毁的图片，不再发起请求
|
||||
- 自定义缓存key
|
||||
- 自定义http网络请求头
|
||||
- 支持writeCacheStrategy控制缓存的存入策略(只存入内存或文件缓存)
|
||||
- 支持preLoadCache预加载图片
|
||||
- 支持onlyRetrieveFromCache仅用缓存加载
|
||||
- 支持使用一个或多个图片变换，如模糊，高亮等
|
||||
- Customizable memory cache strategy with adjustable cache size (default LRU)
|
||||
- Disk L2 cache for downloaded images
|
||||
- Custom implementation for image acquisition and network downloading
|
||||
- Listening for progress of network downloads through callbacks
|
||||
- Image options for borders and rounded corners
|
||||
- Image scaling with **objectFit**, including auto-adapting height
|
||||
- Image scaling through transformation
|
||||
- Concurrent request management with priority queuing
|
||||
- No requests made for images whose lifecycle has been destroyed
|
||||
- Custom cache keys
|
||||
- Custom HTTP request headers
|
||||
- **writeCacheStrategy** for controlling cache storage (memory or file)
|
||||
- Preloading images with **preLoadCache**
|
||||
- Loading images exclusively from cache with **onlyRetrieveFromCache**
|
||||
- Support for image transformations such as blurring and highlighting
|
||||
|
||||
待实现特性
|
||||
Planned features:
|
||||
|
||||
- 内存降采样优化，节约内存的占用
|
||||
- 支持自定义图片解码
|
||||
- Memory downsampling optimization to save memory usage
|
||||
- Support for custom image decoding
|
||||
|
||||
注意：3.x版本相对2.x版本做了重大的重构，主要体现在：
|
||||
Note: The 3.x version has been significantly restructured from the 2.x version, mainly in the following aspects:
|
||||
|
||||
- 使用Image组件代替Canvas组件渲染
|
||||
- 重构Dispatch分发逻辑，支持控制并发请求数，支持请求排队队列的优先级
|
||||
- 支持通过initMemoryCache自定义策略内存缓存策略和大小
|
||||
- 支持option自定义实现图片获取/网络下载
|
||||
- Use of the **Image** component instead of the **Canvas** component for rendering
|
||||
- Refactored dispatch logic to control the number of concurrent requests and support priority in request queuing
|
||||
- Support for custom memory cache strategies and sizes through **initMemoryCache**
|
||||
- Support for custom implementation of image acquisition/network downloading through options
|
||||
|
||||
因此API及能力上，目前有部分差异，主要体现在：
|
||||
Therefore, there are some differences in APIs and capabilities, which mainly include the following:
|
||||
|
||||
- 不支持drawLifeCycle接口，通过canvas自会图片
|
||||
- mainScaleType，border等参数，新版本与系统Image保持一致
|
||||
- gif/webp动图播放与控制(ImageAnimator实现)
|
||||
- 抗锯齿相关参数
|
||||
- The **drawLifeCycle** API is not supported; images are drawn manually through the canvas.
|
||||
- In the new version, parameters such as **mainScaleType** and **border** are consistent with the system **Image** component.
|
||||
- GIF/WebP animation playback and control (implemented by **ImageAnimator**).
|
||||
- Anti-aliasing related parameters.
|
||||
|
||||
## 下载安装
|
||||
## How to Install
|
||||
|
||||
```
|
||||
ohpm install @ohos/imageknife
|
||||
|
||||
// 如果需要用文件缓存，需要提前初始化文件缓存
|
||||
// If file caching is required, initialize the file cache in advance.
|
||||
await ImageKnife.getInstance().initFileCache(context, 256, 256 * 1024 * 1024)
|
||||
```
|
||||
|
||||
## 使用说明
|
||||
## How to Use
|
||||
|
||||
#### 1.显示本地资源图片
|
||||
#### 1. Displaying a Local Resource Image
|
||||
|
||||
```
|
||||
ImageKnifeComponent({
|
||||
|
|
@ -65,7 +65,7 @@ ImageKnifeComponent({
|
|||
}).width(100).height(100)
|
||||
```
|
||||
|
||||
#### 2.显示本地context files下文件
|
||||
#### 2. Displaying a File from Local Context Files
|
||||
|
||||
```
|
||||
ImageKnifeComponent({
|
||||
|
|
@ -78,7 +78,7 @@ ImageKnifeComponent({
|
|||
}).width(100).height(100)
|
||||
```
|
||||
|
||||
#### 3.显示网络图片
|
||||
#### 3. Displaying a Network Image
|
||||
|
||||
```
|
||||
ImageKnifeComponent({
|
||||
|
|
@ -91,7 +91,7 @@ ImageKnifeComponent({
|
|||
}).width(100).height(100)
|
||||
```
|
||||
|
||||
#### 4.自定义下载图片
|
||||
#### 4. Downloading an Image with Custom Options
|
||||
|
||||
```
|
||||
ImageKnifeComponent({
|
||||
|
|
@ -104,16 +104,16 @@ ImageKnifeComponent({
|
|||
})
|
||||
}).width(100).height(100)
|
||||
|
||||
// 自定义实现图片获取方法，如自定义网络下载
|
||||
// Custom implementation of the image acquisition method, such as custom network download。
|
||||
@Concurrent
|
||||
async function custom(context: Context, src: string | PixelMap | Resource): Promise<ArrayBuffer | undefined> {
|
||||
console.info("ImageKnife:: custom download：" + src)
|
||||
// 举例写死从本地文件读取，也可以自己请求网络图片
|
||||
console.info("ImageKnife:: custom download: " + src)
|
||||
// Example of hardcoding to read from a local file. You can also request a network image.
|
||||
return context.resourceManager.getMediaContentSync($r("app.media.bb").id).buffer as ArrayBuffer
|
||||
}
|
||||
```
|
||||
|
||||
#### 5.监听网络下载进度
|
||||
#### 5. Listening for Network Download Progress
|
||||
|
||||
```
|
||||
ImageKnifeComponent({
|
||||
|
|
@ -124,7 +124,7 @@ ImageKnifeComponent({
|
|||
}).width(100).height(100)
|
||||
```
|
||||
|
||||
#### 6.支持option传入border，设置边框，圆角
|
||||
#### 6. Setting Border Options
|
||||
|
||||
```
|
||||
ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
|
||||
|
|
@ -135,7 +135,7 @@ ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
|
|||
}).width(100).height(100)
|
||||
```
|
||||
|
||||
#### 7.支持option图片变换
|
||||
#### 7. Setting Image Transformation Options
|
||||
|
||||
```
|
||||
ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
|
||||
|
|
@ -146,7 +146,7 @@ ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
|
|||
})
|
||||
}).width(100).height(100)
|
||||
```
|
||||
多种组合变换用法
|
||||
Multiple combined transformation usages:
|
||||
|
||||
```
|
||||
let transformations: collections.Array<PixelMapTransformation> = new collections.Array<PixelMapTransformation>();
|
||||
|
|
@ -158,17 +158,17 @@ ImageKnifeComponent({
|
|||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Contain,
|
||||
border: { radius: { topLeft: 50, bottomRight: 50 } }, // 圆角设置
|
||||
transformation: transformations.length > 0 ? new MultiTransTransformation(transformations) : undefined // 图形变换组
|
||||
border: { radius: { topLeft: 50, bottomRight: 50 } }, // Rounded corner settings
|
||||
transformation: transformations.length > 0 ? new MultiTransTransformation(transformations) : undefined // Graphic transformation group
|
||||
})
|
||||
}).width(300)
|
||||
.height(300)
|
||||
.rotate({ angle: 90 }) // 旋转90度
|
||||
.contrast(12) // 对比度滤波器
|
||||
.rotate ({angle: 90}) // Rotate by 90 degrees.
|
||||
.contrast(12) // Contrast filter
|
||||
```
|
||||
其他变换相关属性，可叠加实现组合变换效果
|
||||
Other transformation-related properties can be stacked to achieve combined transformation effects.
|
||||
|
||||
圆形裁剪变换示例
|
||||
Example of circular cropping transformation:
|
||||
|
||||
```
|
||||
ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption(
|
||||
|
|
@ -181,7 +181,7 @@ ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption(
|
|||
.height(300)
|
||||
```
|
||||
|
||||
圆形裁剪带边框变换示例
|
||||
Example of Circular cropping with border transformation:
|
||||
|
||||
```
|
||||
ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption(
|
||||
|
|
@ -194,7 +194,7 @@ ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption(
|
|||
.height(300)
|
||||
```
|
||||
|
||||
对比度滤波变换示例
|
||||
Example of contrast filtering transformation:
|
||||
|
||||
```
|
||||
ImageKnifeComponent({
|
||||
|
|
@ -206,7 +206,7 @@ ImageKnifeComponent({
|
|||
.contrast(12)
|
||||
```
|
||||
|
||||
旋转变换示例
|
||||
Example of rotation transformation:
|
||||
|
||||
```
|
||||
ImageKnifeComponent({
|
||||
|
|
@ -219,7 +219,7 @@ ImageKnifeComponent({
|
|||
.backgroundColor(Color.Pink)
|
||||
```
|
||||
|
||||
#### 8.监听图片加载成功与失败
|
||||
#### 8. Listening for Image Loading Success and Failure
|
||||
|
||||
```
|
||||
ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
|
||||
|
|
@ -244,8 +244,8 @@ ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
|
|||
})
|
||||
}).width(100).height(100)
|
||||
```
|
||||
#### 9.ImageKnifeComponent - syncLoad
|
||||
设置是否同步加载图片，默认是异步加载。建议加载尺寸较小的本地图片时将syncLoad设为true，因为耗时较短，在主线程上执行即可
|
||||
#### 9. Use of syncLoad
|
||||
**syncLoad** sets whether to load the image synchronously. By default, the image is loaded asynchronously. When loading a small image, you are advised to set **syncLoad** to **true** so that the image loading can be quickly completed on the main thread.
|
||||
```
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption:new ImageKnifeOption({
|
||||
|
|
@ -254,7 +254,7 @@ ImageKnifeComponent({
|
|||
}),syncLoad:true
|
||||
})
|
||||
```
|
||||
#### 10.ImageKnifeAnimatorComponent 示例
|
||||
#### 10. Use of ImageKnifeAnimatorComponent
|
||||
```
|
||||
ImageKnifeAnimatorComponent({
|
||||
imageKnifeOption:new ImageKnifeOption({
|
||||
|
|
@ -264,112 +264,112 @@ ImageKnifeAnimatorComponent({
|
|||
}),animatorOption:this.animatorOption
|
||||
}).width(300).height(300).backgroundColor(Color.Orange).margin({top:30})
|
||||
```
|
||||
#### 复用场景
|
||||
在aboutToRecycle生命周期清空组件内容；通过watch监听触发图片的加载。
|
||||
## 接口说明
|
||||
### ImageKnife组件
|
||||
| 组件名称 | 入参内容 | 功能简介 |
|
||||
|-----------------------------|---------------------------------|--------|
|
||||
| ImageKnifeComponent | ImageKnifeOption | 图片显示组件 |
|
||||
| ImageKnifeAnimatorComponent | ImageKnifeOption、AnimatorOption | 动图控制组件 |
|
||||
#### Reuse Scenario
|
||||
Clear the component content in the **aboutToRecycle** lifecycle and trigger image loading through watch observeration.
|
||||
## Available APIs
|
||||
### ImageKnife
|
||||
| Component | Parameter | Description |
|
||||
| --------------------------- | -------------------------------- | ------------ |
|
||||
| ImageKnifeComponent | ImageKnifeOption | Image display component.|
|
||||
| ImageKnifeAnimatorComponent | ImageKnifeOption, AnimatorOption| Animated image control component.|
|
||||
|
||||
### AnimatorOption参数列表
|
||||
| 参数名称 | 入参内容 | 功能简介 |
|
||||
|------------|-----------------|----------|
|
||||
| state | AnimationStatus | 播放状态（可选） |
|
||||
| iterations | number | 播放次数（可选） |
|
||||
| reverse | boolean | 播放顺序（可选） |
|
||||
| onStart | ()=>void | 动画开始播放时触发（可选） |
|
||||
| onFinish | ()=>void | 动画播放完成时或者停止播放时触发（可选） |
|
||||
| onPause | ()=>void | 动画暂停播放时触发（可选） |
|
||||
| onCancel | ()=>void | 动画返回最初状态时触发（可选） |
|
||||
| onRepeat | ()=>void | 动画重复播放时触发（可选） |
|
||||
### AnimatorOption
|
||||
| Parameter | Type | Description |
|
||||
| ---------- | --------------- | ---------------------------------------- |
|
||||
| state | AnimationStatus | Playback status. Optional. |
|
||||
| iterations | number | Number of playback times. Optional. |
|
||||
| reverse | boolean | Playback order. Optional. |
|
||||
| onStart | ()=>void | Triggered when the animation starts. Optional. |
|
||||
| onFinish | ()=>void | Triggered when the animation finishes or stops. Optional.|
|
||||
| onPause | ()=>void | Triggered when the animation pauses. Optional. |
|
||||
| onCancel | ()=>void | Triggered when the animation is canceled, that is, when it is reset to its initial state. Optional. |
|
||||
| onRepeat | ()=>void | Triggered when the animation repeats. Optional. |
|
||||
|
||||
### ImageKnifeOption参数列表
|
||||
### ImageKnifeOption
|
||||
|
||||
| 参数名称 | 入参内容 | 功能简介 |
|
||||
|-----------------------|-------------------------------------------------------|-----------------|
|
||||
| loadSrc | string、PixelMap、Resource | 主图展示 |
|
||||
| placeholderSrc | PixelMap、Resource | 占位图图展示（可选） |
|
||||
| errorholderSrc | PixelMap、Resource | 错误图展示（可选） |
|
||||
| objectFit | ImageFit | 主图填充效果（可选） |
|
||||
| placeholderObjectFit | ImageFit | 占位图填充效果（可选） |
|
||||
| errorholderObjectFit | ImageFit | 错误图填充效果（可选） |
|
||||
| writeCacheStrategy | CacheStrategyType | 写入缓存策略(可选) |
|
||||
| onlyRetrieveFromCache | boolean | 是否跳过网络和本地请求（可选） |
|
||||
| customGetImage | (context: Context, src: string | 自定义下载图片（可选） | | Resource | 错误占位图数据源 |
|
||||
| border | BorderOptions | 边框圆角（可选） |
|
||||
| priority | taskpool.Priority | 加载优先级（可选） |
|
||||
| context | common.UIAbilityContext | 上下文（可选） |
|
||||
| progressListener | (progress: number)=>void | 进度（可选） |
|
||||
| signature | String | 自定义缓存关键字（可选） |
|
||||
| headerOption | Array<HeaderOptions> | 设置请求头（可选） |
|
||||
| transformation | PixelMapTransformation | 图片变换（可选） |
|
||||
| drawingColorFilter | ColorFilter | drawing.ColorFilter | 图片变换（可选） |
|
||||
| onComplete | (event:EventImage | undefined) => voi | 颜色滤镜效果（可选） |
|
||||
| onLoadListener | onLoadStart: () => void、onLoadSuccess: (data: string | PixelMap | undefined) => void、onLoadFailed: (err: string) => void| 监听图片加载成功与失败 |
|
||||
| Parameter | Type | Description |
|
||||
| --------------------- | ----------------------------------------------------- | ------------------------------ |
|
||||
| loadSrc | string, PixelMap, Resource | Main image. |
|
||||
| placeholderSrc | PixelMap, Resource | Placeholder image. Optional. |
|
||||
| errorholderSrc | PixelMap, Resource | Error image. Optional. |
|
||||
| objectFit | ImageFit | How the main image is resized to fit its container. Optional. |
|
||||
| placeholderObjectFit | ImageFit | How the placeholder image is resized to fit its container. Optional. |
|
||||
| errorholderObjectFit | ImageFit | How the error image is resized to fit its container. Optional. |
|
||||
| writeCacheStrategy | CacheStrategyType | Cache writing strategy. Optional. |
|
||||
| onlyRetrieveFromCache | boolean | Whether to skip network and local requests. Optional.|
|
||||
| customGetImage | (context: Context, src: string | Custom image download. Optional. |
|
||||
| border | BorderOptions | Border corner. Optional. |
|
||||
| priority | taskpool.Priority | Load priority. Optional. |
|
||||
| context | common.UIAbilityContext | Context. Optional. |
|
||||
| progressListener | (progress: number)=>void | Progress. Optional. |
|
||||
| signature | String | Custom cache signature. Optional. |
|
||||
| headerOption | Array\<HeaderOptions> | Request headers. Optional. |
|
||||
| transformation | PixelMapTransformation | Image transformation. Optional. |
|
||||
| drawingColorFilter | ColorFilter | Drawing color filter. Optional. |
|
||||
| onComplete | (event:EventImage \| undefined)=>void | Callback for image loading completion. Optional. |
|
||||
| onLoadListener | onLoadStart:()=>void,onLoadSuccess:(data:string\|Pixelmap)=>void | Callback for image loading events. Optional. |
|
||||
|
||||
### ImageKnife接口
|
||||
### ImageKnife
|
||||
|
||||
| 参数名称 | 入参内容 | 功能简介 |
|
||||
|------------------|-------------------------------------------------------------------------------------------------------|---------------|
|
||||
| initMemoryCache | newMemoryCache: IMemoryCache | 自定义内存缓存策略 |
|
||||
| initFileCache | context: Context, size: number, memory: number | 初始化文件缓存数量和大小 |
|
||||
| preLoadCache | loadSrc: string I ImageKnifeOption | 预加载并返回文件缓存路径 |
|
||||
| getCacheImage | loadSrc: string, cacheType: CacheStrategy = CacheStrategy.Default, signature?: string) | 从内存或文件缓存中获取资源 |
|
||||
| addHeader | key: string, value: Object | 全局添加http请求头 |
|
||||
| setHeaderOptions | Array<HeaderOptions> | 全局设置http请求头 |
|
||||
| deleteHeader | key: string | 全局删除http请求头 |
|
||||
| setCustomGetImage | customGetImage?: (context: Context, src: string | PixelMap | Resource) => Promise<ArrayBuffer | undefined> | 全局设置自定义下载 |
|
||||
| setEngineKeyImpl | IEngineKey | 全局配置缓存key生成策略 |
|
||||
| putCacheImage | url: string, pixelMap: PixelMap, cacheType: CacheStrategy = CacheStrategy.Default, signature?: string | 写入内存磁盘缓存 |
|
||||
| removeMemoryCache| url: string | ImageKnifeOption | 清理指定内存缓存 |
|
||||
| removeFileCache | url: string | ImageKnifeOption | 清理指定磁盘缓存 |
|
||||
### 图形变换类型（需要为GPUImage添加依赖项）
|
||||
| Parameter | Type | Description |
|
||||
| ----------------- | ------------------------------------------------------------ | -------------------------- |
|
||||
| initMemoryCache | newMemoryCache: IMemoryCache | Initializes a custom memory cache strategy. |
|
||||
| initFileCache | context: Context, size: number, memory: number | Initializes the file cache size and quantity |
|
||||
| preLoadCache | loadSrc: string I ImageKnifeOption | Preloads and returns the file cache path. |
|
||||
| getCacheImage | loadSrc: string, cacheType: CacheStrategy = CacheStrategy.Default, signature?: string) | Obtains resources from memory or file cache.|
|
||||
| addHeader | key: string, value: Object | Adds a global HTTP request header. |
|
||||
| setHeaderOptions | Array<HeaderOptions> | Sets global HTTP request headers. |
|
||||
| deleteHeader | key: string | Deletes a global HTTP request header. |
|
||||
| setCustomGetImage | customGetImage?: (context: Context, src: string | PixelMap |
|
||||
| setEngineKeyImpl | IEngineKey | Sets a global cache key generation strategy. |
|
||||
| putCacheImage | url: string, pixelMap: PixelMap, cacheType: CacheStrategy = CacheStrategy.Default, signature?: string | Writes to the memory disk cache. |
|
||||
| removeMemoryCache | url: string | Removes an entry from the memory cache. |
|
||||
| removeFileCache | url: string | Removes an entry from the file cache. |
|
||||
### Graphics tRansformation Types (GPUImage Dependency Required)
|
||||
|
||||
| 类型 | 相关描述 |
|
||||
| ---------------------------------- | ----------------------------- |
|
||||
| BlurTransformation | 模糊处理 |
|
||||
| BrightnessTransformation | 亮度滤波器 |
|
||||
| CropSquareTransformation | 正方形剪裁 |
|
||||
| CropTransformation | 自定义矩形剪裁 |
|
||||
| GrayScaleTransformation | 灰度级滤波器 |
|
||||
| InvertTransformation | 反转滤波器 |
|
||||
| KuwaharaTransformation | 桑原滤波器（使用GPUIImage） |
|
||||
| MaskTransformation | 遮罩 |
|
||||
| PixelationTransformation | 像素化滤波器（使用GPUIImage） |
|
||||
| SepiaTransformation | 乌墨色滤波器（使用GPUIImage） |
|
||||
| SketchTransformation | 素描滤波器（使用GPUIImage） |
|
||||
| SwirlTransformation | 扭曲滤波器（使用GPUIImage） |
|
||||
| ToonTransformation | 动画滤波器（使用GPUIImage） |
|
||||
| VignetterTransformation | 装饰滤波器（使用GPUIImage） |
|
||||
| Type | Description |
|
||||
| ------------------------ | ----------------------------- |
|
||||
| BlurTransformation | Blurs the image. |
|
||||
| BrightnessTransformation | Applies a brightness filter. |
|
||||
| CropSquareTransformation | Crops the image to a square. |
|
||||
| CropTransformation | Crops the image to a custom rectangle. |
|
||||
| GrayScaleTransformation | Applies a grayscale filter. |
|
||||
| InvertTransformation | Applies an inversion filter. |
|
||||
| KuwaharaTransformation | Applies a Kuwahara filter (requires **GPUImage**). |
|
||||
| MaskTransformation | Applies a mask. |
|
||||
| PixelationTransformation | Applies a pixelation filter (requires **GPUImage**).|
|
||||
| SepiaTransformation | Applies a sepia filter (requires **GPUImage**).|
|
||||
| SketchTransformation | Applies a sketch filter (requires **GPUIImage**). |
|
||||
| SwirlTransformation | Applies a swirl filter (requires **GPUImage**). |
|
||||
| ToonTransformation | Applies a cartoon filter (requires **GPUImage**). |
|
||||
| VignetterTransformation | Applies a vignette filter (requires **GPUImage**). |
|
||||
|
||||
## 下载安装GPUImage依赖
|
||||
方法一：在Terminal窗口中，执行如下命令安装三方包，DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。
|
||||
## Downloading and Installing the GPUImage Dependency
|
||||
Method 1: In the **Terminal** window, run the following command to install the third-party HAR. DevEco Studio will automatically add the HAR as a dependency to the **oh-package.json5** file of the project.
|
||||
```
|
||||
ohpm install @ohos/gpu_transform
|
||||
```
|
||||
方法二： 在工程的oh-package.json5中设置三方包依赖，配置示例如下：
|
||||
Method 2: Set the third-party HAR as a dependency in the **oh-package.json5** file of the project. The following is a configuration example:
|
||||
```
|
||||
"dependencies": {
|
||||
"@ohos/gpu_transform": "^1.0.2"
|
||||
}
|
||||
```
|
||||
## 约束与限制
|
||||
## Constraints
|
||||
|
||||
在下述版本验证通过：
|
||||
DevEco Studio 5.0 Canary3（5.0.3.502）--SDK:API12 (5.0.0.31)
|
||||
This project has been verified in the following version:
|
||||
|
||||
## 贡献代码
|
||||
DevEco Studio: 5.0 Canary3 (5.0.3.502), SDK: API 12 (5.0.0.31)
|
||||
|
||||
使用过程中发现任何问题都可以提 [issue](https://gitee.com/openharmony-tpc/ImageKnife/issues)
|
||||
给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/openharmony-tpc/ImageKnife/issues) 。
|
||||
## How to Contribute
|
||||
|
||||
## 开源协议
|
||||
If you find any problem during the use, submit an [Issue](https://gitee.com/openharmony-tpc/ImageKnife/issues) or a [PR](https://gitee.com/openharmony-tpc/ImageKnife/issues) to us.
|
||||
|
||||
本项目基于 [Apache License 2.0](https://gitee.com/openharmony-tpc/ImageKnife/blob/master/LICENSE) ，请自由的享受和参与开源。
|
||||
## License
|
||||
|
||||
## 遗留问题
|
||||
This project is licensed under [Apache License 2.0](https://gitee.com/openharmony-tpc/ImageKnife/blob/master/LICENSE).
|
||||
|
||||
- ImageKnifeAnimator组件无法设置ImageFit属性
|
||||
- ImageKnifeAnimator组件设置border属性无法将图片变为圆角
|
||||
## Known Issues
|
||||
|
||||
- The **ImageFit** attribute cannot be set for the **ImageKnifeAnimator** component.
|
||||
- The **border** attribute of the **ImageKnifeAnimator** component cannot make the image rounded corners.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,375 @@
|
|||
# ImageKnife
|
||||
|
||||
**专门为OpenHarmony打造的一款图像加载缓存库，致力于更高效、更轻便、更简单。**
|
||||
|
||||
## 简介
|
||||
|
||||
本项目参考开源库 [Glide](https://github.com/bumptech/glide) 进行OpenHarmony的自研版本：
|
||||
|
||||
- 支持自定义内存缓存策略，支持设置内存缓存的大小(默认LRU策略)。
|
||||
- 支持磁盘二级缓存，对于下载图片会保存一份至磁盘当中。
|
||||
- 支持自定义实现图片获取/网络下载
|
||||
- 支持监听网络下载回调进度
|
||||
- 继承Image的能力，支持option传入border，设置边框，圆角
|
||||
- 继承Image的能力，支持option传入objectFit设置图片缩放，包括objectFit为auto时根据图片自适应高度
|
||||
- 支持通过设置transform缩放图片
|
||||
- 并发请求数量，支持请求排队队列的优先级
|
||||
- 支持生命周期已销毁的图片，不再发起请求
|
||||
- 自定义缓存key
|
||||
- 自定义http网络请求头
|
||||
- 支持writeCacheStrategy控制缓存的存入策略(只存入内存或文件缓存)
|
||||
- 支持preLoadCache预加载图片
|
||||
- 支持onlyRetrieveFromCache仅用缓存加载
|
||||
- 支持使用一个或多个图片变换，如模糊，高亮等
|
||||
|
||||
待实现特性
|
||||
|
||||
- 内存降采样优化，节约内存的占用
|
||||
- 支持自定义图片解码
|
||||
|
||||
注意：3.x版本相对2.x版本做了重大的重构，主要体现在：
|
||||
|
||||
- 使用Image组件代替Canvas组件渲染
|
||||
- 重构Dispatch分发逻辑，支持控制并发请求数，支持请求排队队列的优先级
|
||||
- 支持通过initMemoryCache自定义策略内存缓存策略和大小
|
||||
- 支持option自定义实现图片获取/网络下载
|
||||
|
||||
因此API及能力上，目前有部分差异，主要体现在：
|
||||
|
||||
- 不支持drawLifeCycle接口，通过canvas自会图片
|
||||
- mainScaleType，border等参数，新版本与系统Image保持一致
|
||||
- gif/webp动图播放与控制(ImageAnimator实现)
|
||||
- 抗锯齿相关参数
|
||||
|
||||
## 下载安装
|
||||
|
||||
```
|
||||
ohpm install @ohos/imageknife
|
||||
|
||||
// 如果需要用文件缓存，需要提前初始化文件缓存
|
||||
await ImageKnife.getInstance().initFileCache(context, 256, 256 * 1024 * 1024)
|
||||
```
|
||||
|
||||
## 使用说明
|
||||
|
||||
#### 1.显示本地资源图片
|
||||
|
||||
```
|
||||
ImageKnifeComponent({
|
||||
ImageKnifeOption: new ImageKnifeOption({
|
||||
loadSrc: $r("app.media.app_icon"),
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Auto
|
||||
})
|
||||
}).width(100).height(100)
|
||||
```
|
||||
|
||||
#### 2.显示本地context files下文件
|
||||
|
||||
```
|
||||
ImageKnifeComponent({
|
||||
ImageKnifeOption: new ImageKnifeOption({
|
||||
loadSrc: this.localFile,
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Auto
|
||||
})
|
||||
}).width(100).height(100)
|
||||
```
|
||||
|
||||
#### 3.显示网络图片
|
||||
|
||||
```
|
||||
ImageKnifeComponent({
|
||||
ImageKnifeOption: new ImageKnifeOption({
|
||||
loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Auto
|
||||
})
|
||||
}).width(100).height(100)
|
||||
```
|
||||
|
||||
#### 4.自定义下载图片
|
||||
|
||||
```
|
||||
ImageKnifeComponent({
|
||||
ImageKnifeOption: new ImageKnifeOption({
|
||||
loadSrc: "https://file.atomgit.com/uploads/user/1704857786989_8994.jpeg",
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Auto,
|
||||
customGetImage: custom
|
||||
})
|
||||
}).width(100).height(100)
|
||||
|
||||
// 自定义实现图片获取方法，如自定义网络下载
|
||||
@Concurrent
|
||||
async function custom(context: Context, src: string | PixelMap | Resource): Promise<ArrayBuffer | undefined> {
|
||||
console.info("ImageKnife:: custom download：" + src)
|
||||
// 举例写死从本地文件读取，也可以自己请求网络图片
|
||||
return context.resourceManager.getMediaContentSync($r("app.media.bb").id).buffer as ArrayBuffer
|
||||
}
|
||||
```
|
||||
|
||||
#### 5.监听网络下载进度
|
||||
|
||||
```
|
||||
ImageKnifeComponent({
|
||||
ImageKnifeOption: new ImageKnifeOption({
|
||||
loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
|
||||
progressListener:(progress:number)=>{console.info("ImageKinfe:: call back progress = " + progress)}
|
||||
})
|
||||
}).width(100).height(100)
|
||||
```
|
||||
|
||||
#### 6.支持option传入border，设置边框，圆角
|
||||
|
||||
```
|
||||
ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
|
||||
{
|
||||
loadSrc: $r("app.media.rabbit"),
|
||||
border: {radius:50}
|
||||
})
|
||||
}).width(100).height(100)
|
||||
```
|
||||
|
||||
#### 7.支持option图片变换
|
||||
|
||||
```
|
||||
ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
|
||||
{
|
||||
loadSrc: $r("app.media.rabbit"),
|
||||
border: {radius:50},
|
||||
transformation: new BlurTransformation(3)
|
||||
})
|
||||
}).width(100).height(100)
|
||||
```
|
||||
多种组合变换用法
|
||||
|
||||
```
|
||||
let transformations: collections.Array<PixelMapTransformation> = new collections.Array<PixelMapTransformation>();
|
||||
transformations.push(new BlurTransformation(5));
|
||||
transformations.push(new BrightnessTransformation(0.2));
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: new ImageKnifeOption({
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
errorholderSrc: $r("app.media.app_icon"),
|
||||
objectFit: ImageFit.Contain,
|
||||
border: { radius: { topLeft: 50, bottomRight: 50 } }, // 圆角设置
|
||||
transformation: transformations.length > 0 ? new MultiTransTransformation(transformations) : undefined // 图形变换组
|
||||
})
|
||||
}).width(300)
|
||||
.height(300)
|
||||
.rotate({ angle: 90 }) // 旋转90度
|
||||
.contrast(12) // 对比度滤波器
|
||||
```
|
||||
其他变换相关属性，可叠加实现组合变换效果
|
||||
|
||||
圆形裁剪变换示例
|
||||
|
||||
```
|
||||
ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption(
|
||||
{
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
objectFit: ImageFit.Cover,
|
||||
border: { radius: 150 }
|
||||
})
|
||||
}).width(300)
|
||||
.height(300)
|
||||
```
|
||||
|
||||
圆形裁剪带边框变换示例
|
||||
|
||||
```
|
||||
ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption(
|
||||
{
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
objectFit: ImageFit.Cover,
|
||||
border: { radius: 150, color: Color.Red, width: 5 }
|
||||
})
|
||||
}).width(300)
|
||||
.height(300)
|
||||
```
|
||||
|
||||
对比度滤波变换示例
|
||||
|
||||
```
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: new ImageKnifeOption({
|
||||
loadSrc: $r('app.media.pngSample')
|
||||
})
|
||||
}).width(300)
|
||||
.height(300)
|
||||
.contrast(12)
|
||||
```
|
||||
|
||||
旋转变换示例
|
||||
|
||||
```
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption: new ImageKnifeOption({
|
||||
loadSrc: $r('app.media.pngSample')
|
||||
})
|
||||
}).width(300)
|
||||
.height(300)
|
||||
.rotate({angle:90})
|
||||
.backgroundColor(Color.Pink)
|
||||
```
|
||||
|
||||
#### 8.监听图片加载成功与失败
|
||||
|
||||
```
|
||||
ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
|
||||
{
|
||||
loadSrc: $r("app.media.rabbit"),
|
||||
onLoadListener:{
|
||||
onLoadStart:()=>{
|
||||
this.starTime = new Date().getTime()
|
||||
console.info("Load start: ");
|
||||
},
|
||||
onLoadFailed: (err) => {
|
||||
console.error("Load Failed Reason: " + err + " cost " + (new Date().getTime() - this.starTime) + " milliseconds");
|
||||
},
|
||||
onLoadSuccess: (data, imageData) => {
|
||||
console.info("Load Successful: cost " + (new Date().getTime() - this.starTime) + " milliseconds");
|
||||
return data;
|
||||
},
|
||||
onLoadCancel(err){
|
||||
console.info(err)
|
||||
}
|
||||
}
|
||||
})
|
||||
}).width(100).height(100)
|
||||
```
|
||||
#### 9.ImageKnifeComponent - syncLoad
|
||||
设置是否同步加载图片，默认是异步加载。建议加载尺寸较小的本地图片时将syncLoad设为true，因为耗时较短，在主线程上执行即可
|
||||
```
|
||||
ImageKnifeComponent({
|
||||
imageKnifeOption:new ImageKnifeOption({
|
||||
loadSrc:$r("app.media.pngSample"),
|
||||
placeholderSrc:$r("app.media.loading")
|
||||
}),syncLoad:true
|
||||
})
|
||||
```
|
||||
#### 10.ImageKnifeAnimatorComponent 示例
|
||||
```
|
||||
ImageKnifeAnimatorComponent({
|
||||
imageKnifeOption:new ImageKnifeOption({
|
||||
loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
|
||||
placeholderSrc:$r('app.media.loading'),
|
||||
errorholderSrc:$r('app.media.failed')
|
||||
}),animatorOption:this.animatorOption
|
||||
}).width(300).height(300).backgroundColor(Color.Orange).margin({top:30})
|
||||
```
|
||||
#### 复用场景
|
||||
在aboutToRecycle生命周期清空组件内容；通过watch监听触发图片的加载。
|
||||
## 接口说明
|
||||
### ImageKnife组件
|
||||
| 组件名称 | 入参内容 | 功能简介 |
|
||||
|-----------------------------|---------------------------------|--------|
|
||||
| ImageKnifeComponent | ImageKnifeOption | 图片显示组件 |
|
||||
| ImageKnifeAnimatorComponent | ImageKnifeOption、AnimatorOption | 动图控制组件 |
|
||||
|
||||
### AnimatorOption参数列表
|
||||
| 参数名称 | 入参内容 | 功能简介 |
|
||||
|------------|-----------------|----------|
|
||||
| state | AnimationStatus | 播放状态（可选） |
|
||||
| iterations | number | 播放次数（可选） |
|
||||
| reverse | boolean | 播放顺序（可选） |
|
||||
| onStart | ()=>void | 动画开始播放时触发（可选） |
|
||||
| onFinish | ()=>void | 动画播放完成时或者停止播放时触发（可选） |
|
||||
| onPause | ()=>void | 动画暂停播放时触发（可选） |
|
||||
| onCancel | ()=>void | 动画返回最初状态时触发（可选） |
|
||||
| onRepeat | ()=>void | 动画重复播放时触发（可选） |
|
||||
|
||||
### ImageKnifeOption参数列表
|
||||
|
||||
| 参数名称 | 入参内容 | 功能简介 |
|
||||
|-----------------------|-------------------------------------------------------|-----------------|
|
||||
| loadSrc | string、PixelMap、Resource | 主图展示 |
|
||||
| placeholderSrc | PixelMap、Resource | 占位图图展示（可选） |
|
||||
| errorholderSrc | PixelMap、Resource | 错误图展示（可选） |
|
||||
| objectFit | ImageFit | 主图填充效果（可选） |
|
||||
| placeholderObjectFit | ImageFit | 占位图填充效果（可选） |
|
||||
| errorholderObjectFit | ImageFit | 错误图填充效果（可选） |
|
||||
| writeCacheStrategy | CacheStrategyType | 写入缓存策略(可选) |
|
||||
| onlyRetrieveFromCache | boolean | 是否跳过网络和本地请求（可选） |
|
||||
| customGetImage | (context: Context, src: string | 自定义下载图片（可选） | | Resource | 错误占位图数据源 |
|
||||
| border | BorderOptions | 边框圆角（可选） |
|
||||
| priority | taskpool.Priority | 加载优先级（可选） |
|
||||
| context | common.UIAbilityContext | 上下文（可选） |
|
||||
| progressListener | (progress: number)=>void | 进度（可选） |
|
||||
| signature | String | 自定义缓存关键字（可选） |
|
||||
| headerOption | Array<HeaderOptions> | 设置请求头（可选） |
|
||||
| transformation | PixelMapTransformation | 图片变换（可选） |
|
||||
| drawingColorFilter | ColorFilter | drawing.ColorFilter | 图片变换（可选） |
|
||||
| onComplete | (event:EventImage | undefined) => voi | 颜色滤镜效果（可选） |
|
||||
| onLoadListener | onLoadStart: () => void、onLoadSuccess: (data: string | PixelMap | undefined) => void、onLoadFailed: (err: string) => void| 监听图片加载成功与失败 |
|
||||
|
||||
### ImageKnife接口
|
||||
|
||||
| 参数名称 | 入参内容 | 功能简介 |
|
||||
|------------------|-------------------------------------------------------------------------------------------------------|---------------|
|
||||
| initMemoryCache | newMemoryCache: IMemoryCache | 自定义内存缓存策略 |
|
||||
| initFileCache | context: Context, size: number, memory: number | 初始化文件缓存数量和大小 |
|
||||
| preLoadCache | loadSrc: string I ImageKnifeOption | 预加载并返回文件缓存路径 |
|
||||
| getCacheImage | loadSrc: string, cacheType: CacheStrategy = CacheStrategy.Default, signature?: string) | 从内存或文件缓存中获取资源 |
|
||||
| addHeader | key: string, value: Object | 全局添加http请求头 |
|
||||
| setHeaderOptions | Array<HeaderOptions> | 全局设置http请求头 |
|
||||
| deleteHeader | key: string | 全局删除http请求头 |
|
||||
| setCustomGetImage | customGetImage?: (context: Context, src: string | PixelMap | Resource) => Promise<ArrayBuffer | undefined> | 全局设置自定义下载 |
|
||||
| setEngineKeyImpl | IEngineKey | 全局配置缓存key生成策略 |
|
||||
| putCacheImage | url: string, pixelMap: PixelMap, cacheType: CacheStrategy = CacheStrategy.Default, signature?: string | 写入内存磁盘缓存 |
|
||||
| removeMemoryCache| url: string | ImageKnifeOption | 清理指定内存缓存 |
|
||||
| removeFileCache | url: string | ImageKnifeOption | 清理指定磁盘缓存 |
|
||||
### 图形变换类型（需要为GPUImage添加依赖项）
|
||||
|
||||
| 类型 | 相关描述 |
|
||||
| ---------------------------------- | ----------------------------- |
|
||||
| BlurTransformation | 模糊处理 |
|
||||
| BrightnessTransformation | 亮度滤波器 |
|
||||
| CropSquareTransformation | 正方形剪裁 |
|
||||
| CropTransformation | 自定义矩形剪裁 |
|
||||
| GrayScaleTransformation | 灰度级滤波器 |
|
||||
| InvertTransformation | 反转滤波器 |
|
||||
| KuwaharaTransformation | 桑原滤波器（使用GPUIImage） |
|
||||
| MaskTransformation | 遮罩 |
|
||||
| PixelationTransformation | 像素化滤波器（使用GPUIImage） |
|
||||
| SepiaTransformation | 乌墨色滤波器（使用GPUIImage） |
|
||||
| SketchTransformation | 素描滤波器（使用GPUIImage） |
|
||||
| SwirlTransformation | 扭曲滤波器（使用GPUIImage） |
|
||||
| ToonTransformation | 动画滤波器（使用GPUIImage） |
|
||||
| VignetterTransformation | 装饰滤波器（使用GPUIImage） |
|
||||
|
||||
## 下载安装GPUImage依赖
|
||||
方法一：在Terminal窗口中，执行如下命令安装三方包，DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。
|
||||
```
|
||||
ohpm install @ohos/gpu_transform
|
||||
```
|
||||
方法二： 在工程的oh-package.json5中设置三方包依赖，配置示例如下：
|
||||
```
|
||||
"dependencies": {
|
||||
"@ohos/gpu_transform": "^1.0.2"
|
||||
}
|
||||
```
|
||||
## 约束与限制
|
||||
|
||||
在下述版本验证通过：
|
||||
DevEco Studio 5.0 Canary3（5.0.3.502）--SDK:API12 (5.0.0.31)
|
||||
|
||||
## 贡献代码
|
||||
|
||||
使用过程中发现任何问题都可以提 [issue](https://gitee.com/openharmony-tpc/ImageKnife/issues)
|
||||
给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/openharmony-tpc/ImageKnife/issues) 。
|
||||
|
||||
## 开源协议
|
||||
|
||||
本项目基于 [Apache License 2.0](https://gitee.com/openharmony-tpc/ImageKnife/blob/master/LICENSE) ，请自由的享受和参与开源。
|
||||
|
||||
## 遗留问题
|
||||
|
||||
- ImageKnifeAnimator组件无法设置ImageFit属性
|
||||
- ImageKnifeAnimator组件设置border属性无法将图片变为圆角
|
||||
|
|
@ -46,22 +46,22 @@ struct ImageAnimatorPage {
|
|||
build() {
|
||||
Column(){
|
||||
Flex(){
|
||||
Button("播放").onClick(()=>{
|
||||
Button($r('app.string.Play')).onClick(()=>{
|
||||
this.animatorOption.state = AnimationStatus.Running
|
||||
})
|
||||
Button("暂停").onClick(()=>{
|
||||
Button($r('app.string.Pause')).onClick(()=>{
|
||||
this.animatorOption.state = AnimationStatus.Paused
|
||||
})
|
||||
Button("停止").onClick(()=>{
|
||||
Button($r('app.string.Stop')).onClick(()=>{
|
||||
this.animatorOption.state = AnimationStatus.Stopped
|
||||
})
|
||||
Button("无限循环").onClick(()=>{
|
||||
Button($r('app.string.Infinite_loop')).onClick(()=>{
|
||||
this.animatorOption.iterations = -1
|
||||
})
|
||||
Button("播放一次").onClick(()=>{
|
||||
Button($r('app.string.Play_once')).onClick(()=>{
|
||||
this.animatorOption.iterations = 1
|
||||
})
|
||||
Button("播放两次").onClick(()=>{
|
||||
Button($r('app.string.Play_twice')).onClick(()=>{
|
||||
this.animatorOption.iterations = 2
|
||||
})
|
||||
}
|
||||
|
|
@ -72,7 +72,7 @@ struct ImageAnimatorPage {
|
|||
errorholderSrc:$r('app.media.failed')
|
||||
}),animatorOption:this.animatorOption
|
||||
}).width(200).height(200).backgroundColor(Color.Orange).margin({top:30})
|
||||
Text("动画显示第一帧").fontSize(20)
|
||||
Text($r('app.string.Display_the_first_frame')).fontSize(20)
|
||||
ImageKnifeAnimatorComponent({
|
||||
imageKnifeOption:new ImageKnifeOption({
|
||||
loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
|
||||
|
|
@ -80,7 +80,7 @@ struct ImageAnimatorPage {
|
|||
errorholderSrc:$r('app.media.failed')
|
||||
}),animatorOption:this.animatorOption1
|
||||
}).width(200).height(200).backgroundColor(Color.Orange).margin({top:30})
|
||||
Text("动画显示最后一帧").fontSize(20)
|
||||
Text($r('app.string.Display_the_last_frame')).fontSize(20)
|
||||
ImageKnifeAnimatorComponent({
|
||||
imageKnifeOption:new ImageKnifeOption({
|
||||
loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
|
||||
|
|
|
|||
|
|
@ -18,6 +18,10 @@ import router from '@system.router';
|
|||
@ComponentV2
|
||||
struct Index {
|
||||
|
||||
getResourceString(res:Resource){
|
||||
return getContext().resourceManager.getStringSync(res.id)
|
||||
}
|
||||
|
||||
|
||||
aboutToAppear(): void {
|
||||
|
||||
|
|
@ -26,100 +30,100 @@ struct Index {
|
|||
build() {
|
||||
Scroll(){
|
||||
Column() {
|
||||
Button("测试ImageAnimator组件").onClick(()=>{
|
||||
Button($r('app.string.Test_ImageAnimator')).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/ImageAnimatorPage',
|
||||
});
|
||||
})
|
||||
Button("测试加载多张相同图片").margin({top:10}).onClick(()=>{
|
||||
Button($r('app.string.Test_multiple_images')).margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/TestCommonImage',
|
||||
});
|
||||
})
|
||||
Button("测试占位图Task报错").margin({top:10}).onClick(()=>{
|
||||
Button($r('app.string.Test_Task_error')).margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/TestTaskResourcePage',
|
||||
});
|
||||
})
|
||||
Button("测试HSP场景预加载").margin({top:10}).onClick(()=>{
|
||||
Button($r('app.string.Test_HSP')).margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/TestHspPreLoadImage',
|
||||
|
||||
});
|
||||
})
|
||||
Button("单个图片使用").margin({top:10}).onClick(()=>{
|
||||
Button($r('app.string.Test_SingleImage')).margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/SingleImage',
|
||||
|
||||
});
|
||||
})
|
||||
Button("全局自定义下载").margin({top:10}).onClick(()=>{
|
||||
Button($r('app.string.Test_custom_download')).margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/TestSetCustomImagePage',
|
||||
|
||||
});
|
||||
})
|
||||
Button("多图 + LazyForEach").margin({top:10}).onClick(()=>{
|
||||
Button(this.getResourceString($r('app.string.Multiple_images')) + " + LazyForEach").margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/ManyPhotoShowPage',
|
||||
|
||||
});
|
||||
})
|
||||
Button("多图 + reuse + LazyForeach").margin({top:10}).onClick(()=>{
|
||||
Button(this.getResourceString($r('app.string.Multiple_images')) + " + reuse + LazyForeach").margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/UserPage',
|
||||
|
||||
});
|
||||
})
|
||||
Button("长图显示").margin({top:10}).onClick(()=>{
|
||||
Button($r('app.string.Display_long_image')).margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/LongImagePage',
|
||||
|
||||
});
|
||||
})
|
||||
Button("缩放图片").margin({top:10}).onClick(()=>{
|
||||
Button($r('app.string.Image_scaling')).margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/TransformPage',
|
||||
|
||||
});
|
||||
})
|
||||
Button("消息+List").margin({top:10}).onClick(()=>{
|
||||
Button(this.getResourceString($r('app.string.Message_list')) + " + List").margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/TestImageFlash',
|
||||
|
||||
});
|
||||
})
|
||||
Button("自定义缓存key").margin({top:10}).onClick(()=>{
|
||||
Button($r('app.string.Custom_cache_key')).margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/SignatureTestPage',
|
||||
|
||||
});
|
||||
})
|
||||
Button("预加载图片到文件缓存").margin({top:10}).onClick(()=>{
|
||||
Button($r('app.string.Preloading_images_to_cache')).margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/TestPrefetchToFileCache',
|
||||
|
||||
});
|
||||
})
|
||||
Button("从缓存获取图片显示").margin({top:10}).onClick(()=>{
|
||||
Button($r('app.string.Retrieve_image_display_from_cache')).margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/TestIsUrlExist',
|
||||
|
||||
});
|
||||
})
|
||||
Button("测试单个请求头").margin({top:10}).onClick(()=>{
|
||||
Button($r('app.string.Test_single_request_header')).margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/TestHeader',
|
||||
|
||||
});
|
||||
})
|
||||
Button("测试写入缓存策略").margin({top:10}).onClick(()=>{
|
||||
Button($r('app.string.Test_write_cache_strategy')).margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/TestWriteCacheStage',
|
||||
|
||||
});
|
||||
})
|
||||
Button("图片变换").margin({top:10}).onClick(()=>{
|
||||
Button($r('app.string.Image_Transformation')).margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/ImageTransformation',
|
||||
|
||||
|
|
@ -127,7 +131,7 @@ struct Index {
|
|||
|
||||
})
|
||||
|
||||
Button("不同的ObjectFit").margin({top:10}).onClick(()=>{
|
||||
Button($r('app.string.Different_ObjectFit')).margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/ObjectFitPage',
|
||||
|
||||
|
|
@ -135,24 +139,24 @@ struct Index {
|
|||
|
||||
})
|
||||
|
||||
Button('测试图片加载成功/失败事件').margin({top:10}).onClick(()=>{
|
||||
Button($r('app.string.Test_image_loading_success_or_failure_events')).margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/LoadStatePage',
|
||||
})
|
||||
})
|
||||
|
||||
Button('测试移除图片缓存接口').margin({top:10}).onClick(()=>{
|
||||
Button($r('app.string.Test_removing_image_cache_interface')).margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/TestRemoveCache',
|
||||
});
|
||||
})
|
||||
Button("测试错误图显示").margin({top:10}).onClick(()=>{
|
||||
Button($r('app.string.Test_error_image_display')).margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/TestErrorHolderPage',
|
||||
|
||||
});
|
||||
})
|
||||
Button("测试媒体url").margin({top:10}).onClick(()=>{
|
||||
Button($r('app.string.Test_media_URL')).margin({top:10}).onClick(()=>{
|
||||
router.push({
|
||||
uri: 'pages/dataShareUriLoadPage',
|
||||
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ struct LoadStatePage {
|
|||
Text('测试失败场景请先关闭网络，并保证本地没有此网络图片的缓存')
|
||||
.margin({ top: 20 })
|
||||
Row() {
|
||||
Button('测试失败/成功场景')
|
||||
Button($r('app.string.Test_failure_success'))
|
||||
.onClick(() => {
|
||||
this.ImageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: "https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
|
||||
|
|
@ -82,7 +82,7 @@ struct LoadStatePage {
|
|||
Text(this.typeValue)
|
||||
ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption }).height(this.currentHeight).width(this.currentWidth)
|
||||
.margin({ top: 20 })
|
||||
Button("自定义下载失败").onClick(()=>{
|
||||
Button($r('app.string.Custom_download_failed')).onClick(()=>{
|
||||
this.imageKnifeOption1 = new ImageKnifeOption({
|
||||
loadSrc: "abc",
|
||||
placeholderSrc:$r('app.media.loading'),
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ struct ObjectFitPage {
|
|||
build() {
|
||||
Column() {
|
||||
|
||||
Button("主图Fill拉伸填充").onClick(()=>{
|
||||
Button($r('app.string.Main_image_Fill')).onClick(()=>{
|
||||
this.imageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: $r("app.media.app_icon"),
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
|
|
@ -36,7 +36,7 @@ struct ObjectFitPage {
|
|||
})
|
||||
})
|
||||
|
||||
Button("占位图Contain保持比例填充").margin({top:10}).onClick(async () => {
|
||||
Button($r('app.string.Maintain_proportion_filling')).margin({top:10}).onClick(async () => {
|
||||
ImageKnife.getInstance().removeAllMemoryCache()
|
||||
await ImageKnife.getInstance().removeAllFileCache()
|
||||
|
||||
|
|
@ -50,7 +50,7 @@ struct ObjectFitPage {
|
|||
})
|
||||
|
||||
|
||||
Button("错误图None不变化").margin({top:10}).onClick(() => {
|
||||
Button($r('app.string.Error_graph_None')).margin({top:10}).onClick(() => {
|
||||
this.imageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: "http://xxxxx",
|
||||
placeholderSrc: $r("app.media.loading"),
|
||||
|
|
|
|||
|
|
@ -33,9 +33,9 @@ struct SignatureTestPage {
|
|||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
|
||||
Text("key固定为 1").fontSize(15)
|
||||
Text($r('app.string.The_key_fixed_1')).fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("加载")
|
||||
Button($r('app.string.Load'))
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption1 = new ImageKnifeOption({
|
||||
loadSrc: 'https://img-blog.csdn.net/20140514114029140',
|
||||
|
|
@ -46,9 +46,9 @@ struct SignatureTestPage {
|
|||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
|
||||
}.width('100%').backgroundColor(Color.Pink)
|
||||
|
||||
Text("key每次变化：时间戳").fontSize(15)
|
||||
Text($r('app.string.The_key_changes_timestamp')).fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("加载")
|
||||
Button($r('app.string.Load'))
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption2 = new ImageKnifeOption({
|
||||
loadSrc: 'https://img-blog.csdn.net/20140514114029140',
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ struct SingleImage {
|
|||
build() {
|
||||
Scroll(this.scroller) {
|
||||
Column() {
|
||||
Text("本地资源svg图片")
|
||||
Text($r('app.string.Local_SVG'))
|
||||
.fontSize(30)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
ImageKnifeComponent({
|
||||
|
|
@ -56,7 +56,7 @@ struct SingleImage {
|
|||
.onClick(()=>{
|
||||
this.DrawingColorFilter = drawing.ColorFilter.createBlendModeColorFilter(this.color, drawing.BlendMode.SRC_IN);
|
||||
})
|
||||
Text("本地context files下文件")
|
||||
Text($r('app.string.Under_context_file'))
|
||||
.fontSize(30)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
ImageKnifeComponent({
|
||||
|
|
@ -67,7 +67,7 @@ struct SingleImage {
|
|||
objectFit: ImageFit.Contain
|
||||
})
|
||||
}).width(100).height(100)
|
||||
Text("网络图片")
|
||||
Text($r('app.string.Network_images'))
|
||||
.fontSize(30)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
ImageKnifeComponent({
|
||||
|
|
@ -79,7 +79,7 @@ struct SingleImage {
|
|||
progressListener:(progress:number)=>{console.info("ImageKnife:: call back progress = " + progress)}
|
||||
})
|
||||
}).width(100).height(100)
|
||||
Text("自定义下载")
|
||||
Text($r('app.string.Custom_network_download'))
|
||||
.fontSize(30)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
ImageKnifeComponent({
|
||||
|
|
@ -92,7 +92,7 @@ struct SingleImage {
|
|||
transformation: new BlurTransformation(10)
|
||||
})
|
||||
}).width(100).height(100)
|
||||
Text("pixelMap加载图片")
|
||||
Text($r('app.string.PixelMap_loads_images'))
|
||||
.fontSize(30)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
ImageKnifeComponent({
|
||||
|
|
|
|||
|
|
@ -111,12 +111,12 @@ struct ImageTestPage {
|
|||
})
|
||||
}
|
||||
Row(){
|
||||
Text("点击尺寸加50")
|
||||
Text($r('app.string.Click_on_add'))
|
||||
.onClick(()=> {
|
||||
this.imageSize = this.imageSize + 50
|
||||
})
|
||||
.width('50%').backgroundColor(0x88ff0000).textAlign(TextAlign.Center).height(50)
|
||||
Text("点击尺寸减50")
|
||||
Text($r('app.string.Click_on_reduce'))
|
||||
.onClick(()=> {
|
||||
this.imageSize = Math.max(this.imageSize - 50, 0)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -28,11 +28,11 @@ struct TestIsUrlExist {
|
|||
build() {
|
||||
Column() {
|
||||
Flex() {
|
||||
Button("预加载gif图").onClick(() => {
|
||||
Button($r('app.string.Preloading_GIF')).onClick(() => {
|
||||
this.imageKnifeOption.loadSrc =
|
||||
"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658"
|
||||
})
|
||||
Button("内存缓存获取gif").onClick(() => {
|
||||
Button($r('app.string.Retrieve_GIF_from_memory')).onClick(() => {
|
||||
ImageKnife.getInstance()
|
||||
.getCacheImage("https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
|
||||
CacheStrategy.Memory)
|
||||
|
|
@ -40,7 +40,7 @@ struct TestIsUrlExist {
|
|||
this.source = data !== undefined ? data.source : $r("app.media.startIcon")
|
||||
})
|
||||
})
|
||||
Button("文件缓存获取gif").onClick(() => {
|
||||
Button($r('app.string.Retrieve_GIF_from_disk')).onClick(() => {
|
||||
ImageKnife.getInstance()
|
||||
.getCacheImage("https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
|
||||
CacheStrategy.File)
|
||||
|
|
@ -51,11 +51,11 @@ struct TestIsUrlExist {
|
|||
}
|
||||
|
||||
Flex() {
|
||||
Button("预加载静态图").onClick(() => {
|
||||
Button($r('app.string.Preloading_static_images')).onClick(() => {
|
||||
this.imageKnifeOption.loadSrc =
|
||||
'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp'
|
||||
})
|
||||
Button("内存缓存获取").onClick(() => {
|
||||
Button($r('app.string.Retrieve_images_from_memory')).onClick(() => {
|
||||
ImageKnife.getInstance()
|
||||
.getCacheImage('https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
|
||||
CacheStrategy.Memory)
|
||||
|
|
@ -63,7 +63,7 @@ struct TestIsUrlExist {
|
|||
this.source = data!.source
|
||||
})
|
||||
})
|
||||
Button("文件缓存获取").onClick(() => {
|
||||
Button($r('app.string.Retrieve_images_from_disk')).onClick(() => {
|
||||
ImageKnife.getInstance()
|
||||
.getCacheImage('https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
|
||||
CacheStrategy.File)
|
||||
|
|
|
|||
|
|
@ -32,13 +32,13 @@ struct TestPrefetchToFileCachePage {
|
|||
}
|
||||
build() {
|
||||
Column() {
|
||||
Button("url预加载图片到文件缓存").margin({top:10}).onClick(async ()=>{
|
||||
Button($r('app.string.Preloading_images_to_file_cache_using_URL')).margin({top:10}).onClick(async ()=>{
|
||||
await this.preload("https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658")
|
||||
})
|
||||
Button("option预加载图片到文件缓存").margin({top:10}).onClick(async ()=>{
|
||||
Button($r('app.string.Preloading_images_to_file_cache_using_option')).margin({top:10}).onClick(async ()=>{
|
||||
await this.preload1("https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658")
|
||||
})
|
||||
Button("加载图片(预加载后可断网加载)").margin({top:10}).onClick(()=>{
|
||||
Button($r('app.string.Load_image_offline_after_preloading')).margin({top:10}).onClick(()=>{
|
||||
this.imageKnifeOption.loadSrc = "https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658"
|
||||
})
|
||||
ImageKnifeComponent({
|
||||
|
|
|
|||
|
|
@ -17,6 +17,11 @@ import { ImageKnifeComponent, ImageKnife, ImageKnifeOption } from '@ohos/library
|
|||
@Entry
|
||||
@ComponentV2
|
||||
struct TestSetCustomImagePage {
|
||||
|
||||
getResourceString(res:Resource){
|
||||
return getContext().resourceManager.getStringSync(res.id)
|
||||
}
|
||||
|
||||
@Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: $r('app.media.startIcon'),
|
||||
placeholderSrc: $r('app.media.loading')
|
||||
|
|
@ -29,19 +34,19 @@ struct TestSetCustomImagePage {
|
|||
}
|
||||
build() {
|
||||
Column() {
|
||||
Button("自定义下载a").onClick(()=>{
|
||||
Button(this.getResourceString($r('app.string.Custom_network_download')) + " a").onClick(()=>{
|
||||
this.imageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: "aaa",
|
||||
placeholderSrc: $r('app.media.loading')
|
||||
})
|
||||
})
|
||||
Button("自定义下载b").onClick(()=>{
|
||||
Button(this.getResourceString($r('app.string.Custom_network_download')) + " b").onClick(()=>{
|
||||
this.imageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: "bbb",
|
||||
placeholderSrc: $r('app.media.loading')
|
||||
})
|
||||
})
|
||||
Button("自定义下载c").onClick(()=>{
|
||||
Button(this.getResourceString($r('app.string.Custom_network_download')) + " c").onClick(()=>{
|
||||
this.imageKnifeOption = new ImageKnifeOption({
|
||||
loadSrc: "ccc",
|
||||
placeholderSrc: $r('app.media.loading')
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ struct TestWriteCacheStage {
|
|||
|
||||
build() {
|
||||
Column() {
|
||||
Button("写入内存文件缓存").margin({top:10}).onClick(async ()=>{
|
||||
Button($r('app.string.Write_memory_and_file')).margin({top:10}).onClick(async ()=>{
|
||||
this.imageKnifeOption1 = new ImageKnifeOption({
|
||||
loadSrc:'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
|
||||
placeholderSrc:$r('app.media.loading'),
|
||||
|
|
@ -46,7 +46,7 @@ struct TestWriteCacheStage {
|
|||
ImageKnifeComponent({
|
||||
imageKnifeOption: this.imageKnifeOption1
|
||||
}).width(200).height(200).margin({top:10})
|
||||
Button("写入内存缓存").margin({top:10}).onClick(async ()=>{
|
||||
Button($r('app.string.Write_memory')).margin({top:10}).onClick(async ()=>{
|
||||
this.imageKnifeOption2 = new ImageKnifeOption({
|
||||
loadSrc:"https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
|
||||
placeholderSrc:$r('app.media.loading'),
|
||||
|
|
@ -57,7 +57,7 @@ struct TestWriteCacheStage {
|
|||
ImageKnifeComponent({
|
||||
imageKnifeOption: this.imageKnifeOption2
|
||||
}).width(200).height(200).margin({top:10})
|
||||
Button("写入文件缓存").margin({top:10}).onClick(async ()=>{
|
||||
Button($r('app.string.Write_file')).margin({top:10}).onClick(async ()=>{
|
||||
this.imageKnifeOption3 = new ImageKnifeOption({
|
||||
loadSrc:'https://img-blog.csdn.net/20140514114029140',
|
||||
placeholderSrc:$r('app.media.loading'),
|
||||
|
|
|
|||
|
|
@ -34,12 +34,12 @@ struct TransformPage {
|
|||
ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption }).height(200).width(200)
|
||||
.transform(this.matrix1)
|
||||
// Image($r('app.media.rabbit')).objectFit(ImageFit.Contain).height(200).width(200).transform(this.matrix1)
|
||||
Button("放大").onClick(()=>{
|
||||
Button($r('app.string.Enlarge')).onClick(()=>{
|
||||
this.custom_scale = this.custom_scale * 2
|
||||
this.matrix1 = matrix4.identity().scale({ x: this.custom_scale, y: this.custom_scale })
|
||||
})
|
||||
|
||||
Button("缩小").onClick(()=>{
|
||||
Button($r('app.string.Reduce')).onClick(()=>{
|
||||
this.custom_scale = this.custom_scale / 2
|
||||
this.matrix1 = matrix4.identity().scale({ x: this.custom_scale, y: this.custom_scale })
|
||||
})
|
||||
|
|
|
|||
|
|
@ -32,9 +32,9 @@ struct DataShareUriLoadPage {
|
|||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Text("获取媒体图库的uri用ImageKnife展示").fontSize(15)
|
||||
Text($r('app.string.Retrieve_media_gallery')).fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("点击加载Uri并展示")
|
||||
Button($r('app.string.Click_load_Uri'))
|
||||
.onClick(async () => {
|
||||
let photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
|
||||
photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
|
||||
|
|
|
|||
|
|
@ -19,6 +19,246 @@
|
|||
{
|
||||
"name": "app_permission_READ_IMAGEVIDEO",
|
||||
"value": "获取读媒体资源权限"
|
||||
},
|
||||
{
|
||||
"name": "Test_ImageAnimator",
|
||||
"value": "Test ImageAnimator component"
|
||||
},
|
||||
{
|
||||
"name": "Test_multiple_images",
|
||||
"value": "Test loading multiple identical images"
|
||||
},
|
||||
{
|
||||
"name": "Test_Task_error",
|
||||
"value": "Test placeholder map Task error"
|
||||
},
|
||||
{
|
||||
"name": "Test_HSP",
|
||||
"value": "Test HSP scene preloading"
|
||||
},
|
||||
{
|
||||
"name": "Test_SingleImage",
|
||||
"value": "SingleImage"
|
||||
},
|
||||
{
|
||||
"name": "Test_custom_download",
|
||||
"value": "Global custom download"
|
||||
},
|
||||
{
|
||||
"name": "Multiple_images",
|
||||
"value": "Multiple images"
|
||||
},
|
||||
{
|
||||
"name": "Display_long_image",
|
||||
"value": "Display long image"
|
||||
},
|
||||
{
|
||||
"name": "Image_scaling",
|
||||
"value": "Image scaling"
|
||||
},
|
||||
{
|
||||
"name": "Message_list",
|
||||
"value": "Message list"
|
||||
},
|
||||
{
|
||||
"name": "Custom_cache_key",
|
||||
"value": "Custom cache key"
|
||||
},
|
||||
{
|
||||
"name": "Preloading_images_to_cache",
|
||||
"value": "Preloading images to file cache"
|
||||
},
|
||||
{
|
||||
"name": "Retrieve_image_display_from_cache",
|
||||
"value": "Retrieve image display from cache"
|
||||
},
|
||||
{
|
||||
"name": "Test_single_request_header",
|
||||
"value": "Test a single request header"
|
||||
},
|
||||
{
|
||||
"name": "Test_write_cache_strategy",
|
||||
"value": "Test write cache strategy"
|
||||
},
|
||||
{
|
||||
"name": "Image_Transformation",
|
||||
"value": "Image Transformation"
|
||||
},
|
||||
{
|
||||
"name": "Different_ObjectFit",
|
||||
"value": "Different ObjectFit"
|
||||
},
|
||||
{
|
||||
"name": "Test_image_loading_success_or_failure_events",
|
||||
"value": "Test image loading success/failure events"
|
||||
},
|
||||
{
|
||||
"name": "Test_removing_image_cache_interface",
|
||||
"value": "Test removing image cache interface"
|
||||
},
|
||||
{
|
||||
"name": "Test_error_image_display",
|
||||
"value": "Test error image display"
|
||||
},
|
||||
{
|
||||
"name": "Test_media_URL",
|
||||
"value": "Test media URL"
|
||||
},
|
||||
{
|
||||
"name": "Display_the_first_frame",
|
||||
"value": "Display the first frame of the animation"
|
||||
},
|
||||
{
|
||||
"name": "Display_the_last_frame",
|
||||
"value": "Display the last frame of the animation"
|
||||
},
|
||||
{
|
||||
"name": "Play",
|
||||
"value": "Play"
|
||||
},
|
||||
{
|
||||
"name": "Pause",
|
||||
"value": "Pause"
|
||||
},
|
||||
{
|
||||
"name": "Stop",
|
||||
"value": "Stop"
|
||||
},
|
||||
{
|
||||
"name": "Infinite_loop",
|
||||
"value": "Infinite loop"
|
||||
},
|
||||
{
|
||||
"name": "Play_once",
|
||||
"value": "Play once"
|
||||
},
|
||||
{
|
||||
"name": "Play_twice",
|
||||
"value": "Play twice"
|
||||
},
|
||||
{
|
||||
"name": "Local_SVG",
|
||||
"value": "Local SVG image"
|
||||
},
|
||||
{
|
||||
"name": "Under_context_file",
|
||||
"value": "Files under context file"
|
||||
},
|
||||
{
|
||||
"name": "Network_images",
|
||||
"value": "Network images"
|
||||
},
|
||||
{
|
||||
"name": "Custom_network_download",
|
||||
"value": "Custom network download"
|
||||
},
|
||||
{
|
||||
"name": "PixelMap_loads_images",
|
||||
"value": "PixelMap loads images"
|
||||
},
|
||||
{
|
||||
"name": "Enlarge",
|
||||
"value": "Enlarge"
|
||||
},
|
||||
{
|
||||
"name": "Reduce",
|
||||
"value": "Reduce"
|
||||
},
|
||||
{
|
||||
"name": "Click_on_add",
|
||||
"value": "Click on the size to add 50"
|
||||
},
|
||||
{
|
||||
"name": "Click_on_reduce",
|
||||
"value": "Click to reduce size by 50"
|
||||
},
|
||||
{
|
||||
"name": "The_key_fixed_1",
|
||||
"value": "The key is fixed at 1"
|
||||
},
|
||||
{
|
||||
"name": "The_key_changes_timestamp",
|
||||
"value": "Key changes every time: timestamp"
|
||||
},
|
||||
{
|
||||
"name": "Load",
|
||||
"value": "Load"
|
||||
},
|
||||
{
|
||||
"name": "Preloading_images_to_file_cache_using_URL",
|
||||
"value": "Preloading images to file cache using URL"
|
||||
},
|
||||
{
|
||||
"name": "Preloading_images_to_file_cache_using_option",
|
||||
"value": "Preloading images to file cache using option"
|
||||
},
|
||||
{
|
||||
"name": "Load_image_offline_after_preloading",
|
||||
"value": "Load image (can be loaded offline after preloading)"
|
||||
},
|
||||
{
|
||||
"name": "Preloading_GIF",
|
||||
"value": "Preloading GIF"
|
||||
},
|
||||
{
|
||||
"name": "Retrieve_GIF_from_memory",
|
||||
"value": "Retrieve GIF from memory cache"
|
||||
},
|
||||
{
|
||||
"name": "Retrieve_GIF_from_disk",
|
||||
"value": "Retrieve GIF from disk cache"
|
||||
},
|
||||
{
|
||||
"name": "Preloading_static_images",
|
||||
"value": "Preloading static images"
|
||||
},
|
||||
{
|
||||
"name": "Retrieve_images_from_memory",
|
||||
"value": "Retrieve images from memory cache"
|
||||
},
|
||||
{
|
||||
"name": "Retrieve_images_from_disk",
|
||||
"value": "Retrieve images from memory disk"
|
||||
},
|
||||
{
|
||||
"name": "Write_memory_and_file",
|
||||
"value": "Write to memory and file cache"
|
||||
},
|
||||
{
|
||||
"name": "Write_memory",
|
||||
"value": "Write to memory cache"
|
||||
},
|
||||
{
|
||||
"name": "Write_file",
|
||||
"value": "Write to file cache"
|
||||
},
|
||||
{
|
||||
"name": "Main_image_Fill",
|
||||
"value": "Main image Fill Stretch Fill"
|
||||
},
|
||||
{
|
||||
"name": "Maintain_proportion_filling",
|
||||
"value": "Maintain proportion filling in the placeholder map 'Include'"
|
||||
},
|
||||
{
|
||||
"name": "Error_graph_None",
|
||||
"value": "Error graph None remains unchanged"
|
||||
},
|
||||
{
|
||||
"name": "Test_failure_success",
|
||||
"value": "Test failure/success"
|
||||
},
|
||||
{
|
||||
"name": "Custom_download_failed",
|
||||
"value": "Custom download failed"
|
||||
},
|
||||
{
|
||||
"name": "Retrieve_media_gallery",
|
||||
"value": "Retrieve the URI of the media gallery and display it using ImageKnife"
|
||||
},
|
||||
{
|
||||
"name": "Click_load_Uri",
|
||||
"value": "Click to load Uri and display"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -19,6 +19,242 @@
|
|||
{
|
||||
"name": "app_permission_READ_IMAGEVIDEO",
|
||||
"value": "获取读媒体资源权限"
|
||||
},
|
||||
{
|
||||
"name": "Test_ImageAnimator",
|
||||
"value": "测试ImageAnimator组件"
|
||||
},
|
||||
{
|
||||
"name": "Test_multiple_images",
|
||||
"value": "测试加载多张相同图片"
|
||||
},
|
||||
{
|
||||
"name": "Test_Task_error",
|
||||
"value": "测试占位图Task报错"
|
||||
},
|
||||
{
|
||||
"name": "Test_HSP",
|
||||
"value": "测试HSP场景预加载"
|
||||
},
|
||||
{
|
||||
"name": "Test_SingleImage",
|
||||
"value": "单个图片使用"
|
||||
},
|
||||
{
|
||||
"name": "Test_custom_download",
|
||||
"value": "全局自定义下载"
|
||||
},
|
||||
{
|
||||
"name": "Multiple_images",
|
||||
"value": "多图"
|
||||
},
|
||||
{
|
||||
"name": "Display_long_image",
|
||||
"value": "长图显示"
|
||||
},
|
||||
{
|
||||
"name": "Image_scaling",
|
||||
"value": "缩放图片"
|
||||
},
|
||||
{
|
||||
"name": "Message_list",
|
||||
"value": "消息列表"
|
||||
},
|
||||
{
|
||||
"name": "Custom_cache_key",
|
||||
"value": "自定义缓存key"
|
||||
},
|
||||
{
|
||||
"name": "Preloading_images_to_cache",
|
||||
"value": "预加载图片到文件缓存"
|
||||
},
|
||||
{
|
||||
"name": "Retrieve_image_display_from_cache",
|
||||
"value": "从缓存获取图片显示"
|
||||
},
|
||||
{
|
||||
"name": "Test_single_request_header",
|
||||
"value": "测试单个请求头"
|
||||
},
|
||||
{
|
||||
"name": "Test_write_cache_strategy",
|
||||
"value": "测试写入缓存策略"
|
||||
},
|
||||
{
|
||||
"name": "Image_Transformation",
|
||||
"value": "图片变换"
|
||||
},
|
||||
{
|
||||
"name": "Different_ObjectFit",
|
||||
"value": "不同的ObjectFit"
|
||||
},
|
||||
{
|
||||
"name": "Test_image_loading_success_or_failure_events",
|
||||
"value": "测试图片加载成功/失败事件"
|
||||
},
|
||||
{
|
||||
"name": "Test_removing_image_cache_interface",
|
||||
"value": "测试移除图片缓存接口"
|
||||
},
|
||||
{
|
||||
"name": "Test_error_image_display",
|
||||
"value": "测试错误图显示"
|
||||
},
|
||||
{
|
||||
"name": "Display_the_first_frame",
|
||||
"value": "动画显示第一帧"
|
||||
},
|
||||
{
|
||||
"name": "Display_the_last_frame",
|
||||
"value": "动画显示最后一帧"
|
||||
},
|
||||
{
|
||||
"name": "Play",
|
||||
"value": "播放"
|
||||
},
|
||||
{
|
||||
"name": "Pause",
|
||||
"value": "暂停"
|
||||
},
|
||||
{
|
||||
"name": "Stop",
|
||||
"value": "停止"
|
||||
},
|
||||
{
|
||||
"name": "Infinite_loop",
|
||||
"value": "无限循环"
|
||||
},
|
||||
{
|
||||
"name": "Play_once",
|
||||
"value": "播放一次"
|
||||
},
|
||||
{
|
||||
"name": "Play_twice",
|
||||
"value": "播放两次"
|
||||
},
|
||||
{
|
||||
"name": "Local_SVG",
|
||||
"value": "本地资源SVG图片"
|
||||
},
|
||||
{
|
||||
"name": "Under_context_file",
|
||||
"value": "本地context files下文件"
|
||||
},
|
||||
{
|
||||
"name": "Network_images",
|
||||
"value": "网络图片"
|
||||
},
|
||||
{
|
||||
"name": "Custom_network_download",
|
||||
"value": "自定义下载"
|
||||
},
|
||||
{
|
||||
"name": "PixelMap_loads_images",
|
||||
"value": "PixelMap加载图片"
|
||||
},
|
||||
{
|
||||
"name": "Enlarge",
|
||||
"value": "放大"
|
||||
},
|
||||
{
|
||||
"name": "Reduce",
|
||||
"value": "缩小"
|
||||
},
|
||||
{
|
||||
"name": "Click_on_add",
|
||||
"value": "点击尺寸加50"
|
||||
},
|
||||
{
|
||||
"name": "Click_on_reduce",
|
||||
"value": "点击尺寸减50"
|
||||
},
|
||||
{
|
||||
"name": "The_key_fixed_1",
|
||||
"value": "key固定为 1"
|
||||
},
|
||||
{
|
||||
"name": "The_key_changes_timestamp",
|
||||
"value": "key每次变化：时间戳"
|
||||
},
|
||||
{
|
||||
"name": "Load",
|
||||
"value": "加载"
|
||||
},
|
||||
{
|
||||
"name": "Preloading_images_to_file_cache_using_URL",
|
||||
"value": "url预加载图片到文件缓存"
|
||||
},
|
||||
{
|
||||
"name": "Preloading_images_to_file_cache_using_option",
|
||||
"value": "option预加载图片到文件缓存"
|
||||
},
|
||||
{
|
||||
"name": "Load_image_offline_after_preloading",
|
||||
"value": "加载图片(预加载后可断网加载)"
|
||||
},
|
||||
{
|
||||
"name": "Preloading_GIF",
|
||||
"value": "预加载gif图"
|
||||
},
|
||||
{
|
||||
"name": "Retrieve_GIF_from_memory",
|
||||
"value": "内存缓存获取gif"
|
||||
},
|
||||
{
|
||||
"name": "Retrieve_GIF_from_disk",
|
||||
"value": "文件缓存获取gif"
|
||||
},
|
||||
{
|
||||
"name": "Preloading_static_images",
|
||||
"value": "预加载静态图"
|
||||
},
|
||||
{
|
||||
"name": "Retrieve_images_from_memory",
|
||||
"value": "内存缓存获取"
|
||||
},
|
||||
{
|
||||
"name": "Retrieve_images_from_disk",
|
||||
"value": "文件缓存获取"
|
||||
},
|
||||
{
|
||||
"name": "Write_memory_and_file",
|
||||
"value": "写入内存文件缓存"
|
||||
},
|
||||
{
|
||||
"name": "Write_memory",
|
||||
"value": "写入内存缓存"
|
||||
},
|
||||
{
|
||||
"name": "Write_file",
|
||||
"value": "写入文件缓存"
|
||||
},
|
||||
{
|
||||
"name": "Main_image_Fill",
|
||||
"value": "主图Fill拉伸填充"
|
||||
},
|
||||
{
|
||||
"name": "Maintain_proportion_filling",
|
||||
"value": "占位图Contain保持比例填充"
|
||||
},
|
||||
{
|
||||
"name": "Error_graph_None",
|
||||
"value": "错误图None不变化"
|
||||
},
|
||||
{
|
||||
"name": "Test_failure_success",
|
||||
"value": "测试失败/成功场景"
|
||||
},
|
||||
{
|
||||
"name": "Custom_download_failed",
|
||||
"value": "自定义下载失败"
|
||||
},
|
||||
{
|
||||
"name": "Retrieve_media_gallery",
|
||||
"value": "获取媒体图库的uri用ImageKnife展示"
|
||||
},
|
||||
{
|
||||
"name": "Click_load_Uri",
|
||||
"value": "点击加载Uri并展示"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -21,7 +21,7 @@ export struct IndexComponent {
|
|||
})
|
||||
build() {
|
||||
Column() {
|
||||
Button("预加载").onClick((event: ClickEvent) => {
|
||||
Button($r('app.string.Preload')).onClick((event: ClickEvent) => {
|
||||
ImageKnife.getInstance()
|
||||
.preLoadCache('https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp')
|
||||
.then((data) => {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,10 @@
|
|||
{
|
||||
"name": "shared_desc",
|
||||
"value": "description"
|
||||
},
|
||||
{
|
||||
"name": "Preload",
|
||||
"value": "Preload"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"string": [
|
||||
{
|
||||
"name": "Preload",
|
||||
"value": "预加载"
|
||||
}
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue