ImageKnife支持根据自定义key获取已缓存的图片

Signed-off-by: 任伟x <renwei79@h-partners.com>
This commit is contained in:
任伟x 2024-04-22 15:58:53 +08:00
parent 83075cc204
commit 6ae9982ec6
13 changed files with 307 additions and 17 deletions

View File

@ -9,6 +9,7 @@
- 修改全局请求头覆盖request请求头
- imageKnife支持heic测试demo独立页面展示
- drawLifeCycle支持gif图
- ImageKnife支持根据自定义key获取已缓存的图片
## 2.1.2-rc.12
- 新增gif播放次数功能

View File

@ -115,17 +115,18 @@ imageKnifeOption = {
### ImageKnifeOption参数列表
| 参数名称 | 入参内容 | 功能简介 |
| ---------------------------- |----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------|
|------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------|
| loadSrc | string\ | PixelMap\ |Resource | 图片数据源 |
| mainScaleType | ScaleType | 设置主图展示样式(可选) |
| strategy | DiskStrategy | 设置磁盘缓存策略(可选) |
| dontAnimateFlag | boolean | gif加载展示一帧可选 |
| placeholderSrc | PixelMap\ | Resource | 占位图数据源 |
| placeholderSrc | string\ (占位图不支持gif图且不支持网络下载功能) | PixelMap\ |Resource | 占位图数据源 |
| placeholderScaleType | ScaleType | 设置占位图展示样式(可选) |
| errorholderSrc | PixelMap\ | Resource | 错误占位图数据源 |
| errorholderSrcScaleType | ScaleType | 设置失败占位图展示样式(可选) |
| retryholderSrc | PixelMap\ | Resource | 重试占位图数据源 |
| retryholderScaleType | ScaleType | 设置重试占位图展示样式(可选) |
| fallbackSrc | PixelMap\ | Resource | 后备回调符数据源 |
| thumbSizeMultiplier | number 范围(0,1] | 设置缩略图占比(可选) |
| thumbSizeDelay | number | 设置缩略图展示时间(可选) |
| thumbSizeMultiplierScaleType | ScaleType | 设置缩略图展示样式(可选) |
@ -320,9 +321,10 @@ request.skipMemoryCache(true)
| load(src: string \| PixelMap \|Resource) | src:string\|PixelMap\|Resource | 用户加载图片源 |
| setImageViewSize(imageSize: { width: number, height: number }) | imageSize:{width: number, height: number } | 传入显示图片组件的大小,变换的时候需要作为参考 |
| diskCacheStrategy(strategy: DiskStrategy) | strategy:DiskStrategy | 配置磁盘缓存策略 NONE SOURCE RESULT ALL AUTOMATIC |
| placeholder(src: PixelMap\|Resource, func?: AsyncSuccess<ImageKnifeData>) | src: PixelMap\|Resource, func?: AsyncSuccess<ImageKnifeData> | 占位图占位图回调数据ImageKnifeData |
| placeholder(src: string \| PixelMap\|Resource, func?: AsyncSuccess<ImageKnifeData>) | src: string\|PixelMap\|Resource, func?: AsyncSuccess<ImageKnifeData> | 占位图占位图回调数据ImageKnifeData |
| errorholder(src: PixelMap\|Resource, func?: AsyncSuccess<ImageKnifeData>) | src: PixelMap\|Resource, func?: AsyncSuccess<ImageKnifeData> | 错误占位图错误占位图回调数据ImageKnifeData |
| retryholder(src: PixelMap\|Resource, func?: AsyncSuccess<ImageKnifeData>) | src: PixelMap\|Resource, func?: AsyncSuccess<ImageKnifeData> | 重试占位图重试占位图回调数据ImageKnifeData |
| fallback(src: PixelMap\|Resource, func?: AsyncSuccess<ImageKnifeData>) | src: PixelMap\|Resource, func?: AsyncSuccess<ImageKnifeData> | 重试占位图重试占位图回调数据ImageKnifeData |
| addListener(func: AsyncCallback<ImageKnifeData>) | func: AsyncCallback<ImageKnifeData> | 配置整个监听回调,数据正常加载返回,加载失败返回错误信息 |
| thumbnail(sizeMultiplier:number, func?: AsyncSuccess<ImageKnifeData>) | sizeMultiplier:number, func?: AsyncSuccess<ImageKnifeData> | 设置缩略图比例,缩略图返回后,加载并展示缩略图 |
| addProgressListener(func?: AsyncSuccess<number>) | func?: AsyncSuccess<number> | 设置网络下载百分比监听,返回数据加载百分比数值 |
@ -539,6 +541,7 @@ HSP场景适配:
- transformPixelMapPage.ets # 所有类型变换测试
- testSingleFrameGifPage.ets # 单帧gif加载测试
- TestStopPlayingGifPage # gif播放暂停测试
- TestImageKnifeNetPlaceholder # 缓存获取string类型占位图以及后备回调符测试
- OptionTestPage.ets # 图片缓存测试
- testManyGifLoadWithPage # 测试gif加载页面

View File

@ -396,6 +396,14 @@ struct IndexFunctionDemo {
router.pushUrl({ url: 'pages/testImageKnifeHeic' });
}).margin({ top: 5, left: 3 })
}.width('100%').height(60).backgroundColor(Color.Pink)
Text('测试string类型占位图').fontSize(15)
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Button('测试string类型占位图以及后备回调符')
.onClick(() => {
router.pushUrl({ url: 'pages/testImageKnifeNetPlaceholder' });
}).margin({ top: 5, left: 3 })
}.width('100%').height(60).backgroundColor(Color.Pink)
}
}
.width('100%')

