修复Resource类型以及onLoadListener回调和onComplete回调

Signed-off-by: zgf <zenggaofeng2@h-partners.com>
2024-06-25 14:42:10 +08:00 · 2024-06-25 14:42:10 +08:00 · 7f8009bda9
parent 9565bd6522
commit 7f8009bda9
9 changed files with 99 additions and 41 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,10 @@
+## 3.0.0-rc.9
+- 修复Resource类型$r(变量无法)加载
+- 成功回调增加图片格式
+- Image组件增加onComplete回调
+- 修复404链接无返回错误信息
+- onLoadListener增加请求取消回调
+
 ## 3.0.0-rc.8
 - svg解码单位改为px
 - 修复预加载接口preLoadCache传ImageKnifeOption失效
--- a/entry/src/main/ets/pages/LoadStatePage.ets
+++ b/entry/src/main/ets/pages/LoadStatePage.ets
@ -38,6 +38,7 @@ struct LoadStatePage {
  }
  @State currentWidth: number = 200
  @State currentHeight: number = 200
+  @State typeValue: string = ""
  build() {
    Column() {
      Text('测试失败场景请先关闭网络，并保证本地没有此网络图片的缓存')
@ -58,19 +59,23 @@ struct LoadStatePage {
                onLoadFailed: (err) => {
                  console.error("Load Failed Reason: " + err + "  cost " + (new Date().getTime() - this.starTime) + " milliseconds");
                },
-                onLoadSuccess: (data,width,height) => {
+                onLoadSuccess: (data,imageData) => {
                  console.info("Load Successful: cost " + (new Date().getTime() - this.starTime) + " milliseconds");
-                  this.currentWidth = width!
-                  this.currentHeight = height!
+                  this.currentWidth = imageData.imageWidth!
+                  this.currentHeight = imageData.imageHeight!
+                  this.typeValue = imageData.type!
                  return data;
                },
              },
-              border: { radius: 50 }
+              border: { radius: 50 },
+              onComplete:(event)=>{
+                console.error("Load onComplete width:"+event?width,"height:"+event?height,"componentWidth:"+event?.componentWidth,"componentHeight:"+event?.componentHeight);
+              }
            }
          })
      }
      .margin({ top: 20 })
-
+      Text(this.typeValue)
      ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption }).height(this.currentHeight).width(this.currentWidth)
        .margin({ top: 20 })

