diff --git a/entry/src/main/ets/pages/DownsamplingPage.ets b/entry/src/main/ets/pages/DownsamplingPage.ets index 32ed77a..13ad6fe 100644 --- a/entry/src/main/ets/pages/DownsamplingPage.ets +++ b/entry/src/main/ets/pages/DownsamplingPage.ets @@ -1,17 +1,3 @@ -/* - * Copyright (C) 2021 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, @@ -19,125 +5,141 @@ import { FitCenter, ImageKnifeComponent, RequestOption } from '@ohos/libraryimageknife' import { BusinessError } from '@ohos.base' import { fitter, sampleNone } from '@ohos/imageknife'; - -let mRotate: number = 0; -let mUrl = $r('app.media.pngSample'); +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(); @Entry @Component -struct DownsamplingPage { - @State url: string = ""; - @State mCropPixelMap?: PixelMap = undefined; - @State mRoundPixelMap?: PixelMap = undefined; - @State mCirclePixelMap?: PixelMap = undefined; - @State mCircleBorderPixelMap?: PixelMap = undefined; - @State mRotatePixelMap?: PixelMap = undefined; - @State mSquarePixelMap?: PixelMap = undefined; +struct Index { + @State message: string = 'Hello World'; @State mSquarePixelMap1?: PixelMap = undefined; - @State mClipCenterPixelMap?: PixelMap = undefined; - @State mClipBottomPixelMap?: PixelMap = undefined; - @State mGrayscalePixelMap?: PixelMap = undefined; - @State mBrightnessPixelMap?: PixelMap = undefined; - @State mContrastPixelMap?: PixelMap = undefined; - @State mInvertPixelMap?: PixelMap = undefined; - @State mSepiaPixelMap?: PixelMap = undefined; - @State mSketchPixelMap?: PixelMap = undefined; - @State mBlurPixelMap?: PixelMap = undefined; - @State mPixelPixelMap?: PixelMap = undefined; - @State mSwirlPixelMap?: PixelMap = undefined; - @State mMaskPixelMap?: PixelMap = undefined; - @State mKuwaharaPixelMap?: PixelMap = undefined; - @State mToonPixelMap?: PixelMap = undefined; - @State mVignettePixelMap?: PixelMap = undefined; - @State BytesNumber: number = 0; - @State BytesNumber1: number = 0; - @State imageKnifeOption2: ImageKnifeOption = - { - loadSrc: $r('app.media.gifSample'), - placeholderSrc: $r('app.media.icon_loading'), - errorholderSrc: $r('app.media.icon_failed'), - downsampling: new sampleNone() - }; - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { - Column() { - Column() { - Column() { - Text("大小:" + this.BytesNumber).fontColor(Color.Gray).fontSize(16); - Button() { - Text($r("app.string.trans_square")).fontSize(13).fontColor(Color.White) - } - .height(35) - .width(120) - .margin({ top: 10 }) - .onClick(() => { - this.transformSquare(); - }); - if (this.mSquarePixelMap) { - Image(this.mSquarePixelMap == undefined ? "" : this.mSquarePixelMap!) - .objectFit(ImageFit.Fill) - .width(200) - .height(200) - .margin({ top: 10 }) - } - }.margin({ top: 10 }); - }.margin({ bottom: 30 }); - Column() { - Column() { - Text("大小:" + this.BytesNumber1).fontColor(Color.Gray).fontSize(16); - Button() { - Text('降采样').fontSize(13).fontColor(Color.White) - } - .height(35).width(120) - .margin({ top: 10 }) - .onClick(() => { - this.transformSquare1(); - }); - if (this.mSquarePixelMap1) { - Image(this.mSquarePixelMap1 == undefined ? '' : this.mSquarePixelMap1!) - .objectFit(ImageFit.Fill) - .width(200) - .height(200) - .margin({ top: 10 }) - } - }.margin({ top: 10 }); - }.margin({ bottom: 30 }); - Column() { - Column() { - Text("ImageKnifeComponent用法").fontColor(Color.Gray).fontSize(16); - // ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }) - // .width(200) - // .height(200) - }.margin({ top: 10 }); - }.margin({ bottom: 30 }); - } - }.width('100%').height('100%'); - } - - //正方形裁剪 - transformSquare() { + @State mSquarePixelMap2?: PixelMap = undefined; + @State h:number = 0 + @State w:number = 0 + @State BytesNumber1:number = 0 + @State BytesNumber2:number = 0 + transformSquare1(mUrl:Resource) { let imageKnifeOption:RequestOption = new RequestOption(); - imageKnifeOption.load(mUrl) - .addListener({ callback: (err: BusinessError | string, data: ImageKnifeData) => { - this.mSquarePixelMap = data.drawPixelMap?.imagePixelMap as PixelMap; - this.BytesNumber = (data.drawPixelMap?.imagePixelMap as PixelMap).getPixelBytesNumber() - return false; - } }) - ImageKnife?.call(imageKnifeOption); - } - - transformSquare1() { - 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; } }) - .setImageViewSize({ width: 800, height: 500 }) + ImageKnife?.call(imageKnifeOption); + } + transformSquare2(mUrl:Resource) { + let imageKnifeOption:RequestOption = new RequestOption(); + 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}) .downsampleStrategy(new fitter()) ImageKnife?.call(imageKnifeOption); } + @Builder + TextInputSample() { + Flex() { + TextInput({ placeholder: '输入宽' }) + .onChange((EnterKeyType)=>{ + this.w =Number(EnterKeyType) + }) + TextInput({ placeholder: '输入高' }) + .onChange((EnterKeyType)=>{ + this.h =Number(EnterKeyType) + }) + }.padding(20) + } + + build() { + Scroll(){ + Column() { + Text('原图') + Flex(){ + Button('png') + .onClick(() => { + this.transformSquare1(pngUrl); + }); + Button('svg') + .onClick(() => { + this.transformSquare1(svgUrl); + }); + Button('bmp') + .onClick(() => { + this.transformSquare1(bmpUrl); + }); + Button('jpp') + .onClick(() => { + this.transformSquare1(jpgUrl); + }); + Button('gif') + .onClick(() => { + this.transformSquare1(gifUrl); + }); + Button('webp') + .onClick(() => { + this.transformSquare1(webpUrl); + }); + }.margin({top:20,bottom:20}) + Text("原图字节大小") + Column(){ + if (this.mSquarePixelMap1) { + Image(this.mSquarePixelMap1 == undefined ? '' : this.mSquarePixelMap1!) + .objectFit(ImageFit.Fill) + .width(200) + .height(200) + .margin({ top: 10 }) + } + }.height(300).width('100%').backgroundColor(Color.Pink) + Text('降采样图片') + Flex(){ + Button('png') + .onClick(() => { + this.transformSquare2(pngUrl); + }); + Button('svg') + .onClick(() => { + this.transformSquare2(svgUrl); + }); + Button('bmp') + .onClick(() => { + this.transformSquare2(bmpUrl); + }); + Button('jpp') + .onClick(() => { + this.transformSquare2(jpgUrl); + }); + Button('gif') + .onClick(() => { + this.transformSquare2(gifUrl); + }); + Button('webp') + .onClick(() => { + this.transformSquare2(webpUrl); + }); + }.margin({top:20,bottom:20}) + + Text("降采样字节大小") + this.TextInputSample() + Column(){ + if (this.mSquarePixelMap2) { + Image(this.mSquarePixelMap2 == undefined ? '' : this.mSquarePixelMap2!) + .objectFit(ImageFit.Fill) + .width(200) + .height(200) + .margin({ top: 10 }) + } + }.height(300).width('100%').backgroundColor(Color.Pink) + } + } + .height('100%') + } } -let ImageKnife = ImageKnifeGlobal.getInstance().getImageKnife(); \ No newline at end of file