Pre Merge pull request !210 from 任伟x/master

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%')

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() {
+
+  }
+}

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"
   ]
 }

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<P
   newRequestOption.thumbSizeMultiplier = sendData.getThumbSizeMultiplier();
   newRequestOption.thumbDelayTime = sendData.getThumbDelayTime();
   newRequestOption.size = taskData.size;
+  newRequestOption.placeholderRegisterCacheKey = sendData.getPlaceHolderRegisterCacheKey();
+  newRequestOption.placeholderRegisterMemoryCacheKey = sendData.getPlaceHolderRegisterMemoryCacheKey();
 
-  if(taskData.loadSrc){
+  if(taskData.placeholderSrc){
-    newRequestOption.placeholderSrc = taskData.loadSrc as PixelMap | Resource | undefined;
+    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;

library/src/main/ets/components/imageknife/ImageKnifeComponent.ets

@@ -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)

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

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<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,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;

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;
+  }
 }

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;
 }

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"
 }

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<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') {