diff --git a/README.md b/README.md index fb65c0e..5641fc7 100644 --- a/README.md +++ b/README.md @@ -265,6 +265,35 @@ ImageKnifeAnimatorComponent({ }).width(300).height(300).backgroundColor(Color.Orange).margin({top:30}) ``` +#### 11.加载图片回调信息数据 示例 +``` +ImageKnifeComponent({ ImageKnifeOption: = new ImageKnifeOption({ + loadSrc: $r('app.media.pngSample'), + objectFit: ImageFit.Contain, + onLoadListener: { + onLoadStart: (req) => { + let startCallBackData = JSON.stringify(req?.getImageKnifeData()); + }, + onLoadFailed: (res, req) => { + let failedBackData = res + ";" + JSON.stringify(req?.getImageKnifeData()); + }, + onLoadSuccess: (data, imageData, req) => { + let successBackData = JSON.stringify(req?.getImageKnifeData()); + }, + onLoadCancel: (res, req) => { + let cancelBackData = res + ";" + JSON.stringify(req?.getImageKnifeData()); + } + }, + border: { radius: 50 }, + onComplete: (event) => { + if (event && event.loadingStatus == 0) { + let render_success = JSON.stringify(Date.now()) + } + } + }) +}).width(100).height(100) +``` + #### Reuse Scenario Clear the component content in the **aboutToRecycle** lifecycle and trigger image loading through watch observeration. ## Available APIs @@ -326,18 +355,18 @@ Clear the component content in the **aboutToRecycle** lifecycle and trigger imag | putCacheImage | url: string, pixelMap: PixelMap, cacheType: CacheStrategy = CacheStrategy.Default, signature?: string | Writes to the memory disk cache. | | removeMemoryCache | url: string | Removes an entry from the memory cache. | | removeFileCache | url: string | Removes an entry from the file cache. | -| getCacheLimitSize | cacheType?: CacheStrategy | Gets the upper limit size of the specified cache | -| getCurrentCacheNum | cacheType?: CacheStrategy | Gets the number of images currently cached in the specified cache | -| getCurrentCacheSize | cacheType?: CacheStrategy | Gets the current size of the specified cache | +| getCurrentCacheNum | cacheType?: CacheStrategy | 获取指定缓存的当前缓存图片个数 | +| getCurrentCacheSize | cacheType?: CacheStrategy | 获取指定缓存的当前大小 | +| getCurrentCacheSize | cacheType?: CacheStrategy | 获取指定缓存的当前大小 | -### Description of the callback interface -| Callback interface | Callback field | Description of callback data | -|------------------------------|-------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| onLoadStart | req: ImageKnifeRequest | The req return field contains information about the image request, such as the url of the image and the width and height of its components, while ImageKnifeRequest contains ImageKnifeData, which contains the start of the request and the point at which it checks the memory cache | -| onLoadSuccess | data: string \| PixelMap \| undefined, imageData: ImageKnifeData, req?: ImageKnifeRequest | data: The result data is loaded successfully. imageData: information stored in the cache of the image, req: information of the image request, and ImageKnifeData, including the original size of the image in the request, image decoding size, format, picture frame, request end time, disk check time, network request start and end, image decoding start and end and other time points | -| onLoadFailed | err: string, req?: ImageKnifeRequest | err: indicates error information. req: Information of image request. Meanwhile, ImageKnifeData contains the error information of the request (ErrorInfo, TimeInfo). ErrorInfo contains the error phase, error code and the error code of network request. TimeInfo contains the end time of the request, the disk check time, the start and end of the network request, and the start and end of the image decoding | -| onLoadCancel | reason: string, req?: ImageKnifeRequest | reason: indicates the reason for canceling the callback. req: Information of image request. Meanwhile, ImageKnifeData contains the error information of the request (ErrorInfo, TimeInfo). ErrorInfo contains the error phase, error code and the error code of network request. TimeInfo contains the end time of the request, the disk check time, the start and end of the network request, the start and end of the image decoding, and the request cancellation | +### 回调接口说明 +| 回调接口 | 回调字段 | 回调描述 | +|----------------|-------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| onLoadStart | req: ImageKnifeRequest | req返回字段中包含了图片请求的信息，如图片的url及其组件的宽高，同时ImageKnifeRequest包含了ImageKnifeData，其中包含此次请求的开始及其检查内存缓存的时间点 | +| onLoadSuccess | data: string \| PixelMap \| undefined, imageData: ImageKnifeData, req?: ImageKnifeRequest | data:加载成功的结果数据；imageData：图片的存入缓存中的信息 ，req：图片请求的信息，同时其中的ImageKnifeData，包含此次请求中图片的原始大小、图片的解码大小、格式、图片帧、请求结束时间、磁盘检查时间、网络请求开始结束、图片解码开始结束等时间点 | +| onLoadFailed | err: string, req?: ImageKnifeRequest | err:错误信息描述；req：图片请求的信息，同时其中的ImageKnifeData，包含此次请求错误信息（ErrorInfo，TimeInfo），ErrorInfo其中包含了，错误阶段、错误码及其网络请求的错误码；TimeInfo中包含请求结束时间、磁盘检查时间、网络请求开始结束、图片解码开始结束等时间点 | +| onLoadCancel | reason: string, req?: ImageKnifeRequest | reason:取消回调原因；req：图片请求的信息，同时其中的ImageKnifeData，包含此次请求错误信息（ErrorInfo，TimeInfo），ErrorInfo其中包含了，错误阶段、错误码及其网络请求的错误码；TimeInfo中包含请求结束时间、磁盘检查时间、网络请求开始结束、图片解码开始结束及其请求取消等时间点 | ### Graphics tRansformation Types (GPUImage Dependency Required) diff --git a/README_zh.md b/README_zh.md index 86cd27a..540aeb8 100644 --- a/README_zh.md +++ b/README_zh.md @@ -265,6 +265,36 @@ ImageKnifeAnimatorComponent({ }).width(300).height(300).backgroundColor(Color.Orange).margin({top:30}) ``` +#### 11.加载图片回调信息数据 示例 +``` +ImageKnifeComponent({ ImageKnifeOption: = new ImageKnifeOption({ + loadSrc: $r('app.media.pngSample'), + objectFit: ImageFit.Contain, + onLoadListener: { + onLoadStart: (req) => { + let startCallBackData = JSON.stringify(req?.getImageKnifeData()); + }, + onLoadFailed: (res, req) => { + let failedBackData = res + ";" + JSON.stringify(req?.getImageKnifeData()); + }, + onLoadSuccess: (data, imageData, req) => { + let successBackData = JSON.stringify(req?.getImageKnifeData()); + }, + onLoadCancel: (res, req) => { + let cancelBackData = res + ";" + JSON.stringify(req?.getImageKnifeData()); + } + }, + border: { radius: 50 }, + onComplete: (event) => { + if (event && event.loadingStatus == 0) { + let render_success = JSON.stringify(Date.now()) + } + } + }) +}).width(100).height(100) +``` + + #### 复用场景 在aboutToRecycle生命周期清空组件内容；通过watch监听触发图片的加载。 ## 接口说明 @@ -334,7 +364,7 @@ ImageKnifeAnimatorComponent({ | getCurrentCacheSize | cacheType?: CacheStrategy | 获取指定缓存的当前大小 | | getCurrentCacheSize | cacheType?: CacheStrategy | 获取指定缓存的当前大小 | -### 回调接口字段说明 +### 回调接口说明 | 回调接口 | 回调字段 | 回调描述 | |----------------|-------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------| | onLoadStart | req: ImageKnifeRequest | req返回字段中包含了图片请求的信息，如图片的url及其组件的宽高，同时ImageKnifeRequest包含了ImageKnifeData，其中包含此次请求的开始及其检查内存缓存的时间点 |