1.修正decodeEndTime记录错误

2.内存缓存记录图片buffersize
3.测试加载回调demo里展示图片来源于网络,文件缓存,还是内存缓存。 去除renderTime的记录
4.调整动图的测试页面,不涉及逻辑修改

Signed-off-by: madixin <madixin@huawei.com>
This commit is contained in:
madixin 2024-12-24 09:27:55 +08:00
parent db56763a50
commit 618320843f
7 changed files with 85 additions and 99 deletions

View File

@ -1,8 +1,10 @@
## 3.2.0-rc.7 ## 3.2.0-rc.7
- Successful callback returns httpCode - When successfully requesting the network, return the httpcode as well
- Fix bug: Network error code httpCode returns no data - Fix bug: Network error code httpCode returns no data
- Fix bug: Height adaptation leads to fixed component height - Modify implementation of ImageFit.Auto: do not modify image height
- modify memory cache limit and file cache limit - Modify memory cache limit and file cache limit
- Fix record decodeEndTime in imageKinfaData
- Add image buffersize in memory cache
## 3.2.0-rc.6 ## 3.2.0-rc.6
- Support LogUtil to turn off log - Support LogUtil to turn off log

View File

@ -12,83 +12,91 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import { AnimatorOption, ImageKnifeAnimatorComponent } from '@ohos/libraryimageknife' import { AnimatorOption, ImageKnifeAnimatorComponent, ImageKnifeOption } from '@ohos/libraryimageknife'
@Entry @Entry
@Component @Component
struct ImageAnimatorPage { struct ImageAnimatorPage {
@State animatorOption: AnimatorOption = { @State animatorOption: AnimatorOption = {
state: AnimationStatus.Running, state: AnimationStatus.Running,
iterations: 1, iterations: -1,
onFinish:()=>{ onFinish: () => {
console.log('ImageKnifeAnimatorComponent animatorOption onFinish') console.log('ImageKnifeAnimatorComponent animatorOption onFinish')
}, },
onStart:()=>{ onStart: () => {
console.log('ImageKnifeAnimatorComponent animatorOption onStart') console.log('ImageKnifeAnimatorComponent animatorOption onStart')
}, },
onPause:()=>{ onPause: () => {
console.log('ImageKnifeAnimatorComponent animatorOption onPause') console.log('ImageKnifeAnimatorComponent animatorOption onPause')
}, },
onCancel:()=>{ onCancel: () => {
console.log('ImageKnifeAnimatorComponent animatorOption onCancel') console.log('ImageKnifeAnimatorComponent animatorOption onCancel')
}, },
onRepeat:()=>{ onRepeat: () => {
console.log('ImageKnifeAnimatorComponent animatorOption onRepeat') console.log('ImageKnifeAnimatorComponent animatorOption onRepeat')
} }
} }
@State animatorOption1: AnimatorOption = { @State animatorOptionFirstFrame: AnimatorOption = {
state: AnimationStatus.Initial state: AnimationStatus.Initial
} }
@State animatorOption2: AnimatorOption = { @State animatorOptionLastFrame: AnimatorOption = {
state: AnimationStatus.Initial, state: AnimationStatus.Initial,
reverse: true reverse: true
} }
@State imageKnifeOption: ImageKnifeOption = {
loadSrc: 'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658',
placeholderSrc: $r('app.media.loading'),
errorholderSrc: $r('app.media.failed')
}
build() { build() {
Column(){ Column() {
Flex(){ Row() {
Button($r('app.string.Play')).onClick(()=>{ Button($r('app.string.Play')).onClick(() => {
this.animatorOption.state = AnimationStatus.Running this.animatorOption.state = AnimationStatus.Running
}) })
Button($r('app.string.Pause')).onClick(()=>{ Button($r('app.string.Pause')).onClick(() => {
this.animatorOption.state = AnimationStatus.Paused this.animatorOption.state = AnimationStatus.Paused
}) })
Button($r('app.string.Stop')).onClick(()=>{ Button($r('app.string.Stop')).onClick(() => {
this.animatorOption.state = AnimationStatus.Stopped this.animatorOption.state = AnimationStatus.Stopped
}) })
Button($r('app.string.Infinite_loop')).onClick(()=>{ }
Row() {
Button($r('app.string.Infinite_loop')).onClick(() => {
this.animatorOption.iterations = -1 this.animatorOption.iterations = -1
}) })
Button($r('app.string.Play_once')).onClick(()=>{ Button($r('app.string.Play_once')).onClick(() => {
this.animatorOption.iterations = 1 this.animatorOption.iterations = 1
}) })
Button($r('app.string.Play_twice')).onClick(()=>{ Button($r('app.string.Play_twice')).onClick(() => {
this.animatorOption.iterations = 2 this.animatorOption.iterations = 2
}) })
} }
ImageKnifeAnimatorComponent({ ImageKnifeAnimatorComponent({
imageKnifeOption:{ imageKnifeOption: this.imageKnifeOption,
loadSrc:'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658', animatorOption: this.animatorOption
placeholderSrc:$r('app.media.loading'), }).width(300).height(300).backgroundColor(Color.Orange).margin({ top: 30 })
errorholderSrc:$r('app.media.failed'),
border: { radius: 150 } Row({ space: 10 }) {
},animatorOption:this.animatorOption Column() {
}).width(300).height(300).backgroundColor(Color.Orange).margin({top:30}) Text($r('app.string.Display_the_first_frame')).fontSize(20)
Text($r('app.string.Display_the_first_frame')).fontSize(20) ImageKnifeAnimatorComponent({
ImageKnifeAnimatorComponent({ imageKnifeOption: this.imageKnifeOption,
imageKnifeOption:{ animatorOption: this.animatorOptionFirstFrame
loadSrc:'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658', }).width(120).height(120).backgroundColor(Color.Orange)
placeholderSrc:$r('app.media.loading'), }
errorholderSrc:$r('app.media.failed')
},animatorOption:this.animatorOption1 Column() {
}).width(200).height(200).backgroundColor(Color.Orange).margin({top:30}) Text($r('app.string.Display_the_last_frame')).fontSize(20)
Text($r('app.string.Display_the_last_frame')).fontSize(20) ImageKnifeAnimatorComponent({
ImageKnifeAnimatorComponent({ imageKnifeOption: this.imageKnifeOption,
imageKnifeOption:{ animatorOption: this.animatorOptionLastFrame
loadSrc:'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658', }).width(120).height(120).backgroundColor(Color.Orange)
placeholderSrc:$r('app.media.loading'), }
errorholderSrc:$r('app.media.failed') }.margin({ top: 50 }).padding(10)
},animatorOption:this.animatorOption2
}).width(200).height(200).backgroundColor(Color.Orange).margin({top:30})
}.width('100%').height('100%') }.width('100%').height('100%')
} }
} }

