1.使用worker.ThreadWorker替代项目中过时的ArkWorker.Worker
2.完善readme中关于worker的使用部分 3.添加worker加载gif区别测试界面 Signed-off-by: 李艺为 <15897461476@139.com>
This commit is contained in:
李艺为
parent
2630eb8777
commit
eb4b129367
227
README.md
227
README.md
|
|
@ -9,7 +9,8 @@
|
||||||
- 支持内存缓存，使用LRUCache算法，对图片数据进行内存缓存。
|
- 支持内存缓存，使用LRUCache算法，对图片数据进行内存缓存。
|
||||||
- 支持磁盘缓存，对于下载图片会保存一份至磁盘当中。
|
- 支持磁盘缓存，对于下载图片会保存一份至磁盘当中。
|
||||||
- 支持进行图片变换: 支持图像像素源图片变换效果。
|
- 支持进行图片变换: 支持图像像素源图片变换效果。
|
||||||
- 支持用户配置参数使用:(例如：配置是否开启一级内存缓存，配置磁盘缓存策略，配置仅使用缓存加载数据，配置图片变换效果，配置占位图，配置加载失败占位图等)。
|
- 支持用户配置参数使用:(
|
||||||
|
例如：配置是否开启一级内存缓存，配置磁盘缓存策略，配置仅使用缓存加载数据，配置图片变换效果，配置占位图，配置加载失败占位图等)。
|
||||||
- 推荐使用ImageKnifeComponent组件配合ImageKnifeOption参数来实现功能。
|
- 推荐使用ImageKnifeComponent组件配合ImageKnifeOption参数来实现功能。
|
||||||
- 支持用户自定义配置实现能力参考ImageKnifeComponent组件中对于入参ImageKnifeOption的处理。
|
- 支持用户自定义配置实现能力参考ImageKnifeComponent组件中对于入参ImageKnifeOption的处理。
|
||||||
|
|
||||||
|
|
@ -22,9 +23,11 @@ ohpm install @ohos/imageknife
|
||||||
```
|
```
|
||||||
|
|
||||||
## 使用说明
|
## 使用说明
|
||||||
### 0.依赖配置
|
|
||||||
|
|
||||||
0.1.在项目中entry/oh-package.json5中做如下修改，然后点击Sync Now：
|
### 1.依赖配置
|
||||||
|
|
||||||
|
在项目中entry/oh-package.json5中做如下修改，然后点击Sync Now：
|
||||||
|
|
||||||
```json5
|
```json5
|
||||||
{
|
{
|
||||||
"name": "entry",
|
"name": "entry",
|
||||||
|
|
@ -39,7 +42,7 @@ ohpm install @ohos/imageknife
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
0.2.在entry\src\main\ets\entryability\EntryAbility.ts中做如下配置初始化全局ImageKnife实例：
|
在entry\src\main\ets\entryability\EntryAbility.ts中做如下配置初始化全局ImageKnife实例：
|
||||||
|
|
||||||
```typescript
|
```typescript
|
||||||
import UIAbility from '@ohos.app.ability.UIAbility';
|
import UIAbility from '@ohos.app.ability.UIAbility';
|
||||||
|
|
@ -47,22 +50,20 @@ import window from '@ohos.window';
|
||||||
import { ImageKnife } from '@ohos/imageknife'
|
import { ImageKnife } from '@ohos/imageknife'
|
||||||
|
|
||||||
export default class EntryAbility extends UIAbility {
|
export default class EntryAbility extends UIAbility {
|
||||||
onCreate(want, launchParam) {
|
|
||||||
globalThis.ImageKnife = ImageKnife.with(this.context);
|
|
||||||
}
|
|
||||||
|
|
||||||
onWindowStageCreate(windowStage: window.WindowStage) {
|
onWindowStageCreate(windowStage: window.WindowStage) {
|
||||||
windowStage.loadContent('pages/Index', (err, data) => {
|
windowStage.loadContent('pages/Index', (err, data) => {
|
||||||
});
|
});
|
||||||
|
//初始化全局ImageKnife
|
||||||
|
globalThis.ImageKnife = ImageKnife.with(this.context);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### 1.加载普通图片
|
### 2.加载普通图片
|
||||||
|
|
||||||
接下来我们来写个简单实例看看:
|
接下来我们来写个简单实例看看:
|
||||||
|
|
||||||
```typescript
|
```extendtypescript
|
||||||
import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/imageknife'
|
import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/imageknife'
|
||||||
|
|
||||||
@Entry
|
@Entry
|
||||||
|
|
@ -82,42 +83,46 @@ build() {
|
||||||
ImageKnifeComponent({ imageKnifeOption: this.option })
|
ImageKnifeComponent({ imageKnifeOption: this.option })
|
||||||
.width(300)
|
.width(300)
|
||||||
.height(300)
|
.height(300)
|
||||||
}
|
}.width('100%')
|
||||||
.width('100%')
|
}.height('100%')
|
||||||
}
|
|
||||||
.height('100%')
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
非常简单，仅需定义一个ImageKnifeOption数据对象，然后在你需要的UI位置，加入ImageKnifeComponent自定义组件就可以加载出一张图像了。
|
非常简单，仅需定义一个ImageKnifeOption数据对象，然后在你需要的UI位置，加入ImageKnifeComponent自定义组件就可以加载出一张图像了。
|
||||||
|
|
||||||
### 2.加载SVG图片
|
### 3.加载SVG图片
|
||||||
|
|
||||||
加载svg其实和普通流程没有区别,只要将 `loadSrc: $r('app.media.jpgSample'),` `改成一张 loadSrc: $r('app.media.svgSample'),`svg类型图片即可。
|
加载svg其实和普通流程没有区别,只要将 `loadSrc: $r('app.media.jpgSample'),` `改成一张 loadSrc: $r('app.media.svgSample'),`
|
||||||
|
svg类型图片即可。
|
||||||
|
|
||||||
目前加载SVG图片解析依赖了 [SVG三方库](https://gitee.com/openharmony-sig/ohos-svg)，由于目前该库还无法解析mask标签，所以这里大家需要留意一下。
|
目前加载SVG图片解析依赖了 [SVG三方库](https://gitee.com/openharmony-sig/ohos-svg)，由于目前该库还无法解析mask标签，所以这里大家需要留意一下。
|
||||||
|
|
||||||
### 3.加载GIF图片
|
### 4.加载GIF图片
|
||||||
|
|
||||||
3.1加载GIF其实和普通流程也没有区别只要将 `loadSrc: $r('app.media.jpgSample'),` `改成一张 loadSrc: $r('app.media.gifSample'),`GIF图片即可。
|
加载GIF其实和普通流程也没有区别只要将 `loadSrc: $r('app.media.jpgSample'),` `改成一张 loadSrc: $r('app.media.gifSample'),`
|
||||||
|
GIF图片即可。
|
||||||
|
|
||||||
但是解析gif图片属于耗时操作，所以我们需要将其放入子线程操作。 **这里我们需要在页面的创建和销毁上添加一个worker子线程操作。**
|
但是解析gif图片属于耗时操作，所以我们需要将其放入子线程操作。 **这里我们需要在页面的创建和销毁上添加一个worker子线程操作。
|
||||||
|
**
|
||||||
|
|
||||||
|
```extendtypescript
|
||||||
|
import router from '@ohos.router'
|
||||||
|
|
||||||
|
import { ImageKnifeComponent, ImageKnifeOption, } from '@ohos/imageknife'
|
||||||
|
import worker from '@ohos.worker';
|
||||||
|
|
||||||
```typescript
|
|
||||||
import router from '@system.router';
|
|
||||||
import {
|
|
||||||
ImageKnifeComponent,
|
|
||||||
ImageKnifeOption,
|
|
||||||
} from '@ohos/imageknife'
|
|
||||||
import ArkWorker from '@ohos.worker'
|
|
||||||
@Entry
|
@Entry
|
||||||
@Component
|
@Component
|
||||||
struct IndexFunctionDemo {
|
struct IndexFunctionDemo {
|
||||||
private globalGifWorker: any = undefined
|
private globalGifWorker: any = undefined
|
||||||
@State imageKnifeOption: ImageKnifeOption =
|
@State imageKnifeOption1: ImageKnifeOption = {
|
||||||
{
|
loadSrc: $r('app.media.icon'),
|
||||||
loadSrc: $r('app.media.gifSample'),
|
placeholderSrc: $r('app.media.icon_loading'),
|
||||||
|
errorholderSrc: $r('app.media.icon_failed')
|
||||||
|
};
|
||||||
|
@State imageKnifeOption2: ImageKnifeOption = {
|
||||||
|
loadSrc: $r('app.media.icon'),
|
||||||
placeholderSrc: $r('app.media.icon_loading'),
|
placeholderSrc: $r('app.media.icon_loading'),
|
||||||
errorholderSrc: $r('app.media.icon_failed')
|
errorholderSrc: $r('app.media.icon_failed')
|
||||||
};
|
};
|
||||||
|
|
@ -125,10 +130,43 @@ struct IndexFunctionDemo {
|
||||||
build() {
|
build() {
|
||||||
Scroll() {
|
Scroll() {
|
||||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||||
Text("简单示例：加载一张gif图片").fontSize(15)
|
Text("简单示例1：加载一张本地png图片").fontSize(15)
|
||||||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
|
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||||
.width(300)
|
Button("加载PNG")
|
||||||
.height(300)
|
.onClick(() => {
|
||||||
|
this.imageKnifeOption1 = {
|
||||||
|
loadSrc: $r('app.media.pngSample'),
|
||||||
|
|
||||||
|
placeholderSrc: $r('app.media.icon_loading'),
|
||||||
|
errorholderSrc: $r('app.media.icon_failed')
|
||||||
|
}
|
||||||
|
}).margin({ top: 5, left: 3 })
|
||||||
|
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
|
||||||
|
}.width('100%').backgroundColor(Color.Pink)
|
||||||
|
|
||||||
|
Text("简单示例2：加载一张网络gif图片").fontSize(15)
|
||||||
|
Text("gif解析在子线程,请在页面构建后创建worker,注入imageknife").fontSize(15)
|
||||||
|
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||||
|
Button("加载GIF")
|
||||||
|
.onClick(() => {
|
||||||
|
this.imageKnifeOption2 = {
|
||||||
|
loadSrc: 'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658',
|
||||||
|
|
||||||
|
placeholderSrc: $r('app.media.icon_loading'),
|
||||||
|
errorholderSrc: $r('app.media.icon_failed'),
|
||||||
|
displayProgress: true,
|
||||||
|
}
|
||||||
|
}).margin({ top: 5, left: 3 })
|
||||||
|
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }).width(300).height(300)
|
||||||
|
}.width('100%').backgroundColor(Color.Pink)
|
||||||
|
|
||||||
|
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||||
|
Button("ImageKnife测试目录页面")
|
||||||
|
.onClick(() => {
|
||||||
|
console.log("pages/imageknifeTestCaseIndex 页面跳转")
|
||||||
|
router.pushUrl({ url: "pages/imageknifeTestCaseIndex" });
|
||||||
|
}).margin({ top: 15 })
|
||||||
|
}.width('100%').height(60).backgroundColor(Color.Pink)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.width('100%')
|
.width('100%')
|
||||||
|
|
@ -136,69 +174,51 @@ struct IndexFunctionDemo {
|
||||||
}
|
}
|
||||||
|
|
||||||
aboutToAppear() {
|
aboutToAppear() {
|
||||||
// 页面初始化创建worker
|
this.globalGifWorker = new worker.ThreadWorker('entry/ets/workers/GifLoadWorker.ts')
|
||||||
this.globalGifWorker = new ArkWorker.Worker('entry/ets/pages/workers/gifParseWorker.ts', {
|
|
||||||
type: 'classic',
|
|
||||||
name: 'ImageKnifeParseGIF'
|
|
||||||
})
|
|
||||||
// gif解析在子线程,请在页面构建后创建worker,注入imageknife
|
// gif解析在子线程,请在页面构建后创建worker,注入imageknife
|
||||||
globalThis.ImageKnife.setGifWorker(this.globalGifWorker)
|
globalThis.ImageKnife.setGifWorker(this.globalGifWorker)
|
||||||
}
|
}
|
||||||
|
|
||||||
aboutToDisappear() {
|
aboutToDisappear() {
|
||||||
// 页面销毁 销毁worker
|
// 页面销毁 销毁worker
|
||||||
if (this.globalGifWorker) {
|
if (this.globalGifWorker) {
|
||||||
this.globalGifWorker.terminate();
|
this.globalGifWorker.terminate();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
#### 创建worker
|
#### 5.创建worker
|
||||||
|
|
||||||
由于使用到了worker，目前worker创建只能在entry里面，所以我这边着重讲一下worker配置的流程。
|
由于使用到了worker，目前worker创建只能在entry里面，所以我这边着重讲一下worker配置的流程。
|
||||||
|
|
||||||
在entry/src/main/ets/pages目录下创建文件夹workers,然后在文件夹中创建gifParseWorker.ts文件，最后填入内容:
|
在entry目录上：点击鼠标右键 --> New --> Worker
|
||||||
|
|
||||||
```typescript
|
<img src="screenshot/worker1.png" width="100%" height="100%"/>
|
||||||
import arkWorker from '@ohos.worker';
|
|
||||||
|
在弹出窗口中填入即将创建的worker的名称GifLoadWorker，点击弹窗右下角Finish，
|
||||||
|
|
||||||
|
<img src="screenshot/worker2.png" width="100%" height="100%"/>
|
||||||
|
|
||||||
|
DevEco将自动在entry/src/main/ets/workers目录下生成GifLoadWorker.ts文件,并在其中生成模板代码
|
||||||
|
|
||||||
|
<img src="screenshot/worker3.png" width="100%" height="100%"/>
|
||||||
|
|
||||||
|
同时entry模块下build-profile.json5也会自动生成新建的worker的配置信息
|
||||||
|
|
||||||
|
<img src="screenshot/worker4.png" width="100%" height="100%"/>
|
||||||
|
|
||||||
|
接下来我们在GifLoadWorker.ts中导入gif处理方法
|
||||||
|
|
||||||
|
```extendtypescript
|
||||||
import { gifHandler } from '@ohos/imageknife/GifWorker'
|
import { gifHandler } from '@ohos/imageknife/GifWorker'
|
||||||
|
```
|
||||||
arkWorker.parentPort.onmessage = gifHandler;
|
同时设置
|
||||||
|
```extendtypescript
|
||||||
|
workerPort.onmessage = gifHandler
|
||||||
```
|
```
|
||||||
|
|
||||||
代码处理流程已经封装在gifHanlder函数中了。
|
经过了上面的配置，就配置好了worker,GIF图片加载就能顺利进行了。 如果GIF加载未成功，可以检查一下worker配置是否完成，或者参考entry/src/main/ets/pages/testGifLoadWithWorkerPage.ets中的gif加载写法。
|
||||||
|
|
||||||
<img src="screenshot/jpg1.jpg" width="100%"/>
|
|
||||||
|
|
||||||
接下来我们需要在entry/build-profile.json5文件中添加配置
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
{
|
|
||||||
"apiType": 'stageMode',
|
|
||||||
"buildOption": {
|
|
||||||
"sourceOption": {
|
|
||||||
"workers": [
|
|
||||||
"./src/main/ets/pages/workers/gifParseWorker.ts",
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"targets": [
|
|
||||||
{
|
|
||||||
"name": "default",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "ohosTest",
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
<img src="screenshot/jpg2.jpg" width="100%"/>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
经过了上面的配置，就配置好了worker, GIF图片加载就能顺利进行了。 **如果GIF加载未成功，可以检查一下worker配置是否完成**。
|
|
||||||
|
|
||||||
## 进阶使用
|
## 进阶使用
|
||||||
|
|
||||||
|
|
@ -207,7 +227,7 @@ arkWorker.parentPort.onmessage = gifHandler;
|
||||||
### ImageKnifeOption参数列表
|
### ImageKnifeOption参数列表
|
||||||
|
|
||||||
| 参数名称 | 入参内容 | 功能简介 |
|
| 参数名称 | 入参内容 | 功能简介 |
|
||||||
| ---------------------------- | ------------------------------------------------------------ | ----------------------------------- |
|
|------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------|
|
||||||
| loadSrc | string \ | PixelMap \ | Resource | 设置主图资源（必选） |
|
| loadSrc | string \ | PixelMap \ | Resource | 设置主图资源（必选） |
|
||||||
| mainScaleType | ScaleType | 设置主图展示样式（可选） |
|
| mainScaleType | ScaleType | 设置主图展示样式（可选） |
|
||||||
| strategy | DiskStrategy | 设置磁盘缓存策略（可选） |
|
| strategy | DiskStrategy | 设置磁盘缓存策略（可选） |
|
||||||
|
|
@ -233,7 +253,8 @@ arkWorker.parentPort.onmessage = gifHandler;
|
||||||
|
|
||||||
其他参数只需要在ImageKnifeOption对象上按需添加即可。
|
其他参数只需要在ImageKnifeOption对象上按需添加即可。
|
||||||
|
|
||||||
这里我们着重讲一下**自定义实现绘制方案**。为了增强绘制扩展能力，目前ImageKnifeComponent使用了Canvas的渲染能力作为基础。在此之上为了抽象组件绘制表达。我将图像的状态使用了**IDrawLifeCycle绘制生命周期进行表达**，
|
这里我们着重讲一下**自定义实现绘制方案**。为了增强绘制扩展能力，目前ImageKnifeComponent使用了Canvas的渲染能力作为基础。在此之上为了抽象组件绘制表达。我将图像的状态使用了
|
||||||
|
**IDrawLifeCycle绘制生命周期进行表达**，
|
||||||
|
|
||||||
大致流程 展示占位图->展示网络加载进度->展示缩略图->展示主图->展示重试图层->展示失败占位图
|
大致流程 展示占位图->展示网络加载进度->展示缩略图->展示主图->展示重试图层->展示失败占位图
|
||||||
|
|
||||||
|
|
@ -253,11 +274,12 @@ ImageKnifeComponent内部，责任链实现。 用户参数设置->全局参数
|
||||||
import { ImageKnifeComponent } from '@ohos/imageknife'
|
import { ImageKnifeComponent } from '@ohos/imageknife'
|
||||||
import { ImageKnifeOption } from '@ohos/imageknife'
|
import { ImageKnifeOption } from '@ohos/imageknife'
|
||||||
import { ImageKnifeDrawFactory } from '@ohos/imageknife'
|
import { ImageKnifeDrawFactory } from '@ohos/imageknife'
|
||||||
|
|
||||||
@Entry
|
@Entry
|
||||||
@Component
|
@Component
|
||||||
struct Index {
|
struct Index {
|
||||||
@State imageKnifeOption1: ImageKnifeOption =
|
@State imageKnifeOption1: ImageKnifeOption = {
|
||||||
{ // 加载一张本地的jpg资源（必选）
|
// 加载一张本地的jpg资源（必选）
|
||||||
loadSrc: $r('app.media.jpgSample'),
|
loadSrc: $r('app.media.jpgSample'),
|
||||||
// 占位图使用本地资源icon_loading（可选）
|
// 占位图使用本地资源icon_loading（可选）
|
||||||
placeholderSrc: $r('app.media.icon_loading'),
|
placeholderSrc: $r('app.media.icon_loading'),
|
||||||
|
|
@ -267,7 +289,6 @@ struct Index {
|
||||||
drawLifeCycle:ImageKnifeDrawFactory.createRoundLifeCycle(5,"#ff00ff",30)
|
drawLifeCycle:ImageKnifeDrawFactory.createRoundLifeCycle(5,"#ff00ff",30)
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
build(){
|
build(){
|
||||||
Scroll() {
|
Scroll() {
|
||||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||||
|
|
@ -282,11 +303,15 @@ struct Index {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
`ImageKnifeDrawFactory.createRoundLifeCycle(5,"#ff00ff",30)`我们深入查看源码可以发现，实际上是对IDrawLifeCycle接口的部分实现，这里我介绍一下IDrawLifeCycle。
|
`ImageKnifeDrawFactory.createRoundLifeCycle(5,"#ff00ff",30)`
|
||||||
|
我们深入查看源码可以发现，实际上是对IDrawLifeCycle接口的部分实现，这里我介绍一下IDrawLifeCycle。
|
||||||
|
|
||||||
**IDrawLifeCycle的返回值代表事件是否被消费，如果被消费接下来组件内部就不会处理，如果没被消费就会传递到下一个使用者。目前消费流程（用户自定义->全局配置定义->组件内部默认定义）**
|
*
|
||||||
|
*IDrawLifeCycle的返回值代表事件是否被消费，如果被消费接下来组件内部就不会处理，如果没被消费就会传递到下一个使用者。目前消费流程（用户自定义->
|
||||||
|
全局配置定义->组件内部默认定义）**
|
||||||
|
|
||||||
所以我们在当数据是一张PixelMap的时候（目前jpg png bmp webp svg返回的都是PixelMap，gif返回GIFFrame数组），我们返回了true。消费了事件，代表这个绘制流程用户自定义完成。
|
所以我们在当数据是一张PixelMap的时候（目前jpg png bmp webp
|
||||||
|
svg返回的都是PixelMap，gif返回GIFFrame数组），我们返回了true。消费了事件，代表这个绘制流程用户自定义完成。
|
||||||
|
|
||||||
<img src="screenshot/gif2.gif" width="50%"/>
|
<img src="screenshot/gif2.gif" width="50%"/>
|
||||||
|
|
||||||
|
|
@ -337,7 +362,8 @@ export default class MyAbilityStage extends AbilityStage {
|
||||||
|
|
||||||
了解了RequestOption的参数内容后，我们可以参考ImageKnifeComponent组件代码进行分析。
|
了解了RequestOption的参数内容后，我们可以参考ImageKnifeComponent组件代码进行分析。
|
||||||
|
|
||||||
**从`imageKnifeExecute()`函数入口，首先我们需要构建一个RequestOption对象，`let request = new RequestOption()`, 接下来就是按需配置request对象的内容，最后使用 `globalThis.ImageKnife.call(request)`发送request执行任务即可。**
|
**从`imageKnifeExecute()`函数入口，首先我们需要构建一个RequestOption对象，`let request = new RequestOption()`,
|
||||||
|
接下来就是按需配置request对象的内容，最后使用 `globalThis.ImageKnife.call(request)`发送request执行任务即可。**
|
||||||
|
|
||||||
是不是很简单，而其实最重要的内容是就是: **按需配置request对象的内容** 为了更好理解，我举例说明一下:
|
是不是很简单，而其实最重要的内容是就是: **按需配置request对象的内容** 为了更好理解，我举例说明一下:
|
||||||
|
|
||||||
|
|
@ -386,14 +412,12 @@ request.skipMemoryCache(true)
|
||||||
|
|
||||||
这里只是简单介绍部分使用，更多的内容请参考 **按需加载** 原则，并且可以参考ImageKnifeComponent源码或者根据文档自行探索实现。
|
这里只是简单介绍部分使用，更多的内容请参考 **按需加载** 原则，并且可以参考ImageKnifeComponent源码或者根据文档自行探索实现。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 接口说明
|
## 接口说明
|
||||||
|
|
||||||
### RequestOption用户配置参数
|
### RequestOption用户配置参数
|
||||||
|
|
||||||
| 方法名 | 入参 | 接口描述 |
|
| 方法名 | 入参 | 接口描述 |
|
||||||
| ------------------------------------------------------------ | ---------------------------------------------------------- | -------------------------------------------------------- |
|
|-----------------------------------------------------------------------|------------------------------------------------------------|----------------------------------------------|
|
||||||
| load(src: string \ | PixelMap \ | Resource) | string \| PixelMap \| Resource | 待加载图片的资源 |
|
| load(src: string \ | PixelMap \ | Resource) | string \| PixelMap \| Resource | 待加载图片的资源 |
|
||||||
| setImageViewSize(imageSize: { width: number, height: number }) | { width: number, height: number } | 传入显示图片组件的大小，变换的时候需要作为参考 |
|
| setImageViewSize(imageSize: { width: number, height: number }) | { width: number, height: number } | 传入显示图片组件的大小，变换的时候需要作为参考 |
|
||||||
| diskCacheStrategy(strategy: DiskStrategy) | DiskStrategy | 配置磁盘缓存策略 NONE SOURCE RESULT ALL AUTOMATIC |
|
| diskCacheStrategy(strategy: DiskStrategy) | DiskStrategy | 配置磁盘缓存策略 NONE SOURCE RESULT ALL AUTOMATIC |
|
||||||
|
|
@ -413,14 +437,14 @@ request.skipMemoryCache(true)
|
||||||
### ImageKnife 启动器/门面类
|
### ImageKnife 启动器/门面类
|
||||||
|
|
||||||
| 方法名 | 入参 | 接口描述 |
|
| 方法名 | 入参 | 接口描述 |
|
||||||
| ------------------------------- | ---------------------- | ---------------------------------- |
|
|---------------------------------|------------------------|-------------------|
|
||||||
| call(request: RequestOption) | request: RequestOption | 根据用户配置参数具体执行加载流程 |
|
| call(request: RequestOption) | request: RequestOption | 根据用户配置参数具体执行加载流程 |
|
||||||
| preload(request: RequestOption) | request: RequestOption | 根据用户配置参数具体执行预加载流程 |
|
| preload(request: RequestOption) | request: RequestOption | 根据用户配置参数具体执行预加载流程 |
|
||||||
|
|
||||||
### 缓存策略相关
|
### 缓存策略相关
|
||||||
|
|
||||||
| 使用方法 | 类型 | 策略描述 |
|
| 使用方法 | 类型 | 策略描述 |
|
||||||
| ------------------------------------------ | --------- | ---------------------------------------- |
|
|--------------------------------------------|-----------|----------------------|
|
||||||
| request.diskCacheStrategy(new ALL()) | ALL | 表示既缓存原始图片，也缓存转换过后的图片 |
|
| request.diskCacheStrategy(new ALL()) | ALL | 表示既缓存原始图片，也缓存转换过后的图片 |
|
||||||
| request.diskCacheStrategy(new AUTOMATIC()) | AUTOMATIC | 表示尝试对本地和远程图片使用适合的策略 |
|
| request.diskCacheStrategy(new AUTOMATIC()) | AUTOMATIC | 表示尝试对本地和远程图片使用适合的策略 |
|
||||||
| request.diskCacheStrategy(new DATA()) | DATA | 表示只缓存原始图片 |
|
| request.diskCacheStrategy(new DATA()) | DATA | 表示只缓存原始图片 |
|
||||||
|
|
@ -430,7 +454,7 @@ request.skipMemoryCache(true)
|
||||||
### ScaleType类型展示效果
|
### ScaleType类型展示效果
|
||||||
|
|
||||||
| 使用方法 | 类型 | 策略描述 |
|
| 使用方法 | 类型 | 策略描述 |
|
||||||
| ----------------------- | ---- | ---------------------------------------------------- |
|
|-------------------------|-----|-----------------------------------|
|
||||||
| ScaleType.FIT_START | int | 图像位于用户设置组件左上角显示,图像会缩放至全部展示 |
|
| ScaleType.FIT_START | int | 图像位于用户设置组件左上角显示,图像会缩放至全部展示 |
|
||||||
| ScaleType.FIT_END | int | 图像位于用户设置组件右下角显示,图像会缩放至全部展示 |
|
| ScaleType.FIT_END | int | 图像位于用户设置组件右下角显示,图像会缩放至全部展示 |
|
||||||
| ScaleType.FIT_CENTER | int | 图像位于用户设置组件居中,图像会缩放至全部展示 |
|
| ScaleType.FIT_CENTER | int | 图像位于用户设置组件居中,图像会缩放至全部展示 |
|
||||||
|
|
@ -443,7 +467,7 @@ request.skipMemoryCache(true)
|
||||||
### 图片变换相关
|
### 图片变换相关
|
||||||
|
|
||||||
| 使用方法 | 类型 | 相关描述 |
|
| 使用方法 | 类型 | 相关描述 |
|
||||||
| ------------------------------ | ---------------------------------- | ---------------------------------------------------- |
|
|--------------------------------|------------------------------------|----------------------------------|
|
||||||
| request.centerCrop() | CenterCrop | 可以根据图片文件，目标显示大小，进行对应centerCrop |
|
| request.centerCrop() | CenterCrop | 可以根据图片文件，目标显示大小，进行对应centerCrop |
|
||||||
| request.centerInside() | CenterInside | 可以根据图片文件，目标显示大小，进行对应centerInside |
|
| request.centerInside() | CenterInside | 可以根据图片文件，目标显示大小，进行对应centerInside |
|
||||||
| request.fitCenter() | FitCenter | 可以根据图片文件，目标显示大小，进行对应fitCenter |
|
| request.fitCenter() | FitCenter | 可以根据图片文件，目标显示大小，进行对应fitCenter |
|
||||||
|
|
@ -512,7 +536,10 @@ DevEco Studio 版本：4.0 Canary2(4.0.3.312), SDK: API10 (4.0.9.3)
|
||||||
- RequestOption.ets # 用户设置参数封装
|
- RequestOption.ets # 用户设置参数封装
|
||||||
|
|
||||||
/entry/src/
|
/entry/src/
|
||||||
- main/ets/MainAbility
|
- main/ets
|
||||||
|
- entryability
|
||||||
|
- CustomEngineKeyImpl.ets
|
||||||
|
- EntryAbility.ts
|
||||||
- pages # 测试page页面列表
|
- pages # 测试page页面列表
|
||||||
- basicTestFeatureAbilityPage.ets # 测试列表加载
|
- basicTestFeatureAbilityPage.ets # 测试列表加载
|
||||||
- basicTestFileIOPage.ets # 测试fileio
|
- basicTestFileIOPage.ets # 测试fileio
|
||||||
|
|
@ -540,14 +567,18 @@ DevEco Studio 版本：4.0 Canary2(4.0.3.312), SDK: API10 (4.0.9.3)
|
||||||
- testImageKnifeOptionChangedPage5.ets # 数据切换测试,ImageKnifeDrawFactory封装圆角圆环边框等
|
- testImageKnifeOptionChangedPage5.ets # 数据切换测试,ImageKnifeDrawFactory封装圆角圆环边框等
|
||||||
- testPreloadPage.ets # 预加载测试
|
- testPreloadPage.ets # 预加载测试
|
||||||
- transformPixelMapPage.ets # 所有类型变换测试
|
- transformPixelMapPage.ets # 所有类型变换测试
|
||||||
|
- testSingleFrameGifPage.ets # 单帧gif加载测试
|
||||||
- gifParseWorker.ts # gifworker子线程解析
|
- testGifLoadWithWorkerPage.ets # gif加载有无worker的影响测试
|
||||||
- worker1.js # worker多线程测试
|
-workers
|
||||||
|
- GifLoadWorkers.ts # gif子线程解析
|
||||||
|
- MyWorker.ts # worker使用示例
|
||||||
|
- PngLoadWorker.ts # png子线程解析
|
||||||
```
|
```
|
||||||
|
|
||||||
## 贡献代码
|
## 贡献代码
|
||||||
|
|
||||||
使用过程中发现任何问题都可以提 [issue](https://gitee.com/openharmony-tpc/ImageKnife/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/openharmony-tpc/ImageKnife/issues) 。
|
使用过程中发现任何问题都可以提 [issue](https://gitee.com/openharmony-tpc/ImageKnife/issues)
|
||||||
|
给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/openharmony-tpc/ImageKnife/issues) 。
|
||||||
|
|
||||||
## 开源协议
|
## 开源协议
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,20 @@
|
||||||
"signingConfig": "default"
|
"signingConfig": "default"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"signingConfigs": []
|
"signingConfigs": [
|
||||||
|
{
|
||||||
|
"name": "default",
|
||||||
|
"material": {
|
||||||
|
"certpath": "C:\\Users\\admin\\.ohos\\config\\openharmony\\auto_ohos_default_ImageKnife_com.openharmony.imageknife.cer",
|
||||||
|
"storePassword": "0000001B3AC9BCC9FC4C1EC6B2F892BA3D039A330151A3AB9DA17BBAACE0F312E52F6D6FC0AE585B7479F8",
|
||||||
|
"keyAlias": "debugKey",
|
||||||
|
"keyPassword": "0000001BA819F9A4DDFF14F3529073770609B0607886D8D748670E7BC8A5D0A2F750613562B838B0D78F98",
|
||||||
|
"profile": "C:\\Users\\admin\\.ohos\\config\\openharmony\\auto_ohos_default_ImageKnife_com.openharmony.imageknife.p7b",
|
||||||
|
"signAlg": "SHA256withECDSA",
|
||||||
|
"storeFile": "C:\\Users\\admin\\.ohos\\config\\openharmony\\auto_ohos_default_ImageKnife_com.openharmony.imageknife.p12"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
},
|
},
|
||||||
"modules": [
|
"modules": [
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,9 @@
|
||||||
"buildOption": {
|
"buildOption": {
|
||||||
"sourceOption": {
|
"sourceOption": {
|
||||||
"workers": [
|
"workers": [
|
||||||
"./src/main/ets/pages/workers/worker1.js",
|
'./src/main/ets/workers/GifLoadWorker.ts',
|
||||||
"./src/main/ets/pages/workers/gifParseWorker.ts",
|
'./src/main/ets/workers/PngLoadWorker.ts',
|
||||||
|
'./src/main/ets/workers/MyWorker.ts'
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -21,21 +21,6 @@ import abilityAccessCtrl,{Permissions} from '@ohos.abilityAccessCtrl';
|
||||||
|
|
||||||
|
|
||||||
export default class EntryAbility extends UIAbility {
|
export default class EntryAbility extends UIAbility {
|
||||||
onCreate(want, launchParam) {
|
|
||||||
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
|
|
||||||
globalThis.ImageKnife = ImageKnife.with(this.context);
|
|
||||||
// 全局配置网络加载进度条
|
|
||||||
globalThis.ImageKnife.setDefaultLifeCycle(ImageKnifeDrawFactory.createProgressLifeCycle("#10a5ff", 0.5))
|
|
||||||
// 全局配置缓存key
|
|
||||||
globalThis.ImageKnife.setEngineKeyImpl(new CustomEngineKeyImpl())
|
|
||||||
|
|
||||||
LogUtil.mLogLevel = LogUtil.ALL
|
|
||||||
}
|
|
||||||
|
|
||||||
onDestroy() {
|
|
||||||
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
|
|
||||||
}
|
|
||||||
|
|
||||||
onWindowStageCreate(windowStage: window.WindowStage) {
|
onWindowStageCreate(windowStage: window.WindowStage) {
|
||||||
// Main window is created, set main page for this ability
|
// Main window is created, set main page for this ability
|
||||||
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
|
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
|
||||||
|
|
@ -59,20 +44,13 @@ export default class EntryAbility extends UIAbility {
|
||||||
}
|
}
|
||||||
hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
|
hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
|
||||||
onWindowStageDestroy() {
|
globalThis.ImageKnife = ImageKnife.with(this.context);
|
||||||
// Main window is destroyed, release UI related resources
|
// 全局配置网络加载进度条
|
||||||
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
|
globalThis.ImageKnife.setDefaultLifeCycle(ImageKnifeDrawFactory.createProgressLifeCycle("#10a5ff", 0.5))
|
||||||
}
|
// 全局配置缓存key
|
||||||
|
globalThis.ImageKnife.setEngineKeyImpl(new CustomEngineKeyImpl())
|
||||||
onForeground() {
|
//开启ImageKnife所有级别日志开关
|
||||||
// Ability has brought to foreground
|
LogUtil.mLogLevel = LogUtil.ALL
|
||||||
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
|
|
||||||
}
|
|
||||||
|
|
||||||
onBackground() {
|
|
||||||
// Ability has back to background
|
|
||||||
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -224,16 +224,17 @@ struct IndexFunctionDemo {
|
||||||
router.pushUrl({ url: "pages/testSingleFrameGifPage" });
|
router.pushUrl({ url: "pages/testSingleFrameGifPage" });
|
||||||
}).margin({ top: 5, left: 3 })
|
}).margin({ top: 5, left: 3 })
|
||||||
}.width('100%').height(60).backgroundColor(Color.Pink)
|
}.width('100%').height(60).backgroundColor(Color.Pink)
|
||||||
|
|
||||||
|
Text("worker测试").fontSize(15)
|
||||||
|
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||||
|
Button("gif加载有无worker的区别测试")
|
||||||
|
.onClick(() => {
|
||||||
|
router.pushUrl({ url: "pages/testGifLoadWithWorkerPage" });
|
||||||
|
}).margin({ top: 5, left: 3 })
|
||||||
|
}.width('100%').height(60).backgroundColor(Color.Pink)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.width('100%')
|
.width('100%')
|
||||||
.height('100%')
|
.height('100%')
|
||||||
}
|
}
|
||||||
|
|
||||||
aboutToAppear() {
|
|
||||||
}
|
|
||||||
|
|
||||||
onBackPress() {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
@ -12,26 +12,21 @@
|
||||||
* See the License for the specific language governing permissions and
|
* See the License for the specific language governing permissions and
|
||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
*/
|
*/
|
||||||
import router from '@system.router';
|
import router from '@ohos.router'
|
||||||
import {
|
import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/imageknife'
|
||||||
ImageKnifeComponent,
|
import worker from '@ohos.worker';
|
||||||
ImageKnifeOption,
|
|
||||||
} from '@ohos/imageknife'
|
|
||||||
import ArkWorker from '@ohos.worker'
|
|
||||||
@Entry
|
@Entry
|
||||||
@Component
|
@Component
|
||||||
struct IndexFunctionDemo {
|
struct IndexFunctionDemo {
|
||||||
private globalGifWorker: any = undefined
|
private globalGifWorker: any = undefined
|
||||||
@State imageKnifeOption1: ImageKnifeOption =
|
@State imageKnifeOption1: ImageKnifeOption = {
|
||||||
{
|
|
||||||
loadSrc: $r('app.media.icon'),
|
loadSrc: $r('app.media.icon'),
|
||||||
|
|
||||||
placeholderSrc: $r('app.media.icon_loading'),
|
placeholderSrc: $r('app.media.icon_loading'),
|
||||||
errorholderSrc: $r('app.media.icon_failed')
|
errorholderSrc: $r('app.media.icon_failed')
|
||||||
};
|
};
|
||||||
|
@State imageKnifeOption2: ImageKnifeOption = {
|
||||||
@State imageKnifeOption2: ImageKnifeOption =
|
|
||||||
{
|
|
||||||
loadSrc: $r('app.media.icon'),
|
loadSrc: $r('app.media.icon'),
|
||||||
|
|
||||||
placeholderSrc: $r('app.media.icon_loading'),
|
placeholderSrc: $r('app.media.icon_loading'),
|
||||||
|
|
@ -85,20 +80,16 @@ struct IndexFunctionDemo {
|
||||||
}
|
}
|
||||||
|
|
||||||
aboutToAppear() {
|
aboutToAppear() {
|
||||||
this.globalGifWorker = new ArkWorker.Worker('entry/ets/pages/workers/gifParseWorker.ts', {
|
//替代过时的ArkWorker.Worker
|
||||||
type: 'classic',
|
this.globalGifWorker = new worker.ThreadWorker('entry/ets/workers/GifLoadWorker.ts')
|
||||||
name: 'ImageKnifeParseGIF'
|
|
||||||
})
|
|
||||||
// gif解析在子线程,请在页面构建后创建worker,注入imageknife
|
// gif解析在子线程,请在页面构建后创建worker,注入imageknife
|
||||||
globalThis.ImageKnife.setGifWorker(this.globalGifWorker)
|
globalThis.ImageKnife.setGifWorker(this.globalGifWorker)
|
||||||
}
|
}
|
||||||
|
|
||||||
aboutToDisappear() {
|
aboutToDisappear() {
|
||||||
|
// 页面销毁 销毁worker
|
||||||
if (this.globalGifWorker) {
|
if (this.globalGifWorker) {
|
||||||
this.globalGifWorker.terminate();
|
this.globalGifWorker.terminate();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onBackPress() {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
@ -18,6 +18,7 @@ import resourceManager from '@ohos.resourceManager';
|
||||||
import { FileUtils } from '@ohos/imageknife'
|
import { FileUtils } from '@ohos/imageknife'
|
||||||
import featureability from '@ohos.ability.featureAbility'
|
import featureability from '@ohos.ability.featureAbility'
|
||||||
import ArkWorker from '@ohos.worker'
|
import ArkWorker from '@ohos.worker'
|
||||||
|
import worker from '@ohos.worker';
|
||||||
|
|
||||||
@Entry
|
@Entry
|
||||||
@Component
|
@Component
|
||||||
|
|
@ -109,11 +110,8 @@ struct PngjTestCasePage {
|
||||||
if (!this.pngdecodeRun2) {
|
if (!this.pngdecodeRun2) {
|
||||||
this.pngdecodeRun2 = true;
|
this.pngdecodeRun2 = true;
|
||||||
let pngj = new Pngj();
|
let pngj = new Pngj();
|
||||||
let worker = new ArkWorker.Worker('entry/ets/pages/workers/worker1.js', {
|
let png_load_worker = new worker.ThreadWorker('entry/ets/workers/PngLoadWorker.ts')
|
||||||
type: 'classic',
|
pngj.readPngImageAsync(png_load_worker, this.pngSource1, (sender, value) => {
|
||||||
name: 'readPngImageAsync'
|
|
||||||
})
|
|
||||||
pngj.readPngImageAsync(worker, this.pngSource1, (sender, value) => {
|
|
||||||
this.pngSource1 = sender
|
this.pngSource1 = sender
|
||||||
this.hint2 = 'img with=' + value.width + ' img height=' + value.height
|
this.hint2 = 'img with=' + value.width + ' img height=' + value.height
|
||||||
+ ' img depth=' + value.depth + ' img ctype=' + value.ctype
|
+ ' img depth=' + value.depth + ' img ctype=' + value.ctype
|
||||||
|
|
@ -154,11 +152,8 @@ struct PngjTestCasePage {
|
||||||
if (!this.pngdecodeRun3) {
|
if (!this.pngdecodeRun3) {
|
||||||
this.pngdecodeRun3 = true;
|
this.pngdecodeRun3 = true;
|
||||||
let pngj = new Pngj();
|
let pngj = new Pngj();
|
||||||
let worker = new ArkWorker.Worker('entry/ets/pages/workers/worker1.js', {
|
let png_load_worker = new worker.ThreadWorker('entry/ets/workers/PngLoadWorker.ts')
|
||||||
type: 'classic',
|
pngj.writePngWithStringAsync(png_load_worker, 'hello world', this.pngSource3, (sender, value) => {
|
||||||
name: 'writePngWithStringAsync'
|
|
||||||
})
|
|
||||||
pngj.writePngWithStringAsync(worker, 'hello world', this.pngSource3, (sender, value) => {
|
|
||||||
this.pngSource3 = sender
|
this.pngSource3 = sender
|
||||||
FileUtils.getInstance().createFileProcess(
|
FileUtils.getInstance().createFileProcess(
|
||||||
this.rootFolder + '/pngj',
|
this.rootFolder + '/pngj',
|
||||||
|
|
@ -204,11 +199,8 @@ struct PngjTestCasePage {
|
||||||
if (!this.pngdecodeRun4) {
|
if (!this.pngdecodeRun4) {
|
||||||
this.pngdecodeRun4 = true;
|
this.pngdecodeRun4 = true;
|
||||||
let pngj = new Pngj();
|
let pngj = new Pngj();
|
||||||
let worker = new ArkWorker.Worker('entry/ets/pages/workers/worker1.js', {
|
let png_load_worker = new worker.ThreadWorker('entry/ets/workers/PngLoadWorker.ts')
|
||||||
type: 'classic',
|
pngj.writePngAsync(png_load_worker, this.pngSource4, (sender, value) => {
|
||||||
name: 'writePngAsync'
|
|
||||||
})
|
|
||||||
pngj.writePngAsync(worker, this.pngSource4, (sender, value) => {
|
|
||||||
this.pngSource4 = sender
|
this.pngSource4 = sender
|
||||||
FileUtils.getInstance().createFileProcess(
|
FileUtils.getInstance().createFileProcess(
|
||||||
this.rootFolder + '/pngj',
|
this.rootFolder + '/pngj',
|
||||||
|
|
|
||||||
|
|
@ -52,8 +52,8 @@ struct TestSingleFrameGifPage {
|
||||||
})
|
})
|
||||||
ImageKnifeComponent({ imageKnifeOption: this.options })
|
ImageKnifeComponent({ imageKnifeOption: this.options })
|
||||||
.margin(16)
|
.margin(16)
|
||||||
.width(300)
|
.width(200)
|
||||||
.height(300)
|
.height(200)
|
||||||
}
|
}
|
||||||
.width("100%")
|
.width("100%")
|
||||||
.height("100%")
|
.height("100%")
|
||||||
|
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
/*
|
|
||||||
* Copyright (C) 2022 Huawei Device Co., Ltd.
|
|
||||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
|
||||||
* you may not use this file except in compliance with the License.
|
|
||||||
* You may obtain a copy of the License at
|
|
||||||
*
|
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
*
|
|
||||||
* Unless required by applicable law or agreed to in writing, software
|
|
||||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
|
||||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
* See the License for the specific language governing permissions and
|
|
||||||
* limitations under the License.
|
|
||||||
*/
|
|
||||||
import arkWorker from '@ohos.worker';
|
|
||||||
import { gifHandler } from '@ohos/imageknife/GifWorker'
|
|
||||||
|
|
||||||
arkWorker.parentPort.onmessage = gifHandler;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
/*
|
|
||||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
|
||||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
* you may not use this file except in compliance with the License.
|
|
||||||
* You may obtain a copy of the License at
|
|
||||||
*
|
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
*
|
|
||||||
* Unless required by applicable law or agreed to in writing, software
|
|
||||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
* See the License for the specific language governing permissions and
|
|
||||||
* limitations under the License.
|
|
||||||
*/
|
|
||||||
import arkWorker from '@ohos.worker';
|
|
||||||
|
|
||||||
import {handler} from '@ohos/imageknife/PngWork'
|
|
||||||
|
|
||||||
arkWorker.parentPort.onmessage = handler
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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 worker, { ThreadWorkerGlobalScope, MessageEvents, ErrorEvent } from '@ohos.worker';
|
||||||
|
import { gifHandler } from '@ohos/imageknife/GifWorker'
|
||||||
|
|
||||||
|
var workerPort: ThreadWorkerGlobalScope = worker.workerPort;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines the event handler to be called when the worker thread receives a message sent by the host thread.
|
||||||
|
* The event handler is executed in the worker thread.
|
||||||
|
*
|
||||||
|
* 代码参考自@ohos/imageknife/GifWorker中gifHandler方法
|
||||||
|
*
|
||||||
|
* @param e message data
|
||||||
|
*/
|
||||||
|
workerPort.onmessage = gifHandler
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines the event handler to be called when the worker receives a message that cannot be deserialized.
|
||||||
|
* The event handler is executed in the worker thread.
|
||||||
|
*
|
||||||
|
* @param e message data
|
||||||
|
*/
|
||||||
|
workerPort.onmessageerror = function (e: MessageEvents) {
|
||||||
|
console.log("GifLoadWorker.ts workerPort.onmessageerror: " + e.data)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines the event handler to be called when an exception occurs during worker execution.
|
||||||
|
* The event handler is executed in the worker thread.
|
||||||
|
*
|
||||||
|
* @param e error message
|
||||||
|
*/
|
||||||
|
workerPort.onerror = function (e: ErrorEvent) {
|
||||||
|
console.log("GifLoadWorker.ts workerPort.onerror: " + e.message)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
/*
|
||||||
|
* 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 worker, { ThreadWorkerGlobalScope, MessageEvents, ErrorEvent } from '@ohos.worker';
|
||||||
|
|
||||||
|
var workerPort: ThreadWorkerGlobalScope = worker.workerPort;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines the event handler to be called when the worker thread receives a message sent by the host thread.
|
||||||
|
* The event handler is executed in the worker thread.
|
||||||
|
*
|
||||||
|
* @param e message data
|
||||||
|
*/
|
||||||
|
workerPort.onmessage = function (e: MessageEvents) {
|
||||||
|
console.log("MyWorker.ts workerPort.onmessage:" + e.data)
|
||||||
|
|
||||||
|
//子线程向主线程发送消息
|
||||||
|
workerPort.postMessage("天天向上")
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines the event handler to be called when the worker receives a message that cannot be deserialized.
|
||||||
|
* The event handler is executed in the worker thread.
|
||||||
|
*
|
||||||
|
* @param e message data
|
||||||
|
*/
|
||||||
|
workerPort.onmessageerror = function (e: MessageEvents) {
|
||||||
|
console.log("MyWorker.ts workerPort.onmessageerror")
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines the event handler to be called when an exception occurs during worker execution.
|
||||||
|
* The event handler is executed in the worker thread.
|
||||||
|
*
|
||||||
|
* @param e error message
|
||||||
|
*/
|
||||||
|
workerPort.onerror = function (e: ErrorEvent) {
|
||||||
|
console.log("MyWorker.ts workerPort.onerror")
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
/*
|
||||||
|
* 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 worker, { ThreadWorkerGlobalScope, MessageEvents, ErrorEvent } from '@ohos.worker';
|
||||||
|
import { UPNG } from '@ohos/imageknife/src/main/ets/components/3rd_party/upng/UPNG'
|
||||||
|
|
||||||
|
var workerPort: ThreadWorkerGlobalScope = worker.workerPort;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines the event handler to be called when the worker thread receives a message sent by the host thread.
|
||||||
|
* The event handler is executed in the worker thread.
|
||||||
|
*
|
||||||
|
* @param e message data
|
||||||
|
*/
|
||||||
|
workerPort.onmessage = function (e: MessageEvents) {
|
||||||
|
var data = e.data;
|
||||||
|
switch (data.type) {
|
||||||
|
case 'readPngImageAsync':
|
||||||
|
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 }
|
||||||
|
workerPort.postMessage(dataObj, [png.data, data.data]);
|
||||||
|
break;
|
||||||
|
case 'writePngWithStringAsync':
|
||||||
|
let addInfo = data.info;
|
||||||
|
let pngDecode = UPNG.decode(data.data);
|
||||||
|
let newPng = UPNG.encodeWithString(addInfo, UPNG.toRGBA8(pngDecode), pngDecode.width, pngDecode.height, 0)
|
||||||
|
let dataObj2 = { type: 'writePngWithStringAsync', data: newPng, receiver: data.data }
|
||||||
|
workerPort.postMessage(dataObj2, [newPng, data.data]);
|
||||||
|
break;
|
||||||
|
case 'writePngAsync':
|
||||||
|
let pngDecode3 = UPNG.decode(data.data);
|
||||||
|
let newPng3 = UPNG.encode(UPNG.toRGBA8(pngDecode3), pngDecode3.width, pngDecode3.height, 0)
|
||||||
|
let dataObj3 = { type: 'writePngAsync', data: newPng3, receiver: data.data }
|
||||||
|
workerPort.postMessage(dataObj3, [newPng3, data.data]);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines the event handler to be called when the worker receives a message that cannot be deserialized.
|
||||||
|
* The event handler is executed in the worker thread.
|
||||||
|
*
|
||||||
|
* @param e message data
|
||||||
|
*/
|
||||||
|
workerPort.onmessageerror = function (e: MessageEvents) {
|
||||||
|
console.log("PngLoadWorker.ts workerPort.onmessageerror: " + e.data)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines the event handler to be called when an exception occurs during worker execution.
|
||||||
|
* The event handler is executed in the worker thread.
|
||||||
|
*
|
||||||
|
* @param e error message
|
||||||
|
*/
|
||||||
|
workerPort.onerror = function (e: ErrorEvent) {
|
||||||
|
console.log("PngLoadWorker.ts workerPort.onerror: " + e.message)
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
|
|
@ -28,6 +28,7 @@
|
||||||
"pages/manyPhotoShowPage",
|
"pages/manyPhotoShowPage",
|
||||||
"pages/tempUrlTestPage",
|
"pages/tempUrlTestPage",
|
||||||
"pages/drawFactoryTestPage",
|
"pages/drawFactoryTestPage",
|
||||||
"pages/testSingleFrameGifPage"
|
"pages/testSingleFrameGifPage",
|
||||||
|
"pages/testGifLoadWithWorkerPage"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -12,13 +12,15 @@
|
||||||
* See the License for the specific language governing permissions and
|
* See the License for the specific language governing permissions and
|
||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
*/
|
*/
|
||||||
import arkWorker from '@ohos.worker';
|
import worker, { ThreadWorkerGlobalScope } from '@ohos.worker';
|
||||||
import { parseBufferToFrame } from './src/main/ets/components/imageknife/utils/gif/parse/GIFParse'
|
import { parseBufferToFrame } from './src/main/ets/components/imageknife/utils/gif/parse/GIFParse'
|
||||||
|
|
||||||
export enum LoadType {
|
export enum LoadType {
|
||||||
loadBufferByWorker = "loadBufferByWorker"
|
loadBufferByWorker = "loadBufferByWorker"
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var workerPort : ThreadWorkerGlobalScope = worker.workerPort;
|
||||||
|
|
||||||
// Send or Receive Format Data Such as: {type: yourResolveType, data: yourDataJson, error?: yourErrorInfo }
|
// Send or Receive Format Data Such as: {type: yourResolveType, data: yourDataJson, error?: yourErrorInfo }
|
||||||
export function gifHandler(e) {
|
export function gifHandler(e) {
|
||||||
let data = e.data;
|
let data = e.data;
|
||||||
|
|
@ -56,7 +58,7 @@ export function gifHandler(e) {
|
||||||
transparentIndex: transparentIndexs
|
transparentIndex: transparentIndexs
|
||||||
}
|
}
|
||||||
let dataObj = { type: recType, data: frame }
|
let dataObj = { type: recType, data: frame }
|
||||||
arkWorker.parentPort.postMessage(dataObj, patchs);
|
workerPort.postMessage(dataObj, patchs)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Loading…
Reference in New Issue