View File

@ -0,0 +1,133 @@
/*
* Copyright (C) 2024 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/libraryimageknife'
@Entry
@Component
struct testImageKnifeNetPlaceholder {
@State imageKnifeOption: ImageKnifeOption =
{
loadSrc: $r('app.media.icon'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
};
@State imageKnifeOption1: ImageKnifeOption =
{
loadSrc: $r('app.media.icon'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
};
@State imageKnifeOption2: ImageKnifeOption =
{
loadSrc: $r('app.media.icon'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
};
build() {
Scroll() {
Column() {
Text('string类型占位图支持内存和磁盘读取').fontSize(30);
Text('验证磁盘有无图片可以先主图缓存一张图片,再退出应用').fontSize(15);
Text('仅第一次打开应用加载主图可以看到效果,因主图第二次加载速度很快').fontSize(15);
Row() {
Button('缓存一张图片作为占位图 图一')
.onClick(() => {
this.imageKnifeOption =
{
loadSrc: 'https://img-blog.csdn.net/20140514114029140',
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
}
})
}
Text('当图一没有展示,会从磁盘中拿占位图').fontSize(15);
Text('当图一展示时,会从内存中拿占位图,不会走磁盘逻辑').fontSize(15);
Text('下图展示的为后备回调符的图片').fontSize(15);
ImageKnifeComponent({ imageKnifeOption: {loadSrc:$r('app.media.mask_starfish')} })
.width(200)
.height(200)
.backgroundColor(Color.Orange)
Text('下图展示的主图为图二string类型的占位图').fontSize(15);
Text('图一:').fontSize(20);
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
.width(200)
.height(200)
.backgroundColor(Color.Orange)
Row() {
Button('展示已缓存的占位图')
.onClick(() => {
this.imageKnifeOption1 =
{
loadSrc : $r('app.media.pngSample'),
placeholderSrc: 'https://img-blog.csdn.net/20140514114029140',
fallbackSrc: $r('app.media.mask_starfish'),
errorholderSrc: $r('app.media.icon_failed'),
}
})
Button('当占位图未缓存时展示后备回调符')
.onClick(() => {
this.imageKnifeOption2 =
{
loadSrc : $r('app.media.gifSample'),
placeholderSrc: 'https://img0.baidu.com/it/u=2794536113,2700219306&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
fallbackSrc: $r('app.media.mask_starfish'),
errorholderSrc: $r('app.media.icon_failed'),
}
})
}
Text('展示已缓存的占位图,如图一未加载过则会显示后备回调符').fontSize(15);
Text('图二:').fontSize(20);
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
.width(200)
.height(200)
.backgroundColor(Color.Orange)
Text('占位图未缓存展示后备回调符,如图三').fontSize(15);
Text('图三:').fontSize(20);
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 })
.width(200)
.height(200)
.backgroundColor(Color.Orange)
}
.alignItems(HorizontalAlign.Center)
.width('100%')
}
.width('100%')
.height('100%')
}
aboutToAppear() {
}
aboutToDisappear() {
}
onBackPress() {
}
}

View File

@ -53,6 +53,7 @@
"pages/webpImageTestPage",
"pages/testStopPlayingGifPage",
"pages/testImageKnifeDataFetch",
"pages/testImageKnifeHeic"
"pages/testImageKnifeHeic",
"pages/testImageKnifeNetPlaceholder"
]
}

View File

@ -479,10 +479,14 @@ export class ImageKnife {
let placeholderLoadKey = '';
if (typeof request.placeholderSrc == 'string') {
placeholderLoadKey = request.placeholderSrc;
// string类型占位图生成内存缓存源数据key
request.placeholderRegisterMemoryCacheKey = factories.generateMemoryCacheKey(placeholderLoadKey, size, transformed, dontAnimateFlag, signature);
// string类型占位图生成磁盘缓存源数据key 原始数据保存在磁盘
request.placeholderRegisterCacheKey = factories.generateOriginalDiskCacheKey(placeholderLoadKey, signature);
} else {
placeholderLoadKey = JSON.stringify(request.placeholderSrc);
request.placeholderCacheKey = this.generateCacheKey(placeholderLoadKey, size, dontAnimateFlag, signature);
}
request.placeholderCacheKey = this.generateCacheKey(placeholderLoadKey, size, dontAnimateFlag, signature)
}
if (request.retryholderSrc) {
let retryholderLoadKey = '';
@ -660,6 +664,8 @@ export class ImageKnife {
data.setDiskMemoryCache(this.diskMemoryCache)
data.setDataFetch(this.dataFetch)
data.setDiskMemoryCachePath(this.diskMemoryCache.getPath())
data.setPlaceHolderRegisterCacheKey(request.placeholderRegisterCacheKey);
data.setPlaceHolderRegisterMemoryCacheKey(request.placeholderRegisterMemoryCacheKey);
return data;
}
@ -670,9 +676,10 @@ export class ImageKnife {
priority: request.priority,
size: request.size,
loadSrc: this.transformResource(request.loadSrc) as string | PixelMap | MResource,
placeholderSrc: this.transformResource(request.placeholderSrc) as PixelMap | MResource | undefined,
placeholderSrc: this.transformResource(request.placeholderSrc) as string | PixelMap | MResource | undefined,
errorholderSrc: this.transformResource(request.errorholderSrc) as PixelMap | MResource | undefined,
retryholderSrc:this.transformResource(request.retryholderSrc) as PixelMap | MResource | undefined
retryholderSrc:this.transformResource(request.retryholderSrc) as PixelMap | MResource | undefined,
fallbackSrc: this.transformResource(request.fallbackSrc) as PixelMap | MResource | undefined,
}
return data;
}
@ -694,6 +701,10 @@ export class ImageKnife {
//多线程请求加载资源
private taskpoolLoadResource(request: RequestOption, usageType: string) {
// string类型占位图实现从缓存中获取图片
if (request.placeholderSrc == 'string') {
request.placeholderCacheKey = request.placeholderRegisterMemoryCacheKey;
}
let mainCache = this.memoryCacheProxy.loadMemoryCache(request.generateCacheKey, request.isCacheable);
let placeholderCache = this.memoryCacheProxy.loadMemoryCache(request.placeholderCacheKey, request.isCacheable);
let retryholderCache = this.memoryCacheProxy.loadMemoryCache(request.retryholderCacheKey, request.isCacheable);
@ -905,9 +916,14 @@ async function taskExecute(sendData:SendableData,taskData:TaskParams): Promise<P
newRequestOption.thumbSizeMultiplier = sendData.getThumbSizeMultiplier();
newRequestOption.thumbDelayTime = sendData.getThumbDelayTime();
newRequestOption.size = taskData.size;
newRequestOption.placeholderRegisterCacheKey = sendData.getPlaceHolderRegisterCacheKey();
newRequestOption.placeholderRegisterMemoryCacheKey = sendData.getPlaceHolderRegisterMemoryCacheKey();
if(taskData.loadSrc){
newRequestOption.placeholderSrc = taskData.loadSrc as PixelMap | Resource | undefined;
if(taskData.placeholderSrc){
newRequestOption.placeholderSrc = taskData.placeholderSrc as string | PixelMap | Resource | undefined;
}
if(taskData.fallbackSrc){
newRequestOption.fallbackSrc = taskData.fallbackSrc as PixelMap | Resource | undefined;
}
if(taskData.errorholderSrc){
newRequestOption.errorholderSrc = taskData.errorholderSrc as PixelMap | Resource | undefined;

View File

@ -276,6 +276,12 @@ export struct ImageKnifeComponent {
this.runNextFunction(this.displayErrorholder,data)
}})
}
if (this.imageKnifeOption.fallbackSrc) {
request.fallback(this.imageKnifeOption.fallbackSrc, {asyncSuccess:(data:ImageKnifeData) => {
LogUtil.log('ImageKnife ImageKnifeComponent request.fallback callback');
this.runNextFunction(this.displayPlaceholder,data);
}})
}
if (this.imageKnifeOption.transform) {
this.requestAddTransform(request)

View File

@ -87,9 +87,11 @@ export class ImageKnifeOption {
dontAnimateFlag? = false;
// 占位图
placeholderSrc?: PixelMap | Resource;
placeholderSrc?: string | PixelMap | Resource;
placeholderScaleType?: ScaleType = ScaleType.FIT_CENTER
// 后备回调符
fallbackSrc?: PixelMap | Resource;
// 失败占位图
errorholderSrc?: PixelMap | Resource;
errorholderSrcScaleType?: ScaleType = ScaleType.FIT_CENTER

View File

@ -106,7 +106,7 @@ export class RequestOption {
loadSrc: string | PixelMap | Resource = '';
strategy: DiskStrategy = new AUTOMATIC();
dontAnimateFlag = false;
placeholderSrc: PixelMap | Resource | undefined = undefined;
placeholderSrc: string | PixelMap | Resource | undefined = undefined;
placeholderFunc: AsyncSuccess<ImageKnifeData> | undefined = undefined;
errorholderSrc: PixelMap | Resource | undefined = undefined;
errorholderFunc: AsyncSuccess<ImageKnifeData> | undefined = undefined;
@ -118,6 +118,10 @@ export class RequestOption {
requestListeners: Array<AsyncCallback<ImageKnifeData>> | undefined = undefined;
// 进度条
progressFunc: AsyncSuccess<number> | undefined = undefined;
// 后备回调符
fallbackSrc: PixelMap | Resource | undefined = undefined;
fallbackFunc: AsyncSuccess<ImageKnifeData> | undefined = undefined;
fallbackData: ImageKnifeData | undefined = undefined;
// 重试图层
retryholderSrc: PixelMap | Resource | undefined = undefined;
retryholderFunc: AsyncSuccess<ImageKnifeData> | undefined = undefined;
@ -139,6 +143,10 @@ export class RequestOption {
placeholderCacheKey: string = "";
retryholderCacheKey: string = "";
errorholderCacheKey: string = "";
// string类型占位图相关缓存key值
placeholderRegisterCacheKey: string = "";
placeholderRegisterMemoryCacheKey: string = "";
fallbackCacheKey: string = "";
// 自定义缓存关键字
signature?: ObjectKey;
// 下载原始文件地址
@ -154,6 +162,8 @@ export class RequestOption {
loadErrorReady = false;
// 重试占位图展示状态 当true 表示主图加载失败需要展示失败占位图
loadRetryReady = false;
// 后备回调符展示状态 当true 表占位图加载失败需要展示后备回调符
loadFallBackReady = false;
// 缩略图展示
loadThumbnailReady = false;
detachFromLayout: DetachFromLayout = {
@ -245,7 +255,7 @@ export class RequestOption {
}
// 仅支持 本地图片
placeholder(src: PixelMap | Resource, func?: AsyncSuccess<ImageKnifeData>) {
placeholder(src: string | PixelMap | Resource, func?: AsyncSuccess<ImageKnifeData>) {
this.placeholderSrc = src;
this.placeholderFunc = func;
return this;
@ -257,6 +267,12 @@ export class RequestOption {
return this;
}
fallback(src: PixelMap | Resource, func?: AsyncSuccess<ImageKnifeData>) {
this.fallbackSrc = src;
this.fallbackFunc = func;
return this;
}
retryholder(src: PixelMap | Resource, func?: AsyncSuccess<ImageKnifeData>) {
this.retryholderSrc = src;
this.retryholderFunc = func;
@ -551,7 +567,19 @@ export class RequestOption {
retryholderOnError = (error: BusinessError | string) => {
LogUtil.log("重试占位图解析失败 error =" + error)
}
//占位图加载失败 后备回调符解析成功
fallbackOnComplete = (imageKnifeData:ImageKnifeData) => {
this.fallbackData = imageKnifeData;
if (this.loadFallBackReady) {
if (this.fallbackFunc != undefined) {
this.fallbackFunc?.asyncSuccess(imageKnifeData);
}
}
}
// 后备回调符解析失败
fallbackOnError = (error: BusinessError | string) => {
LogUtil.error("失败占位图解析失败 error =" + JSON.stringify(error));
}
loadComplete = (imageKnifeData: ImageKnifeData) => {
this.loadMainReady = true;
// 三级缓存数据加载成功
@ -618,6 +646,11 @@ export class RequestOption {
if (this.retryholderData != null) {
this.retryholderFunc.asyncSuccess(this.retryholderData)
}
} else if (!this.retryholderFunc && !this.placeholderFunc && this.fallbackFunc) {
this.loadFallBackReady = true;
if (this.fallbackData != null) {
this.fallbackFunc.asyncSuccess(this.fallbackData);
}
} else {
// 失败图层标记,如果已经有数据直接展示失败图层
this.loadErrorReady = true;

View File

@ -39,6 +39,8 @@ export class SendableData{
private diskMemoryCachePath: string = '';
private diskMemoryCache?: DiskLruCache;
private dataFetch: IDataFetch = new DownloadClient();
private placeholderRegisterCacheKey: string = "";
private placeholderRegisterMemoryCacheKey: string = "";
public setDataFetch(value: IDataFetch) {
this.dataFetch = value;
@ -176,4 +178,20 @@ export class SendableData{
public getUsageType(): string {
return this.usageType;
}
public setPlaceHolderRegisterCacheKey(value: string) {
this.placeholderRegisterCacheKey = value;
}
public getPlaceHolderRegisterCacheKey(): string {
return this.placeholderRegisterCacheKey;
}
public setPlaceHolderRegisterMemoryCacheKey(value: string) {
this.placeholderRegisterMemoryCacheKey = value;
}
public getPlaceHolderRegisterMemoryCacheKey(): string {
return this.placeholderRegisterMemoryCacheKey;
}
}

View File

@ -23,7 +23,8 @@ export class TaskParams {
priority: Priority = Priority.MEDIUM // 优先级
size: Size = { width: -1, height: -1 };
loadSrc: string | PixelMap | MResource = "";
placeholderSrc: PixelMap | MResource | undefined = undefined;
placeholderSrc: string | PixelMap | MResource | undefined = undefined;
errorholderSrc: PixelMap | MResource | undefined = undefined;
retryholderSrc: PixelMap | MResource | undefined = undefined;
fallbackSrc: PixelMap | MResource | undefined = undefined;
}

View File

@ -20,4 +20,5 @@ export class Constants {
public static RETRY_HOLDER: string = "retryholder"
public static ERROR_HOLDER: string = "errorholder"
public static MAIN_HOLDER: string = "main"
public static FALL_BACK: string = "fallback"
}

View File

@ -26,6 +26,7 @@ import resourceManager from '@ohos.resourceManager';
import image from "@ohos.multimedia.image"
import { BusinessError } from '@ohos.base'
import { GIFFrame } from '../utils/gif/GIFFrame'
import { DiskLruCache } from '../../cache/DiskLruCache'
export class PlaceHolderManager<T> {
private options: RequestOption;
@ -45,7 +46,73 @@ export class PlaceHolderManager<T> {
let imageKnifeData = ImageKnifeData.createImagePixelMap(ImageKnifeType.PIXELMAP, this.options.placeholderSrc as PixelMap)
onComplete(imageKnifeData?.drawPixelMap?.imagePixelMap as PixelMap);
} else if (typeof this.options.placeholderSrc == 'string') {
if (typeof this.options.placeholderCacheKey == 'string' && this.options.placeholderCacheKey != '') {
return;
}
let cached = DiskLruCache.getFileCacheByFile(this.options.diskMemoryCachePath,this.options.placeholderRegisterCacheKey);
if (cached != null && cached.byteLength > 0) {
let fileTypeUtil = new FileTypeUtil();
let typeValue = fileTypeUtil.getFileType(cached);
switch (typeValue) {
case SupportFormat.svg:
this.svgProcess(onComplete, onError, cached, typeValue);
break;
case SupportFormat.jpg:
case SupportFormat.png:
case SupportFormat.bmp:
case SupportFormat.gif:
case SupportFormat.tiff:
case SupportFormat.webp:
case SupportFormat.heic:
this.mediaImageProcess(onComplete, onError, cached, typeValue);
break;
default:
onError("PlaceHolderManager 文件类型不支持");
break;
}
} else {
if ((typeof (this.options.fallbackSrc as image.PixelMap).isEditable) == 'boolean') {
let imageKnifeData = ImageKnifeData.createImagePixelMap(ImageKnifeType.PIXELMAP, this.options.fallbackSrc as PixelMap);
onComplete(imageKnifeData?.drawPixelMap?.imagePixelMap as PixelMap);
} else {
let res = this.options.fallbackSrc as Resource;
if (typeof res.id != 'undefined' && typeof res.id != 'undefined') {
let resourceFetch = new ParseResClient();
let suc = (arraybuffer:ArrayBuffer) => {
let fileTypeUtil: FileTypeUtil = new FileTypeUtil();
let typeValue: string | null = fileTypeUtil.getFileType(arraybuffer);
if (typeValue != null) {
switch (typeValue) {
case SupportFormat.svg:
this.svgProcess(onComplete, onError, arraybuffer, typeValue);
break;
case SupportFormat.jpg:
case SupportFormat.png:
case SupportFormat.bmp:
case SupportFormat.gif:
case SupportFormat.tiff:
case SupportFormat.webp:
this.mediaImageProcess(onComplete, onError, arraybuffer, typeValue);
break;
default:
onError("FallBackManager 文件类型不支持");
break;
}
}else{
onError("FallBackManager 文件类型为null,请检查数据源arraybuffer");
}
}
let ctx = this.options.getModuleContext();
if(ctx != undefined){
resourceFetch.loadResource(ctx,res, suc, onError);
}else{
onError("FallBackManager moduleContext is undefined,please check it!");
}
} else {
onError("FallBackManager 输入参数有问题!");
}
}
}
} else {
let res = this.options.placeholderSrc as Resource;
if (typeof res.id != 'undefined' && typeof res.id != 'undefined') {