View File

@ -50,8 +50,8 @@ struct TestImageKnifeCallbackPage {
@State netEndTime: string | undefined = '' @State netEndTime: string | undefined = ''
@State decodeStartTime: string | undefined = '' @State decodeStartTime: string | undefined = ''
@State decodeEndTime: string | undefined = '' @State decodeEndTime: string | undefined = ''
@State renderTime: string | undefined = ''
@State showChild: boolean = true; @State showChild: boolean = true;
@State requestFrom: string = '';
build() { build() {
Column() { Column() {
@ -76,7 +76,7 @@ struct TestImageKnifeCallbackPage {
Text($r('app.string.net_end_time', this.netEndTime)).fontSize(14) Text($r('app.string.net_end_time', this.netEndTime)).fontSize(14)
Text($r('app.string.decode_start_time', this.decodeStartTime)).fontSize(14) Text($r('app.string.decode_start_time', this.decodeStartTime)).fontSize(14)
Text($r('app.string.decode_end_time', this.decodeEndTime)).fontSize(14) Text($r('app.string.decode_end_time', this.decodeEndTime)).fontSize(14)
Text($r('app.string.render_time', this.renderTime)).fontSize(14) Text($r('app.string.request_data_from', this.requestFrom)).fontSize(14)
Scroll() { Scroll() {
Column() { Column() {
@ -104,11 +104,6 @@ struct TestImageKnifeCallbackPage {
} }
}, },
border: { radius: 50 }, border: { radius: 50 },
onComplete: (event) => {
if (event && event.loadingStatus == 0) {
this.renderTime = this.formatDate(Date.now());
}
}
} }
}) })
@ -134,11 +129,6 @@ struct TestImageKnifeCallbackPage {
} }
}, },
border: { radius: 50 }, border: { radius: 50 },
onComplete: (event) => {
if (event && event.loadingStatus == 0) {
this.renderTime = this.formatDate(Date.now());
}
}
} }
}) })
Button($r('app.string.local_pic')) Button($r('app.string.local_pic'))
@ -163,11 +153,6 @@ struct TestImageKnifeCallbackPage {
} }
}, },
border: { radius: 50 }, border: { radius: 50 },
onComplete: (event) => {
if (event && event.loadingStatus == 0) {
this.renderTime = this.formatDate(Date.now());
}
}
} }
}) })
} }
@ -195,11 +180,6 @@ struct TestImageKnifeCallbackPage {
} }
}, },
border: { radius: 50 }, border: { radius: 50 },
onComplete: (event) => {
if (event && event.loadingStatus == 0) {
this.renderTime = this.formatDate(Date.now());
}
}
} }
}) })
@ -225,11 +205,6 @@ struct TestImageKnifeCallbackPage {
} }
}, },
border: { radius: 50 }, border: { radius: 50 },
onComplete: (event) => {
if (event && event.loadingStatus == 0) {
this.renderTime = this.formatDate(Date.now());
}
}
} }
}) })
Button($r('app.string.share_load_failed')) Button($r('app.string.share_load_failed'))
@ -254,11 +229,6 @@ struct TestImageKnifeCallbackPage {
} }
}, },
border: { radius: 50 }, border: { radius: 50 },
onComplete: (event) => {
if (event && event.loadingStatus == 0) {
this.renderTime = this.formatDate(Date.now());
}
}
} }
}) })
} }
@ -286,11 +256,6 @@ struct TestImageKnifeCallbackPage {
} }
}, },
border: { radius: 50 }, border: { radius: 50 },
onComplete: (event) => {
if (event && event.loadingStatus == 0) {
this.renderTime = this.formatDate(Date.now());
}
}
} }
}) })
@ -341,6 +306,7 @@ struct TestImageKnifeCallbackPage {
this.reqStartTime = this.formatDate(data.timeInfo?.requestStartTime); this.reqStartTime = this.formatDate(data.timeInfo?.requestStartTime);
this.memoryStartTime = this.formatDate(data.timeInfo?.memoryCheckStartTime); this.memoryStartTime = this.formatDate(data.timeInfo?.memoryCheckStartTime);
this.memoryEndTime = this.formatDate(data.timeInfo?.memoryCheckEndTime); this.memoryEndTime = this.formatDate(data.timeInfo?.memoryCheckEndTime);
this.requestFrom = '';
} }
} }
@ -360,6 +326,14 @@ struct TestImageKnifeCallbackPage {
this.netEndTime = this.formatDate(data.timeInfo?.netRequestEndTime); this.netEndTime = this.formatDate(data.timeInfo?.netRequestEndTime);
this.decodeStartTime = this.formatDate(data.timeInfo?.diskCheckStartTime); this.decodeStartTime = this.formatDate(data.timeInfo?.diskCheckStartTime);
this.decodeEndTime = this.formatDate(data.timeInfo?.diskCheckEndTime); this.decodeEndTime = this.formatDate(data.timeInfo?.diskCheckEndTime);
if (data.timeInfo?.netRequestEndTime !== undefined) {
this.requestFrom = 'Http request';
} else if (data.timeInfo?.diskCheckEndTime !== undefined) {
this.requestFrom = 'File Cache';
} else {
this.requestFrom = 'Memory Cache';
}
} }
} }
@ -377,6 +351,7 @@ struct TestImageKnifeCallbackPage {
this.decodeStartTime = this.formatDate(data.timeInfo?.diskCheckStartTime); this.decodeStartTime = this.formatDate(data.timeInfo?.diskCheckStartTime);
this.decodeEndTime = this.formatDate(data.timeInfo?.diskCheckEndTime); this.decodeEndTime = this.formatDate(data.timeInfo?.diskCheckEndTime);
this.reqCancelTime = this.formatDate(data.timeInfo?.requestCancelTime) this.reqCancelTime = this.formatDate(data.timeInfo?.requestCancelTime)
this.requestFrom = '';
} }
} }
@ -407,7 +382,6 @@ struct TestImageKnifeCallbackPage {
this.netEndTime = '' this.netEndTime = ''
this.decodeStartTime = '' this.decodeStartTime = ''
this.decodeEndTime = '' this.decodeEndTime = ''
this.renderTime = ''
this.showChild = true; this.showChild = true;
} }
} }