--- a/entry/src/main/ets/pages/SingleImage.ets
+++ b/entry/src/main/ets/pages/SingleImage.ets
@ -19,6 +19,7 @@ import image from '@ohos.multimedia.image';
@Entry
@Component
 struct SingleImage {
+  resource: string = "app.media.svgSample"
  scroller: Scroller = new Scroller;
  localFile: string = getContext(this).filesDir + "/icon.png"
  @State pixelMap:PixelMap | undefined = undefined;
@ -43,7 +44,7 @@ struct SingleImage {
          .fontWeight(FontWeight.Bold)
        ImageKnifeComponent({
          imageKnifeOption: {
-            loadSrc: $r("app.media.svgSample"),
+            loadSrc: $r(this.resource),
            placeholderSrc: $r("app.media.loading"),
            errorholderSrc: $r("app.media.failed"),
            objectFit: ImageFit.Contain
--- a/entry/src/ohosTest/ets/test/ImageKnifeOption.test.ets
+++ b/entry/src/ohosTest/ets/test/ImageKnifeOption.test.ets
@ -13,7 +13,7 @@
 * limitations under the License.
 */
 import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium';
-import { ImageKnifeOption } from "@ohos/imageknife"
+import { ImageKnifeOption,ImageKnifeData } from "@ohos/imageknife"

 export default function ImageKnifeOptionTest() {
  describe('ImageKnifeOptionTest',() => {
@ -39,22 +39,28 @@ export default function ImageKnifeOptionTest() {
    it('onLoadListener', 0, () => {
      let a = 'abc';
      let b: string = '';
+      let imageData:ImageKnifeData = {
+        source: "",
+        imageWidth: 0,
+        imageHeight: 0,
+      }
      let ImageKnifeOption: ImageKnifeOption = {
        loadSrc: $r("app.media.rabbit"),
        onLoadListener: {
          onLoadFailed: (err) => {
            console.error("Load Failed Reason: " + err);
          },
-          onLoadSuccess: (data) => {
+          onLoadSuccess: (data,imageknifeData) => {
            if(typeof data == 'string') {
              return b = data;
            }
+            imageData = imageknifeData
            return data;
          },
        },
      }
      if (ImageKnifeOption.onLoadListener && ImageKnifeOption.onLoadListener.onLoadSuccess && ImageKnifeOption.onLoadListener.onLoadFailed) {
-        ImageKnifeOption.onLoadListener.onLoadSuccess(a);
+        ImageKnifeOption.onLoadListener.onLoadSuccess(a,imageData);
        ImageKnifeOption.onLoadListener.onLoadFailed(a);
      }
      expect(a).assertEqual(b);
--- a/library/oh-package.json5
+++ b/library/oh-package.json5
@ -14,7 +14,7 @@
  "main": "index.ets",
  "repository": "https://gitee.com/openharmony-tpc/ImageKnife",
  "type": "module",
-  "version": "3.0.0-rc.8",
+  "version": "3.0.0-rc.9",
  "dependencies": {
    "@ohos/gpu_transform": "^1.0.2"
  },
--- a/library/src/main/ets/ImageKnifeDispatcher.ets
+++ b/library/src/main/ets/ImageKnifeDispatcher.ets
@ -82,7 +82,7 @@ export class ImageKnifeDispatcher {
          request.requestState = ImageKnifeRequestState.COMPLETE
          // 回调请求开结束
          if (request.imageKnifeOption.onLoadListener?.onLoadSuccess !== undefined) {
-            request.imageKnifeOption.onLoadListener?.onLoadSuccess(memoryCache.source,memoryCache.imageWidth,memoryCache.imageHeight)
+            request.imageKnifeOption.onLoadListener?.onLoadSuccess(memoryCache.source,memoryCache)
            LogUtil.log("ImageKnife_DataTime_MemoryCache_onLoadSuccess:" + request.imageKnifeOption.loadSrc)
          }
        } else if (requestSource == ImageKnifeRequestSource.ERROR_HOLDER) {
@ -272,7 +272,8 @@ export class ImageKnifeDispatcher {
    let ImageKnifeData: ImageKnifeData = {
      source: pixelmap!,
      imageWidth: requestJobResult.size == undefined ? 0 : requestJobResult.size.width,
-      imageHeight: requestJobResult.size == undefined ? 0 : requestJobResult.size.height
+      imageHeight: requestJobResult.size == undefined ? 0 : requestJobResult.size.height,
+      type:requestJobResult.type
    };

    // 保存内存缓存
@ -305,12 +306,20 @@ export class ImageKnifeDispatcher {
            if (requestWithSource.request.imageKnifeOption.onLoadListener &&
            requestWithSource.request.imageKnifeOption.onLoadListener.onLoadSuccess) {
              // 回调请求成功
-              requestWithSource.request.imageKnifeOption.onLoadListener.onLoadSuccess(ImageKnifeData.source,ImageKnifeData.imageWidth,ImageKnifeData.imageHeight);
+              requestWithSource.request.imageKnifeOption.onLoadListener.onLoadSuccess(ImageKnifeData.source,ImageKnifeData);
              LogUtil.log("ImageKnife_DataTime_getAndShowImage_onLoadSuccess:"+currentRequest.imageKnifeOption.loadSrc)
            }
          } else if (requestWithSource.source == ImageKnifeRequestSource.ERROR_HOLDER) {
            requestWithSource.request.requestState = ImageKnifeRequestState.ERROR;
          }
+        } else {
+          if (requestWithSource.source == ImageKnifeRequestSource.SRC) {
+            if (requestWithSource.request.imageKnifeOption.onLoadListener &&
+            requestWithSource.request.imageKnifeOption.onLoadListener.onLoadCancel) {
+              // 回调请求成功
+              requestWithSource.request.imageKnifeOption.onLoadListener.onLoadCancel("component has destroyed");
+            }
+          }
        }
      });

@ -447,6 +456,8 @@ async function requestJob(request: RequestJobRequest, requestList?: List<ImageKn
          await promise.then((data: number) => {
            if (data == 200) {
              resBuf = combineArrayBuffers(arrayBuffers)
+            } else {
+            loadError = "HttpDownloadClient has error, http code =" + JSON.stringify(data)
            }
          }).catch((err: Error) => {
            loadError = err.message;
@ -501,16 +512,21 @@ async function requestJob(request: RequestJobRequest, requestList?: List<ImageKn
      }
    } else if ((request.src as Resource).id !== undefined) { //从资源文件获取
      let res = request.src as Resource;
+      let manager = request.context.createModuleContext(res.moduleName).resourceManager
      if (resBuf == undefined && request.onlyRetrieveFromCache != true && request.requestSource == ImageKnifeRequestSource.SRC) {
-        resBuf = request.context.createModuleContext(res.moduleName)
-          .resourceManager
-          .getMediaContentSync(res.id)
-          .buffer as ArrayBuffer;
+        if(res.id == -1) {
+          let resName = (res.params![0] as string)
+          resBuf = (await manager.getMediaByName(resName.substring(10))).buffer as ArrayBuffer
+        } else {
+          resBuf = manager.getMediaContentSync(res.id).buffer as ArrayBuffer
+        }
      } else if (resBuf == undefined && request.requestSource != ImageKnifeRequestSource.SRC) {
-        resBuf = request.context.createModuleContext(res.moduleName)
-          .resourceManager
-          .getMediaContentSync(res.id)
-          .buffer as ArrayBuffer;
+        if(res.id == -1) {
+          let resName = (res.params![0] as string)
+          resBuf = (await manager.getMediaByName(resName.substring(10))).buffer as ArrayBuffer
+        } else {
+          resBuf = manager.getMediaContentSync(res.id).buffer as ArrayBuffer
+        }
      }
    }
  }
@ -528,6 +544,14 @@ async function requestJob(request: RequestJobRequest, requestList?: List<ImageKn
  LogUtil.log("ImageKnife_DataTime_requestJob_createPixelMap.start:"+request.src)
  let fileTypeUtil = new FileTypeUtil();
  let typeValue = fileTypeUtil.getFileType(resBuf);
+  if(typeValue == null) {
+    return {
+      pixelMap: undefined,
+      bufferSize: 0,
+      fileKey: '',
+      loadFail: "request is not a valid image source",
+    }
+  }
  let imageSource: image.ImageSource = image.createImageSource(resBuf);
  let decodingOptions: image.DecodingOptions = {
    editable: true,
@ -545,7 +569,8 @@ async function requestJob(request: RequestJobRequest, requestList?: List<ImageKn
      pixelMap: base64str,
      bufferSize: bufferSize,
      fileKey: fileKey,
-      size:size
+      size:size,
+      type:typeValue
    };
  } else if(typeValue == "svg") {
    let hValue = Math.round(request.componentHeight);
@ -567,6 +592,7 @@ async function requestJob(request: RequestJobRequest, requestList?: List<ImageKn
      pixelMap: resPixelmap,
      bufferSize: bufferSize,
      fileKey: fileKey,
+      type:typeValue
    };
  }
  let size = (await imageSource.getImageInfo()).size
@ -586,7 +612,8 @@ async function requestJob(request: RequestJobRequest, requestList?: List<ImageKn
    pixelMap: resPixelmap,
    bufferSize: bufferSize,
    fileKey: fileKey,
-    size:size
+    size:size,
+    type:typeValue
  };
 }

--- a/library/src/main/ets/ImageKnifeOption.ets
+++ b/library/src/main/ets/ImageKnifeOption.ets
@ -14,13 +14,15 @@
 */
 import taskpool from '@ohos.taskpool';
 import common from '@ohos.app.ability.common'
-import { CacheStrategy } from './model/ImageKnifeData';
+import { CacheStrategy, ImageKnifeData,EventImage } from './model/ImageKnifeData';
 import { PixelMapTransformation } from './transform/PixelMapTransformation';

 export interface HeaderOptions {
  key: string;
  value: Object;
 }
+
+
@Observed
 export class ImageKnifeOption {
  // 主图资源
@ -29,37 +31,27 @@ export class ImageKnifeOption {
  placeholderSrc?: string | PixelMap | Resource;
  // 失败占位图
  errorholderSrc?: string | PixelMap | Resource;
-
  headerOption?: Array<HeaderOptions>;
-
  // 自定义缓存关键字
  signature?: string;
-
  // 主图填充效果
  objectFit?: ImageFit
-
  // 占位图填充效果
  placeholderObjectFit?: ImageFit
-
  // 错误图填充效果
  errorholderObjectFit?: ImageFit
-
  customGetImage?: (context: Context, src: string | PixelMap | Resource) => Promise<ArrayBuffer | undefined>
-
  border?: BorderOptions
  // 缓存策略
  writeCacheStrategy?: CacheStrategy
  // 仅使用缓存加载数据
  onlyRetrieveFromCache?: boolean = false;
-
-  priority? : taskpool.Priority = taskpool.Priority.LOW
-
+  priority?: taskpool.Priority = taskpool.Priority.LOW
  context?: common.UIAbilityContext;
-
-  progressListener?: (progress: number)=>void;
-
+  progressListener?: (progress: number) => void;
  transformation?: PixelMapTransformation
  onLoadListener?: OnLoadCallBack | undefined;
+  onComplete?:(event:EventImage | undefined) => void

  constructor() {

@ -72,8 +64,12 @@ export class ImageKnifeOption {
 export interface OnLoadCallBack {
  // 请求开始
  onLoadStart?: () => void;
+
  // 请求成功
-  onLoadSuccess?: (data: string | PixelMap | undefined,width?:number,height?:number) => void;
+  onLoadSuccess?: (data: string | PixelMap | undefined, imageKnifeData: ImageKnifeData) => void;
+
  // 请求结束
  onLoadFailed?: (err: string) => void;
+  // 请求取消
+  onLoadCancel?: (reason: string) => void;
 }
--- a/library/src/main/ets/components/ImageKnifeComponent.ets
+++ b/library/src/main/ets/components/ImageKnifeComponent.ets
@ -83,6 +83,7 @@ export struct ImageKnifeComponent {
      .border(this.imageKnifeOption.border)
      .syncLoad(this.syncLoad)
      .draggable(false)
+      .onComplete(this.imageKnifeOption.onComplete)
      .onSizeChange((oldValue:SizeOptions, newValue:SizeOptions) => {
        this.currentWidth = newValue.width as number
        this.currentHeight = newValue.height as number
--- a/library/src/main/ets/model/ImageKnifeData.ets
+++ b/library/src/main/ets/model/ImageKnifeData.ets
@ -22,9 +22,23 @@ import { Size } from '@kit.ArkUI'
 export interface ImageKnifeData {
  source: PixelMap | string,
  imageWidth: number,
-  imageHeight: number
+  imageHeight: number,
+  type?:string
+}
+/**
+ * onComplete成功回调
+ */
+export interface EventImage {
+  width: number;
+  height: number;
+  componentWidth: number;
+  componentHeight: number;
+  loadingStatus: number;
+  contentWidth: number;
+  contentHeight: number;
+  contentOffsetX: number;
+  contentOffsetY: number;
 }
-
 /**
 * 缓存策略
 */
@ -60,7 +74,8 @@ export interface RequestJobResult {
  bufferSize: number
  fileKey: string
  loadFail?: string,
-  size?:Size
+  size?:Size,
+  type?: string
 }

 /**