diff --git a/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets b/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets index ff793cb..bb3d5ec 100644 --- a/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets +++ b/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets @@ -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%') diff --git a/entry/src/main/ets/pages/testImageKnifeNetPlaceholder.ets b/entry/src/main/ets/pages/testImageKnifeNetPlaceholder.ets new file mode 100644 index 0000000..ca43d5e --- /dev/null +++ b/entry/src/main/ets/pages/testImageKnifeNetPlaceholder.ets @@ -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() { + + } +} \ No newline at end of file diff --git a/entry/src/main/resources/base/profile/main_pages.json b/entry/src/main/resources/base/profile/main_pages.json index 9992807..f0b6f5d 100644 --- a/entry/src/main/resources/base/profile/main_pages.json +++ b/entry/src/main/resources/base/profile/main_pages.json @@ -53,6 +53,7 @@ "pages/webpImageTestPage", "pages/testStopPlayingGifPage", "pages/testImageKnifeDataFetch", - "pages/testImageKnifeHeic" + "pages/testImageKnifeHeic", + "pages/testImageKnifeNetPlaceholder" ] } \ No newline at end of file diff --git a/library/src/main/ets/components/imageknife/ImageKnife.ets b/library/src/main/ets/components/imageknife/ImageKnife.ets index 4e0ba52..34038b1 100644 --- a/library/src/main/ets/components/imageknife/ImageKnife.ets +++ b/library/src/main/ets/components/imageknife/ImageKnife.ets @@ -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

{ + LogUtil.log('ImageKnife ImageKnifeComponent request.fallback callback'); + this.runNextFunction(this.displayPlaceholder,data); + }}) + } if (this.imageKnifeOption.transform) { this.requestAddTransform(request) diff --git a/library/src/main/ets/components/imageknife/ImageKnifeOption.ets b/library/src/main/ets/components/imageknife/ImageKnifeOption.ets index 8df8ae9..ac8f2ad 100644 --- a/library/src/main/ets/components/imageknife/ImageKnifeOption.ets +++ b/library/src/main/ets/components/imageknife/ImageKnifeOption.ets @@ -87,9 +87,12 @@ 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 diff --git a/library/src/main/ets/components/imageknife/RequestOption.ets b/library/src/main/ets/components/imageknife/RequestOption.ets index 63deff9..8589245 100644 --- a/library/src/main/ets/components/imageknife/RequestOption.ets +++ b/library/src/main/ets/components/imageknife/RequestOption.ets @@ -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 | undefined = undefined; errorholderSrc: PixelMap | Resource | undefined = undefined; errorholderFunc: AsyncSuccess | undefined = undefined; @@ -118,6 +118,10 @@ export class RequestOption { requestListeners: Array> | undefined = undefined; // 进度条 progressFunc: AsyncSuccess | undefined = undefined; + // 后备回调符 + fallbackSrc: PixelMap | Resource | undefined = undefined; + fallbackFunc: AsyncSuccess | undefined = undefined; + fallbackData: ImageKnifeData | undefined = undefined; // 重试图层 retryholderSrc: PixelMap | Resource | undefined = undefined; retryholderFunc: AsyncSuccess | 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) { + placeholder(src: string | PixelMap | Resource, func?: AsyncSuccess) { this.placeholderSrc = src; this.placeholderFunc = func; return this; @@ -257,6 +267,12 @@ export class RequestOption { return this; } + fallback(src: PixelMap | Resource, func?: AsyncSuccess) { + this.fallbackSrc = src; + this.fallbackFunc = func; + return this; + } + retryholder(src: PixelMap | Resource, func?: AsyncSuccess) { this.retryholderSrc = src; this.retryholderFunc = func; @@ -551,6 +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 +647,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; diff --git a/library/src/main/ets/components/imageknife/SendableData.ets b/library/src/main/ets/components/imageknife/SendableData.ets index e91be08..c910e86 100644 --- a/library/src/main/ets/components/imageknife/SendableData.ets +++ b/library/src/main/ets/components/imageknife/SendableData.ets @@ -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; + } } \ No newline at end of file diff --git a/library/src/main/ets/components/imageknife/TaskParams.ets b/library/src/main/ets/components/imageknife/TaskParams.ets index 9a37c9a..4d4ddd7 100644 --- a/library/src/main/ets/components/imageknife/TaskParams.ets +++ b/library/src/main/ets/components/imageknife/TaskParams.ets @@ -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; } \ No newline at end of file diff --git a/library/src/main/ets/components/imageknife/constants/Constants.ets b/library/src/main/ets/components/imageknife/constants/Constants.ets index 4a2d98a..de09ddb 100644 --- a/library/src/main/ets/components/imageknife/constants/Constants.ets +++ b/library/src/main/ets/components/imageknife/constants/Constants.ets @@ -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" } \ No newline at end of file diff --git a/library/src/main/ets/components/imageknife/holder/PlaceHolderManager.ets b/library/src/main/ets/components/imageknife/holder/PlaceHolderManager.ets index cd7723e..d6769d7 100644 --- a/library/src/main/ets/components/imageknife/holder/PlaceHolderManager.ets +++ b/library/src/main/ets/components/imageknife/holder/PlaceHolderManager.ets @@ -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 { private options: RequestOption; @@ -45,7 +46,73 @@ export class PlaceHolderManager { 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') {