View File

@ -110,11 +110,11 @@
}, },
{ {
"name": "Display_the_first_frame", "name": "Display_the_first_frame",
"value": "Display the first frame of the animation" "value": "first frame"
}, },
{ {
"name": "Display_the_last_frame", "name": "Display_the_last_frame",
"value": "Display the last frame of the animation" "value": "last frame"
}, },
{ {
"name": "Play", "name": "Play",
@ -582,11 +582,11 @@
}, },
{ {
"name": "img_frame", "name": "img_frame",
"value": "the number of frames of the picture:%d " "value": "the frames of the animator:%d "
}, },
{ {
"name": "img_content_size", "name": "img_content_size",
"value": "picture decoded width and height size:%s " "value": "decoded width and height size of image:%s "
}, },
{ {
"name": "err_msg", "name": "err_msg",
@ -606,15 +606,15 @@
}, },
{ {
"name": "req_start_time", "name": "req_start_time",
"value": "image request start time point:%s " "value": "request start time:%s "
}, },
{ {
"name": "req_end_time", "name": "req_end_time",
"value": "the point in time at which the image request ends:%s " "value": "request end time:%s "
}, },
{ {
"name": "req_cancel_time", "name": "req_cancel_time",
"value": "the point at which the image request is cancelled:%s " "value": "request cancel time:%s "
}, },
{ {
"name": "memory_start_time", "name": "memory_start_time",
@ -649,8 +649,8 @@
"value": "decoding end time point:%s " "value": "decoding end time point:%s "
}, },
{ {
"name": "render_time", "name": "request_data_from",
"value": "render successful time:%s " "value": "request from:%s "
}, },
{ {
"name": "Image_Downsampling_Functionality", "name": "Image_Downsampling_Functionality",

View File

@ -106,11 +106,11 @@
}, },
{ {
"name": "Display_the_first_frame", "name": "Display_the_first_frame",
"value": "动画显示第一帧" "value": "第一帧"
}, },
{ {
"name": "Display_the_last_frame", "name": "Display_the_last_frame",
"value": "动画显示最后一帧" "value": "最后一帧"
}, },
{ {
"name": "Play", "name": "Play",
@ -574,7 +574,7 @@
}, },
{ {
"name": "img_frame", "name": "img_frame",
"value": "片的帧数:%d " "value": "图帧数:%d "
}, },
{ {
"name": "img_content_size", "name": "img_content_size",
@ -598,15 +598,15 @@
}, },
{ {
"name": "req_start_time", "name": "req_start_time",
"value": "图片的请求开始时间:%s " "value": "请求开始时间:%s "
}, },
{ {
"name": "req_end_time", "name": "req_end_time",
"value": "图片请求结束时间:%s " "value": "请求结束时间:%s "
}, },
{ {
"name": "req_cancel_time", "name": "req_cancel_time",
"value": "图片请求取消时间:%s " "value": "请求取消时间:%s "
}, },
{ {
"name": "memory_start_time", "name": "memory_start_time",
@ -641,8 +641,8 @@
"value": "解码结束时间点:%s " "value": "解码结束时间点:%s "
}, },
{ {
"name": "render_time", "name": "request_data_from",
"value": "渲染成功的时间:%s " "value": "请求数据来自于:%s "
}, },
{ {
"name": "Image_Downsampling_Functionality", "name": "Image_Downsampling_Functionality",

View File

@ -115,6 +115,7 @@ export class ImageKnifeDispatcher {
target.imageWidth = memoryCache.imageWidth; target.imageWidth = memoryCache.imageWidth;
target.imageHeight = memoryCache.imageHeight; target.imageHeight = memoryCache.imageHeight;
target.type = memoryCache.type; target.type = memoryCache.type;
target.bufSize = memoryCache.bufSize
target.imageAnimator = memoryCache.imageAnimator; target.imageAnimator = memoryCache.imageAnimator;
} }
@ -425,6 +426,7 @@ export class ImageKnifeDispatcher {
imageWidth: requestJobResult.size == undefined ? 0 : requestJobResult.size.width, 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, type: requestJobResult.type,
bufSize: requestJobResult.bufferSize,
imageAnimator: imageKnifeData.imageAnimator imageAnimator: imageKnifeData.imageAnimator
} }

View File

@ -312,7 +312,7 @@ export class ImageKnifeLoader {
} else { } else {
timeInfo.decodeStartTime = Date.now() timeInfo.decodeStartTime = Date.now()
let base64str = 'data:image/' + typeValue + ';base64,' + new util.Base64Helper().encodeToStringSync(new Uint8Array(resBuf)) let base64str = 'data:image/' + typeValue + ';base64,' + new util.Base64Helper().encodeToStringSync(new Uint8Array(resBuf))
timeInfo.diskCheckEndTime = Date.now() timeInfo.decodeEndTime = Date.now()
let res: RequestJobResult = { let res: RequestJobResult = {
pixelMap: base64str, pixelMap: base64str,
bufferSize: resBuf.byteLength, bufferSize: resBuf.byteLength,