diff --git a/README.md b/README.md index 16f35bb..fb65c0e 100644 --- a/README.md +++ b/README.md @@ -265,35 +265,6 @@ ImageKnifeAnimatorComponent({ }).width(300).height(300).backgroundColor(Color.Orange).margin({top:30}) ``` -#### 11.Load the image callback information data -``` -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 @@ -359,6 +330,15 @@ Clear the component content in the **aboutToRecycle** lifecycle and trigger imag | 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 | + +### 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 | + ### Graphics tRansformation Types (GPUImage Dependency Required) | Type | Description | diff --git a/README_zh.md b/README_zh.md index a01aac5..86cd27a 100644 --- a/README_zh.md +++ b/README_zh.md @@ -264,34 +264,6 @@ ImageKnifeAnimatorComponent({ },animatorOption:this.animatorOption }).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监听触发图片的加载。 @@ -360,7 +332,15 @@ ImageKnifeComponent({ ImageKnifeOption: = new ImageKnifeOption({ | getCacheLimitSize | cacheType?: CacheStrategy | 获取指定缓存的上限大小 | | getCurrentCacheNum | cacheType?: CacheStrategy | 获取指定缓存的当前缓存图片个数 | | getCurrentCacheSize | cacheType?: CacheStrategy | 获取指定缓存的当前大小 | +| getCurrentCacheSize | cacheType?: CacheStrategy | 获取指定缓存的当前大小 | +### 回调接口字段说明 +| 回调接口 | 回调字段 | 回调描述 | +|----------------|-------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| 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中包含请求结束时间、磁盘检查时间、网络请求开始结束、图片解码开始结束及其请求取消等时间点 | ### 图形变换类型（需要为GPUImage添加依赖项） diff --git a/entry/src/main/ets/pages/TestCacheDataPage.ets b/entry/src/main/ets/pages/TestCacheDataPage.ets index 89ac6fc..b7b75c2 100644 --- a/entry/src/main/ets/pages/TestCacheDataPage.ets +++ b/entry/src/main/ets/pages/TestCacheDataPage.ets @@ -13,7 +13,7 @@ * limitations under the License. */ -import { ImageKnife, CacheStrategy, ImageKnifeComponent, ImageKnifeOption } from '@ohos/imageknife'; +import { ImageKnife, CacheStrategy, ImageKnifeComponent, ImageKnifeOption } from '@ohos/libraryimageknife'; @Entry @Component diff --git a/entry/src/main/ets/pages/TestImageKnifeCallbackPage.ets b/entry/src/main/ets/pages/TestImageKnifeCallbackPage.ets index 9051649..9efc1fb 100644 --- a/entry/src/main/ets/pages/TestImageKnifeCallbackPage.ets +++ b/entry/src/main/ets/pages/TestImageKnifeCallbackPage.ets @@ -13,7 +13,7 @@ * limitations under the License. */ -import { ImageKnifeComponent, ImageKnifeData, ImageKnifeOption, ImageKnifeRequest } from '@ohos/imageknife'; +import { ImageKnifeComponent, ImageKnifeData, ImageKnifeOption, ImageKnifeRequest } from '@ohos/libraryimageknife'; import { router } from '@kit.ArkUI'; @Entry diff --git a/entry/src/main/ets/pages/TestListImageKnifeCallbackPage.ets b/entry/src/main/ets/pages/TestListImageKnifeCallbackPage.ets index 7c190ee..fc004e3 100644 --- a/entry/src/main/ets/pages/TestListImageKnifeCallbackPage.ets +++ b/entry/src/main/ets/pages/TestListImageKnifeCallbackPage.ets @@ -13,7 +13,7 @@ * limitations under the License. */ -import { ImageKnifeComponent} from '@ohos/imageknife'; +import { ImageKnifeComponent} from '@ohos/libraryimageknife'; class ArrayElement { src: string = ""; diff --git a/entry/src/main/ets/pages/TestLoadCancelListenerPage.ets b/entry/src/main/ets/pages/TestLoadCancelListenerPage.ets index 794930f..4508198 100644 --- a/entry/src/main/ets/pages/TestLoadCancelListenerPage.ets +++ b/entry/src/main/ets/pages/TestLoadCancelListenerPage.ets @@ -13,7 +13,7 @@ * limitations under the License. */ -import { ImageKnife, ImageKnifeComponent, ImageKnifeOption } from '@ohos/imageknife'; +import { ImageKnife, ImageKnifeComponent, ImageKnifeOption } from '@ohos/libraryimageknife'; @Entry diff --git a/library/src/main/ets/ImageKnifeDispatcher.ets b/library/src/main/ets/ImageKnifeDispatcher.ets index 8de5152..7389684 100644 --- a/library/src/main/ets/ImageKnifeDispatcher.ets +++ b/library/src/main/ets/ImageKnifeDispatcher.ets @@ -436,7 +436,7 @@ export class ImageKnifeDispatcher { // 回调请求成功 this.assembleImageKnifeData(requestWithSource.request.getImageKnifeData(), imageKnifeData,requestWithSource.request); requestWithSource.request.imageKnifeOption.onLoadListener.onLoadSuccess(imageKnifeData.source, - imageKnifeData, requestWithSource.request); + saveCacheImageData, requestWithSource.request); LogUtil.log("ImageKnife_DataTime_getAndShowImage_onLoadSuccess:"+currentRequest.imageKnifeOption.loadSrc) } } else if (requestWithSource.source == ImageKnifeRequestSource.ERROR_HOLDER) {