diff --git a/entry/src/main/ets/pages/downsamplingPage.ets b/entry/src/main/ets/pages/downsamplingPage.ets index f6b4c7a..7465a87 100644 --- a/entry/src/main/ets/pages/downsamplingPage.ets +++ b/entry/src/main/ets/pages/downsamplingPage.ets @@ -1,89 +1,116 @@ -import { FitCenter, ImageKnifeComponent, +/* + * 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 { + FitCenter, + ImageKnifeComponent, ImageKnifeData, ImageKnifeGlobal, ImageKnifeOption, - RequestOption } from '@ohos/libraryimageknife' + RequestOption +} from '@ohos/libraryimageknife' import { BusinessError } from '@ohos.base' import { fitter, sampleNone } from '@ohos/imageknife'; + let pngUrl = $r('app.media.pngSample'); let jpgUrl = $r('app.media.jpgSample'); let svgUrl = $r('app.media.svgSample'); let gifUrl = $r('app.media.gifSample'); let bmpUrl = $r('app.media.bmpSample'); let webpUrl = $r('app.media.webpSample'); -let ImageKnife = ImageKnifeGlobal.getInstance().getImageKnife(); +let imageKnife = ImageKnifeGlobal.getInstance().getImageKnife(); + @Entry @Component struct Index { - @State mSquarePixelMap1?: PixelMap = undefined; - @State mSquarePixelMap2?: PixelMap = undefined; - @State h:number = 0 - @State w:number = 0 - @State BytesNumber1:number = 0 - @State BytesNumber2:number = 0 - @State url:string = '' - @State network:Boolean = false - @State ImageKnifeOption1: ImageKnifeOption = { + @State originalMSquarePixelMap?: PixelMap = undefined; + @State mSquarePixelMap?: PixelMap = undefined; + @State h: number = 0 + @State w: number = 0 + @State originalBytesNumber: number = 0 + @State bytesNumber: number = 0 + @State url: string = '' + @State network: Boolean = false + @State imageKnifeOption: ImageKnifeOption = { loadSrc: $r('app.media.icon'), placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed') } - transformSquare1(mUrl:ESObject) { - let imageKnifeOption:RequestOption = new RequestOption(); + transformSquare1(mUrl: string|Resource|PixelMap) { + let imageKnifeOption: RequestOption = new RequestOption(); imageKnifeOption.load(mUrl) - .addListener({ callback: (err: BusinessError | string, data: ImageKnifeData) => { - this.mSquarePixelMap1 = data.drawPixelMap?.imagePixelMap as PixelMap; - this.BytesNumber1 = (data.drawPixelMap?.imagePixelMap as PixelMap).getPixelBytesNumber() - return false; - } }) - ImageKnife?.call(imageKnifeOption); + .addListener({ + callback: (err: BusinessError | string, data: ImageKnifeData) => { + this.originalMSquarePixelMap = data.drawPixelMap?.imagePixelMap as PixelMap; + this.originalBytesNumber = (data.drawPixelMap?.imagePixelMap as PixelMap).getPixelBytesNumber() + return false; + } + }) + imageKnife?.call(imageKnifeOption); } - transformSquare2(mUrl:ESObject) { - let imageKnifeOption:RequestOption = new RequestOption(); + + transformSquare2(mUrl: string|Resource|PixelMap) { + let imageKnifeOption: RequestOption = new RequestOption(); let a = new fitter() imageKnifeOption.load(mUrl) - .addListener({ callback: (err: BusinessError | string, data: ImageKnifeData) => { - this.mSquarePixelMap2 = data.drawPixelMap?.imagePixelMap as PixelMap; - this.BytesNumber2 = (data.drawPixelMap?.imagePixelMap as PixelMap).getPixelBytesNumber() - return false; - } }) - .setImageViewSize({ width: this.w, height:this.h}) + .addListener({ + callback: (err: BusinessError | string, data: ImageKnifeData) => { + this.mSquarePixelMap = data.drawPixelMap?.imagePixelMap as PixelMap; + this.bytesNumber = (data.drawPixelMap?.imagePixelMap as PixelMap).getPixelBytesNumber() + return false; + } + }) + .setImageViewSize({ width: this.w, height: this.h }) .downsampleOf(a) - ImageKnife?.call(imageKnifeOption); + imageKnife?.call(imageKnifeOption); } + @Builder TextInputSample() { Flex() { TextInput({ placeholder: '输入宽' }) - .onChange((EnterKeyType)=>{ - this.w =Number(EnterKeyType) + .onChange((enterKeyType) => { + this.w = Number(enterKeyType) }) TextInput({ placeholder: '输入高' }) - .onChange((EnterKeyType)=>{ - this.h =Number(EnterKeyType) + .onChange((enterKeyType) => { + this.h = Number(enterKeyType) }) }.padding(20) } build() { - Scroll(){ + Scroll() { Column() { - Row(){ + Row() { Button('切换网络图片') - .onClick(()=>{ - this.network = !this.network + .onClick(() => { + this.network = !this.network }) Text('输入网络图片url') TextInput({ placeholder: '输入url' }) - .onChange((urls)=>{ - this.url =urls + .onChange((urls) => { + this.url = urls }) } - if(this.network){ - Column(){ + + if (this.network) { + Column() { Text('原图') - Flex(){ + Flex() { Button('png') .onClick(() => { this.transformSquare1(this.url); @@ -114,11 +141,12 @@ struct Index { this.transformSquare1(this.url); }); - }.margin({top:20,bottom:20}) - Text("原图字节大小："+this.BytesNumber1) - Column(){ - if (this.mSquarePixelMap1) { - Image(this.mSquarePixelMap1 == undefined ? '' : this.mSquarePixelMap1!) + }.margin({ top: 20, bottom: 20 }) + + Text("原图字节大小：" + this.originalBytesNumber) + Column() { + if (this.originalMSquarePixelMap) { + Image(this.originalMSquarePixelMap == undefined ? '' : this.originalMSquarePixelMap!) .objectFit(ImageFit.Fill) .width(200) .height(200) @@ -127,82 +155,90 @@ struct Index { Text('component用法') }.height(300).width('100%').backgroundColor(Color.Pink) + Text('降采样图片') - Flex(){ + Flex() { Button('png') .onClick(() => { this.transformSquare2(this.url); - this.ImageKnifeOption1 = { + this.imageKnifeOption = { loadSrc: pngUrl, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), + downsampling: new fitter() } }); Button('svg') .onClick(() => { this.transformSquare2(this.url); - this.ImageKnifeOption1 = { + this.imageKnifeOption = { loadSrc: svgUrl, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), + downsampling: new fitter() } }); Button('bmp') .onClick(() => { this.transformSquare2(this.url); - this.ImageKnifeOption1 = { + this.imageKnifeOption = { loadSrc: bmpUrl, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), + downsampling: new fitter() } }); Button('jpg') .onClick(() => { this.transformSquare2(this.url); - this.ImageKnifeOption1 = { + this.imageKnifeOption = { loadSrc: jpgUrl, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), + downsampling: new fitter() } }); Button('gif') .onClick(() => { // this.transformSquare2(this.url); - this.ImageKnifeOption1 = { + 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.ImageKnifeOption1 = { + 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.BytesNumber2) + }.margin({ top: 20, bottom: 20 }) + + Text("降采样字节大小:" + this.bytesNumber) this.TextInputSample() - Column(){ - if (this.mSquarePixelMap2) { - Image(this.mSquarePixelMap2 == undefined ? '' : this.mSquarePixelMap2!) + Column() { + if (this.mSquarePixelMap) { + Image(this.mSquarePixelMap == undefined ? '' : this.mSquarePixelMap!) .objectFit(ImageFit.Fill) .width(200) .height(200) .margin({ top: 10 }) } Text('component用法') - ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption1 }).width(200).height(200) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(200).height(200) }.height(300).width('100%').backgroundColor(Color.Pink) }.backgroundColor(Color.Orange) - }else { - Column(){ + } else { + Column() { Text('原图') - Flex(){ + Flex() { Button('png') .onClick(() => { this.transformSquare1(pngUrl); @@ -233,11 +269,12 @@ struct Index { this.transformSquare1(webpUrl); }); - }.margin({top:20,bottom:20}) - Text("原图字节大小："+this.BytesNumber1) - Column(){ - if (this.mSquarePixelMap1) { - Image(this.mSquarePixelMap1 == undefined ? '' : this.mSquarePixelMap1!) + }.margin({ top: 20, bottom: 20 }) + + Text("原图字节大小：" + this.originalBytesNumber) + Column() { + if (this.originalMSquarePixelMap) { + Image(this.originalMSquarePixelMap == undefined ? '' : this.originalMSquarePixelMap!) .objectFit(ImageFit.Fill) .width(200) .height(200) @@ -246,12 +283,13 @@ struct Index { Text('component用法') }.height(300).width('100%').backgroundColor(Color.Pink) + Text('降采样图片') - Flex(){ + Flex() { Button('png') .onClick(() => { this.transformSquare2(pngUrl); - this.ImageKnifeOption1 = { + this.imageKnifeOption = { loadSrc: pngUrl, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), @@ -260,7 +298,7 @@ struct Index { Button('svg') .onClick(() => { this.transformSquare2(svgUrl); - this.ImageKnifeOption1 = { + this.imageKnifeOption = { loadSrc: svgUrl, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), @@ -270,7 +308,7 @@ struct Index { Button('bmp') .onClick(() => { this.transformSquare2(bmpUrl); - this.ImageKnifeOption1 = { + this.imageKnifeOption = { loadSrc: bmpUrl, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), @@ -279,7 +317,7 @@ struct Index { Button('jpg') .onClick(() => { this.transformSquare2(jpgUrl); - this.ImageKnifeOption1 = { + this.imageKnifeOption = { loadSrc: jpgUrl, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), @@ -288,7 +326,7 @@ struct Index { Button('gif') .onClick(() => { // this.transformSquare2(gifUrl); - this.ImageKnifeOption1 = { + this.imageKnifeOption = { loadSrc: gifUrl, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), @@ -297,30 +335,29 @@ struct Index { Button('webp') .onClick(() => { // this.transformSquare2(webpUrl); - this.ImageKnifeOption1 = { + this.imageKnifeOption = { loadSrc: webpUrl, placeholderSrc: $r('app.media.icon_loading'), errorholderSrc: $r('app.media.icon_failed'), } }); - }.margin({top:20,bottom:20}) - Text("降采样字节大小:"+this.BytesNumber2) + }.margin({ top: 20, bottom: 20 }) + + Text("降采样字节大小:" + this.bytesNumber) this.TextInputSample() - Column(){ - if (this.mSquarePixelMap2) { - Image(this.mSquarePixelMap2 == undefined ? '' : this.mSquarePixelMap2!) + Column() { + if (this.mSquarePixelMap) { + Image(this.mSquarePixelMap == undefined ? '' : this.mSquarePixelMap!) .objectFit(ImageFit.Fill) .width(200) .height(200) .margin({ top: 10 }) } Text('component用法') - ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption1 }).width(200).height(200) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(200).height(200) }.height(300).width('100%').backgroundColor(Color.Pink) } } - - } } .height('100%')