demo修改
This commit is contained in:
tsm
parent
48e9467064
commit
5c7b055957
|
|
@ -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();
|
||||
Loading…
Reference in New Issue