!60 新增自定义key参数配置

Merge pull request !60 from 明月清风/master
This commit is contained in:
openharmony_ci 2023-10-23 09:03:00 +00:00 committed by Gitee
commit 9708de4ac0
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
16 changed files with 226 additions and 50 deletions

View File

@ -1,10 +1,14 @@
## 2.1.1-rc.1
- 新增自定义key参数配置
## 2.1.1-rc.0
- 修复不兼容API9问题
- 修复不兼容API9问题
## 2.1.0
- ArkTs语法适配:
- ArkTs语法整改:
globalThis.ImageKnife方式已经不可使用

View File

@ -195,7 +195,7 @@ struct IndexFunctionDemo {
}
```
#### 5.创建worker
### 5.创建worker
由于使用到了worker目前worker创建只能在entry里面所以我这边着重讲一下worker配置的流程。
@ -227,6 +227,21 @@ workerPort.onmessage = gifHandler
经过了上面的配置就配置好了worker,GIF图片加载就能顺利进行了。 如果GIF加载未成功可以检查一下worker配置是否完成或者参考entry/src/main/ets/pages/testGifLoadWithWorkerPage.ets中的gif加载写法。
### 6.自定义Key
因为通常改变标识符比较困难或者根本不可能所以ImageKnife也提供了 签名 API 来混合(你可以控制的)额外数据到你的缓存键中。
签名(signature)适用于媒体内容,也适用于你可以自行维护的一些版本元数据。
将签名传入加载请求
```extendtypescript
imageKnifeOption = {
loadSrc: 'https://aahyhy.oss-cn-beijing.aliyuncs.com/blue.jpg',
signature: new ObjectKey(new Date().getTime().toString())
}
```
详细样例请参考SignatureTestPage文件
代码示例
## 进阶使用
如果简单的加载一张图像无法满足需求我们可以看看ImageKnifeOption这个类提供了哪些扩展能力。
@ -256,6 +271,7 @@ workerPort.onmessage = gifHandler
| transformation | BaseTransform<PixelMap> | 单个变换(可选) |
| transformations | Array<BaseTransform<PixelMap>> | 多个变换,目前仅支持单个变换(可选) |
| allCacheInfoCallback | IAllCacheInfoCallback | 输出缓存相关内容和信息(可选) |
| signature | ObjectKey | 自定key可选 |
| **drawLifeCycle** | **IDrawLifeCycle** | **用户自定义实现绘制方案(可选)** |
其他参数只需要在ImageKnifeOption对象上按需添加即可。
@ -445,7 +461,8 @@ request.skipMemoryCache(true)
| addAllCacheInfoCallback(func: IAllCacheInfoCallback) | func: IAllCacheInfoCallback | 设置获取所有缓存信息监听 |
| skipMemoryCache(skip: boolean) | skip: boolean | 配置是否跳过内存缓存 |
| retrieveDataFromCache(flag: boolean) | flag: boolean | 配置仅从缓存中加载数据 |
| signature | ObjectKey | 自定义key |
同时支持[图片变换相关](#图片变换相关)接口。
### ImageKnife 启动器/门面类
@ -570,6 +587,7 @@ DevEco Studio 4.0 Release4.0.3.413--SDK 4.0.10.3原型机NOH-AN00
- loadNetworkTestCasePage.ets # 网络加载测试
- loadResourceTestCasePage.ets # 本地加载测试
- showErrorholderTestCasePage.ets # 加载失败占位图测试
- SignatureTestPage.ets # 自定义key测试
- storageTestDiskLruCache.ets # 磁盘缓存测试
- storageTestLruCache.ets # 内存缓存测试
- testAllCacheInfoPage.ets # 所有缓存信息获取测试
@ -583,6 +601,7 @@ DevEco Studio 4.0 Release4.0.3.413--SDK 4.0.10.3原型机NOH-AN00
- transformPixelMapPage.ets # 所有类型变换测试
- testSingleFrameGifPage.ets # 单帧gif加载测试
- testGifLoadWithWorkerPage.ets # gif加载有无worker的影响测试
- OptionTestPage.ets # 图片缓存测试
-workers
- GifLoadWorkers.ts # gif子线程解析
- MyWorker.ts # worker使用示例

View File

@ -13,6 +13,7 @@
* limitations under the License.
*/
import { EngineKeyFactories, EngineKeyInterface, RequestOption } from '@ohos/imageknife'
import { ObjectKey } from '@ohos/imageknife/src/main/ets/components/imageknife/ObjectKey';
export class CustomEngineKeyImpl implements EngineKeyInterface {
redefineUrl: (loadSrc: string) => string;
@ -21,22 +22,23 @@ export class CustomEngineKeyImpl implements EngineKeyInterface {
constructor() {
this.redefineUrl = this.urlNeedClearToken;
}
// request只读
generateMemoryCacheKey(loadSrc: string, size: string, transformed: string, dontAnimate: boolean): string {
return EngineKeyFactories.createMemoryCacheKey(loadSrc, size, transformed, dontAnimate, this.redefineUrl, this.addOtherInfo);
generateMemoryCacheKey(loadSrc: string, size: string, transformed: string, dontAnimate: boolean, signature: ObjectKey): string {
return EngineKeyFactories.createMemoryCacheKey(loadSrc, size, transformed, dontAnimate, signature, this.redefineUrl, this.addOtherInfo);
}
generateTransformedDiskCacheKey(loadSrc: string, size: string, transformed: string, dontAnimate: boolean): string {
return EngineKeyFactories.createTransformedDiskCacheKey(loadSrc, size, transformed, dontAnimate, this.redefineUrl, this.addOtherInfo);
generateTransformedDiskCacheKey(loadSrc: string, size: string, transformed: string, dontAnimate: boolean, signature: ObjectKey): string {
return EngineKeyFactories.createTransformedDiskCacheKey(loadSrc, size, transformed, dontAnimate, signature, this.redefineUrl, this.addOtherInfo);
}
generateOriginalDiskCacheKey(loadSrc: string): string {
return EngineKeyFactories.createOriginalDiskCacheKey(loadSrc, this.redefineUrl, this.addOtherInfo);
generateOriginalDiskCacheKey(loadSrc: string, signature: ObjectKey): string {
return EngineKeyFactories.createOriginalDiskCacheKey(loadSrc, signature, this.redefineUrl, this.addOtherInfo);
}
// 需求场景: 请求图片可能 请求中存在token需要清除 可以把输入的url清除token后作为key的一部分这样token发生变化也能命中缓存。
urlNeedClearToken = (url: string)=>{
urlNeedClearToken = (url: string) => {
if (this.isHttpRequest(url)) {
return this.clearToken(url)
} else {
@ -44,7 +46,6 @@ export class CustomEngineKeyImpl implements EngineKeyInterface {
}
}
isHttpRequest(loadSrc: string) {
if (typeof loadSrc == "string" && loadSrc.toLowerCase().startsWith("http")) {
return true;

View File

@ -0,0 +1,77 @@
/*
* Copyright (C) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ImageKnifeComponent, ImageKnifeOption, NONE, DiskStrategy } from '@ohos/imageknife'
import { ObjectKey } from '@ohos/imageknife/src/main/ets/components/imageknife/ObjectKey';
@Entry
@Component
struct SignatureTestPage {
@State imageKnifeOption1: ImageKnifeOption =
{
loadSrc: $r('app.media.icon'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
};
@State imageKnifeOption2: ImageKnifeOption =
{
loadSrc: $r('app.media.icon'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed')
};
build() {
Scroll() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text("Signature固定为 1").fontSize(15)
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Button("加载")
.onClick(() => {
this.imageKnifeOption1 = {
loadSrc: 'https://img-blog.csdn.net/20140514114029140',
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
signature: new ObjectKey("1")
}
}).margin({ top: 5, left: 3 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
}.width('100%').backgroundColor(Color.Pink)
Text("设置Signature每次为时间戳").fontSize(15)
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Button("加载")
.onClick(() => {
this.imageKnifeOption2 = {
loadSrc: 'https://img-blog.csdn.net/20140514114029140',
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
signature: new ObjectKey(new Date().getTime().toString())
}
}).margin({ top: 5, left: 3 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }).width(300).height(300)
}.width('100%').backgroundColor(Color.Pink)
}
}.width('100%')
.height('100%')
}
aboutToAppear() {
console.log("唯一标识页面:" + new ObjectKey(new Date().getTime().toString()).getKey())
}
}

View File

@ -144,13 +144,24 @@ struct IndexFunctionDemo {
console.log("加载媒体库uri")
router.pushUrl({ url: "pages/dataShareUriLoadPage" });
}).margin({ top: 5, left: 3 })
}.width('100%').height(60).backgroundColor(Color.Pink)
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Button("测试Option缓存是否生效")
.onClick(() => {
console.log("加载媒体库uri")
console.log("测试Option缓存是否生效")
router.pushUrl({ url: "pages/OptionTestPage" });
}).margin({ top: 5, left: 3 })
Button("测试Signature自定义缓存")
.onClick(() => {
console.log("测试Signature自定义缓存")
router.pushUrl({ url: "pages/SignatureTestPage" });
}).margin({ top: 5, left: 3 })
}.width('100%').height(60).backgroundColor(Color.Pink)
Text("测试pngj和裁剪").fontSize(15)
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Button("测试pngj")

View File

@ -20,6 +20,7 @@ import {
ImageKnife
} from '@ohos/imageknife'
import worker from '@ohos.worker';
import { ObjectKey } from '@ohos/imageknife/src/main/ets/components/imageknife/ObjectKey';
@Entry
@Component
@ -52,7 +53,8 @@ struct IndexFunctionDemo {
loadSrc: $r('app.media.pngSample'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed')
errorholderSrc: $r('app.media.icon_failed'),
signature: new ObjectKey('ccccccc')
}
}).margin({ top: 5, left: 3 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)

View File

@ -30,6 +30,7 @@
"pages/drawFactoryTestPage",
"pages/testSingleFrameGifPage",
"pages/testGifLoadWithWorkerPage",
"pages/OptionTestPage"
"pages/OptionTestPage",
"pages/SignatureTestPage"
]
}

View File

@ -14,7 +14,7 @@
"main": "index.ets",
"repository": "https://gitee.com/openharmony-tpc/ImageKnife",
"type": "module",
"version": "2.1.1-rc.0",
"version": "2.1.1-rc.1",
"dependencies": {
"@ohos/disklrucache": "^2.0.2-rc.0",
"@ohos/svg": "^2.1.1-rc.0",

View File

@ -12,40 +12,47 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {Key} from "../key/Key"
import {RequestOption} from '../../imageknife/RequestOption'
import {BaseTransform} from '../../imageknife/transform/BaseTransform'
import { Key } from "../key/Key"
import { RequestOption } from '../../imageknife/RequestOption'
import { BaseTransform } from '../../imageknife/transform/BaseTransform'
import { ObjectKey } from '../../imageknife/ObjectKey';
export class EngineKey implements Key {
// 内存缓存 缓存生成规则:是否会影响图片内容,不影响则通用(strategy onlyRetrieveFromCache isCacheable)为通用项目
// 生成规则 加载数据原 各类参数(排除监听 排除 占位图 失败占位图)
public static generateMemoryCacheKey(loadSrc:string,size:string,transformed:string,dontAnimate:boolean, redefine?:(loadSrc:string)=>string, otherInfo?:string): string{
public static generateMemoryCacheKey(loadSrc: string, size: string, transformed: string, dontAnimate: boolean,signature?: ObjectKey, redefine?: (loadSrc: string) => string, otherInfo?: string): string {
if(redefine){
if (redefine) {
loadSrc = redefine(loadSrc);
}
let key = "loadSrc=" + loadSrc + ";" +
"size=" + size + ";" +
"transformations=" + transformed + ";" +
"dontAnimateFlag=" + dontAnimate + ";"
if(otherInfo){
"size=" + size + ";" +
"transformations=" + transformed + ";" +
"dontAnimateFlag=" + dontAnimate + ";"
if (signature) {
key += "signature=" + signature.getKey() + ";"
}
if (otherInfo) {
key += otherInfo;
}
return key;
}
// 磁盘缓存 缓存生成规则:是否会影响图片内容,不影响则通用(strategy onlyRetrieveFromCache isCacheable)为通用项目
// 生成规则 加载数据原 各类参数(排除监听 排除 占位图 失败占位图)
public static generateTransformedDiskCacheKey(loadSrc:string,size:string,transformed:string,dontAnimate:boolean, redefine?:(loadSrc:string)=>string, otherInfo?:string): string{
if(redefine){
public static generateTransformedDiskCacheKey(loadSrc: string, size: string, transformed: string, dontAnimate: boolean, signature?: ObjectKey, redefine?: (loadSrc: string) => string, otherInfo?: string): string {
if (redefine) {
loadSrc = redefine(loadSrc);
}
let key = "loadSrc=" + loadSrc + ";" +
"size=" + size + ";" +
"transformations=" + transformed + ";" +
"dontAnimateFlag=" + dontAnimate + ";"
if(otherInfo){
"size=" + size + ";" +
"transformations=" + transformed + ";" +
"dontAnimateFlag=" + dontAnimate + ";"
if (signature) {
key += "signature=" + signature.getKey() + ";"
}
if (otherInfo) {
key += otherInfo;
}
return key;
@ -53,12 +60,15 @@ export class EngineKey implements Key {
// 磁盘缓存
// 生成网络加载数据 原始数据存于磁盘的key
public static generateOriginalDiskCacheKey(loadSrc:string, redefine?:(loadSrc:string)=>string, otherInfo?:string): string{
if(redefine){
public static generateOriginalDiskCacheKey(loadSrc: string,signature?: ObjectKey, redefine?: (loadSrc: string) => string, otherInfo?: string): string {
if (redefine) {
loadSrc = redefine(loadSrc);
}
let key = "loadSrc=" + loadSrc + ";"
if(otherInfo){
if (signature) {
key += "signature=" + signature.getKey() + ";"
}
if (otherInfo) {
key += otherInfo;
}
return key;

View File

@ -15,32 +15,33 @@
import {EngineKey} from '../key/EngineKey'
import {EngineKeyInterface} from '../key/EngineKeyInterface'
import {RequestOption} from '../../imageknife/RequestOption'
import { ObjectKey } from '../../imageknife/ObjectKey';
export class EngineKeyFactories implements EngineKeyInterface {
// 生成内存缓存
generateMemoryCacheKey(loadSrc:string,size:string,transformed:string,dontAnimate:boolean) {
generateMemoryCacheKey(loadSrc:string,size:string,transformed:string,dontAnimate:boolean,signature: ObjectKey) {
return EngineKey.generateMemoryCacheKey(loadSrc,size,transformed,dontAnimate);
}
// 生成原图变换后的图片的磁盘缓存
generateTransformedDiskCacheKey(loadSrc:string,size:string,transformed:string,dontAnimate:boolean) {
generateTransformedDiskCacheKey(loadSrc:string,size:string,transformed:string,dontAnimate:boolean,signature: ObjectKey) {
return EngineKey.generateTransformedDiskCacheKey(loadSrc,size,transformed,dontAnimate);
}
// 生成原图的磁盘缓存
generateOriginalDiskCacheKey(loadSrc:string) {
generateOriginalDiskCacheKey(loadSrc:string,signature: ObjectKey) {
return EngineKey.generateOriginalDiskCacheKey(loadSrc);
}
public static createMemoryCacheKey(loadSrc:string,size:string,transformed:string,dontAnimate:boolean, redefineUrl?:(loadSrc:string)=>string, addOtherInfo?:string):string{
return EngineKey.generateMemoryCacheKey(loadSrc,size,transformed,dontAnimate,redefineUrl,addOtherInfo);
public static createMemoryCacheKey(loadSrc:string,size:string,transformed:string,dontAnimate:boolean,signature: ObjectKey, redefineUrl?:(loadSrc:string)=>string, addOtherInfo?:string):string{
return EngineKey.generateMemoryCacheKey(loadSrc,size,transformed,dontAnimate,signature,redefineUrl,addOtherInfo);
}
public static createTransformedDiskCacheKey(loadSrc:string,size:string,transformed:string,dontAnimate:boolean, redefineUrl?:(loadSrc:string)=>string, addOtherInfo?:string):string {
return EngineKey.generateTransformedDiskCacheKey(loadSrc,size,transformed,dontAnimate,redefineUrl,addOtherInfo);
public static createTransformedDiskCacheKey(loadSrc:string,size:string,transformed:string,dontAnimate:boolean,signature: ObjectKey, redefineUrl?:(loadSrc:string)=>string, addOtherInfo?:string):string {
return EngineKey.generateTransformedDiskCacheKey(loadSrc,size,transformed,dontAnimate,signature,redefineUrl,addOtherInfo);
}
public static createOriginalDiskCacheKey(loadSrc:string, redefineUrl?:(loadSrc:string)=>string, addOtherInfo?:string):string {
return EngineKey.generateOriginalDiskCacheKey(loadSrc,redefineUrl,addOtherInfo);
public static createOriginalDiskCacheKey(loadSrc:string,signature: ObjectKey, redefineUrl?:(loadSrc:string)=>string, addOtherInfo?:string):string {
return EngineKey.generateOriginalDiskCacheKey(loadSrc,signature,redefineUrl,addOtherInfo);
}

View File

@ -12,15 +12,16 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ObjectKey } from '../../imageknife/ObjectKey'
import { RequestOption } from '../../imageknife/RequestOption'
export interface EngineKeyInterface {
// 生成内存缓存
generateMemoryCacheKey(loadSrc: string, size: string, transformed: string, dontAnimate: boolean): string
generateMemoryCacheKey(loadSrc: string, size: string, transformed: string, dontAnimate: boolean, signature: ObjectKey): string
// 生成原图变换后的图片的磁盘缓存
generateTransformedDiskCacheKey(loadSrc: string, size: string, transformed: string, dontAnimate: boolean): string
generateTransformedDiskCacheKey(loadSrc: string, size: string, transformed: string, dontAnimate: boolean, signature: ObjectKey): string
// 生成原图的磁盘缓存
generateOriginalDiskCacheKey(loadSrc: string): string
generateOriginalDiskCacheKey(loadSrc: string, signature: ObjectKey): string
}

View File

@ -264,16 +264,21 @@ export class ImageKnife {
let dontAnimateFlag = request.dontAnimateFlag;
let signature = request.signature;
if (signature) {
console.log("唯一标识:" + signature.getKey())
}
cacheKey = factories.generateMemoryCacheKey(loadKey,size,transformed,dontAnimateFlag);
cacheKey = factories.generateMemoryCacheKey(loadKey,size,transformed,dontAnimateFlag,signature);
// 生成磁盘缓存变换后数据key 变换后数据保存在磁盘
transferKey = factories.generateTransformedDiskCacheKey(loadKey,size,transformed,dontAnimateFlag);
transferKey = factories.generateTransformedDiskCacheKey(loadKey,size,transformed,dontAnimateFlag,signature);
// 生成磁盘缓存源数据key 原始数据保存在磁盘
dataKey = factories.generateOriginalDiskCacheKey(loadKey);
dataKey = factories.generateOriginalDiskCacheKey(loadKey,signature);
request.generateCacheKey = cacheKey;
request.generateResourceKey = transferKey;

View File

@ -197,6 +197,9 @@ export struct ImageKnifeComponent {
if (this.imageKnifeOption.allCacheInfoCallback != null && this.imageKnifeOption.allCacheInfoCallback != undefined) {
request.addAllCacheInfoCallback(this.imageKnifeOption.allCacheInfoCallback)
}
if (this.imageKnifeOption.signature) {
request.signature = this.imageKnifeOption.signature;
}
}
configDisplay(request: RequestOption) {

View File

@ -24,6 +24,7 @@ import { IDrawLifeCycle } from '../imageknife/interface/IDrawLifeCycle'
import { ScaleType } from '../imageknife/ImageKnifeComponent'
import { rgbColor } from './transform/CropCircleWithBorderTransformation'
import { RoundCorner } from './transform/RoundedCornersTransformation'
import { ObjectKey } from './ObjectKey'
export interface CropCircleWithBorder{
border: number,
@ -93,6 +94,9 @@ export class ImageKnifeOption {
displayProgress?: boolean;
//自定义缓存关键字
signature?: ObjectKey;
// 重试图层 可点击
canRetryClick?: boolean;

View File

@ -0,0 +1,28 @@
/*
* 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.
*/
export class ObjectKey{
private objectKey: string;
constructor(objectKey: string) {
this.objectKey = objectKey;
}
getKey(): string{
return this.objectKey;
}
}

View File

@ -48,6 +48,8 @@ import { VignetteFilterTransform } from '../imageknife/transform/VignetteFilterT
import { LogUtil } from '../imageknife/utils/LogUtil'
import { ImageKnifeGlobal } from './ImageKnifeGlobal'
import { BusinessError } from '@ohos.base'
import { ObjectKey } from './ObjectKey'
export interface Size {
width: number,
height: number
@ -92,6 +94,9 @@ export class RequestOption {
filesPath: string = ""; // data/data/包名/files目录
cachesPath: string = ""; // 网络下载默认存储在data/data/包名/cache/ImageKnifeNetworkFolder/目标md5.img下面
//自定义缓存关键字
signature?: ObjectKey;
// 下载原始文件地址
downloadFilePath: string = "";
@ -112,6 +117,8 @@ export class RequestOption {
// 缩略图展示
loadThumbnailReady = false;
constructor() {
// 初始化全局监听
this.requestListeners = new Array();
@ -142,6 +149,8 @@ export class RequestOption {
this.cachesPath = path;
}
load(src: string | PixelMap | Resource) {
this.loadSrc = src;
return this;