From 5d823f4ab543f8841fa47de8c11b4de2b2b05901 Mon Sep 17 00:00:00 2001 From: xiagengwen Date: Tue, 11 Jun 2024 19:05:06 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8DimageKnife=E9=99=8D=E9=87=87?= =?UTF-8?q?=E6=A0=B7=E6=A1=88=E4=BE=8Bgif=E3=80=81webp=E6=97=A0=E6=B3=95?= =?UTF-8?q?=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: xiagengwen --- entry/src/main/ets/pages/downsamplingPage.ets | 190 ++++++++++++------ 1 file changed, 130 insertions(+), 60 deletions(-) diff --git a/entry/src/main/ets/pages/downsamplingPage.ets b/entry/src/main/ets/pages/downsamplingPage.ets index 7fea82e..09a8b12 100644 --- a/entry/src/main/ets/pages/downsamplingPage.ets +++ b/entry/src/main/ets/pages/downsamplingPage.ets @@ -48,14 +48,46 @@ struct Index { placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed') } + private timeId:number = -1; transformSquare1(mUrl: string|Resource|PixelMap) { let imageKnifeOption: RequestOption = new RequestOption(); imageKnifeOption.load(mUrl) .addListener({ callback: (err: BusinessError | string, data: ImageKnifeData) => { + if (this.timeId !== -1) { + clearTimeout(this.timeId); + } this.originalMSquarePixelMap = data.drawPixelMap?.imagePixelMap as PixelMap; - this.originalBytesNumber = (data.drawPixelMap?.imagePixelMap as PixelMap).getPixelBytesNumber() + if (!!this.originalMSquarePixelMap) { + this.originalBytesNumber = (data.drawPixelMap?.imagePixelMap as PixelMap).getPixelBytesNumber(); + } else { + let index: number = 0; + if (data.drawGIFFrame) { + if (data.drawGIFFrame.imageGIFFrames) { + let renderGif = () => { + if (data.drawGIFFrame) { + if (data.drawGIFFrame.imageGIFFrames) { + let pixelmap = data.drawGIFFrame.imageGIFFrames[index].drawPixelMap; + let delay = data.drawGIFFrame.imageGIFFrames[index].delay; + if (pixelmap) { + this.originalMSquarePixelMap = pixelmap; + this.originalBytesNumber = pixelmap.getPixelBytesNumber(); + } + index++; + if (index == data.drawGIFFrame.imageGIFFrames.length - 1) { + index = 0; + } + if(!!delay) { + this.timeId = setTimeout(renderGif, data!.drawGIFFrame!.imageGIFFrames![index].delay); + } + } + } + } + renderGif(); + } + } + } return false; } }) @@ -68,8 +100,39 @@ struct Index { imageKnifeOption.load(mUrl) .addListener({ callback: (err: BusinessError | string, data: ImageKnifeData) => { + if (this.timeId !== -1) { + clearTimeout(this.timeId); + } this.mSquarePixelMap = data.drawPixelMap?.imagePixelMap as PixelMap; - this.bytesNumber = (data.drawPixelMap?.imagePixelMap as PixelMap).getPixelBytesNumber() + if (!!this.mSquarePixelMap) { + this.bytesNumber = (data.drawPixelMap?.imagePixelMap as PixelMap).getPixelBytesNumber(); + } else { + let index: number = 0; + if (data.drawGIFFrame) { + if (data.drawGIFFrame.imageGIFFrames) { + let renderGif = () => { + if (data.drawGIFFrame) { + if (data.drawGIFFrame.imageGIFFrames) { + let pixelmap = data.drawGIFFrame.imageGIFFrames[index].drawPixelMap; + let delay = data.drawGIFFrame.imageGIFFrames[index].delay; + if (pixelmap) { + this.mSquarePixelMap = pixelmap; + this.bytesNumber = pixelmap.getPixelBytesNumber(); + } + index++; + if (index == data.drawGIFFrame.imageGIFFrames.length - 1) { + index = 0; + } + if(!!delay) { + this.timeId = setTimeout(renderGif, data!.drawGIFFrame!.imageGIFFrames![index].delay); + } + } + } + } + renderGif(); + } + } + } return false; } }) @@ -131,16 +194,16 @@ struct Index { this.transformSquare1(this.url); }); - // Button('gif') - // .onClick(() => { - // this.transformSquare1(this.url); - // - // }); - // Button('webp') - // .onClick(() => { - // this.transformSquare1(this.url); - // - // }); + Button('gif') + .onClick(() => { + this.transformSquare1(this.url); + + }); + Button('webp') + .onClick(() => { + this.transformSquare1(this.url); + + }); }.margin({ top: 20, bottom: 20 }) Text("原图字节大小：" + this.originalBytesNumber) @@ -199,26 +262,26 @@ struct Index { downsampling: new fitter() } }); - // Button('gif') - // .onClick(() => { - // // this.transformSquare2(this.url); - // this.imageKnifeOption = { - // loadSrc: gifUrl, - // placeholderSrc: $r('app.media.icon_loading'), - // errorholderSrc: $r('app.media.icon_failed'), - // downsampling: new fitter() - // } - // }); - // Button('webp') - // .onClick(() => { - // // this.transformSquare2(this.url); - // this.imageKnifeOption = { - // loadSrc: webpUrl, - // placeholderSrc: $r('app.media.icon_loading'), - // errorholderSrc: $r('app.media.icon_failed'), - // downsampling: new fitter() - // } - // }); + Button('gif') + .onClick(() => { + // this.transformSquare2(this.url); + this.imageKnifeOption = { + loadSrc: gifUrl, + placeholderSrc: $r('app.media.icon_loading'), + errorholderSrc: $r('app.media.icon_failed'), + downsampling: new fitter() + } + }); + Button('webp') + .onClick(() => { + // this.transformSquare2(this.url); + this.imageKnifeOption = { + loadSrc: webpUrl, + placeholderSrc: $r('app.media.icon_loading'), + errorholderSrc: $r('app.media.icon_failed'), + downsampling: new fitter() + } + }); }.margin({ top: 20, bottom: 20 }) Text("降采样字节大小:" + this.bytesNumber) @@ -259,16 +322,16 @@ struct Index { this.transformSquare1(jpgUrl); }); - // Button('gif') - // .onClick(() => { - // this.transformSquare1(gifUrl); - // - // }); - // Button('webp') - // .onClick(() => { - // this.transformSquare1(webpUrl); - // - // }); + Button('gif') + .onClick(() => { + this.transformSquare1(gifUrl); + + }); + Button('webp') + .onClick(() => { + this.transformSquare1(webpUrl); + + }); }.margin({ top: 20, bottom: 20 }) Text("原图字节大小：" + this.originalBytesNumber) @@ -323,24 +386,24 @@ struct Index { errorholderSrc: $r('app.media.icon_failed'), } }); - // Button('gif') - // .onClick(() => { - // // this.transformSquare2(gifUrl); - // this.imageKnifeOption = { - // loadSrc: gifUrl, - // placeholderSrc: $r('app.media.icon_loading'), - // errorholderSrc: $r('app.media.icon_failed'), - // } - // }); - // Button('webp') - // .onClick(() => { - // // this.transformSquare2(webpUrl); - // this.imageKnifeOption = { - // loadSrc: webpUrl, - // placeholderSrc: $r('app.media.icon_loading'), - // errorholderSrc: $r('app.media.icon_failed'), - // } - // }); + Button('gif') + .onClick(() => { + // this.transformSquare2(gifUrl); + this.imageKnifeOption = { + loadSrc: gifUrl, + placeholderSrc: $r('app.media.icon_loading'), + errorholderSrc: $r('app.media.icon_failed'), + } + }); + Button('webp') + .onClick(() => { + // this.transformSquare2(webpUrl); + this.imageKnifeOption = { + loadSrc: webpUrl, + placeholderSrc: $r('app.media.icon_loading'), + errorholderSrc: $r('app.media.icon_failed'), + } + }); }.margin({ top: 20, bottom: 20 }) Text("降采样字节大小:" + this.bytesNumber) @@ -362,5 +425,12 @@ struct Index { } .height('100%') } + + aboutToDisappear() { + if (this.timeId !== -1) { + clearTimeout(this.timeId); + this.timeId = -1; + } + } }