diff --git a/CHANGELOG.md b/CHANGELOG.md index e7cd77b..b8fbd35 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,10 @@ +## 3.2.0-rc.5 +- Enhance: ImageFit.Auto support adaptive height after component width change +- Fix bug: call onLoadStart 2 times(import from 3.2.0-rc.0) + ## 3.2.0-rc.4 - Support ICO format images -- Fix bugs: call reload problem in onLoadFailed +- Fix bug: call reload problem in onLoadFailed - Provide default downsampling strategy to prevent slow loading for large images ## 3.2.0-rc.3 diff --git a/entry/src/main/ets/pages/AutoImageFit.ets b/entry/src/main/ets/pages/AutoImageFit.ets new file mode 100644 index 0000000..3dc52d4 --- /dev/null +++ b/entry/src/main/ets/pages/AutoImageFit.ets @@ -0,0 +1,60 @@ +/* + * 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, + ImageKnifeData, + ImageKnifeRequest, LogUtil +} from '@ohos/libraryimageknife'; + +@Entry +@Component +struct AutoImageFit { + @State width1: Length = '100%' + + build() { + Scroll() { + Column() { + Button($r('app.string.adjust_size')).onClick(() => { + if (this.width1.toString() == '100%') { + this.width1 = '60%' + } else { + this.width1 = '100%' + } + }).width('100%') + Text('Image') + Image('https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/56/v3/8MdhfSsCSMKj4sA6okUWrg/5uBx56tLTUO3RYQl-E5JiQ.jpg').width('100%').objectFit(ImageFit.Auto) + Text('ImageKnife') + ImageKnifeComponent({ + imageKnifeOption: { + loadSrc: 'https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_1_900_9/56/v3/8MdhfSsCSMKj4sA6okUWrg/5uBx56tLTUO3RYQl-E5JiQ.jpg', + objectFit: ImageFit.Auto, + onLoadListener: { + onLoadStart: (request?: ImageKnifeRequest) => { + LogUtil.info('onLoadStart') + }, + onLoadSuccess: (data: string | PixelMap | undefined, imageKnifeData: ImageKnifeData, + request?: ImageKnifeRequest) => { + LogUtil.info('onLoadSuccess') + } + } + } + }).width('100%') + + }.width(this.width1).border({ width: 1 }) + } + } +} + + diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index 2e68f9b..8e6b366 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -95,6 +95,12 @@ struct Index { }); }) + Button($r('app.string.Auto_ImageFit')).margin({top:10}).onClick(()=>{ + router.push({ + uri: 'pages/AutoImageFit', + + }); + }) Button($r('app.string.Image_scaling')).margin({top:10}).onClick(()=>{ router.push({ uri: 'pages/TransformPage', diff --git a/entry/src/main/resources/base/element/string.json b/entry/src/main/resources/base/element/string.json index 055082a..fd82d59 100644 --- a/entry/src/main/resources/base/element/string.json +++ b/entry/src/main/resources/base/element/string.json @@ -647,6 +647,14 @@ { "name": "After_the_sampling", "value": "Size after downsampling" + }, + { + "name": "adjust_size", + "value": "Adjust size" + }, + { + "name": "Auto_ImageFit", + "value": "ImageFit.Auto:Auto ImageFit Height" } ] } \ 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 199682b..aa1e15f 100644 --- a/entry/src/main/resources/base/profile/main_pages.json +++ b/entry/src/main/resources/base/profile/main_pages.json @@ -37,6 +37,7 @@ "pages/MaxRequest3", "pages/TestImageKnifeCallbackPage", "pages/TestListImageKnifeCallbackPage", - "pages/DownSamplePage" + "pages/DownSamplePage", + "pages/AutoImageFit" ] } \ No newline at end of file diff --git a/entry/src/main/resources/zh_CN/element/string.json b/entry/src/main/resources/zh_CN/element/string.json index c6ea1fc..2990179 100644 --- a/entry/src/main/resources/zh_CN/element/string.json +++ b/entry/src/main/resources/zh_CN/element/string.json @@ -643,6 +643,14 @@ { "name": "After_the_sampling", "value": "降采样后大小" + }, + { + "name": "adjust_size", + "value": "调整大小" + }, + { + "name": "Auto_ImageFit", + "value": "ImageFit.Auto:自适用图片高度" } ] } \ No newline at end of file diff --git a/library/oh-package.json5 b/library/oh-package.json5 index 1b0f672..428e958 100644 --- 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.2.0-rc.4", + "version": "3.2.0-rc.5", "dependencies": { "@ohos/gpu_transform": "^1.0.2" }, diff --git a/library/src/main/ets/ImageKnifeDispatcher.ets b/library/src/main/ets/ImageKnifeDispatcher.ets index 3a8a5f9..139b353 100644 --- a/library/src/main/ets/ImageKnifeDispatcher.ets +++ b/library/src/main/ets/ImageKnifeDispatcher.ets @@ -24,7 +24,6 @@ import image from '@ohos.multimedia.image'; import emitter from '@ohos.events.emitter'; import { Constants, LoadPhase, LoadPixelMapCode } from './utils/Constants'; import taskpool from '@ohos.taskpool'; -import { FileTypeUtil } from './utils/FileTypeUtil'; import { IEngineKey } from './key/IEngineKey'; import { DefaultEngineKey } from './key/DefaultEngineKey'; import { @@ -60,7 +59,7 @@ export class ImageKnifeDispatcher { } } else { memoryCache = ImageKnife.getInstance() - .loadFromMemoryCache(this.engineKey.generateMemoryKey(imageSrc, requestSource, request.imageKnifeOption,isAnimator)); + .loadFromMemoryCache(this.engineKey.generateMemoryKey(imageSrc, requestSource, request.imageKnifeOption,isAnimator, request.componentWidth, request.componentHeight)); } //记录ImageKnifeRequestSource.SRC 开始内存检查的时间点 @@ -197,7 +196,7 @@ export class ImageKnifeDispatcher { LogUtil.log('ImageKnife_DataTime_getAndShowImage_onLoadStart:' + currentRequest.imageKnifeOption.loadSrc) } - let memoryKey: string = this.engineKey.generateMemoryKey(imageSrc, requestSource, currentRequest.imageKnifeOption,isAnimator) + let memoryKey: string = this.engineKey.generateMemoryKey(imageSrc, requestSource, currentRequest.imageKnifeOption,isAnimator, currentRequest.componentWidth, currentRequest.componentHeight) let requestList: List | undefined = this.executingJobMap.get(memoryKey) if (requestList == undefined) { requestList = new List() @@ -213,16 +212,6 @@ export class ImageKnifeDispatcher { isWatchProgress = true } - // 回调请求开始 - requestList.forEach((requestWithSource: ImageKnifeRequestWithSource) => { - if (requestWithSource.source === ImageKnifeRequestSource.SRC && requestWithSource.request.imageKnifeOption.onLoadListener?.onLoadStart !== undefined) { - requestWithSource.request.imageKnifeOption.onLoadListener?.onLoadStart(requestWithSource.request) - LogUtil.log('ImageKnife_DataTime_getAndShowImage_onLoadStart:' + currentRequest.imageKnifeOption.loadSrc) - } - if (requestWithSource.request.imageKnifeOption.progressListener !== undefined && requestWithSource.source === ImageKnifeRequestSource.SRC) { - isWatchProgress = true - } - }); let src: string | number = '' let moduleName: string = '' let resName: string = '' @@ -259,7 +248,8 @@ export class ImageKnifeDispatcher { caPath: currentRequest.imageKnifeOption.caPath, targetWidth: currentRequest.componentWidth, targetHeight: currentRequest.componentHeight, - downsampType: currentRequest.imageKnifeOption.downsampleOf == undefined ? DownsampleStrategy.DEFAULT : currentRequest.imageKnifeOption.downsampleOf + downsampType: currentRequest.imageKnifeOption.downsampleOf == undefined ? DownsampleStrategy.DEFAULT : currentRequest.imageKnifeOption.downsampleOf, + isAutoImageFit: currentRequest.imageKnifeOption.objectFit == ImageFit.Auto } if(request.customGetImage == undefined) { @@ -438,7 +428,7 @@ export class ImageKnifeDispatcher { if (currentRequest.imageKnifeOption.writeCacheStrategy !== CacheStrategy.File) { LogUtil.log('ImageKnife_DataTime_getAndShowImage_saveMemoryCache.start:'+currentRequest.imageKnifeOption.loadSrc) ImageKnife.getInstance() - .saveMemoryCache(this.engineKey.generateMemoryKey(imageSrc, requestSource, currentRequest.imageKnifeOption,isAnimator), + .saveMemoryCache(this.engineKey.generateMemoryKey(imageSrc, requestSource, currentRequest.imageKnifeOption,isAnimator, currentRequest.componentWidth, currentRequest.componentHeight), saveCacheImageData); LogUtil.log('ImageKnife_DataTime_getAndShowImage_saveMemoryCache.end:'+currentRequest.imageKnifeOption.loadSrc) } diff --git a/library/src/main/ets/ImageKnifeLoader.ets b/library/src/main/ets/ImageKnifeLoader.ets index 0532367..2a71b22 100644 --- a/library/src/main/ets/ImageKnifeLoader.ets +++ b/library/src/main/ets/ImageKnifeLoader.ets @@ -132,6 +132,11 @@ export class ImageKnifeLoader { let size = imageInfoSync.size callBackData.imageWidth = size.width; callBackData.imageHeight = size.height; + + if (request.isAutoImageFit && request.requestSource == ImageKnifeRequestSource.SRC){ + request.componentHeight = request.componentWidth * size.height / size.width + } + try { if ((request.downsampType !== DownsampleStrategy.NONE) && request.requestSource == ImageKnifeRequestSource.SRC) { diff --git a/library/src/main/ets/components/ImageKnifeComponent.ets b/library/src/main/ets/components/ImageKnifeComponent.ets index 7c88647..248bdf9 100644 --- a/library/src/main/ets/components/ImageKnifeComponent.ets +++ b/library/src/main/ets/components/ImageKnifeComponent.ets @@ -33,6 +33,7 @@ export struct ImageKnifeComponent { private lastWidth: number = 0 private lastHeight: number = 0 private currentWidth: number = 0 + private isImageFitAutoResize: boolean = false private currentHeight: number = 0 private componentVersion: number = 0 private currentContext: common.UIAbilityContext | undefined = undefined @@ -105,7 +106,12 @@ export struct ImageKnifeComponent { ' placeholderSrc = ' + this.imageKnifeOption.placeholderSrc + ' errorholderSrc = ' + this.imageKnifeOption.errorholderSrc + ' componentId = ' + this.getUniqueId()) - ImageKnife.getInstance().execute(this.getRequest(this.currentWidth, this.currentHeight)) + + if (this.imageKnifeOption.objectFit === ImageFit.Auto && this.isImageFitAutoResize) { + this.isImageFitAutoResize = false + } else { + ImageKnife.getInstance().execute(this.getRequest(this.currentWidth, this.currentHeight)) + } } } }) @@ -114,6 +120,7 @@ export struct ImageKnifeComponent { watchImageKnifeOption() { this.clearLastRequest() this.componentVersion++ + this.isImageFitAutoResize = false this.objectFit = this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit LogUtil.log('watchImageKnifeOption execute request:width=' + this.currentWidth + ' height= ' + this.currentHeight + ' loadSrc = ' + this.imageKnifeOption.loadSrc + @@ -131,40 +138,37 @@ export struct ImageKnifeComponent { } getRequest(width: number, height: number): ImageKnifeRequest { - if (this.request == undefined) { - this.request = new ImageKnifeRequest( - this.imageKnifeOption, - this.imageKnifeOption.context !== undefined ? this.imageKnifeOption.context : this.getCurrentContext(), - width, - height, - this.componentVersion, - { - showPixelMap: (version: number, pixelMap: PixelMap | string,size:Size, requestSource: ImageKnifeRequestSource) => { - if (version !== this.componentVersion) { - return //针对reuse场景，不显示历史图片 - } - this.pixelMap = pixelMap - if (typeof this.pixelMap !== 'string') { - if (this.imageKnifeOption.objectFit === ImageFit.Auto) { - this.adaptiveWidth = this.currentWidth - this.adaptiveHeight = size.height * this.currentWidth / size.width - } - } - - if (requestSource == ImageKnifeRequestSource.SRC) { - this.objectFit = - this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit - } else if (requestSource == ImageKnifeRequestSource.PLACE_HOLDER) { - this.objectFit = - this.imageKnifeOption.placeholderObjectFit === undefined ? (this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit) : this.imageKnifeOption.placeholderObjectFit - } else { - this.objectFit = - this.imageKnifeOption.errorholderObjectFit === undefined ? (this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit) : this.imageKnifeOption.errorholderObjectFit + this.request = new ImageKnifeRequest( + this.imageKnifeOption, + this.imageKnifeOption.context !== undefined ? this.imageKnifeOption.context : this.getCurrentContext(), + width, + height, + this.componentVersion, + { + showPixelMap: (version: number, pixelMap: PixelMap | string,size:Size, requestSource: ImageKnifeRequestSource) => { + if (version !== this.componentVersion) { + return //针对reuse场景，不显示历史图片 + } + this.pixelMap = pixelMap + if (typeof this.pixelMap !== 'string') { + if (this.imageKnifeOption.objectFit === ImageFit.Auto && this.isImageFitAutoResize == false) { + this.adaptiveHeight = this.currentWidth * size.height / size.width + this.isImageFitAutoResize = true } } - }) - } + if (requestSource == ImageKnifeRequestSource.SRC) { + this.objectFit = + this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit + } else if (requestSource == ImageKnifeRequestSource.PLACE_HOLDER) { + this.objectFit = + this.imageKnifeOption.placeholderObjectFit === undefined ? (this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit) : this.imageKnifeOption.placeholderObjectFit + } else { + this.objectFit = + this.imageKnifeOption.errorholderObjectFit === undefined ? (this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit) : this.imageKnifeOption.errorholderObjectFit + } + } + }) return this.request } } diff --git a/library/src/main/ets/model/ImageKnifeData.ets b/library/src/main/ets/model/ImageKnifeData.ets index 6d65078..5bcde11 100644 --- a/library/src/main/ets/model/ImageKnifeData.ets +++ b/library/src/main/ets/model/ImageKnifeData.ets @@ -150,6 +150,7 @@ export interface RequestJobRequest { caPath?: string, targetWidth: number targetHeight: number - downsampType: DownsampleStrategy + downsampType: DownsampleStrategy, + isAutoImageFit: boolean }